feat: input storybook 추가

Author: sikkzz

src/components/Home/Home.tsx

@@ -1,13 +1,8 @@
-import { useState } from "react";
-
 import styles from "@/components/Home/Home.module.scss";
 import IconButton from "@/components/ui/IconButton/IconButton";
-import Input from "@/components/ui/Input/Input";
 import Text from "@/components/ui/Text/Text";
 
 const Home = () => {
-  const [value, setValue] = useState("");
-
   return (
     <div className={styles.Home}>
       <div className={styles.HomeTitle}>
@@ -18,12 +13,6 @@ const Home = () => {
           손쉬운 음식 리뷰 작성
         </Text>
       </div>
-      <Input
-        type="text"
-        placeholder="가게명을 입력해주세요"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
       <div className={styles.HomeImage}>
         <img src="/src/assets/img/img-graphic-logo.png" alt="mainLogo" />
       </div>

src/components/ui/Input/Input.module.scss

@@ -10,7 +10,6 @@
   display: flex;
   align-items: center;
   gap: 0.625rem;
-  z-index: 1;
 
   &.style-primary {
     background-color: var(--color-white);
@@ -48,3 +47,22 @@
     line-height: 1.3125rem;
   }
 }
+
+.InputStory {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Wrapper {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+  }
+
+  .Text {
+    font-size: 1.125rem;
+    width: 120px;
+  }
+}

src/components/ui/Input/Input.stories.tsx

@@ -0,0 +1,43 @@
+import Input from "@/components/ui/Input/Input";
+import styles from "@/components/ui/Input/Input.module.scss";
+import type { InputProps } from "@/components/ui/Input/Input.types";
+
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+
+const meta: Meta<typeof Input> = {
+  title: "Example/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+
+const Template: StoryFn<InputProps> = ({ ...props }) => (
+  <Input type="text" placeholder="가게명을 입력해주세요" {...props} />
+);
+
+export const Primary: StoryObj<InputProps> = {
+  render: Template,
+  args: {
+    type: "text",
+    variant: "primary",
+  },
+};
+
+export const VariantProps: StoryObj<typeof Input> = {
+  render: () => (
+    <div className={styles.InputStory}>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>primary</p>
+        <Input variant="primary" type="text" placeholder="가게명을 입력해주세요" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>secondary</p>
+        <Input variant="secondary" type="text" placeholder="가게명을 입력해주세요" />
+      </div>
+    </div>
+  ),
+};