feat: add result-category-detail-content storybook docs

Myongji-Graduate · Jun 29, 2024 · f4de9fb · f4de9fb
1 parent 7aae837
commit f4de9fb
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
diff --git a/app/store/querys/result.ts b/app/store/querys/result.ts
@@ -26,7 +26,7 @@ export interface ResultCategoryDetailResponse {
   totalCredit: number;
   takenCredit: number;
   detailCategory: ResultCategoryDetailLecturesResponse[];
-  completed: boolean;
+  completed?: boolean;
 }
 
 export interface CreditResponse {

diff --git a/app/ui/result/result-category-detail-content/result-category-detail-content.stories.tsx b/app/ui/result/result-category-detail-content/result-category-detail-content.stories.tsx
@@ -1,14 +1,46 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent } from '@storybook/test';
-import { mockDatabase } from '@/app/mocks/db.mock';
 import ResultCategoryDetailContent from './result-category-detail-content';
 import { screen } from '@storybook/testing-library';
 import { delay } from 'msw';
+import { resultCategoryDetailInfo } from '@/app/mocks/data.mock';
 
 const meta = {
   title: 'ui/result/result-category-detail-content',
   component: ResultCategoryDetailContent,
-  args: { info: mockDatabase.getResultCategoryDetailInfo() },
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle:
+      '성적 카테고리에 대한 기이수/미이수 과목 정보를 노출할 때 사용되는 컴포넌트로 결과페이지에서 사용됩니다.',
+  },
+  argTypes: {
+    detailCategory: {
+      description: '성적 카테고리의 분류 및 이수여부에 대한 과목정보를 표시합니다.',
+    },
+    totalCredit: {
+      description: '카테고리의 총 학점을 표시합니다.',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+    takenCredit: {
+      description: '카테고리의 이수 학점을 표시합니다.',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+  args: {
+    takenCredit: 10,
+    totalCredit: 12,
+    detailCategory: resultCategoryDetailInfo.detailCategory,
+  },
   decorators: [(Story) => <Story />],
 } as Meta<typeof ResultCategoryDetailContent>;
 

diff --git a/app/ui/result/result-category-detail-content/result-category-detail-content.tsx b/app/ui/result/result-category-detail-content/result-category-detail-content.tsx
@@ -6,13 +6,7 @@ import { ResultCategoryDetailLectureToggle } from '../result-category-detail-lec
 import ResultCagegoryDetailLecture from '../result-category-detail-lecture/result-cagegory-detail-lecture';
 import { ResultCategoryDetailResponse } from '@/app/store/querys/result';
 
-interface ResultCategoryDetailContentProps {
-  info: ResultCategoryDetailResponse;
-}
-
-function ResultCategoryDetailContent({ info }: ResultCategoryDetailContentProps) {
-  const { takenCredit, totalCredit, detailCategory } = info;
-
+function ResultCategoryDetailContent({ takenCredit, totalCredit, detailCategory }: ResultCategoryDetailResponse) {
   const [isTakenLecture, setIsTakenLectrue] = useState(false);
 
   return (

diff --git a/app/ui/result/result-category-detail/result-category-detail.tsx b/app/ui/result/result-category-detail/result-category-detail.tsx
@@ -18,5 +18,11 @@ export default function ResultCategoryDetail({ category }: { category: string })
 function ResultCategoryDetailInfo({ category }: { category: string }) {
   const { data } = useFetchResultCategoryDetailInfo(category);
 
-  return <ResultCategoryDetailContent info={data} />;
+  return (
+    <ResultCategoryDetailContent
+      takenCredit={data.takenCredit}
+      totalCredit={data.totalCredit}
+      detailCategory={data.detailCategory}
+    />
+  );
 }