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;