✨[Feat] 모임 상세 평점별 리뷰 개수 구현

src/components/rating-display/RatingDisplay.tsx

@@ -5,7 +5,7 @@ export default function RatingDisplay({
 }: {
   ratingCount: number;
 }) {
-  const normalizedRating = Math.min(ratingCount, 5);
+  const normalizedRating = Math.floor(Math.min(ratingCount, 5));
 
   return (
     <div

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

@@ -1,13 +1,23 @@
+import { formatDateForUI } from '@/lib/utils/formatDateForUI';
 import { BookClub } from '@/types/bookclubs';
+import { LocationIcon } from '../../../../public/icons';
 
 function DescriptionSection({ clubInfo }: { clubInfo: BookClub }) {
   return (
     <section>
       <h2 className="mb-[10px] text-[20px] font-semibold text-gray-black">
         모임 상세 설명
       </h2>
-      <div className="rounded-xl border-2 border-gray-normal-01 px-12 py-6">
-        <p className="text-[16px] font-medium leading-6 text-gray-darker">
+      <div className="rounded-xl border-2 border-gray-normal-01 px-12 py-6 text-gray-dark-03">
+        <p className="flex text-[16px] font-medium leading-6">
+          <LocationIcon isPast={true} />
+          {clubInfo.address}
+        </p>
+        <p className="pb-[10px] pt-[6px] text-[14px] leading-5">
+          <span className="font-bold">마감 날짜 </span>
+          {formatDateForUI(clubInfo.endDate, 'KOREAN')}
+        </p>
+        <p className="text-[16px] font-medium leading-6">
           {clubInfo.description}
         </p>
       </div>

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

@@ -66,9 +66,6 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
     }
   }, [idAsNumber]);
 
-  // TODO: 응답값 추가 후 제거
-  const EXAMPLE_IMAGE = '/images/profile.png';
-
   const handleJoinClick = () => {
     if (!isLoggedIn) {
       setIsMember({
@@ -96,7 +93,7 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
   const defaultCardProps: CardProps = {
     clubId: clubInfo.id,
     variant: 'detailedClub',
-    imageUrl: EXAMPLE_IMAGE,
+    imageUrl: clubInfo.imageUrl || '/images/defaultBookClub.jpg',
     imageAlt: '모임 이미지',
     title: clubInfo.title,
     location: clubInfo.town || '',
@@ -118,7 +115,7 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
       // TODO: 응답값 추가 후 수정
       id: 'host1',
       name: '호스트',
-      profileImage: EXAMPLE_IMAGE,
+      profileImage: '/images/profile.png',
     },
     isHost: false,
     isParticipant: false,

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

@@ -5,6 +5,7 @@ import { ClubReviewResponse } from '../types';
 import DropDown from '@/components/drop-down/DropDown';
 import { DetailClubReviewParams } from '@/api/book-club/types';
 import EmptyState from '@/components/common-layout/EmptyState';
+import { formatDateForUI } from '@/lib/utils/formatDateForUI';
 
 function ReviewList({
   reviewInfo,
@@ -40,7 +41,7 @@ function ReviewList({
               userProfile={{
                 profileImage: review.image || '/images/profile.png',
                 userName: review.userName,
-                createdAt: review.createdAt,
+                createdAt: formatDateForUI(review.createdAt, 'DATE_ONLY'),
               }}
             />
           ))

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

@@ -3,6 +3,20 @@ import RatingDisplay from '@/components/rating-display/RatingDisplay';
 import { ClubReviewResponse } from '../types';
 
 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">
@@ -22,23 +36,28 @@ function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {
           <RatingDisplay ratingCount={reviewInfo.averageScore} />
         </div>
         <div className="flex flex-col gap-1">
-          {Array.from({ length: 5 }).map((_, index) => (
+          {[5, 4, 3, 2, 1].map((score) => (
             <div
               className="flex items-center gap-3 text-sm font-medium"
-              key={`rate-${5 - index}`}
+              key={`rate-${score}`}
             >
               <span className="whitespace-nowrap text-gray-dark-03">
-                {5 - index}점
+                {score}점
               </span>
               <div
                 className="flex-1"
                 style={{
                   minWidth: 'clamp(62px, 20vw, 240px)',
                 }}
               >
-                <ProgressBar percentage={5} color="bg-gray-dark-02" />
+                <ProgressBar
+                  percentage={ratingCounts(score)}
+                  color="bg-gray-dark-02"
+                />
               </div>
-              <span className="ml-auto text-gray-dark-01">2</span>
+              <span className="ml-auto text-gray-dark-01">
+                {ratingCounts(score)}
+              </span>
             </div>
           ))}
         </div>

src/features/club-details/types/index.ts

@@ -2,5 +2,12 @@ import { DetailReview } from '@/types/review';
 
 export interface ClubReviewResponse {
   averageScore: number;
+  ratingCounts: {
+    one: number;
+    two: number;
+    three: number;
+    four: number;
+    five: number;
+  };
   reviews: DetailReview[];
 }

src/mocks/mockDatas.ts

@@ -20,6 +20,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'pending',
     reviewScore: 4.5,
+    address: '',
   },
   {
     id: 2,
@@ -38,6 +39,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'confirmed',
     reviewScore: 4.8,
+    address: '',
   },
   {
     id: 3,
@@ -56,6 +58,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'confirmed',
     reviewScore: 4.2,
+    address: '',
   },
   {
     id: 4,
@@ -74,6 +77,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'pending',
     reviewScore: 4.7,
+    address: '',
   },
   {
     id: 5,
@@ -92,6 +96,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'pending',
     reviewScore: 4.3,
+    address: '',
   },
   {
     id: 6,
@@ -110,6 +115,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'confirmed',
     reviewScore: 4.9,
+    address: '',
   },
   {
     id: 7,
@@ -128,6 +134,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'pending',
     reviewScore: 4.4,
+    address: '',
   },
   {
     id: 8,
@@ -146,6 +153,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'confirmed',
     reviewScore: 4.6,
+    address: '',
   },
   {
     id: 9,
@@ -164,6 +172,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'pending',
     reviewScore: 4.1,
+    address: '',
   },
   {
     id: 10,
@@ -182,6 +191,7 @@ export const mockBookClubs: BookClub[] = [
     isPast: false,
     clubStatus: 'pending',
     reviewScore: 4.5,
+    address: '',
   },
 ];
 

src/types/bookclubs.ts

@@ -26,6 +26,7 @@ export interface BookClub {
   memberLimit: number;
   town: string | null;
   memberCount: number;
+  address: string;
   isLiked: boolean;
   isInactive: boolean;
   imageUrl?: string | undefined;