Skip to content

Commit cab2a74

Browse files
HaeJunggHaeJungg
authored
Merge pull request #175 from CodeitFESI4-Team1/Fix/168/StoriesDocs
Fix/168/stories docs
2 parents 8ab9373 + 9dfb8d2 commit cab2a74

File tree

22 files changed

+328
-546
lines changed

22 files changed

+328
-546
lines changed

‎src/app/(crew)/crew/detail/[id]/_components/crew-gathering-list.stories.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import CrewGatheringList from './crew-gathering-list';
66
const mockGatheringData = [
77
{
88
id: 1,
9-
title: '가나다라마바사 요가 모임',
9+
title: '요가 모임',
1010
dateTime: '2024-12-15T07:30',
1111
location: '서울, 한강공원',
1212
currentCount: 8,
@@ -18,7 +18,7 @@ const mockGatheringData = [
1818
{
1919
id: 2,
2020
title: '등산 모임',
21-
dateTime: '2024-11-12T09:00',
21+
dateTime: '2024-12-12T09:00',
2222
location: '서울 강남구 개포동 대모산',
2323
currentCount: 5,
2424
totalCount: 10,
@@ -29,7 +29,7 @@ const mockGatheringData = [
2929
{
3030
id: 3,
3131
title: '러닝 모임',
32-
dateTime: '2024-11-15T09:00',
32+
dateTime: '2024-12-15T09:00',
3333
location: '서울 영등포구 여의동로 330',
3434
currentCount: 10,
3535
totalCount: 20,
@@ -40,7 +40,7 @@ const mockGatheringData = [
4040
{
4141
id: 4,
4242
title: '러닝 모임',
43-
dateTime: '2024-11-15T09:00',
43+
dateTime: '2024-12-15T09:00',
4444
location: '서울 영등포구 여의동로 330',
4545
currentCount: 10,
4646
totalCount: 20,
@@ -56,13 +56,17 @@ const meta: Meta<typeof CrewGatheringList> = {
5656
title: 'crew/crew-gathering-list',
5757
component: CrewGatheringList,
5858
parameters: {
59-
layout: 'fulled', // layout 변경
59+
docs: {
60+
subtitle: '크루 디테일 페이지 에서 볼 수 있는 약속 카드 리스트입니다.',
61+
description: {
62+
component: ' 데스크탑에서는 캐러셀, 이하의 사이즈에서는 드래그로 이동 가능합니다.',
63+
},
64+
},
6065
},
6166
tags: ['autodocs'],
6267
decorators: [
6368
(Story) => (
6469
<QueryClientProvider client={queryClient}>
65-
{/* 부모 컨테이너 추가 */}
6670
<div className="flex w-full justify-center bg-gray-100">
6771
<div className="relative -mx-6 w-[calc(100%+3rem)]">
6872
<Story />
@@ -76,10 +80,9 @@ const meta: Meta<typeof CrewGatheringList> = {
7680
export default meta;
7781
type Story = StoryObj<typeof meta>;
7882

79-
// 스토리북에서 gatheringData prop을 전달
8083
export const Default: Story = {
8184
args: {
8285
gatheringData: mockGatheringData,
83-
crewId: 1, // crewId를 기본값으로 설정
86+
crewId: 1,
8487
},
8588
};

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

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import React, { useState } from 'react';
22
import type { Meta, StoryObj } from '@storybook/react';
33
import ClientProvider from '@/src/components/client-provider';
44
import { CrewReview } from '@/src/types/review';
5-
import { CrewReviewData } from '@/src/mock/review-data';
65
import CrewReviewList from './crew-review-list';
76

87
const meta: Meta<typeof CrewReviewList> = {
98
title: 'crew/crew-review-list',
109
component: CrewReviewList,
1110
parameters: {
12-
layout: 'fulled',
11+
docs: {
12+
subtitle: '크루의 전체 리뷰를 확인할 수 있는 리스트 입니다.',
13+
},
1314
},
1415
tags: ['autodocs'],
1516
decorators: [
@@ -24,6 +25,95 @@ const meta: Meta<typeof CrewReviewList> = {
2425
export default meta;
2526
type Story = StoryObj<typeof CrewReviewList>;
2627

28+
const CrewReviewData: { data: CrewReview[] } = {
29+
data: [
30+
{
31+
crewId: 1,
32+
id: 1,
33+
rate: 5,
34+
comment: '정말 좋은 모임이었어요! 많은 걸 배웠습니다.',
35+
createdAt: '2024-10-30T14:00:00+09:00',
36+
reviewer: {
37+
id: 1,
38+
nickname: '김철수',
39+
profileImageUrl: 'https://i.pinimg.com/736x/25/64/5c/25645c1cbb29c5b8e8ebe995404b5ab6.jpg',
40+
},
41+
},
42+
{
43+
crewId: 1,
44+
id: 2,
45+
rate: 3,
46+
comment: '괜찮았지만, 다음에는 조금 더 나아지면 좋겠어요.',
47+
createdAt: '2024-10-31T09:30:00+09:00',
48+
reviewer: {
49+
id: 2,
50+
nickname: '박영희',
51+
profileImageUrl: 'https://i.pinimg.com/736x/ba/25/6f/ba256faae4c3608685067b2641507392.jpg',
52+
},
53+
},
54+
{
55+
crewId: 1,
56+
id: 3,
57+
rate: 1,
58+
comment: '기대에 미치지 못했습니다. 개선이 필요해요.',
59+
createdAt: '2024-11-01T11:15:00+09:00',
60+
reviewer: {
61+
id: 3,
62+
nickname: '이영수',
63+
profileImageUrl: '',
64+
},
65+
},
66+
{
67+
crewId: 1,
68+
id: 4,
69+
rate: 4,
70+
comment: '전체적으로 만족스러웠습니다. 다음에도 참여하고 싶어요!',
71+
createdAt: '2024-11-03T16:45:00+09:00',
72+
reviewer: {
73+
id: 4,
74+
nickname: '최지훈',
75+
profileImageUrl: '',
76+
},
77+
},
78+
{
79+
crewId: 1,
80+
id: 5,
81+
rate: 2,
82+
comment: '조금 아쉬웠지만 새로운 경험이었습니다.',
83+
createdAt: '2024-11-05T13:20:00+09:00',
84+
reviewer: {
85+
id: 5,
86+
nickname: '강수진',
87+
profileImageUrl: 'https://i.pinimg.com/736x/38/d2/9a/38d29a018ac0472d9c2916e9d46ca282.jpg',
88+
},
89+
},
90+
{
91+
crewId: 1,
92+
id: 6,
93+
rate: 2,
94+
comment: '조금 아쉬웠지만 새로운 경험이었습니다.',
95+
createdAt: '2024-11-05T13:20:00+09:00',
96+
reviewer: {
97+
id: 5,
98+
nickname: '강수진',
99+
profileImageUrl: '',
100+
},
101+
},
102+
{
103+
crewId: 1,
104+
id: 7,
105+
rate: 2,
106+
comment: '아쉬워요',
107+
createdAt: '2024-10-30T14:00:00+09:00',
108+
reviewer: {
109+
id: 1,
110+
nickname: '김철수',
111+
profileImageUrl: '',
112+
},
113+
},
114+
],
115+
};
116+
27117
function RenderReviewPagination() {
28118
const [currentPage, setCurrentPage] = useState(1);
29119
const itemsPerPage = 6;

‎src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,8 +188,8 @@ export default function DetailCrewPresenter({
188188
</div>
189189
) : (
190190
<div className="flex h-full flex-col items-center justify-center text-center text-gray-500">
191-
<p className="text-base font-medium">크루장 외에 아직 크루원이 없습니다.</p>
192-
<p className="text-sm font-medium text-blue-400">크루에 참여해보세요!🙌</p>
191+
<p className="text-base font-medium">크루장 외에 아직 크루원이 없습니다</p>
192+
<p className="text-sm font-medium text-blue-400">크루에 참여해보세요🙌</p>
193193
</div>
194194
)}
195195
</div>

‎src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ const meta: Meta<typeof DetailCrewPresenter> = {
55
title: 'crew/crew-detail',
66
component: DetailCrewPresenter,
77
parameters: {
8-
layout: 'fullscreen',
8+
docs: {
9+
subtitle: '크루 디테일 페이지에서 크루 정보를 나타냅니다.',
10+
description: {
11+
component:
12+
'크루장인 경우, 크루원인 경우, 둘다 아닌 경우 세가지에 따라서 케밥이 다르게 보입니다.',
13+
},
14+
},
915
},
1016
tags: ['autodocs'],
1117
argTypes: {
@@ -24,22 +30,21 @@ export const Default: Story = {
2430
args: {
2531
data: {
2632
id: 1,
27-
title: '같이 물장구칠사람',
33+
title: '스키 초보만 오세요',
2834
mainCategory: '기타',
2935
subCategory: '스키',
3036
mainLocation: '대전광역시',
31-
introduce:
32-
'크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개',
37+
introduce: '스키 초보를 위한 모임입니다.',
3338
subLocation: '유성구',
3439
participantCount: 8,
3540
totalCount: 10,
3641
imageUrl:
37-
'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
42+
'https://images.unsplash.com/photo-1504827274833-7db1774520e3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
3843
totalGatheringCount: 5,
3944
crewMembers: [
4045
{
4146
id: 1,
42-
nickname: 'John',
47+
nickname: '스키조아',
4348
email: '[email protected]',
4449
profileImageUrl:
4550
'https://i.pinimg.com/564x/e2/25/bb/e225bb492dc7a20a549f3c0abec28eb8.jpg',
@@ -108,17 +113,17 @@ export const IsCaptain: Story = {
108113
args: {
109114
data: {
110115
id: 1,
111-
title: '같이 물장구칠사람',
116+
title: '스키 초보만 오세요',
112117
mainCategory: '기타',
113118
subCategory: '스키',
114119
mainLocation: '대전광역시',
115-
introduce: '크루 소개',
120+
introduce: '스키 초보를 위한 모임입니다.',
116121
subLocation: '유성구',
117-
participantCount: 1,
122+
participantCount: 8,
118123
totalCount: 10,
119124
imageUrl:
120-
'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
121-
totalGatheringCount: 1,
125+
'https://images.unsplash.com/photo-1504827274833-7db1774520e3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
126+
totalGatheringCount: 5,
122127
crewMembers: [
123128
{
124129
id: 1,
@@ -139,17 +144,17 @@ export const IsMember: Story = {
139144
args: {
140145
data: {
141146
id: 1,
142-
title: '같이 물장구칠사람',
147+
title: '스키 초보만 오세요',
143148
mainCategory: '기타',
144149
subCategory: '스키',
145150
mainLocation: '대전광역시',
146-
introduce: '',
151+
introduce: '스키 초보를 위한 모임입니다.',
147152
subLocation: '유성구',
148-
participantCount: 2,
153+
participantCount: 8,
149154
totalCount: 10,
150155
imageUrl:
151-
'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
152-
totalGatheringCount: 1,
156+
'https://images.unsplash.com/photo-1504827274833-7db1774520e3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
157+
totalGatheringCount: 5,
153158
crewMembers: [
154159
{
155160
id: 1,

‎src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
7171
if (!gatheringList || gatheringList.length === 0)
7272
return (
7373
<div className="flex items-center justify-center">
74-
<div className="flex h-[380px] flex-col items-center justify-center">
75-
<p className="text-xl font-semibold">아직 등록된 약속이 없습니다!</p>
76-
<p className="mt-2 text-base font-medium text-blue-400">새로운 약속을 만들어보세요! 🙌</p>
74+
<div className="items-center justify-center py-16 text-center">
75+
<p className="text-xl font-bold text-blue-500">아직 등록된 약속이 없어요</p>
76+
<p className="mt-4 text-gray-600">새로운 약속을 만들어보세요🙌</p>
7777
</div>
7878
</div>
7979
);

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import RatingDisplay, { ReviewRateInfo } from './rating-display';
55
export default {
66
title: 'crew/crew-rating-display',
77
component: RatingDisplay,
8+
parameters: {
9+
docs: {
10+
subtitle: '크루 디테일 페이지에서 크루의 리뷰 정보를 알 수 있는 컴포넌트 입니다.',
11+
},
12+
},
813
tags: ['autodocs'],
914
argTypes: {
1015
totalRate: { control: 'number', description: '총 평가 개수' },

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ export default function CrewReviewSection({ crewId }: CrewReviewSectionProps) {
3737
if (data?.reviewList.content.length === 0) {
3838
return (
3939
<section className="py-16 text-center">
40-
<h3 className="text-xl font-bold text-blue-500">리뷰가 아직 없습니다</h3>
41-
<p className="mt-4 text-gray-600">크루의 약속에 참여하고 리뷰를 남겨보세요!</p>
40+
<h3 className="text-xl font-bold text-blue-500">리뷰가 아직 없어요</h3>
41+
<p className="mt-4 text-gray-600">크루의 약속에 참여하고 리뷰를 남겨보세요🙌</p>
4242
</section>
4343
);
4444
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
3737
</section>
3838

3939
{/* Crew Review Section */}
40-
<section className="mx-3 mt-10 w-full space-y-6 md:mx-7 lg:mx-11">
40+
<section className="mx-3 my-7 md:mx-7 md:my-11 lg:mx-11 lg:my-16">
4141
<article className="space-y-6">
4242
<h2 className="text-2xl font-semibold">크루 리뷰</h2>
4343
<CrewReviewSection crewId={id} />

0 commit comments

Comments
 (0)