Fix/youl storybook + 노데이터 문구 수정 (#174)

* 📝 Docs: 스토리북 수정, Refactor: 안쓰는 타입 수정

* 📝 Docs: jsdoc 추가

Author: yulrang

package-lock.json

@@ -17,7 +17,7 @@ export default function HeroCrew() {
             <strong className="text-sm font-medium text-gray-700 md:text-base">
               함께할 사람이 없나요?
             </strong>
-            <strong className="text-2xl font-semibold text-gray-900 md:text-3.5xl">
+            <strong className="text-xl font-semibold text-gray-900 md:text-3xl">
               지금 크루에 참여해보세요.
             </strong>
           </p>

src/app/(crew)/_components/hero/hero-crew.tsx

@@ -17,11 +17,27 @@ export default {
   title: 'crew/create-crew-form',
   component: CreateCrewForm,
   tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['create', 'edit'],
+      description: '폼 타입',
+      table: { type: { summary: 'create | edit' } },
+    },
+    data: {
+      control: 'object',
+      description: '폼 데이터',
+      table: { type: { summary: 'CreateCrewFormTypes' } },
+    },
+    isEdit: { control: 'boolean', description: '수정 여부' },
+    onSubmit: {
+      action: 'submit',
+      table: { type: { summary: '(data: CreateCrewFormTypes) => void' } },
+    },
+    onEdit: { action: 'edit', table: { type: { summary: '(data: CreateCrewFormTypes) => void' } } },
+  },
   parameters: {
     layout: 'fullscreen',
-    nextjs: {
-      appDirectory: true,
-    },
     docs: {
       description: {
         component: '크루 작성/수정에 사용되는 폼입니다.',

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

@@ -13,17 +13,26 @@ import DropDown from '@/src/components/common/input/drop-down';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';
 import Textarea from '@/src/components/common/input/textarea';
-import { CreateCrewFormTypes, EditCrewResponseTypes } from '@/src/types/create-crew';
+import { CreateCrewFormTypes } from '@/src/types/create-crew';
 import ImgCrewSampleUrls from '@/public/assets/images/crew-sample';
 
 export interface CreateCrewFormProps {
   type: 'create' | 'edit';
-  data: CreateCrewFormTypes | EditCrewResponseTypes;
+  data: CreateCrewFormTypes;
   isEdit?: boolean;
   onEdit?: (data: CreateCrewFormTypes) => void;
   onSubmit?: (data: CreateCrewFormTypes) => void;
 }
 
+/**
+ * 크루 생성/수정 폼
+ * @param {'create' | 'edit'} type : form 타입
+ * @param {boolean} isEdit : 수정 여부
+ * @param {(data: CreateCrewFormTypes) => void} onEdit
+ * @param {(data: CreateCrewFormTypes) => void} onSubmit
+ * @param {CreateCrewFormTypes} data
+ */
+
 export default function CreateCrewForm({
   type,
   isEdit,
@@ -199,7 +208,7 @@ export default function CreateCrewForm({
                     field.onChange(value);
                     handleMainCategoryChange(value);
                   }}
-                  error={errors.mainCategory?.message}
+                  errorMsg={errors.mainCategory?.message}
                 />
               )}
             />
@@ -218,7 +227,7 @@ export default function CreateCrewForm({
                   placeholder={isEdit && field.value ? field.value : '세부 카테고리'}
                   data={categoryData[categoryIndex]?.items || []}
                   className="flex-1"
-                  error={errors.subCategory?.message}
+                  errorMsg={errors.subCategory?.message}
                 />
               )}
             />
@@ -277,7 +286,7 @@ export default function CreateCrewForm({
                     field.onChange(value);
                     handleMainLocationChange(value);
                   }}
-                  error={errors.mainLocation?.message}
+                  errorMsg={errors.mainLocation?.message}
                 />
               )}
             />
@@ -297,7 +306,7 @@ export default function CreateCrewForm({
                   placeholder={isEdit && field.value ? field.value : '시/군/구'}
                   data={regionData[regionIndex]?.areas || []}
                   className="flex-1"
-                  error={errors.subLocation?.message}
+                  errorMsg={errors.subLocation?.message}
                 />
               )}
             />

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

@@ -20,6 +20,15 @@ export interface CreateGatheringFormProps {
   onClose: () => void;
 }
 
+/**
+ * 약속 생성/수정 폼
+ * @param {CreateGatheringFormTypes} data
+ * @param {boolean} isEdit
+ * @param {(data: CreateGatheringFormTypes) => void} onEdit
+ * @param {(data: CreateGatheringFormTypes) => void} onSubmit
+ * @param {() => void} onClose
+ */
+
 export default function CreateGatheringForm({
   isEdit = false,
   onEdit = () => {},

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx

@@ -10,9 +10,6 @@ const meta: Meta<typeof CrewReviewList> = {
   component: CrewReviewList,
   parameters: {
     layout: 'fulled',
-    nextjs: {
-      appDirectory: true,
-    },
   },
   tags: ['autodocs'],
   decorators: [

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

@@ -27,9 +27,10 @@ export default function CrewCardList({ data, inWhere }: CrewCardListProps) {
 
   if (!crewDataList.length)
     return (
-      <div className="flex justify-center py-10">
-        <p>데이터가 없습니다.</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>
     );
 
   return (

src/components/common/crew-list/crew-card-list.tsx

@@ -4,12 +4,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 import CalendarFilter, { CalendarFilterProps } from '.';
 
-const mockData = [
-  new Date('2024-10-01'),
-  new Date('2024-10-05'),
-  new Date('2024-10-12'),
-  new Date('2024-10-15'),
-];
+const mockData = [new Date()];
 
 const meta: Meta = {
   title: 'common/calendar/calendar-filter',
@@ -20,7 +15,14 @@ const meta: Meta = {
       type: { name: 'string' },
       description: '선택된 날짜',
     },
-    toDoDates: mockData,
+    toDoDates: {
+      description: '일정이 있는 날짜',
+      table: {
+        type: {
+          summary: 'Date[] | null',
+        },
+      },
+    },
     onChange: action('onChange'),
   },
   parameters: {

src/components/common/input/calendar-filter/calendar-filter.stories.tsx

@@ -12,6 +12,13 @@ export interface CalendarFilterProps {
   onChange: (date: Date) => void;
 }
 
+/**
+ * 달력에서 날짜를 선택하면 값을 변경할 수 있는 컴포넌트
+ * @param {Date} value - 선택된 날짜
+ * @param {Date[] | null} toDoDates - 일정이 있는 날짜
+ * @param {(date: Date) => void} onChange - 값이 변경될 때 실행하는 함수
+ */
+
 export default function CalendarFilter({
   value,
   toDoDates,

src/components/common/input/calendar-filter/index.tsx

@@ -12,6 +12,12 @@ export interface DateTimePickerProps {
   onChange: (date: string) => void;
 }
 
+/**
+ * 달력에서 날짜를 선택하고, 드롭다운으로 시간을 선택하면 날짜/시간 값을 변경할 수 있는 컴포넌트
+ * @param {Date} fullDate - 선택된 날짜
+ * @param {(date: string) => void} onChange - 값이 변경될 때 실행하는 함수
+ */
+
 export default function DateTimePicker({ fullDate, onChange }: DateTimePickerProps) {
   const [selected, setSelected] = useState<Date>(fullDate || new Date());
   const [hour, setHour] = useState<string | null>('시');