diff --git a/app/store/querys/result.ts b/app/store/querys/result.ts
index 3895bd38..82e1e09d 100644
--- 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
index 7e3579bb..65365c44 100644
--- 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) => ],
} as Meta;
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
index 2b5d6586..cca554ba 100644
--- 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
index e4b95b36..246f3800 100644
--- 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 ;
+ return (
+
+ );
}