Merge branch 'fe/fixCircle' into 'frontend'

[Front-end] fix: 학생 성적 표시 되는 부분 원. 하나도 안 맞춰도 회색 원 나오게 수정

See merge request s11-webmobile1-sub2/S11P12A701!177

frontend/src/components/ReportCard/ReportCard.jsx

@@ -1,9 +1,10 @@
 import styles from './ReportCard.module.css';
 
 export default function ReportCard({ allCount = 10, correctCount = 7 }) {
-  const radius = 2 * Math.PI * 100;
+  const radius = 100; // Radius of the circles
+  const circumference = 2 * Math.PI * radius; // Circumference of the circles
   const percentage = allCount > 0 ? (correctCount / allCount) * 100 : 0;
-  const strokeDashoffset = radius - (percentage / 100) * radius;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
 
   return (
     <div className={styles.wrapper}>
@@ -16,8 +17,17 @@ export default function ReportCard({ allCount = 10, correctCount = 7 }) {
           <circle
             cx="110"
             cy="110"
-            r="100"
+            r={radius}
-            strokeDasharray={radius}
+            strokeDasharray={circumference}
+            strokeDashoffset={0}
+            transform="rotate(-90 110 110)"
+            className={styles.circleBackground}
+          />
+          <circle
+            cx="110"
+            cy="110"
+            r={radius}
+            strokeDasharray={circumference}
             strokeDashoffset={strokeDashoffset}
             transform="rotate(-90 110 110)"
             className={styles.circle}

frontend/src/components/ReportCard/ReportCard.module.css

@@ -16,6 +16,14 @@
   text-align: center;
 }
 
+.circleBackground {
+  fill: none;
+  stroke: var(--border-color);
+  stroke-width: 20px;
+  stroke-linecap: round;
+  border-radius: 10px;
+}
+
 .circle {
   fill: none;
   stroke: var(--success-color);