From db578e729d41c95487e922d5c1a3c1d5c443aa5d Mon Sep 17 00:00:00 2001
From: minwucho <mauercho@gmail.com>
Date: Mon, 12 Aug 2024 15:32:08 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=95=99=EC=83=9D=20=EC=84=B1=EC=A0=81?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20=EB=90=98=EB=8A=94=20=EB=B6=80=EB=B6=84?=
 =?UTF-8?q?=20=EC=9B=90.=20=ED=95=98=EB=82=98=EB=8F=84=20=EC=95=88=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=B0=EB=8F=84=20=ED=9A=8C=EC=83=89=20=EC=9B=90=20?=
 =?UTF-8?q?=EB=82=98=EC=98=A4=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ReportCard/ReportCard.jsx   | 18 ++++++++++++++----
 .../ReportCard/ReportCard.module.css           |  8 ++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ReportCard/ReportCard.jsx b/frontend/src/components/ReportCard/ReportCard.jsx
index 76f6b8a..35d851e 100644
--- a/frontend/src/components/ReportCard/ReportCard.jsx
+++ b/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"
-            strokeDasharray={radius}
+            r={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}
diff --git a/frontend/src/components/ReportCard/ReportCard.module.css b/frontend/src/components/ReportCard/ReportCard.module.css
index a13dad0..9ec2f6d 100644
--- a/frontend/src/components/ReportCard/ReportCard.module.css
+++ b/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);