fix: 리뷰 요약 모달 중복 조회 완화 및 섹션 렌더 정리

Author: Seoje1405

src/components/product/review/review-item.tsx

@@ -120,6 +120,11 @@ export default function ReviewItem({
   const materialFeatures = normalizeToList(
     review.initialSecondAnswers?.materialFeatures,
   );
+  const reviewTextByKey = {
+    sizeReview: review.sizeReview?.[0],
+    materialReview: review.materialReview?.[0],
+    textReview: review.textReview,
+  } as const;
 
   return (
     <div className="border-b py-6 last:border-none">
@@ -201,10 +206,7 @@ export default function ReviewItem({
       <div className="mb-4 flex flex-col gap-4">
         {REVIEW_CONTENT_CONFIG.filter((item) => item.key !== 'textReview').map(
           ({ label, key }) => {
-            const text =
-              key === 'sizeReview'
-                ? review.sizeReview?.[0]
-                : review.materialReview?.[0];
+            const text = reviewTextByKey[key];
 
             return (
               <div key={key} className="flex flex-col gap-4 text-xl">

src/components/product/review/review-section.tsx

@@ -67,6 +67,8 @@ function createEmptyStats(oneMonthReviewCount: number): ReviewStatsData {
   };
 }
 
+const REVIEW_FILTER_STICKY_TOP = 188;
+
 /**
  * 상품 리뷰 섹션 컴포넌트, 리뷰 탭, 필터, 정렬, 리뷰 리스트 포함
  * 리뷰 관련 모든 UI와 상태 관리를 담당
@@ -181,7 +183,10 @@ export default function ProductReviewContent({
             />
 
             {/* Sticky 필터/정렬 바 */}
-            <div className="sticky top-[188px] z-20 flex flex-col gap-3 bg-white px-4 py-3 transition-all">
+            <div
+              className="sticky z-20 flex flex-col gap-3 bg-white px-4 py-3 transition-all"
+              style={{ top: REVIEW_FILTER_STICKY_TOP }}
+            >
               {/* 내 사이즈 보기 스위치 */}
               <div className="flex justify-end space-x-2">
                 <div className="flex items-center space-x-2">

src/components/product/review/review-summary-modal.tsx

@@ -30,6 +30,7 @@ interface ReviewSummaryModalProps {
   reviewType: 'INITIAL' | 'ONE_MONTH';
   recommendedSize?: string;
   stats?: ReviewStatsData | null;
+  initialMonthSummaries?: ReviewCategorySummary[];
   availableOptions?: {
     sizes: string[];
     colors: string[];
@@ -43,6 +44,7 @@ export default function ReviewSummaryModal({
   reviewType,
   recommendedSize,
   stats,
+  initialMonthSummaries,
   availableOptions = { sizes: [], colors: [] },
 }: ReviewSummaryModalProps) {
   const [api, setApi] = useState<CarouselApi>();
@@ -169,6 +171,14 @@ export default function ReviewSummaryModal({
   useEffect(() => {
     if (!isOpen || reviewType !== 'ONE_MONTH' || !stats) return;
 
+    if (initialMonthSummaries && initialMonthSummaries.length >= 2) {
+      const [initialSizeSummary, initialColorSummary] = initialMonthSummaries;
+      setBaseMonthSizeStat(initialSizeSummary);
+      setBaseMonthColorStat(initialColorSummary);
+      setIsColorLoading(false);
+      return;
+    }
+
     let isMounted = true;
     setIsColorLoading(true);
 
@@ -210,6 +220,7 @@ export default function ReviewSummaryModal({
     stats,
     sizeCategory,
     colorCategory,
+    initialMonthSummaries,
   ]);
 
   useEffect(() => {

src/components/product/review/review-summary.tsx

@@ -183,6 +183,7 @@ export default function ReviewSummarySection({
         reviewType={reviewType}
         recommendedSize={recommendedSize}
         stats={stats}
+        initialMonthSummaries={monthQuestionSummaries ?? undefined}
         availableOptions={availableOptions}
       />
     </div>