Feat/159/crew review

src/_apis/crew/crew-review-apis.ts

@@ -0,0 +1,16 @@
+import { fetchApi } from '@/src/utils/api';
+import { CrewReviewResponse } from '@/src/types/review';
+
+// 크루 리뷰 조회
+export async function getCrewReviews(crewId: number, page: number): Promise<CrewReviewResponse> {
+  const url = `/api/review/${crewId}?page=${page}&size=5`;
+
+  const response = await fetchApi<{ data: CrewReviewResponse }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return response.data;
+}

src/_queries/crew/crew-review-queries.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCrewReviews } from '@/src/_apis/crew/crew-review-apis';
+
+export function useGetCrewReviewsQuery(crewId: number, page: number) {
+  return useQuery({
+    queryKey: ['crewReviews', crewId, page],
+    queryFn: () => getCrewReviews(crewId, page - 1),
+  });
+}

src/app/(crew)/crew/detail/[id]/_components/create-gathering/index.tsx

@@ -39,9 +39,9 @@ export default function CreateGathering({ crewId }: { crewId: number }) {
 
   return (
     <div className="flex items-center justify-between px-3 md:px-7 lg:px-11">
-      <div className="flex items-end space-x-2">
+      <div className="flex flex-col space-y-1 md:flex-row md:items-end md:space-x-2">
         <h2 className="text-2xl font-semibold text-gray-800">약속 잡기</h2>
-        <span className="text-base font-semibold text-blue-500">
+        <span className="text-sm font-semibold text-blue-500 md:text-base">
           현재 {totalGatheringCount}개의 약속이 개설되어 있습니다.
         </span>
       </div>

src/app/(crew)/crew/detail/[id]/_components/crew-review-list.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Pagination } from '@mantine/core';
+import { cn } from '@/src/utils/cn';
 import ReviewCard from '@/src/components/common/review-list/review-card';
 import { CrewReview } from '@/src/types/review';
 
@@ -21,7 +22,7 @@ export default function CrewReviewList({
   return (
     <div className="flex flex-col justify-between p-6">
       <div className="mb-6 grid flex-grow gap-4">
-        {/* {reviews.map((review) => (
+        {reviews.map((review) => (
           <ReviewCard
             key={review.id}
             rate={review.rate}
@@ -30,30 +31,27 @@ export default function CrewReviewList({
             crewId={review.crewId}
             reviewer={review.reviewer}
           />
-        ))} */}
+        ))}
       </div>
       <div className="mt-6 flex justify-center">
         <Pagination
           total={totalPages}
           value={currentPage}
           onChange={onPageChange}
+          classNames={{
+            control: cn(
+              'data-[active="true"]:text-blue-500 data-[active="true"]:font-bold',
+              'border-none bg-transparent hover:bg-transparent',
+            ),
+          }}
           styles={{
             control: {
-              border: 'none',
-              backgroundColor: 'transparent',
               '&[data-active]': {
                 backgroundColor: 'transparent',
                 fontWeight: 'var(--pagination-active-font-weight)',
                 color: 'var(--pagination-active-color)',
                 boxShadow: 'none',
               },
-              '&:hover': {
-                backgroundColor: 'transparent',
-              },
-            },
-            root: {
-              '--pagination-active-color': '#3388FF',
-              '--pagination-active-font-weight': 'bold',
             },
           }}
           size="sm"

src/app/(crew)/crew/detail/[id]/_components/rating-display.tsx

@@ -7,7 +7,7 @@ interface HeartProps {
 }
 
 export interface ReviewRateInfo {
-  totalReviewCount: number;
+  totalRate: number;
   averageRate: number;
   ratingsData: { score: number; count: number }[];
 }
@@ -40,7 +40,7 @@ function Heart({ fillPercentage }: HeartProps) {
 }
 
 export default function RatingDisplay({ reviewRateInfo }: RatingDisplayProps) {
-  const { totalReviewCount, averageRate, ratingsData } = reviewRateInfo;
+  const { totalRate, averageRate, ratingsData } = reviewRateInfo;
 
   const renderHearts = () => {
     const hearts = [];
@@ -51,11 +51,23 @@ export default function RatingDisplay({ reviewRateInfo }: RatingDisplayProps) {
     return hearts;
   };
 
+  // 기본 점수 데이터 (1점~5점)
+  const defaultRatingsData = Array.from({ length: 5 }, (_, index) => ({
+    score: 5 - index, // 5점부터 1점까지
+    count: 0,
+  }));
+
+  // 받은 데이터를 기본 데이터에 병합
+  const mergedRatingsData = defaultRatingsData.map((defaultData) => {
+    const foundData = ratingsData.find((data) => data.score === defaultData.score);
+    return foundData || defaultData;
+  });
+
   return (
     <div className="flex w-full min-w-[320px] max-w-[700px] gap-16">
       {/* 왼쪽: 평균 평점 및 하트 표시 */}
       <div className="flex flex-col items-center justify-center space-y-2">
-        <div className="text-sm font-semibold text-gray-700">(총 {totalReviewCount}개의 평가)</div>
+        <div className="text-sm font-semibold text-gray-700">(총 {totalRate}개의 평가)</div>
         <div className="text-2xl font-semibold">
           <span>평점 {averageRate.toFixed(1)}</span>
           <span className="text-gray-500">/5</span>
@@ -65,15 +77,15 @@ export default function RatingDisplay({ reviewRateInfo }: RatingDisplayProps) {
 
       {/* 오른쪽: 각 점수별 프로그레스 바 */}
       <div className="flex flex-1 flex-col gap-2">
-        {ratingsData.map(({ score, count }) => (
+        {mergedRatingsData.map(({ score, count }) => (
           <div key={score} className="flex items-center gap-2">
             <div className="w-6 text-xs font-medium text-gray-500">{score}점</div>
             <div className="flex-1">
-              <ProgressBar total={totalReviewCount} current={count} />
+              <ProgressBar total={totalRate} current={count} />
             </div>
             <div className="text-xs font-medium text-gray-500">
               <span className="text-blue-500">{count}/</span>
-              {totalReviewCount}
+              {totalRate}
             </div>
           </div>
         ))}

src/app/(crew)/crew/detail/[id]/_components/review-section.tsx

@@ -1,23 +1,59 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { useGetCrewReviewsQuery } from '@/src/_queries/crew/crew-review-queries';
+import ReviewListSkeleton from '@/src/components/common/skeleton/review-skeleton';
 import CrewReviewList from './crew-review-list';
 import RatingDisplay from './rating-display';
 
-export default function CrewReviewSection() {
-  // TODO: review 추후 추가
+interface CrewReviewSectionProps {
+  crewId: number;
+}
+
+export default function CrewReviewSection({ crewId }: CrewReviewSectionProps) {
+  const [page, setPage] = useState(1);
+  const { data, isLoading, isError } = useGetCrewReviewsQuery(crewId, page);
+
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
+  if (isLoading) return <ReviewListSkeleton type="crew" />;
+
+  if (isError || data === undefined) {
+    return (
+      <section className="py-16 text-center" aria-labelledby="error-heading">
+        <h3 id="error-heading" className="text-xl font-bold text-red-600">
+          데이터 로드 실패
+        </h3>
+        <p className="mt-4 text-gray-600">
+          데이터를 불러오는 중 오류가 발생했습니다. <br />
+          잠시 후 다시 시도해주세요.
+        </p>
+      </section>
+    );
+  }
+
+  if (data?.reviewList.content.length === 0) {
+    return (
+      <section className="py-16 text-center">
+        <h3 className="text-xl font-bold text-blue-500">리뷰가 아직 없습니다</h3>
+        <p className="mt-4 text-gray-600">크루의 약속에 참여하고 리뷰를 남겨보세요!</p>
+      </section>
+    );
+  }
 
   return (
     <div className="space-y-6 rounded-lg bg-white">
       <div className="mx-4 flex justify-center py-11">
-        {/* <RatingDisplay reviewRateInfo={reviewData.info} /> */}
+        <RatingDisplay reviewRateInfo={data?.reviewRateInfo} />
       </div>
-      {/* <CrewReviewList
-        reviews={reviewData.data}
-        totalPages={reviewData.totalPages}
-        currentPage={currentPage}
+      <CrewReviewList
+        reviews={data.reviewList.content}
+        totalPages={data.reviewList.totalPages}
+        currentPage={page}
         onPageChange={handlePageChange}
-      /> */}
+      />
     </div>
   );
 }

src/app/(crew)/crew/detail/[id]/page.tsx

@@ -1,8 +1,12 @@
-import { getGatheringList } from '@/src/_apis/crew/crew-gathering-list-apis';
-import CreateGathering from './_components/create-gathering';
+import dynamic from 'next/dynamic';
 import DetailCrew from './_components/detail-crew-container';
-import GatheringListSection from './_components/gathering-list-section';
-import CrewReviewSection from './_components/review-section';
+
+// Lazy Import
+const CreateGathering = dynamic(() => import('./_components/create-gathering'), { ssr: false });
+const GatheringListSection = dynamic(() => import('./_components/gathering-list-section'), {
+  ssr: false,
+});
+const CrewReviewSection = dynamic(() => import('./_components/review-section'), { ssr: false });
 
 interface CrewDetailPageProps {
   params: { id: string };
@@ -33,12 +37,12 @@ export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
       </section>
 
       {/* Crew Review Section */}
-      {/* <section className="w-full mx-3 md:mx-7 lg:mx-11 space-y-6">
+      <section className="mx-3 mt-10 w-full space-y-6 md:mx-7 lg:mx-11">
         <article className="space-y-6">
           <h2 className="text-2xl font-semibold">크루 리뷰</h2>
-          <CrewReviewSection />
+          <CrewReviewSection crewId={id} />
         </article>
-      </section> */}
+      </section>
     </div>
   );
 }