From e2ec38889220e574ba6b1448c8a2a58d3f86644e Mon Sep 17 00:00:00 2001
From: HaeJungg <gpwnd0120@gmail.com>
Date: Fri, 22 Nov 2024 16:02:52 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=92=84design:=20=EA=B0=84=EA=B2=A9=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(crew)/crew/detail/[id]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(crew)/crew/detail/[id]/page.tsx b/src/app/(crew)/crew/detail/[id]/page.tsx
index 8df25bda..2234d921 100644
--- a/src/app/(crew)/crew/detail/[id]/page.tsx
+++ b/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} />

From 871e37a04fe5398eee72ace1be1203baa23ef03f Mon Sep 17 00:00:00 2001
From: HaeJungg <gpwnd0120@gmail.com>
Date: Fri, 22 Nov 2024 16:03:42 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=B9=88=EB=B0=B0?=
 =?UTF-8?q?=EC=97=B4=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/[id]/_components/detail-crew-presenter.tsx     | 4 ++--
 .../detail/[id]/_components/gathering-list-section.tsx    | 6 +++---
 .../crew/detail/[id]/_components/review-section.tsx       | 4 ++--
 .../_components/gathering-list/liked-list-container.tsx   | 7 ++++++-
 src/components/common/review-list/review-card-list.tsx    | 8 ++++----
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx b/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx
index 0410fb78..f148d4b2 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx
+++ b/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>
diff --git a/src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx b/src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx
index c9a04326..2378eb9f 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx
+++ b/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>
     );
diff --git a/src/app/(crew)/crew/detail/[id]/_components/review-section.tsx b/src/app/(crew)/crew/detail/[id]/_components/review-section.tsx
index f7f5dd58..14237ba0 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/review-section.tsx
+++ b/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>
     );
   }
diff --git a/src/app/(crew)/my-favorite/_components/gathering-list/liked-list-container.tsx b/src/app/(crew)/my-favorite/_components/gathering-list/liked-list-container.tsx
index d537a08b..d35751c7 100644
--- a/src/app/(crew)/my-favorite/_components/gathering-list/liked-list-container.tsx
+++ b/src/app/(crew)/my-favorite/_components/gathering-list/liked-list-container.tsx
@@ -53,7 +53,12 @@ export default function LikedList() {
 
   // 빈 배열 처리(좋아요 목록이 없는 경우)
   if (gatheringData.content.length === 0) {
-    return <div>좋아요 누른 목록이 없습니다</div>;
+    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>
+      </section>
+    );
   }
 
   return (
diff --git a/src/components/common/review-list/review-card-list.tsx b/src/components/common/review-list/review-card-list.tsx
index a1f3b3e5..b3153349 100644
--- a/src/components/common/review-list/review-card-list.tsx
+++ b/src/components/common/review-list/review-card-list.tsx
@@ -17,10 +17,10 @@ export default function ReviewCardList({ data, refetch }: ReviewCardListProps) {
   // 데이터가 없을 경우 처리
   if (!reviewDataList.length) {
     return (
-      <div className="flex justify-center py-10">
-        <p className="text-xl font-semibold">남긴 리뷰가 없습니다</p>
-        <p className="text-lg font-semibold">크루에 가입하고 약속을 잡아보세요!</p>
-      </div>
+      <section className="py-16 text-center">
+        <h3 className="text-xl font-bold text-blue-500">남긴 리뷰가 없습니다</h3>
+        <p className="mt-4 text-gray-600">크루에 가입하고 약속을 잡아보세요🙌</p>
+      </section>
     );
   }
 

From 7978bd1ce2fbd63b76d9be38edc621f9a3b8f63e Mon Sep 17 00:00:00 2001
From: HaeJungg <gpwnd0120@gmail.com>
Date: Fri, 22 Nov 2024 16:04:11 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=92=84=20design:=20=EC=8A=A4=EC=BC=88?=
 =?UTF-8?q?=EB=A0=88=ED=86=A4=20ui=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(crew)/my-page/_components/profile-card/container.tsx | 4 +---
 src/components/common/skeleton/profile-skeleton/index.tsx     | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/(crew)/my-page/_components/profile-card/container.tsx b/src/app/(crew)/my-page/_components/profile-card/container.tsx
index 4f01f6ee..7ceb06ad 100644
--- a/src/app/(crew)/my-page/_components/profile-card/container.tsx
+++ b/src/app/(crew)/my-page/_components/profile-card/container.tsx
@@ -12,9 +12,7 @@ export default function ProfileCard() {
 
   // 로딩 중일 때 스켈레톤 표시
   if (userLoading) return <ProfileSkeleton />;
-
-  // 사용자 데이터가 없는 경우 null 반환
-  if (!user) return null;
+  if (!user) return <ProfileSkeleton />;
 
   const handleEdit = () => {
     const input = document.createElement('input');
diff --git a/src/components/common/skeleton/profile-skeleton/index.tsx b/src/components/common/skeleton/profile-skeleton/index.tsx
index ef523718..470d64e7 100644
--- a/src/components/common/skeleton/profile-skeleton/index.tsx
+++ b/src/components/common/skeleton/profile-skeleton/index.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from '@mantine/core';
 export default function ProfileSkeleton() {
   return (
     <div className="flex items-center gap-6.5" aria-label="콘텐츠 로딩 중">
-      <Skeleton circle className="h-28 w-28" />
+      <Skeleton circle className="h-20 w-20 md:h-30 md:w-30 lg:h-30 lg:w-30" />
       <div className="flex flex-col gap-3">
         <Skeleton className="h-6 w-40" />
         <Skeleton className="h-4 w-36" />

From 849e457a7ed96acdfcabe668d153ebe3b8e071ad Mon Sep 17 00:00:00 2001
From: HaeJungg <gpwnd0120@gmail.com>
Date: Fri, 22 Nov 2024 17:19:15 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=93=9D=20docs:=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20docs=20=EC=B6=94=EA=B0=80,=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-crew-form.stories.tsx              |   3 -
 .../crew-gathering-list.stories.tsx           |  19 ++-
 .../_components/crew-review-list.stories.tsx  |  95 ++++++++++-
 .../[id]/_components/detail-crew.stories.tsx  |  37 +++--
 .../_components/rating-display.stories.tsx    |   5 +
 .../gathering-list/gathering-list.stories.tsx | 153 ++++--------------
 .../reviewable-gathering-card.stories.tsx     |  20 ++-
 .../common/button/button.stories.tsx          |  24 +--
 .../common/button/like-btn.stories.tsx        |  21 ++-
 .../gathering-card/gathering-card.stories.tsx |  71 +++-----
 .../common/profile/profiles.stories.tsx       |  18 ++-
 .../progress-bar/progress-bar.stories.tsx     |   8 +
 .../review-list/review-card-list.stories.tsx  |  67 +++++++-
 13 files changed, 301 insertions(+), 240 deletions(-)

diff --git a/src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx b/src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx
index acc0aaaa..3f6e92da 100644
--- a/src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx
+++ b/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: '크루 작성/수정에 사용되는 폼입니다.',
diff --git a/src/app/(crew)/crew/detail/[id]/_components/crew-gathering-list.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/crew-gathering-list.stories.tsx
index 750a5cfb..1a830602 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/crew-gathering-list.stories.tsx
+++ b/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,
   },
 };
diff --git a/src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx
index 934b43ab..c2f6c0f3 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx
+++ b/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;
diff --git a/src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx
index 831cce82..00dc08e2 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx
+++ b/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: 'abc@asbc.com',
           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,
diff --git a/src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx b/src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx
index 7efc260c..c9479a0d 100644
--- a/src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx
+++ b/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: '총 평가 개수' },
diff --git a/src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsx b/src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsx
index ed59c89e..c182910b 100644
--- a/src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsx
+++ b/src/app/(crew)/my-favorite/_components/gathering-list/gathering-list.stories.tsx
@@ -10,7 +10,12 @@ const meta: Meta<typeof LikedListPresenter> = {
   title: 'gathering/liked-gathering-card',
   component: LikedListPresenter,
   parameters: {
-    layout: 'fullscreen',
+    docs: {
+      subtitle: '찜한 약속을 확인하는 컴포넌트 입니다.',
+      description: {
+        component: '페이지네이션을 사용해 한 페이지에 6개씩 확인할 수 있습니다.',
+      },
+    },
   },
   tags: ['autodocs'],
   decorators: [
@@ -34,13 +39,12 @@ const dataWithOneItem: GatheringResponseType = {
   content: [
     {
       id: 1,
-      title: '첫 번째 모임',
+      title: '서핑모임',
       dateTime: '2024-12-10T08:00:00.000',
       location: '서울 강남구 삼성동',
       currentCount: 1,
       totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     },
   ],
   pageNumber: 0,
@@ -53,33 +57,30 @@ const dataWithThreeItems: GatheringResponseType = {
   content: [
     {
       id: 1,
-      title: '첫 번째 모임',
+      title: '서핑모임',
       dateTime: '2024-12-10T08:00:00.000',
       location: '서울 강남구 삼성동',
       currentCount: 1,
       totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     },
     {
       id: 2,
-      title: '두 번째 모임',
+      title: '헬스',
       dateTime: '2024-12-15T09:00:00.000',
       location: '서울 종로구 광화문',
       currentCount: 3,
       totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/fb/53/e3/fb53e3a4225c01308c30882d92bee467.jpg',
     },
     {
       id: 3,
-      title: '세 번째 모임',
-      dateTime: '2024-12-20T10:00:00.000',
-      location: '서울 서초구 양재천',
-      currentCount: 2,
-      totalCount: 4,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      title: '서핑모임',
+      dateTime: '2024-12-10T08:00:00.000',
+      location: '서울 강남구 삼성동',
+      currentCount: 1,
+      totalCount: 5,
+      imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     },
   ],
   pageNumber: 0,
@@ -92,138 +93,54 @@ const dataWithFiveItems: GatheringResponseType = {
   content: [
     {
       id: 1,
-      title: '첫 번째 모임',
+      title: '서핑모임',
       dateTime: '2024-12-10T08:00:00.000',
       location: '서울 강남구 삼성동',
       currentCount: 1,
       totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     },
     {
       id: 2,
-      title: '두 번째 모임',
+      title: '헬스',
       dateTime: '2024-12-15T09:00:00.000',
       location: '서울 종로구 광화문',
       currentCount: 3,
       totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/fb/53/e3/fb53e3a4225c01308c30882d92bee467.jpg',
     },
     {
       id: 3,
-      title: '세 번째 모임',
-      dateTime: '2024-12-20T10:00:00.000',
-      location: '서울 서초구 양재천',
-      currentCount: 2,
-      totalCount: 4,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
-    },
-    {
-      id: 4,
-      title: '네 번째 모임',
-      dateTime: '2024-12-25T14:00:00.000',
-      location: '서울 용산구 한남동',
-      currentCount: 5,
-      totalCount: 6,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
-    },
-    {
-      id: 5,
-      title: '다섯 번째 모임',
-      dateTime: '2024-12-30T16:00:00.000',
-      location: '서울 송파구 잠실',
-      currentCount: 3,
-      totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
-    },
-  ],
-  pageNumber: 0,
-  pageSize: 6,
-  totalElements: 5,
-  totalPages: 1,
-};
-
-const dataWithSevenItems: GatheringResponseType = {
-  content: [
-    {
-      id: 1,
-      title: '첫 번째 모임',
+      title: '서핑모임',
       dateTime: '2024-12-10T08:00:00.000',
       location: '서울 강남구 삼성동',
       currentCount: 1,
       totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
-    },
-    {
-      id: 2,
-      title: '두 번째 모임',
-      dateTime: '2024-12-15T09:00:00.000',
-      location: '서울 종로구 광화문',
-      currentCount: 3,
-      totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
-    },
-    {
-      id: 3,
-      title: '세 번째 모임',
-      dateTime: '2024-12-20T10:00:00.000',
-      location: '서울 서초구 양재천',
-      currentCount: 2,
-      totalCount: 4,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     },
     {
       id: 4,
-      title: '네 번째 모임',
+      title: '러닝 같이 해요',
       dateTime: '2024-12-25T14:00:00.000',
       location: '서울 용산구 한남동',
       currentCount: 5,
       totalCount: 6,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/72/8e/94/728e94219c8d4570d0901e7df5567282.jpg',
     },
     {
       id: 5,
-      title: '다섯 번째 모임',
+      title: '같이 풋살해요',
       dateTime: '2024-12-30T16:00:00.000',
       location: '서울 송파구 잠실',
       currentCount: 3,
       totalCount: 5,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
-    },
-    {
-      id: 6,
-      title: '여섯 번째 모임',
-      dateTime: '2025-01-05T18:00:00.000',
-      location: '서울 은평구 불광동',
-      currentCount: 4,
-      totalCount: 4,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
-    },
-    {
-      id: 7,
-      title: '일곱 번째 모임',
-      dateTime: '2025-01-10T20:00:00.000',
-      location: '서울 노원구 상계동',
-      currentCount: 2,
-      totalCount: 3,
-      imageUrl:
-        'https://crewcrew.s3.ap-northeast-2.amazonaws.com/gathering/73db4777-3d00-488c-a016-1e50eaa72b8f',
+      imageUrl: 'https://i.pinimg.com/736x/25/64/5c/25645c1cbb29c5b8e8ebe995404b5ab6.jpg',
     },
   ],
   pageNumber: 0,
   pageSize: 6,
-  totalElements: 7,
-  totalPages: 2,
+  totalElements: 5,
+  totalPages: 1,
 };
 
 export const OneItem: Story = {
@@ -255,13 +172,3 @@ export const FiveItems: Story = {
     page: 1,
   },
 };
-
-export const SevenItems: Story = {
-  args: {
-    gatheringData: dataWithSevenItems,
-    onPageChange,
-    onLike,
-    onUnlike,
-    page: 1,
-  },
-};
diff --git a/src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.stories.tsx b/src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.stories.tsx
index 6e0e3d5d..158dbaca 100644
--- a/src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.stories.tsx
+++ b/src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.stories.tsx
@@ -7,7 +7,13 @@ const meta: Meta<typeof ReviewableGatheringCard> = {
   component: ReviewableGatheringCard,
   tags: ['autodocs'],
   parameters: {
-    layout: 'fullscreen',
+    docs: {
+      subtitle: '리뷰 가능한 약속 카드입니다.',
+      description: {
+        component:
+          '약속이름, 약속장소, 인원수, 시간 등을 알려주고 리뷰 작성 버튼을 통해 리뷰를 남길 수 있습니다.',
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -32,16 +38,20 @@ type Story = StoryObj<typeof ReviewableGatheringCard>;
 export const Default: Story = {
   args: {
     id: 1,
-    gatheringName: '모임모임모임모임모임모밈미밈미미미미미미',
-    location: '모임모임모임모임모임모밈미밈미미미미미미',
+    gatheringName: '서핑모임',
+    location: '양양',
     dateTime: '2024-11-21T18:30:00.000Z',
     currentCount: 8,
     totalCount: 12,
-    imageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
+    imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     participants: [
       { id: 1, nickname: '유저1', profileImageUrl: '' },
       { id: 2, nickname: '유저2', profileImageUrl: '' },
-      { id: 3, nickname: '유저3', profileImageUrl: '' },
+      {
+        id: 3,
+        nickname: '유저3',
+        profileImageUrl: 'https://i.pinimg.com/736x/97/5a/3c/975a3c645d344216e8ea346c084fba04.jpg',
+      },
     ],
   },
 };
diff --git a/src/components/common/button/button.stories.tsx b/src/components/common/button/button.stories.tsx
index bff63247..92684917 100644
--- a/src/components/common/button/button.stories.tsx
+++ b/src/components/common/button/button.stories.tsx
@@ -5,24 +5,12 @@ const meta: Meta = {
   title: 'common/button/button',
   tags: ['autodocs'],
   component: Button,
-  argTypes: {
-    className: {
-      description: '클래스네임, 길이 (btn-filled, btn-outlined, btn-disabled)',
-      control: 'text',
-    },
-    children: {
-      description: '버튼 내부에 들어가는 콘텐츠',
-      control: 'text',
-    },
-    onClick: {
-      description: '버튼 클릭 시 실행되는 함수',
-      action: 'clicked',
-    },
-    type: {
-      description: '버튼 타입 ("button", "submit", "reset")',
-      control: {
-        type: 'radio',
-        options: ['button', 'submit', 'reset'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      subtitle: '기본이 되는 버튼 컴포넌트 입니다.',
+      description: {
+        component: 'filled, outlined, disabled 세가지 스타일이 있습니다.',
       },
     },
   },
diff --git a/src/components/common/button/like-btn.stories.tsx b/src/components/common/button/like-btn.stories.tsx
index 888b1762..95dbcff0 100644
--- a/src/components/common/button/like-btn.stories.tsx
+++ b/src/components/common/button/like-btn.stories.tsx
@@ -5,27 +5,36 @@ const meta: Meta<typeof LikeBtn> = {
   title: 'common/button/like-button',
   component: LikeBtn,
   tags: ['autodocs'],
-  argTypes: {
-    isLiked: { control: 'boolean' },
-    id: { control: 'number' },
-    onLikeToggle: { action: 'liked toggled' }, // 클릭 이벤트 발생 시 로그 확인
+  parameters: {
+    layout: 'fullscreen',
+    nextjs: {
+      appDirectory: true,
+    },
+    docs: {
+      description: {
+        component: `찜하기 버튼은 약속 카드에서 약속을 찜할 때 사용됩니다. 버튼을 눌러 찜한 상태 / 찜하지 않은 상태를 나타냅니다.
+        `,
+      },
+    },
   },
 } satisfies Meta<typeof LikeBtn>;
 
 export default meta;
 type Story = StoryObj<typeof LikeBtn>;
 
+// 기본적으로 찜하지 않은 상태
 export const Default: Story = {
   args: {
     id: 1,
-    isLiked: false, // 기본적으로 찜하지 않은 상태
+    isLiked: false,
   },
 };
 
+// 찜한 상태로 시작, 사이즈 작음
 export const Liked: Story = {
   args: {
     id: 2,
-    isLiked: true, // 찜한 상태로 시작
+    isLiked: true,
     size: 32,
   },
 };
diff --git a/src/components/common/gathering-card/gathering-card.stories.tsx b/src/components/common/gathering-card/gathering-card.stories.tsx
index a860a9d1..5c557620 100644
--- a/src/components/common/gathering-card/gathering-card.stories.tsx
+++ b/src/components/common/gathering-card/gathering-card.stories.tsx
@@ -8,23 +8,19 @@ const meta: Meta<typeof GatheringCard> = {
   title: 'gathering/gathering-card',
   component: GatheringCard,
   parameters: {
-    layout: 'fullscreen',
+    docs: {
+      subtitle: '약속을 확인할 수 있는 카드입니다.',
+      description: {
+        component:
+          '약속에 대한 간단한 정보를 알 수 있습니다. 크루 디테일 페이지와 찜한 약속에서 사용합니다.',
+      },
+    },
     backgrounds: {
       default: 'light-gray',
       values: [{ name: 'light-gray', value: '#F9FAFB' }],
     },
   },
   tags: ['autodocs'],
-  argTypes: {
-    title: { control: 'text' },
-    dateTime: { control: 'date' },
-    location: { control: 'text' },
-    currentCount: { control: 'number' },
-    totalCount: { control: 'number' },
-    imageUrl: { control: 'text' },
-    liked: { control: 'boolean' },
-    className: { control: false },
-  },
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
@@ -39,27 +35,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: '가나다라마가나다라마가나다라마가',
-    dateTime: '2024-11-30T00:30',
-    location: '서울, 한강공원',
-    currentCount: 8,
-    totalCount: 12,
-    imageUrl:
-      'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    liked: true,
-  },
-};
-
-// 좋아요가 눌리지 않은 모임 카드
-export const NotLiked: Story = {
-  args: {
-    title: '등산 모임',
-    dateTime: '2024-12-12T09:00',
-    location: '서울, 한강공원',
-    currentCount: 5,
-    totalCount: 10,
-    imageUrl:
-      'https://images.unsplash.com/photo-1517849845537-4d257902454a?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: '서핑모임',
+    dateTime: '2024-12-10T08:00:00.000',
+    location: '서울 강남구 삼성동',
+    currentCount: 1,
+    totalCount: 5,
+    imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     liked: false,
   },
 };
@@ -67,13 +48,12 @@ export const NotLiked: Story = {
 // 마감된 모임 카드
 export const PastEvent: Story = {
   args: {
-    title: '마감된 모임입니다',
-    dateTime: '2024-10-15T07:30',
-    location: '서울, 한강공원',
-    currentCount: 12,
-    totalCount: 12,
-    imageUrl:
-      'https://images.unsplash.com/photo-1517849845537-4d257902454a?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: '서핑모임',
+    dateTime: '2024-02-10T08:00:00.000',
+    location: '서울 강남구 삼성동',
+    currentCount: 1,
+    totalCount: 5,
+    imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     liked: false,
   },
 };
@@ -81,13 +61,12 @@ export const PastEvent: Story = {
 // 찜한 모임 카드
 export const LikedEvent: Story = {
   args: {
-    title: '조깅 모임',
-    dateTime: '2024-12-15T07:30',
-    location: '서울, 한강공원',
-    currentCount: 8,
-    totalCount: 12,
-    imageUrl:
-      'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: '서핑모임',
+    dateTime: '2024-12-10T08:00:00.000',
+    location: '서울 강남구 삼성동',
+    currentCount: 1,
+    totalCount: 5,
+    imageUrl: 'https://i.pinimg.com/736x/00/6d/4b/006d4bb521a737534e37a8af3203a7d3.jpg',
     liked: true,
   },
 };
diff --git a/src/components/common/profile/profiles.stories.tsx b/src/components/common/profile/profiles.stories.tsx
index 61f9b2d4..b3e92588 100644
--- a/src/components/common/profile/profiles.stories.tsx
+++ b/src/components/common/profile/profiles.stories.tsx
@@ -1,12 +1,17 @@
-// Profiles 스토리북 파일
 import type { Meta, StoryObj } from '@storybook/react';
 import Profiles from '@/src/components/common/profile/profiles';
 
 const meta: Meta = {
-  title: 'crew/crew-profiles',
+  title: 'common/profiles',
   component: Profiles,
   parameters: {
     layout: 'centered',
+    docs: {
+      subtitle: '여러 프로필을 나타낼 때 사용하는 프로필 모음입니다.',
+      description: {
+        component: '크루 카드나 리뷰 카드에서 사용됩니다.',
+      },
+    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Profiles>;
@@ -19,26 +24,27 @@ const sampleProfiles = [
   {
     id: 1,
     nickname: 'User1',
+    profileImageUrl: '',
   },
   {
     id: 2,
     nickname: 'User2',
-    imageUrl: 'https://i.pinimg.com/564x/9d/b8/86/9db886bb5475cc35a7f450831f4125bc.jpg',
+    profileImageUrl: 'https://i.pinimg.com/736x/76/e1/6a/76e16a16b592bba8aacd3e9f82c4c3d6.jpg',
   },
   {
     id: 3,
     nickname: 'User3',
-    imageUrl: 'https://i.pinimg.com/564x/41/56/d8/4156d8253b6d76e5455d28b44bd1a1e0.jpg',
+    profileImageUrl: 'https://i.pinimg.com/564x/41/56/d8/4156d8253b6d76e5455d28b44bd1a1e0.jpg',
   },
   {
     id: 4,
     nickname: 'User4',
-    imageUrl: 'https://i.pinimg.com/564x/e2/e6/47/e2e64732424094c4e9e2643aaaf4389e.jpg',
+    profileImageUrl: 'https://i.pinimg.com/564x/e2/e6/47/e2e64732424094c4e9e2643aaaf4389e.jpg',
   },
   {
     id: 5,
     nickname: 'User5',
-    imageUrl: 'https://i.pinimg.com/564x/17/06/45/170645a5f7b8a76f04c15b226b22cf90.jpg',
+    profileImageUrl: 'https://i.pinimg.com/564x/17/06/45/170645a5f7b8a76f04c15b226b22cf90.jpg',
   },
 ];
 
diff --git a/src/components/common/progress-bar/progress-bar.stories.tsx b/src/components/common/progress-bar/progress-bar.stories.tsx
index 0e8c617c..3109af3a 100644
--- a/src/components/common/progress-bar/progress-bar.stories.tsx
+++ b/src/components/common/progress-bar/progress-bar.stories.tsx
@@ -6,6 +6,14 @@ const meta: Meta<typeof ProgressBar> = {
   title: 'common/progress-bar',
   component: ProgressBar,
   tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: '프로그래스바는 특정 기준 대비 현재 상태를 시각적으로 표현할 때 사용됩니다.',
+      },
+    },
+  },
   argTypes: {
     total: {
       description: '총 숫자',
diff --git a/src/components/common/review-list/review-card-list.stories.tsx b/src/components/common/review-list/review-card-list.stories.tsx
index 5148ea85..c6446d58 100644
--- a/src/components/common/review-list/review-card-list.stories.tsx
+++ b/src/components/common/review-list/review-card-list.stories.tsx
@@ -1,23 +1,80 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { MyReviewData } from '@/src/mock/review-data';
 import ReviewCardList from './review-card-list';
 
 const meta: Meta<typeof ReviewCardList> = {
   title: 'review/review-card-list',
   component: ReviewCardList,
+  tags: ['autodocs'],
   parameters: {
-    layout: 'fullscreen',
-    nextjs: {
-      appDirectory: true,
+    docs: {
+      subtitle: '마이 페이지의 리뷰 카드 리스트 입니다.',
+      description: {
+        component: '크루 이름, 약속 이름, 점수, 내용, 생성 날짜를 확인할 수 있습니다.',
+      },
     },
   },
-  tags: ['autodocs'],
 };
 
 export default meta;
 
 type Story = StoryObj<typeof ReviewCardList>;
 
+const MyReviewData = {
+  pages: [
+    {
+      content: [
+        {
+          crewId: 1,
+          crewName: '스키모임',
+          gatheringName: '무주 스키장 같이가요',
+          id: 3,
+          rate: 3,
+          comment: '낫 뱃',
+          createdAt: '2024-11-09T10:09:12.306+09:00',
+          gatheringLocation: '무주 스키장',
+        },
+        {
+          crewId: 2,
+          crewName: '사회인 야구',
+          gatheringName: '타격연습',
+          id: 4,
+          rate: 4,
+          comment: '많이 배웠습니다',
+          createdAt: '2024-10-31T10:09:12.306+09:00',
+          gatheringLocation: '고척 스카이돔',
+        },
+      ],
+      hasNext: true,
+    },
+    {
+      content: [
+        {
+          crewId: 5,
+          crewName: '수영',
+          gatheringName: '초급반 수영',
+          id: 7,
+          rate: 3,
+          comment: '사람이 너무 많아요',
+          createdAt: '2024-10-31T00:56',
+          gatheringLocation: '수영장',
+        },
+        {
+          crewId: 6,
+          crewName: '풋살 같이해요',
+          gatheringName: '어서와 풋살은 처음이지?',
+          id: 8,
+          rate: 2,
+          comment: '초심자에게 너무 많은 걸 요구합니다',
+          createdAt: '2024-10-31T10:09:12.306+09:00',
+          gatheringLocation: '풋살장',
+        },
+      ],
+      hasNext: false,
+    },
+  ],
+  pageParams: [],
+};
+
 export const MyReviewCardList: Story = {
   render: () => <ReviewCardList data={MyReviewData} refetch={() => {}} />,
 };

From 4e1cfef5f1090bf281ac82e8f62887f686e0c5a0 Mon Sep 17 00:00:00 2001
From: HaeJungg <gpwnd0120@gmail.com>
Date: Fri, 22 Nov 2024 17:19:56 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EC=95=88=EC=93=B0?=
 =?UTF-8?q?=EB=8A=94=20=EB=AA=A9=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mock/review-data.ts | 294 ----------------------------------------
 1 file changed, 294 deletions(-)
 delete mode 100644 src/mock/review-data.ts

diff --git a/src/mock/review-data.ts b/src/mock/review-data.ts
deleted file mode 100644
index eb06cca9..00000000
--- a/src/mock/review-data.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import { CrewReview } from '../types/review';
-
-// NOTE: 크루 리뷰
-export const CrewReviewData: { data: CrewReview[] } = {
-  data: [
-    {
-      crewId: 1,
-      id: 1,
-      rate: 5,
-      comment:
-        '글이 길어질 경우 글이 길어질 경우 확인 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 최고의 모임~',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 1,
-        nickname: '샘플1',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 2,
-      rate: 2,
-      comment: '솔직히 좀 별로..',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 2,
-        nickname: '샘플2',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 3,
-      rate: 5,
-      comment: '진짜 좋은 모임이었다.. 굿',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 3,
-        nickname: '샘플3',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 4,
-      rate: 5,
-      comment: '모임계를 뒤집어 엎으셨다',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 4,
-        nickname: '샘플4',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 5,
-      rate: 4,
-      comment: '좋아용',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 5,
-        nickname: '샘플5',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 5,
-      rate: 1,
-      comment: '별로였음',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 6,
-        nickname: '샘플6',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 5,
-      rate: 4,
-      comment: '나만 좋았냐',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 7,
-        nickname: '샘플7',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 6,
-      rate: 0,
-      comment: '솔직히 좀 별로..',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 2,
-        nickname: '샘플2',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 7,
-      rate: 5,
-      comment: '진짜 좋은 모임이었다.. 굿',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 3,
-        nickname: '샘플3',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 8,
-      rate: 4,
-      comment: '모임계를 뒤집어 엎으셨다',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 4,
-        nickname: '샘플4',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 9,
-      rate: 5,
-      comment: '좋아용',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 5,
-        nickname: '샘플5',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 10,
-      rate: 2,
-      comment: '별로였음',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 6,
-        nickname: '샘플6',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 11,
-      rate: 5,
-      comment: '나만 좋았냐',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 7,
-        nickname: '샘플7',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 12,
-      rate: 4,
-      comment: '모임계를 뒤집어 엎으셨다',
-      createdAt: '2024-10-30T10:09:12.306+09:00',
-      reviewer: {
-        id: 4,
-        nickname: '샘플4',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 13,
-      rate: 5,
-      comment: '좋아용',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 5,
-        nickname: '샘플5',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 14,
-      rate: 1,
-      comment: '별로였음',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 6,
-        nickname: '샘플6',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-    {
-      crewId: 1,
-      id: 15,
-      rate: 4,
-      comment: '나만 좋았냐',
-      createdAt: '2024-10-31T10:09:12.306+09:00',
-      reviewer: {
-        id: 7,
-        nickname: '샘플7',
-        profileImageUrl: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
-      },
-    },
-  ],
-};
-
-// NOTE: 나의 리뷰 (스토리북  테스트용)
-export const MyReviewData = {
-  pages: [
-    {
-      content: [
-        {
-          crewId: 1,
-          crewName: '크루크루크루크루크루크루',
-          gatheringName: '모임모임모임약속약속약속',
-          id: 3,
-          rate: 3,
-          comment: '리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰',
-          createdAt: '2024-11-09T10:09:12.306+09:00',
-          gatheringLocation: '어느동',
-        },
-        {
-          crewId: 2,
-          crewName: '최초의크루이자최후의크루',
-          gatheringName: '천지창조',
-          id: 4,
-          rate: 4,
-          comment: '다시는 안 간다',
-          createdAt: '2024-10-31T10:09:12.306+09:00',
-          gatheringLocation: '어느동',
-        },
-      ],
-      hasNext: true, // 다음 페이지 여부
-    },
-    {
-      content: [
-        {
-          crewId: 3,
-          crewName: '마지막크루...최종의최종의최종',
-          gatheringName: '친구들아모여라',
-          id: 5,
-          rate: 2,
-          comment: '펭귄이랑 친구하고싶어요',
-          createdAt: '2024-10-31T10:09:12.306+09:00',
-          gatheringLocation: '어느동',
-        },
-        {
-          crewId: 4,
-          crewName: '할일없는사람만들어오세요',
-          gatheringName: '숨쉬기모임',
-          id: 6,
-          rate: 5,
-          comment: '복식호흡을 할 수 있게 됐어요 감사합니다',
-          createdAt: '2024-10-31T10:09:12.306+09:00',
-          gatheringLocation: '어느동',
-        },
-      ],
-      hasNext: true,
-    },
-    {
-      content: [
-        {
-          crewId: 5,
-          crewName: '크루크루크루크루크루크루',
-          gatheringName: '모임모임모임약속약속약속',
-          id: 7,
-          rate: 3,
-          comment: '리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰',
-          createdAt: '2024-10-31T00:56',
-          gatheringLocation: '어느동',
-        },
-        {
-          crewId: 6,
-          crewName: '최초의크루이자최후의크루',
-          gatheringName: '천지창조',
-          id: 8,
-          rate: 4,
-          comment: '다시는 안 간다',
-          createdAt: '2024-10-31T10:09:12.306+09:00',
-          gatheringLocation: '어느동',
-        },
-      ],
-      hasNext: false,
-    },
-  ],
-  pageParams: [], // 페이지 파라미터
-};

From 83458bed3c7e3d9a1d7c5fd5d012987fd863f36e Mon Sep 17 00:00:00 2001
From: HaeJungg <gpwnd0120@gmail.com>
Date: Fri, 22 Nov 2024 17:33:53 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=93=9D=20docs:=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84,=20=EC=B0=9C=ED=95=98=EA=B8=B0=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20docs=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/button/like-btn.stories.tsx | 4 ++--
 src/components/common/profile/Profile.stories.tsx | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/common/button/like-btn.stories.tsx b/src/components/common/button/like-btn.stories.tsx
index 95dbcff0..ee8a0078 100644
--- a/src/components/common/button/like-btn.stories.tsx
+++ b/src/components/common/button/like-btn.stories.tsx
@@ -11,9 +11,9 @@ const meta: Meta<typeof LikeBtn> = {
       appDirectory: true,
     },
     docs: {
+      subtitle: '찜하기 버튼은 약속 카드에서 약속을 찜할 때 사용됩니다.',
       description: {
-        component: `찜하기 버튼은 약속 카드에서 약속을 찜할 때 사용됩니다. 버튼을 눌러 찜한 상태 / 찜하지 않은 상태를 나타냅니다.
-        `,
+        component: '클릭해 찜한 상태 / 찜하지 않은 상태를 나타냅니다.',
       },
     },
   },
diff --git a/src/components/common/profile/Profile.stories.tsx b/src/components/common/profile/Profile.stories.tsx
index aeac7d15..0c303581 100644
--- a/src/components/common/profile/Profile.stories.tsx
+++ b/src/components/common/profile/Profile.stories.tsx
@@ -6,6 +6,12 @@ const meta: Meta<typeof Profile> = {
   component: Profile,
   parameters: {
     layout: 'centered',
+    docs: {
+      subtitle: '프로필 이미지를 나타냅니다.',
+      description: {
+        component: '사이즈별 기본 프로필 이미지, 편집가능한 경우가 있습니다.',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {