diff --git a/src/components/rating-display/RatingDisplay.tsx b/src/components/rating-display/RatingDisplay.tsx index 4c17483b..be2e3fb2 100644 --- a/src/components/rating-display/RatingDisplay.tsx +++ b/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 (
모임 상세 설명 -
-

+

+

+ + {clubInfo.address} +

+

+ 마감 날짜 + {formatDateForUI(clubInfo.endDate, 'KOREAN')} +

+

{clubInfo.description}

diff --git a/src/features/club-details/components/HeaderSection.tsx b/src/features/club-details/components/HeaderSection.tsx index f1e48fa7..6fd0e057 100644 --- a/src/features/club-details/components/HeaderSection.tsx +++ b/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, diff --git a/src/features/club-details/components/ReviewList.tsx b/src/features/club-details/components/ReviewList.tsx index 03e44737..4daee8be 100644 --- a/src/features/club-details/components/ReviewList.tsx +++ b/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'), }} /> )) diff --git a/src/features/club-details/components/ReviewSummary.tsx b/src/features/club-details/components/ReviewSummary.tsx index 567918b5..5368db57 100644 --- a/src/features/club-details/components/ReviewSummary.tsx +++ b/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 (

@@ -22,13 +36,13 @@ function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {

- {Array.from({ length: 5 }).map((_, index) => ( + {[5, 4, 3, 2, 1].map((score) => (
- {5 - index}점 + {score}점
- +
- 2 + + {ratingCounts(score)} +
))}
diff --git a/src/features/club-details/types/index.ts b/src/features/club-details/types/index.ts index 3c8fb57e..1a2121e7 100644 --- a/src/features/club-details/types/index.ts +++ b/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[]; } diff --git a/src/mocks/mockDatas.ts b/src/mocks/mockDatas.ts index 8af67e60..b3205001 100644 --- a/src/mocks/mockDatas.ts +++ b/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: '', }, ]; diff --git a/src/types/bookclubs.ts b/src/types/bookclubs.ts index 8a9c97f1..24aa3d6a 100644 --- a/src/types/bookclubs.ts +++ b/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;