From 0833720cbbd208567d46b0a7e704b92e50d6f8cc Mon Sep 17 00:00:00 2001
From: cloud0406 <cloud0406@naver.com>
Date: Sat, 4 Jan 2025 12:15:10 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=EC=A0=95=EB=B3=B4=EC=97=90=EC=84=9C=20=EA=B0=81=20?=
 =?UTF-8?q?=ED=8F=89=EC=A0=90=EB=B3=84=20=ED=94=84=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EB=A0=88=EC=8A=A4=EB=B0=94=20=ED=8D=BC=EC=84=BC=ED=85=8C?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EB=8C=80=EB=A1=9C=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../club-details/components/ReviewSummary.tsx | 28 +++++++----------
 src/features/club-details/utils/rating.ts     | 30 +++++++++++++++++++
 2 files changed, 41 insertions(+), 17 deletions(-)
 create mode 100644 src/features/club-details/utils/rating.ts

diff --git a/src/features/club-details/components/ReviewSummary.tsx b/src/features/club-details/components/ReviewSummary.tsx
index 5368db57..3abb9e6c 100644
--- a/src/features/club-details/components/ReviewSummary.tsx
+++ b/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;
diff --git a/src/features/club-details/utils/rating.ts b/src/features/club-details/utils/rating.ts
new file mode 100644
index 00000000..19b75c21
--- /dev/null
+++ b/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;
+};