fix: 학생 성적 표시 되는 부분 원. 하나도 안 맞춰도 회색 원 나오게 수정
This commit is contained in:
parent
f9309fd0c0
commit
db578e729d
@ -1,9 +1,10 @@
|
|||||||
import styles from './ReportCard.module.css';
|
import styles from './ReportCard.module.css';
|
||||||
|
|
||||||
export default function ReportCard({ allCount = 10, correctCount = 7 }) {
|
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 percentage = allCount > 0 ? (correctCount / allCount) * 100 : 0;
|
||||||
const strokeDashoffset = radius - (percentage / 100) * radius;
|
const strokeDashoffset = circumference - (percentage / 100) * circumference;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrapper}>
|
<div className={styles.wrapper}>
|
||||||
@ -16,8 +17,17 @@ export default function ReportCard({ allCount = 10, correctCount = 7 }) {
|
|||||||
<circle
|
<circle
|
||||||
cx="110"
|
cx="110"
|
||||||
cy="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}
|
strokeDashoffset={strokeDashoffset}
|
||||||
transform="rotate(-90 110 110)"
|
transform="rotate(-90 110 110)"
|
||||||
className={styles.circle}
|
className={styles.circle}
|
||||||
|
@ -16,6 +16,14 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.circleBackground {
|
||||||
|
fill: none;
|
||||||
|
stroke: var(--border-color);
|
||||||
|
stroke-width: 20px;
|
||||||
|
stroke-linecap: round;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.circle {
|
.circle {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: var(--success-color);
|
stroke: var(--success-color);
|
||||||
|
Loading…
Reference in New Issue
Block a user