refactor: 컴포넌트들 스토리북 수정

sprint-team3 · Apr 17, 2024 · 3be8f2e · 3be8f2e
1 parent e974629
commit 3be8f2e
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 55 deletions.
diff --git a/src/components/AlarmList/index.tsx b/src/components/AlarmList/index.tsx
@@ -2,8 +2,7 @@ import { RefObject } from 'react';
 
 import classNames from 'classnames/bind';
 
-import AlarmCard from '@/components/cards/AlarmCard';
-import EmptyAlarm from '@/components/cards/EmptyAlarmCard';
+import { AlarmCard, EmptyAlarmCard } from '../cards';
 
 import styles from './AlarmList.module.scss';
 
@@ -57,7 +56,7 @@ const AlarmList = ({
             ))}
           </ul>
         ) : (
-          <EmptyAlarm emptyAlarmText={emptyAlarmText} />
+          <EmptyAlarmCard emptyAlarmText={emptyAlarmText} />
         )}
       </div>
     </div>

diff --git a/src/stories/Alarm.stories.ts b/src/stories/Alarm.stories.ts
@@ -1,9 +1,9 @@
-import Alarm from '@/components/header/Alarm';
+import Alarm from '@/components/Alarm';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/Alarm',
+  title: 'Alarm/Alarm',
   component: Alarm,
 } satisfies Meta<typeof Alarm>;
 

diff --git a/src/stories/AlarmCard.stories.ts b/src/stories/AlarmCard.stories.ts
@@ -1,9 +1,9 @@
-import AlarmCard from '@/components/header/AlarmCard';
+import { AlarmCard } from '@/components/cards';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/AlarmList/AlarmCard',
+  title: 'Cards/AlarmCard',
   component: AlarmCard,
 } satisfies Meta<typeof AlarmCard>;
 
@@ -13,8 +13,8 @@ type Story = StoryObj<typeof meta>;
 export const Example: Story = {
   args: {
     id: 0,
-    content: '함께하면 즐거운 스트릿 댄스(2024-04-16 15:00~18:00) 예약이 승인되었어요.',
-    createdAt: '30분 전',
+    content: 'message',
+    createdAt: '1 hour age',
     onClick: () => {},
   },
 };
diff --git a/src/stories/AlarmList.stories.ts b/src/stories/AlarmList.stories.ts
@@ -1,9 +1,9 @@
-import AlarmList from '@/components/header/AlarmList';
+import AlarmList from '@/components/AlarmList';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/AlarmList',
+  title: 'AlarmList/AlarmList',
   component: AlarmList,
 } satisfies Meta<typeof AlarmList>;
 
@@ -12,11 +12,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
+    alarmText: 'Alarm',
+    deleteAllText: 'Delete All',
     notifications: [
       {
         id: 0,
-        content: '함께하면 즐거운 스트릿 댄스(2024-04-16 15:00~18:00) 예약이 승인되었어요.',
-        createdAt: '30분 전',
+        content: 'messag ',
+        createdAt: '1 hour age',
       },
     ],
     totalCount: 1,

diff --git a/src/stories/DrawerMenu.stories.ts b/src/stories/DrawerMenu.stories.ts
@@ -1,9 +1,9 @@
-import DrawerMenu from '@/components/header/DrawerMenu';
+import DrawerMenu from '@/components/DrawerMenu';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/DrawerMenu',
+  title: 'DrawerMenu/DrawerMenu',
   component: DrawerMenu,
 } satisfies Meta<typeof DrawerMenu>;
 
@@ -12,7 +12,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-    menuList: ['LEAGUE OF LEGENDS', 'BATTLEGROUNDS', 'OVERWATCH 2', 'MINECRAFT'],
+    menuList: [
+      { menu: 'LEAGUE OF LEGENDS', path: 'lol' },
+      { menu: 'BATTLEGROUNDS', path: 'bg' },
+      { menu: 'OVERWATCH 2', path: 'ow' },
+      { menu: 'MINECRAFT', path: 'mc' },
+    ],
     onClick: () => {},
   },
 };
diff --git a/src/stories/EmptyAlarm.stories.ts b/src/stories/EmptyAlarm.stories.ts
diff --git a/src/stories/EmptyAlarmCard.stories.ts b/src/stories/EmptyAlarmCard.stories.ts
@@ -0,0 +1,17 @@
+import { EmptyAlarmCard } from '@/components/cards';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Cards/EmptyAlarmCard',
+  component: EmptyAlarmCard,
+} satisfies Meta<typeof EmptyAlarmCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    emptyAlarmText: 'There is no alarm',
+  },
+};
diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts
@@ -1,9 +1,9 @@
-import Header from '@/components/header/Header';
+import Header from '@/components/Header';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/Header',
+  title: 'Header/Header',
   component: Header,
 } satisfies Meta<typeof Header>;
 
@@ -13,10 +13,15 @@ type Story = StoryObj<typeof meta>;
 export const Example: Story = {
   args: {
     path: '',
-    logoName: 'GGF',
-    menuList: ['LEAGUE OF LEGENDS', 'BATTLEGROUNDS', 'OVERWATCH 2', 'MINECRAFT'],
-    activatedGame: 0,
-    handleActivatedGame: () => {},
+    logoName: 'LOGO',
+    menuList: [
+      { menu: 'MENU 1', path: 'menu1' },
+      { menu: 'MENU 2', path: 'menu2' },
+      { menu: 'MENU 3', path: 'menu3' },
+      { menu: 'MENU 4', path: 'menu4' },
+    ],
+    activatedMenu: 0,
+    handleActivatedMenu: () => {},
     handleOpenDrawerMenu: () => {},
   },
 };
diff --git a/src/stories/HeaderProfile.stories.ts b/src/stories/HeaderProfile.stories.ts
@@ -1,9 +1,9 @@
-import HeaderProfile from '@/components/header/HeaderProfile';
+import HeaderProfile from '@/components/HeaderProfile';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/HeaderProfile',
+  title: 'HeaderProfile/HeaderProfile',
   component: HeaderProfile,
 } satisfies Meta<typeof HeaderProfile>;
 
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-    nickname: 'BattleMan',
+    nickname: 'UserName',
     profileImageUrl: '',
     isActivated: false,
     onClick: () => {},

diff --git a/src/stories/HeaderSigninButton.stories.ts b/src/stories/HeaderSigninButton.stories.ts
@@ -1,9 +1,9 @@
-import { HeaderSigninButton } from '@/components/header/buttons';
+import { HeaderSigninButton } from '@/components/buttons';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/buttons/HeaderSigninButton',
+  title: 'buttons/HeaderSigninButton',
   component: HeaderSigninButton,
 } satisfies Meta<typeof HeaderSigninButton>;
 
@@ -12,6 +12,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
+    text: 'SIGNIN',
     path: '',
   },
 };
diff --git a/src/stories/HeaderSignupButton.stories.ts b/src/stories/HeaderSignupButton.stories.ts
@@ -1,9 +1,9 @@
-import { HeaderSignupButton } from '@/components/header/buttons';
+import { HeaderSignupButton } from '@/components/buttons';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/buttons/HeaderSignupButton',
+  title: 'buttons/HeaderSignupButton',
   component: HeaderSignupButton,
 } satisfies Meta<typeof HeaderSignupButton>;
 
@@ -12,6 +12,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
+    text: 'SIGNUP',
     path: '',
   },
 };
diff --git a/src/stories/Menu.stories.ts b/src/stories/Menu.stories.ts
@@ -1,9 +1,9 @@
-import Menu from '@/components/header/Menu';
+import Menu from '@/components/Menu';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/Menu',
+  title: 'Menu/Menu',
   component: Menu,
 } satisfies Meta<typeof Menu>;
 
@@ -12,8 +12,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
-    menuList: ['LEAGUE OF LEGENDS', 'BATTLEGROUNDS', 'OVERWATCH 2', 'MINECRAFT'],
-    activatedGame: 0,
-    handleActivatedGame: () => {},
+    menuList: [
+      { menu: 'MENU 1', path: 'menu1' },
+      { menu: 'MENU 2', path: 'menu2' },
+      { menu: 'MENU 3', path: 'menu3' },
+      { menu: 'MENU 4', path: 'menu4' },
+    ],
+    activatedMenu: 0,
+    handleActivatedMenu: () => {},
   },
 };
diff --git a/src/stories/UserMenu.stories.ts b/src/stories/UserMenu.stories.ts
@@ -1,9 +1,9 @@
-import UserMenu from '@/components/header/UserMenu';
+import UserMenu from '@/components/UserMenu';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'header/UserMenu',
+  title: 'UserMenu/UserMenu',
   component: UserMenu,
 } satisfies Meta<typeof UserMenu>;
 
@@ -13,8 +13,10 @@ type Story = StoryObj<typeof meta>;
 export const Example: Story = {
   args: {
     profileImageUrl: '',
-    nickname: 'BattleMan',
-    email: 'BattleMan@gmail.com',
+    nickname: 'username',
+    email: 'user@email.com',
+    mypageText: 'My Page',
+    logoutText: 'Logout',
     accountPath: '',
     mypagePath: '',
     handleCloseUserMenu: () => {},