♻️ [Refactor] 상세조회 페이지 리뷰 리스트 프로그레스바 수정

src/features/club-details/components/ReviewSummary.tsx

@@ -1,22 +1,12 @@
 import ProgressBar from '@/components/progress-bar/ProgressBar';
 import RatingDisplay from '@/components/rating-display/RatingDisplay';
 import { ClubReviewResponse } from '../types';
+import {
+  calculateRatingPercentage,
+  getRatingCount,
+} from '@/features/club-details/utils/rating';
 
 function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {
-  const ratingCounts = (score: number) => {
-    return reviewInfo.ratingCounts[
-      score === 5
-        ? 'five'
-        : score === 4
-          ? 'four'
-          : score === 3
-            ? 'three'
-            : score === 2
-              ? 'two'
-              : 'one'
-    ];
-  };
-
   return (
     <section>
       <h2 className="mb-[10px] text-[20px] font-semibold text-gray-black">
@@ -25,7 +15,7 @@ function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {
       <div
         className="flex items-center justify-center gap-6 rounded-xl border-2 border-gray-normal-01 p-[30px] md:gap-[120px] lg:gap-[180px]"
         style={{
-          gap: 'clamp(24px, 5vw, 180px)', // 최소 gap은 24px, 최대는 180px
+          gap: 'clamp(24px, 5vw, 180px)',
         }}
       >
         <div className="flex flex-col items-center justify-center gap-2">
@@ -51,12 +41,15 @@ function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {
                 }}
               >
                 <ProgressBar
-                  percentage={ratingCounts(score)}
+                  percentage={calculateRatingPercentage(
+                    score,
+                    reviewInfo.ratingCounts,
+                  )}
                   color="bg-gray-dark-02"
                 />
               </div>
               <span className="ml-auto text-gray-dark-01">
-                {ratingCounts(score)}
+                {getRatingCount(score, reviewInfo.ratingCounts)}
               </span>
             </div>
           ))}
@@ -65,4 +58,5 @@ function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {
     </section>
   );
 }
+
 export default ReviewSummary;

src/features/club-details/utils/rating.ts

@@ -0,0 +1,30 @@
+import { ClubReviewResponse } from '@/features/club-details/types';
+
+type RatingCounts = ClubReviewResponse['ratingCounts'];
+
+export const getRatingCount = (score: number, ratingCounts: RatingCounts) => {
+  return ratingCounts[
+    score === 5
+      ? 'five'
+      : score === 4
+        ? 'four'
+        : score === 3
+          ? 'three'
+          : score === 2
+            ? 'two'
+            : 'one'
+  ];
+};
+
+export const calculateRatingPercentage = (
+  score: number,
+  ratingCounts: RatingCounts,
+) => {
+  const totalCount = Object.values(ratingCounts).reduce(
+    (sum, count) => sum + count,
+    0,
+  );
+  return totalCount === 0
+    ? 0
+    : (getRatingCount(score, ratingCounts) / totalCount) * 100;
+};