feat: 버튼 storybook 추가

Author: sikkzz

.storybook/preview.module.scss

@@ -10,5 +10,13 @@
 .Story {
   height: 100%;
   padding: 2.5rem;
-  background-color: gray;
+  background-color: white;
+  color: black;
+}
+
+.InverseStory {
+  height: 100%;
+  padding: 2.5rem;
+  background-color: black;
+  color: white;
 }

.storybook/preview.tsx

@@ -18,6 +18,10 @@ const preview: Preview = {
         <div className={styles.Story}>
           <Story />
         </div>
+
+        <div className={styles.InverseStory}>
+          <Story />
+        </div>
       </div>
     ),
   ],

src/components/ui/Button/Button.module.scss

@@ -19,3 +19,21 @@
     @include buttonSecondary;
   }
 }
+
+.ButtonStory {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Wrapper {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    width: 300px;
+  }
+
+  .Text {
+    font-size: 1.125rem;
+    width: 120px;
+  }
+}

src/components/ui/Button/Button.stories.tsx

@@ -0,0 +1,43 @@
+import Button from "@/components/ui/Button/Button";
+import styles from "@/components/ui/Button/Button.module.scss";
+import type { ButtonProps } from "@/components/ui/Button/Button.types";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Example/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+
+export const Primary: StoryObj<ButtonProps> = {
+  args: {
+    text: "정보가 맞아요",
+    disabled: false,
+    variant: "primary",
+  },
+};
+
+export const VariantProps: StoryObj<typeof Button> = {
+  render: () => (
+    <div className={styles.ButtonStory}>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>primary</p>
+        <Button variant="primary" text="정보가 맞아요" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>secondary</p>
+        <Button variant="secondary" text="정보가 맞아요" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>disabled</p>
+        <Button variant="disabled" text="정보가 맞아요" />
+      </div>
+    </div>
+  ),
+};

src/components/ui/Icon/Icon.module.scss

@@ -0,0 +1,20 @@
+.IconStory {
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+
+  .Wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .InnerWrapper {
+      width: 1.5rem;
+      height: 1.5rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

src/components/ui/Icon/Icon.stories.tsx

@@ -1,6 +1,7 @@
 import Icon from "@/components/ui/Icon/Icon";
 import { ICONS } from "@/components/ui/Icon/Icon";
-import type { IconNameType } from "@/components/ui/Icon/Icon";
+import type { IconNameType, IconProps } from "@/components/ui/Icon/Icon";
+import styles from "@/components/ui/Icon/Icon.module.scss";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -10,34 +11,23 @@ const meta: Meta<typeof Icon> = {
   parameters: {
     layout: "centered",
   },
-  argTypes: {
-    name: {
-      control: {
-        type: "select",
-        options: ["camera", "close", "gallery", "leftArrow", "paste", "plus"],
-      },
-    },
-  },
+  tags: ["!autodocs"],
 };
 
 export default meta;
 
-export const AllIcons: StoryObj<typeof Icon> = {
+export const Primary: StoryObj<IconProps> = {
+  args: {
+    name: "camera",
+  },
+};
+
+export const AllIcons: StoryObj<IconProps> = {
   render: () => (
-    <div style={{ display: "flex", alignItems: "center", gap: "4rem" }}>
+    <div className={styles.IconStory}>
       {(Object.keys(ICONS) as IconNameType[]).map((iconName) => (
-        <div
-          style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}
-        >
-          <div
-            style={{
-              width: "1.5rem",
-              height: "1.5rem",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
+        <div className={styles.Wrapper}>
+          <div className={styles.InnerWrapper}>
             <Icon name={iconName} />
           </div>
           <p>{iconName}</p>

src/components/ui/Icon/Icon.tsx

@@ -7,6 +7,10 @@ import PlusIcon from "@/assets/svg/ic-plus.svg?react";
 
 export type IconNameType = "camera" | "close" | "gallery" | "leftArrow" | "paste" | "plus";
 
+export interface IconProps {
+  name: IconNameType;
+}
+
 export const ICONS = {
   camera: CameraIcon,
   close: CloseIcon,
@@ -17,7 +21,7 @@ export const ICONS = {
 };
 
 // 추후 사이즈, 컬러등 추가 가능
-const Icon = ({ name }: { name: IconNameType }) => {
+const Icon = ({ name }: IconProps) => {
   const SvgIcon = ICONS[name];
 
   return <SvgIcon />;

tsconfig.json

@@ -27,5 +27,5 @@
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
     "types": ["@testing-library/jest-dom", "vite-plugin-svgr/client", "vite/client"]
   },
-  "include": ["src", "src/types"]
+  "include": ["src", "src/types", ".storybook/**/*"]
 }