Merge pull request #176 from CodeitFESI4-Team1/Fix/170/storybook-build-err

Fix/170/storybook build err

Author: minkyung5x5

src/app/(auth)/login/_components/login-form.stories.tsx

@@ -6,6 +6,16 @@ import LoginForm, { LoginFormValues } from './login-form';
 const meta: Meta = {
   title: 'auth/login-form',
   component: LoginForm,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      subtitle: '로그인시 사용되는 폼',
+      description: {
+        component:
+          '포커스 이동 또는 입력 1초 이후에 이메일 형식, 비밀번호 8자이상 유효성 검사가 실행됩니다.',
+      },
+    },
+  },
 };
 
 export default meta;

src/app/(auth)/signup/_components/signup-form.stories.tsx

@@ -6,6 +6,16 @@ import SignupForm, { SignupFormValues } from './signup-form';
 const meta: Meta = {
   title: 'auth/signup-form',
   component: SignupForm,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      subtitle: '회원가입시 사용되는 폼',
+      description: {
+        component:
+          '포커스 이동 또는 입력 1초 이후에 이메일 형식, 비밀번호 8자이상, 비밀번호 확인 유효성 검사가 실행됩니다.',
+      },
+    },
+  },
 };
 
 export default meta;

src/app/(crew)/_components/category/internal-category/internal-category.stories.tsx

@@ -7,16 +7,24 @@ const meta: Meta = {
   title: 'layout/category',
   component: InternalCategory,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      subtitle: '운동 종목별 카테고리',
+      description: {
+        component: '크루찾기 페이지에서 운동 대종목 선택에 따라, 세부 카테고리를 보여줍니다.',
+      },
+    },
+  },
   argTypes: {
     category: {
-      description: '세부 카테고리 이름 배열',
+      description: '카테고리 이름 배열',
     },
   },
 };
 
 export default meta;
 
-const Template: StoryFn<InternalCategoryProps> = function InternalCategoryStory() {
+const Template: StoryFn = function InternalCategoryStory() {
   const [subCategory, setSubCategory] = useState('running');
 
   return (
@@ -28,12 +36,5 @@ const Template: StoryFn<InternalCategoryProps> = function InternalCategoryStory(
   );
 };
 
-export const Category1 = Template.bind({});
-Category1.args = {
-  category: categoryData[0].items,
-};
-
-export const Category2 = Template.bind({});
-Category2.args = {
-  category: categoryData[1].items,
-};
+export const Default = Template.bind({});
+Default.args = {};

src/app/(crew)/favicon.ico

@@ -25,6 +25,15 @@ export default function MyGatheringHostedPage() {
     refetch();
   }, [selectedDate]);
 
+  if (hostedGatheringList?.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>
+      </section>
+    );
+  }
+
   return (
     <div>
       <div className="py-4 md:py-6">

src/app/(crew)/my-gathering/hosted/page.tsx

@@ -25,6 +25,15 @@ export default function MyGatheringJoinedPage() {
     refetch();
   }, [selectedDate]);
 
+  if (joinedGatheringList?.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>
+      </section>
+    );
+  }
+
   return (
     <div>
       <div className="py-4 md:py-6">

src/app/(crew)/my-gathering/joined/page.tsx

@@ -35,7 +35,7 @@ export default function NotFound() {
         xmlnsXlink="http://www.w3.org/1999/xlink"
         viewBox="0 24 150 28"
         preserveAspectRatio="none"
-        shape-rendering="auto"
+        shapeRendering="auto"
       >
         <defs>
           <path

src/app/not-found.tsx

@@ -7,8 +7,12 @@ const meta: Meta = {
   component: Header,
   tags: ['autodocs'],
   parameters: {
-    nextjs: {
-      appDirectory: true,
+    docs: {
+      subtitle: '화면 최상단에 위치한 헤더',
+      description: {
+        component:
+          "'로고, 크루찾기, 나의크루, 나의약속, 로그인/마이페이지/로그아웃'으로 구성되어 있으며 해당페이지로 연결됩니다.",
+      },
     },
   },
 };
@@ -33,7 +37,7 @@ Home.parameters = {
   },
   docs: {
     description: {
-      story: '사용자가 로그아웃 상태이며 기본 경로(/)에 있는 경우',
+      story: '사용자가 기본 경로(/)에 있는 경우',
     },
   },
 };
@@ -49,7 +53,7 @@ MyCrew.parameters = {
   },
   docs: {
     description: {
-      story: '사용자가 로그인 상태일 때 "나의 크루" 경로로 이동(+테스트용 버튼 클릭)',
+      story: '사용자가 "나의 크루" 경로에 있는 경우',
     },
   },
 };
@@ -65,7 +69,23 @@ MyGathering.parameters = {
   },
   docs: {
     description: {
-      story: '사용자가 로그인 상태일 때 "나의 모임" 경로로 이동(+테스트용 버튼 클릭)',
+      story: '사용자가 "나의 약속" 경로에 있는 경우',
+    },
+  },
+};
+
+// 3. 로그인 상태에서 나의 모임 (/my-favorite) 경로
+export const MyFavorite: StoryFn = Template.bind({});
+MyFavorite.parameters = {
+  nextjs: {
+    navigation: {
+      pathname: '/my-favorite',
+      query: {},
+    },
+  },
+  docs: {
+    description: {
+      story: '사용자가 "찜한 약속" 경로에 있는 경우',
     },
   },
 };

src/components/common/header/header.stories.tsx

@@ -5,6 +5,15 @@ import PasswordInput, { PasswordInputProps } from '.';
 const meta: Meta = {
   title: 'common/input/password-input',
   component: PasswordInput,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      subtitle: '비밀번호를 입력하는 input 컴포넌트',
+      description: {
+        component: 'placeholder, error 설정이 가능한 password-input 컴포넌트입니다.',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -17,15 +26,17 @@ const Template: StoryFn<PasswordInputProps> = function PasswordInputStory(
 
 export const Default = Template.bind({});
 Default.args = {
-  label: 'Password',
-  placeholder: 'Enter your password',
+  label: '비밀번호',
+  placeholder: '비밀번호를 입력해주세요',
   type: 'password',
+  inputClassNames: 'bg-gray-100',
 };
 
 export const WithError = Template.bind({});
 WithError.args = {
-  label: 'Password',
-  placeholder: 'Enter your password',
-  error: 'Password is too short',
+  label: '비밀번호',
+  placeholder: '비밀번호를 입력해주세요',
+  error: '비밀번호가 8자 이상이 되도록 해주세요.',
   type: 'password',
+  inputClassNames: 'bg-gray-100',
 };

src/components/common/input/password-input/password-input.stories.tsx

@@ -5,6 +5,15 @@ import TextInput, { TextInputProps } from '.';
 const meta: Meta = {
   title: 'common/input/text-input',
   component: TextInput,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      subtitle: '텍스트를 입력하는 input 컴포넌트',
+      description: {
+        component: 'label, placeholder, error 설정이 가능한 text-input 컴포넌트입니다.',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -29,7 +38,7 @@ WithLabel.args = {
 
 export const WithError = Template.bind({});
 WithError.args = {
-  error: 'Invalid email format',
+  error: '에러가 발생했습니다',
   type: 'text',
   inputClassNames: 'bg-gray-100',
 };