Storybook documentation/#110

app/(sub-page)/grade-upload/page.tsx

@@ -1,4 +1,4 @@
-import ContentContainer from '../../ui/view/atom/content-container';
+import ContentContainer from '../../ui/view/atom/content-container/content-container';
 import Manual from './components/manual';
 import UploadTakenLecture from '../../ui/lecture/upload-taken-lecture/upload-taken-lecture';
 

app/(sub-page)/my/page.tsx

@@ -2,14 +2,14 @@ import LectureSearch from '@/app/ui/lecture/lecture-search';
 import TakenLecture from '@/app/ui/lecture/taken-lecture';
 import UserInfoNavigator from '@/app/ui/user/user-info-navigator/user-info-navigator';
 import UserInfoNavigatorSkeleton from '@/app/ui/user/user-info-navigator/user-info-navigator.skeleton';
-import ContentContainer from '@/app/ui/view/atom/content-container';
 import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
 import MyResultContainer from './components/my-result-container';
 import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
 import Responsive from '@/app/ui/responsive';
-import TakenLectureSkeleton from '@/app/ui/lecture/taken-lecture/taken-lecture-skeleton';
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
+import TakenLectureSkeleton from '@/app/ui/lecture/taken-lecture/taken-lecture.skeleton';
 
 export default function MyPage() {
   return (

app/(sub-page)/result/page.tsx

@@ -1,10 +1,10 @@
 import UserInfoCard from '@/app/ui/user/user-info-card/user-info-card';
-import ContentContainer from '@/app/ui/view/atom/content-container';
 import ResultCategoryDetail from '@/app/ui/result/result-category-detail/result-category-detail';
 import { Suspense } from 'react';
 import UserInfoCardSkeleton from '@/app/ui/user/user-info-card/user-info-card.skeleton';
 import ResultCategory from '@/app/ui/result/result-category/result-category';
 import ResultCategorySkeleton from '@/app/ui/result/result-category/result-category.skeleton';
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 
 interface ResultPageProp {
   searchParams: { category: string };

app/(sub-page)/sign-in/page.tsx

@@ -1,5 +1,5 @@
-import ContentContainer from '@/app/ui/view/atom/content-container';
 import SignInForm from '@/app/ui/user/sign-in-form/sign-in-form';
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 
 export default function Page() {
   return (

app/(sub-page)/sign-up/components/sign-up-container.tsx

@@ -3,7 +3,6 @@ import useFunnel from '@/app/hooks/useFunnel';
 import SignUpForm from '@/app/ui/user/sign-up-form/sign-up-form';
 import SignUpTerm from './sign-up-terms';
 import SignUpSuccess from './sign-up-success';
-import ContentContainer from '@/app/ui/view/atom/content-container';
 
 export default function SignUpContainer() {
   const { Funnel, setStep } = useFunnel<'terms' | 'form' | 'success'>('terms');

app/(sub-page)/sign-up/page.tsx

@@ -1,7 +1,7 @@
-import ContentContainer from '@/app/ui/view/atom/content-container';
 import SignUpContainer from './components/sign-up-container';
 import { Suspense } from 'react';
-import LoadingSpinner from '@/app/ui/view/atom/loading-spinner';
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
+import LoadingSpinner from '@/app/ui/view/atom/loading-spinner/loading-spinner';
 
 // Refactor: fallback 스켈레톤으로 대체
 export default function Page() {

app/ui/lecture/lecture-search/index.tsx

@@ -6,7 +6,7 @@ import { Suspense } from 'react';
 import Image from 'next/image';
 import searchResultIcon from '@/public/assets/searchResultIcon.svg';
 import List from '../../view/molecule/list';
-import LoadingSpinner from '../../view/atom/loading-spinner';
+import LoadingSpinner from '../../view/atom/loading-spinner/loading-spinner';
 import LectureSearchResult from './lecture-search-result';
 
 const emptyDataRender = () => {

app/ui/user/user-info-navigator/user-info-navigator.tsx

@@ -1,8 +1,7 @@
-import { UserInfoResponseSchema } from '@/app/business/user/user.validation';
-import Avatar from '../../view/atom/avatar/avatar';
-import { auth, fetchUserInfo } from '@/app/business/user/user.query';
+import { auth } from '@/app/business/user/user.query';
 import { isInitUser } from '@/app/business/user/user.validation';
 import { InitUserInfoResponse, UserInfoResponse } from '@/app/business/user/user.type';
+import Avatar from '../../view/atom/avatar';
 
 function formatUserInfo(userInfo: InitUserInfoResponse | UserInfoResponse | undefined): {
   name: string;

app/ui/view/atom/button/button.stories.tsx

@@ -5,18 +5,6 @@ const meta = {
   title: 'ui/view/atom/Button',
   component: Button,
   tags: ['autodocs'],
-  parameters: {
-    componentSubtitle: 'Button은 사용자가 한 번의 탭으로 작업을 수행하고 선택할 수 있는 컴포넌트입니다.',
-    docs: {
-      description: {
-        component: `
-- variant값으로 "primary" | "secondary" |  "list" | "outlined" 중 하나를 선택할 수 있습니다.\n
-- size값으로 "lg" | "md" |  "sm" | "xs" | "default"  중 하나를 선택할 수 있습니다.\n
-- label 값으로 button 태그에 존재하는 text를 의미하고 필수적으로 할당해야 합니다
-`,
-      },
-    },
-  },
   argTypes: {
     variant: {
       description: 'Button의 Variant를 설정합니다.',
@@ -47,6 +35,17 @@ const meta = {
         defaultValue: { summary: '' },
       },
     },
+    loading: {
+      description: 'Button의 loading 여부를 설정합니다',
+      table: {
+        type: { summary: 'ButtonSize' },
+        defaultValue: { summary: 'md' },
+      },
+      options: [true, false],
+      control: {
+        type: 'radio',
+      },
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -81,7 +80,7 @@ export const ListActionButton: Story = {
   args: {
     size: 'default',
     variant: 'list',
-    label: '삭제',
+    label: '추가',
   },
 };
 

app/ui/view/atom/button/button.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/app/utils/shadcn/utils';
 import { cva } from 'class-variance-authority';
 import React from 'react';
-import LoadingSpinner from '../loading-spinner';
+import LoadingSpinner from '../loading-spinner/loading-spinner';
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'default' | 'xl';
 

app/ui/view/atom/content-container/content-cotainer.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ContentContainer from './content-container';
+import background from '../../../../../public/assets/background.png';
+import Image from 'next/image';
+
+const meta = {
+  title: 'ui/view/atom/ContentContainer',
+  component: ContentContainer,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: '페이지 레이아웃을 설정하는데 사용되는 컴포넌트입니다',
+  },
+  argTypes: {
+    children: {
+      description: 'container 내부 들어갈 컴포넌트를 설정합니다.',
+    },
+    size: {
+      description: 'ContentContainer의 size를 설정합니다.',
+      table: {
+        type: { summary: 'ContentContainerSize' },
+        defaultValue: { summary: 'md' },
+      },
+      options: ['lg', 'md'],
+      control: {
+        type: 'radio',
+      },
+    },
+    className: {
+      description: '추가적인 스타일을 설정합니다',
+    },
+  },
+} satisfies Meta<typeof ContentContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PrimaryButton: Story = {
+  args: {
+    size: 'md',
+    children: <div className="h-40"></div>,
+  },
+  render: (args) => (
+    <>
+      <Image src={background} width={800} height={288} className="w-full bg-white h-[18rem]" alt="background" />
+      <div className="flex justify-center">
+        <ContentContainer {...args} />
+      </div>
+    </>
+  ),
+};

app/ui/view/atom/label-container/label-container.stories.tsx

@@ -4,18 +4,18 @@ import LabelContainer from './label-container';
 import Button from '../button/button';
 
 const meta = {
-  title: 'ui/view/atom/Button',
+  title: 'ui/view/atom/LabelContainer',
   component: LabelContainer,
   tags: ['autodocs'],
   parameters: {
     componentSubtitle: 'LabelContainer는 기이수, 미이수 과목에 대한 정보를 나타낼 때 사용되는 view component입니다.',
-    docs: {
-      description: {
-        component: `
-- label 값으로 화면에 출력하고 싶은 text를 할당해야합니다. \n
-- right element 값으로 오른쪽에 렌더링 될 요소를 할당해야합니다. \n
-`,
-      },
+  },
+  argTypes: {
+    label: {
+      description: '화면에 출력하고 싶은 text를 설정합니다',
+    },
+    rightElement: {
+      description: '오른쪽에 렌더링 될 요소를 설정합니다',
     },
   },
 } satisfies Meta<typeof LabelContainer>;
@@ -27,8 +27,8 @@ export const TakenLectureLabel: StoryObj<typeof LabelContainer> = {
     label: '내 기이수 과목',
     rightElement: (
       <div className="flex gap-2">
-        <Button label="커스텀하기" variant="secondary" size="md" />
-        <Button label="업데이트" variant="secondary" size="md" />
+        <Button label="커스텀하기" variant="secondary" size="xs" />
+        <Button label="업데이트" variant="secondary" size="xs" />
       </div>
     ),
   },

app/ui/view/atom/loading-spinner/loading-spinner.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import LoadingSpinner from './loading-spinner';
+
+const meta = {
+  title: 'ui/view/atom/LoadingSpinner',
+  component: LoadingSpinner,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: 'LoadingSpinner는 로딩을 나타낼 때 사용되는 spinner 컴포넌트입니다',
+  },
+} satisfies Meta<typeof LoadingSpinner>;
+
+export default meta;
+
+export const Default: StoryObj<typeof LoadingSpinner> = {
+  render: () => (
+    <div className="w-100 h-100">
+      <LoadingSpinner
+        className={'animate-spin shrink-0 h-12 w-12 mr-1.5 -ml-1 fill-gray-400'}
+        style={{ transition: `width 150ms` }}
+      />
+    </div>
+  ),
+};