From a7ea2d3d670bdd05dc7502e228c454a228001cbf Mon Sep 17 00:00:00 2001 From: gominzip Date: Mon, 26 Aug 2024 23:33:00 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EA=B7=B8=EB=9E=98?= =?UTF-8?q?=EC=8A=A4=EB=B0=94,=20=EC=85=80=EB=A0=89=ED=8A=B8=EC=98=B5?= =?UTF-8?q?=EC=85=98=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#47)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/progressBar/ProgressBar.tsx | 2 +- .../home/homeRecentTales/HomeRecentTales.tsx | 2 - src/stories/Dropdown.stories.ts | 27 +++++--- src/stories/ProgressBar.stories.ts | 34 +++++++++ src/stories/SelectOptionList.stories.ts | 69 +++++++++++++++++++ src/styles/global.css | 2 +- 6 files changed, 123 insertions(+), 13 deletions(-) create mode 100644 src/stories/ProgressBar.stories.ts create mode 100644 src/stories/SelectOptionList.stories.ts diff --git a/src/components/common/progressBar/ProgressBar.tsx b/src/components/common/progressBar/ProgressBar.tsx index e0a601c..4aa9e82 100644 --- a/src/components/common/progressBar/ProgressBar.tsx +++ b/src/components/common/progressBar/ProgressBar.tsx @@ -1,6 +1,6 @@ import * as S from "./ProgressBar.styeld"; -interface ProgressBarProps { +export interface ProgressBarProps { percentage: number; } diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx index fc9e399..3c22fa2 100644 --- a/src/components/home/homeRecentTales/HomeRecentTales.tsx +++ b/src/components/home/homeRecentTales/HomeRecentTales.tsx @@ -1,11 +1,9 @@ import { CommonTitle } from "@components/common/common.styled"; import Card from "./Card"; import * as S from "./HomeRecentTales.styled"; -import { getToken } from "@apis/login"; import { getRecentTale } from "@apis/createTales"; const HomeRecentTales = () => { - getToken(); const response = getRecentTale(); console.log(response); const onClick = () => { diff --git a/src/stories/Dropdown.stories.ts b/src/stories/Dropdown.stories.ts index a9a1c2d..2cb6c2b 100644 --- a/src/stories/Dropdown.stories.ts +++ b/src/stories/Dropdown.stories.ts @@ -1,4 +1,3 @@ -// Dropdown.stories.tsx 또는 Dropdown.tsx 파일에서 import Dropdown from "@common/dropDown/Dropdown"; import { DropdownProps } from "@type/dropdown"; import { Meta, StoryObj } from "@storybook/react"; @@ -11,7 +10,6 @@ const meta: Meta = { parameters: { layout: "fullscreen", docs: { - description: { component: ` 사용자에게 옵션을 제공하고 선택된 옵션을 콜백 함수로 전달하는 드롭다운 컴포넌트입니다. 다양한 옵션을 제공하고, 선택된 항목을 나타내는 기능을 제공합니다. @@ -20,10 +18,10 @@ const meta: Meta = { inlineStories: true, }, }, - tags: ['autodocs'], + tags: ["autodocs"], argTypes: { selectList: { - description: "드롭다운 옵션 리스트 (필수)", + description: "드롭다운 옵션 리스트", control: "object", table: { type: { summary: "DropdownElement[]" }, @@ -31,7 +29,7 @@ const meta: Meta = { }, }, setter: { - description: "선택 변경을 처리할 콜백 함수 (필수)", + description: "선택 변경을 처리할 콜백 함수", action: "changed", table: { type: { summary: "function" }, @@ -42,14 +40,17 @@ const meta: Meta = { control: "text", table: { type: { summary: "string" }, - defaultValue: { summary: "100%" }, + defaultValue: { summary: "50%" }, }, }, }, args: { - selectList: [], + selectList: [ + { text: "옵션1", value: 1 }, + { text: "옵션2", value: 2 }, + ], setter: fn(), - width: "100%", + width: "70%", }, }; @@ -57,7 +58,15 @@ export default meta; type Story = StoryObj; -export const SelectNation: Story = { +export const SelecOption: Story = { + args: { + selectList: [ + { text: "옵션1", value: 1 }, + { text: "옵션2", value: 2 }, + ], + }, +}; +export const SelecOptionWithImg: Story = { args: { selectList: nationElements, }, diff --git a/src/stories/ProgressBar.stories.ts b/src/stories/ProgressBar.stories.ts new file mode 100644 index 0000000..465c937 --- /dev/null +++ b/src/stories/ProgressBar.stories.ts @@ -0,0 +1,34 @@ +import ProgressBar, { + ProgressBarProps, +} from "@components/common/progressBar/ProgressBar"; +import { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Components/ProgressBar", + component: ProgressBar, + parameters: { + layout: "fullscreen", + docs: { + description: { + component: ` + 진행도를 나타내는 Progress Bar 입니다. + `, + }, + inlineStories: true, + }, + }, + tags: ["autodocs"], + args: { + percentage: 50, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const SelectNation: Story = { + args: { + percentage: 50, + }, +}; diff --git a/src/stories/SelectOptionList.stories.ts b/src/stories/SelectOptionList.stories.ts new file mode 100644 index 0000000..9850d35 --- /dev/null +++ b/src/stories/SelectOptionList.stories.ts @@ -0,0 +1,69 @@ +import SelectOptionList from "@components/common/selectOption/SelectOptionList"; +import { Meta, StoryObj } from "@storybook/react"; +import { SelectListProps } from "@type/selectList"; +import { fn } from "@storybook/test"; + +const meta: Meta = { + title: "Components/SelectOptionList", + component: SelectOptionList, + parameters: { + layout: "fullscreen", + docs: { + description: { + component: ` + 리스트 중 하나의 옵션을 선택할 때 사용되는 컴포넌트 입니다. state에 따라 디자인이 변경됩니다. + `, + }, + inlineStories: true, + }, + }, + tags: ["autodocs"], + argTypes: { + selectList: { + description: "리스트 데이터", + control: "object", + table: { + type: { summary: "SelectListElement[]" }, + defaultValue: { summary: "[]" }, + }, + }, + setter: { + description: "선택 변경을 처리할 콜백 함수", + action: "changed", + table: { + type: { summary: "function" }, + }, + }, + width: { + description: "컴포넌트의 너비", + control: "text", + table: { + type: { summary: "string" }, + defaultValue: { summary: "50%" }, + }, + }, + }, + args: { + selectList: [ + { text: "옵션1", value: 1, state: "default" }, + { text: "옵션2", value: 2, state: "default" }, + ], + setter: fn(), + width: "70%", + }, +}; + +export default meta; + +type Story = StoryObj; + +export const SelectOption: Story = { + args: { + selectList: [ + { text: "옵션1", value: 1, state: "default" }, + { text: "옵션2", value: 2, state: "selected" }, + { text: "옵션3", value: 3, state: "correct" }, + { text: "옵션4", value: 4, state: "wrong" }, + ], + }, +}; diff --git a/src/styles/global.css b/src/styles/global.css index 8f1de73..fa17574 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -3,7 +3,7 @@ html { -webkit-text-size-adjust​: none; width: 100%; - height: fit-content; + height: 100%; margin: 0; font-size: 62.5%; overflow: scroll;