feat: 프로그래스바, 셀렉트옵션 스토리북 추가 (#47)

GlowTales · Aug 26, 2024 · a7ea2d3 · a7ea2d3
1 parent 07fd6a5
commit a7ea2d3
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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<DropdownProps> = {
   parameters: {
     layout: "fullscreen",
     docs: {
-
       description: {
         component: `
           사용자에게 옵션을 제공하고 선택된 옵션을 콜백 함수로 전달하는 드롭다운 컴포넌트입니다. 다양한 옵션을 제공하고, 선택된 항목을 나타내는 기능을 제공합니다.
@@ -20,18 +18,18 @@ const meta: Meta<DropdownProps> = {
       inlineStories: true,
     },
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     selectList: {
-      description: "드롭다운 옵션 리스트 (필수)",
+      description: "드롭다운 옵션 리스트",
       control: "object",
       table: {
         type: { summary: "DropdownElement[]" },
         defaultValue: { summary: "[]" },
       },
     },
     setter: {
-      description: "선택 변경을 처리할 콜백 함수 (필수)",
+      description: "선택 변경을 처리할 콜백 함수",
       action: "changed",
       table: {
         type: { summary: "function" },
@@ -42,22 +40,33 @@ const meta: Meta<DropdownProps> = {
       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%",
   },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-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
@@ -0,0 +1,34 @@
+import ProgressBar, {
+  ProgressBarProps,
+} from "@components/common/progressBar/ProgressBar";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<ProgressBarProps> = {
+  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<typeof meta>;
+
+export const SelectNation: Story = {
+  args: {
+    percentage: 50,
+  },
+};
diff --git a/src/stories/SelectOptionList.stories.ts 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<SelectListProps> = {
+  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<typeof meta>;
+
+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
@@ -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;