fix: set percentage max 100

app/ui/view/molecule/pie-chart/pie-chart.tsx

@@ -8,20 +8,18 @@ export interface PieChartProp {
 }
 
 function PieChart({ percentage }: PieChartProp) {
-  const filterdPercentage = percentage > 100 ? 100 : percentage;
-
   const isDesktop = useMediaQuery('(min-width: 767px)');
 
   return (
     <div
       className={cn(
         'relative aspect-square rounded-full w-[6.5rem] h-[6.5rem]',
-        filterdPercentage > 0 && 'piechart',
-        filterdPercentage === 100 ? 'bg-light-blue-1 complete' : 'bg-etc-pink',
+        percentage > 0 && 'piechart',
+        percentage === 100 ? 'bg-light-blue-1 complete' : 'bg-etc-pink',
         'md:w-[9rem] md:h-[9rem]',
       )}
       style={{
-        '--percentage': filterdPercentage,
+        '--percentage': percentage,
         '--startRadius': isDesktop ? '1.5rem' : '1.1rem',
         '--endRadius': isDesktop ? '0.74rem' : '0.50rem',
         '--pieSize': isDesktop ? '9rem' : '6.5rem',
@@ -30,11 +28,11 @@ function PieChart({ percentage }: PieChartProp) {
       <div
         className={cn(
           'absolute rounded-full bg-white text-base font-bold w-[4.5rem] h-[4.5rem] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
-          filterdPercentage === 100 ? 'text-light-blue-6' : 'text-etc-red',
+          percentage === 100 ? 'text-light-blue-6' : 'text-etc-red',
           'md:w-[6rem] md:h-[6rem] md:text-xl ',
         )}
       >
-        {filterdPercentage}%
+        {percentage}%
       </div>
     </div>
   );

app/utils/chart.util.ts

@@ -1,3 +1,4 @@
 export const getPercentage = (numerator: number, denominator: number) => {
-  return Number(((numerator / denominator) * 100).toFixed(0));
+  const percentage = Number(((numerator / denominator) * 100).toFixed(0));
+  return percentage > 100 ? 100 : percentage;
 };