Fix/168/stories docs

src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx

@@ -19,9 +19,6 @@ export default {
   tags: ['autodocs'],
   parameters: {
     layout: 'fullscreen',
-    nextjs: {
-      appDirectory: true,
-    },
     docs: {
       description: {
         component: '크루 작성/수정에 사용되는 폼입니다.',

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

@@ -6,7 +6,7 @@ import CrewGatheringList from './crew-gathering-list';
 const mockGatheringData = [
   {
     id: 1,
-    title: '가나다라마바사 요가 모임',
+    title: '요가 모임',
     dateTime: '2024-12-15T07:30',
     location: '서울, 한강공원',
     currentCount: 8,
@@ -18,7 +18,7 @@ const mockGatheringData = [
   {
     id: 2,
     title: '등산 모임',
-    dateTime: '2024-11-12T09:00',
+    dateTime: '2024-12-12T09:00',
     location: '서울 강남구 개포동 대모산',
     currentCount: 5,
     totalCount: 10,
@@ -29,7 +29,7 @@ const mockGatheringData = [
   {
     id: 3,
     title: '러닝 모임',
-    dateTime: '2024-11-15T09:00',
+    dateTime: '2024-12-15T09:00',
     location: '서울 영등포구 여의동로 330',
     currentCount: 10,
     totalCount: 20,
@@ -40,7 +40,7 @@ const mockGatheringData = [
   {
     id: 4,
     title: '러닝 모임',
-    dateTime: '2024-11-15T09:00',
+    dateTime: '2024-12-15T09:00',
     location: '서울 영등포구 여의동로 330',
     currentCount: 10,
     totalCount: 20,
@@ -56,13 +56,17 @@ const meta: Meta<typeof CrewGatheringList> = {
   title: 'crew/crew-gathering-list',
   component: CrewGatheringList,
   parameters: {
-    layout: 'fulled', // layout 변경
+    docs: {
+      subtitle: '크루 디테일 페이지 에서 볼 수 있는 약속 카드 리스트입니다.',
+      description: {
+        component: ' 데스크탑에서는 캐러셀, 이하의 사이즈에서는 드래그로 이동 가능합니다.',
+      },
+    },
   },
   tags: ['autodocs'],
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        {/* 부모 컨테이너 추가 */}
         <div className="flex w-full justify-center bg-gray-100">
           <div className="relative -mx-6 w-[calc(100%+3rem)]">
             <Story />
@@ -76,10 +80,9 @@ const meta: Meta<typeof CrewGatheringList> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// 스토리북에서 gatheringData prop을 전달
 export const Default: Story = {
   args: {
     gatheringData: mockGatheringData,
-    crewId: 1, // crewId를 기본값으로 설정
+    crewId: 1,
   },
 };

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

@@ -2,16 +2,14 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import ClientProvider from '@/src/components/client-provider';
 import { CrewReview } from '@/src/types/review';
-import { CrewReviewData } from '@/src/mock/review-data';
 import CrewReviewList from './crew-review-list';
 
 const meta: Meta<typeof CrewReviewList> = {
   title: 'crew/crew-review-list',
   component: CrewReviewList,
   parameters: {
-    layout: 'fulled',
-    nextjs: {
-      appDirectory: true,
+    docs: {
+      subtitle: '크루의 전체 리뷰를 확인할 수 있는 리스트 입니다.',
     },
   },
   tags: ['autodocs'],
@@ -27,6 +25,95 @@ const meta: Meta<typeof CrewReviewList> = {
 export default meta;
 type Story = StoryObj<typeof CrewReviewList>;
 
+const CrewReviewData: { data: CrewReview[] } = {
+  data: [
+    {
+      crewId: 1,
+      id: 1,
+      rate: 5,
+      comment: '정말 좋은 모임이었어요! 많은 걸 배웠습니다.',
+      createdAt: '2024-10-30T14:00:00+09:00',
+      reviewer: {
+        id: 1,
+        nickname: '김철수',
+        profileImageUrl: 'https://i.pinimg.com/736x/25/64/5c/25645c1cbb29c5b8e8ebe995404b5ab6.jpg',
+      },
+    },
+    {
+      crewId: 1,
+      id: 2,
+      rate: 3,
+      comment: '괜찮았지만, 다음에는 조금 더 나아지면 좋겠어요.',
+      createdAt: '2024-10-31T09:30:00+09:00',
+      reviewer: {
+        id: 2,
+        nickname: '박영희',
+        profileImageUrl: 'https://i.pinimg.com/736x/ba/25/6f/ba256faae4c3608685067b2641507392.jpg',
+      },
+    },
+    {
+      crewId: 1,
+      id: 3,
+      rate: 1,
+      comment: '기대에 미치지 못했습니다. 개선이 필요해요.',
+      createdAt: '2024-11-01T11:15:00+09:00',
+      reviewer: {
+        id: 3,
+        nickname: '이영수',
+        profileImageUrl: '',
+      },
+    },
+    {
+      crewId: 1,
+      id: 4,
+      rate: 4,
+      comment: '전체적으로 만족스러웠습니다. 다음에도 참여하고 싶어요!',
+      createdAt: '2024-11-03T16:45:00+09:00',
+      reviewer: {
+        id: 4,
+        nickname: '최지훈',
+        profileImageUrl: '',
+      },
+    },
+    {
+      crewId: 1,
+      id: 5,
+      rate: 2,
+      comment: '조금 아쉬웠지만 새로운 경험이었습니다.',
+      createdAt: '2024-11-05T13:20:00+09:00',
+      reviewer: {
+        id: 5,
+        nickname: '강수진',
+        profileImageUrl: 'https://i.pinimg.com/736x/38/d2/9a/38d29a018ac0472d9c2916e9d46ca282.jpg',
+      },
+    },
+    {
+      crewId: 1,
+      id: 6,
+      rate: 2,
+      comment: '조금 아쉬웠지만 새로운 경험이었습니다.',
+      createdAt: '2024-11-05T13:20:00+09:00',
+      reviewer: {
+        id: 5,
+        nickname: '강수진',
+        profileImageUrl: '',
+      },
+    },
+    {
+      crewId: 1,
+      id: 7,
+      rate: 2,
+      comment: '아쉬워요',
+      createdAt: '2024-10-30T14:00:00+09:00',
+      reviewer: {
+        id: 1,
+        nickname: '김철수',
+        profileImageUrl: '',
+      },
+    },
+  ],
+};
+
 function RenderReviewPagination() {
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 6;

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

@@ -188,8 +188,8 @@ export default function DetailCrewPresenter({
               </div>
             ) : (
               <div className="flex h-full flex-col items-center justify-center text-center text-gray-500">
-                <p className="text-base font-medium">크루장 외에 아직 크루원이 없습니다.</p>
-                <p className="text-sm font-medium text-blue-400">크루에 참여해보세요!🙌</p>
+                <p className="text-base font-medium">크루장 외에 아직 크루원이 없습니다</p>
+                <p className="text-sm font-medium text-blue-400">크루에 참여해보세요🙌</p>
               </div>
             )}
           </div>

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

@@ -5,7 +5,13 @@ const meta: Meta<typeof DetailCrewPresenter> = {
   title: 'crew/crew-detail',
   component: DetailCrewPresenter,
   parameters: {
-    layout: 'fullscreen',
+    docs: {
+      subtitle: '크루 디테일 페이지에서 크루 정보를 나타냅니다.',
+      description: {
+        component:
+          '크루장인 경우, 크루원인 경우, 둘다 아닌 경우 세가지에 따라서 케밥이 다르게 보입니다.',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
@@ -24,22 +30,21 @@ export const Default: Story = {
   args: {
     data: {
       id: 1,
-      title: '같이 물장구칠사람',
+      title: '스키 초보만 오세요',
       mainCategory: '기타',
       subCategory: '스키',
       mainLocation: '대전광역시',
-      introduce:
-        '크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개 크루 소개',
+      introduce: '스키 초보를 위한 모임입니다.',
       subLocation: '유성구',
       participantCount: 8,
       totalCount: 10,
       imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
+        'https://images.unsplash.com/photo-1504827274833-7db1774520e3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
       totalGatheringCount: 5,
       crewMembers: [
         {
           id: 1,
-          nickname: 'John',
+          nickname: '스키조아',
           email: '[email protected]',
           profileImageUrl:
             'https://i.pinimg.com/564x/e2/25/bb/e225bb492dc7a20a549f3c0abec28eb8.jpg',
@@ -108,17 +113,17 @@ export const IsCaptain: Story = {
   args: {
     data: {
       id: 1,
-      title: '같이 물장구칠사람',
+      title: '스키 초보만 오세요',
       mainCategory: '기타',
       subCategory: '스키',
       mainLocation: '대전광역시',
-      introduce: '크루 소개',
+      introduce: '스키 초보를 위한 모임입니다.',
       subLocation: '유성구',
-      participantCount: 1,
+      participantCount: 8,
       totalCount: 10,
       imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
-      totalGatheringCount: 1,
+        'https://images.unsplash.com/photo-1504827274833-7db1774520e3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      totalGatheringCount: 5,
       crewMembers: [
         {
           id: 1,
@@ -139,17 +144,17 @@ export const IsMember: Story = {
   args: {
     data: {
       id: 1,
-      title: '같이 물장구칠사람',
+      title: '스키 초보만 오세요',
       mainCategory: '기타',
       subCategory: '스키',
       mainLocation: '대전광역시',
-      introduce: '',
+      introduce: '스키 초보를 위한 모임입니다.',
       subLocation: '유성구',
-      participantCount: 2,
+      participantCount: 8,
       totalCount: 10,
       imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
-      totalGatheringCount: 1,
+        'https://images.unsplash.com/photo-1504827274833-7db1774520e3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      totalGatheringCount: 5,
       crewMembers: [
         {
           id: 1,

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

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

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

@@ -5,6 +5,11 @@ import RatingDisplay, { ReviewRateInfo } from './rating-display';
 export default {
   title: 'crew/crew-rating-display',
   component: RatingDisplay,
+  parameters: {
+    docs: {
+      subtitle: '크루 디테일 페이지에서 크루의 리뷰 정보를 알 수 있는 컴포넌트 입니다.',
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     totalRate: { control: 'number', description: '총 평가 개수' },

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

@@ -37,8 +37,8 @@ export default function CrewReviewSection({ crewId }: CrewReviewSectionProps) {
   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>
+        <h3 className="text-xl font-bold text-blue-500">리뷰가 아직 없어요</h3>
+        <p className="mt-4 text-gray-600">크루의 약속에 참여하고 리뷰를 남겨보세요🙌</p>
       </section>
     );
   }

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

@@ -37,7 +37,7 @@ export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
       </section>
 
       {/* Crew Review Section */}
-      <section className="mx-3 mt-10 w-full space-y-6 md:mx-7 lg:mx-11">
+      <section className="mx-3 my-7 md:mx-7 md:my-11 lg:mx-11 lg:my-16">
         <article className="space-y-6">
           <h2 className="text-2xl font-semibold">크루 리뷰</h2>
           <CrewReviewSection crewId={id} />