Create storybook for TextInput, Card, Modal

packages/web/.storybook/main.ts

@@ -13,7 +13,7 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: true,
+    autodocs: true, // CHACHA: 요거 몇 개는 docs에서 꺠지는 컴포넌트가 있어서 (예: Modal) default false로 하는 거 어떤가요?
   },
 };
 export default config;

packages/web/package.json

@@ -75,6 +75,7 @@
     "@storybook/addon-links": "^8.4.5",
     "@storybook/blocks": "^8.4.5",
     "@storybook/nextjs": "^8.4.5",
+    "@storybook/preview-api": "^8.4.6",
     "@storybook/react": "^8.4.5",
     "@tanstack/react-query-devtools": "^5.28.4",
     "@types/node": "^20",

packages/web/src/common/components/Card.tsx

@@ -3,7 +3,7 @@
 import isPropValid from "@emotion/is-prop-valid";
 import styled from "styled-components";
 
-interface CardProps {
+export interface CardProps {
   outline?: boolean;
   padding?: string;
   gap?: number;

packages/web/src/stories/Card.stories.tsx

@@ -0,0 +1,31 @@
+import Card, { CardProps } from "../common/components/Card";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Primary: Story = {
+  args: {
+    outline: true,
+    padding: "8px",
+    gap: 20,
+  },
+  argTypes: {
+    outline: { control: "boolean" },
+    gap: { control: "number" },
+  },
+  render: (props: CardProps) => (
+    <Card {...props}>
+      <div>SPARCS Clubs</div>
+    </Card>
+  ),
+};

packages/web/src/stories/Modal.stories.tsx

@@ -0,0 +1,40 @@
+import { action } from "@storybook/addon-actions";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import Modal from "../common/components/Modal";
+import CancellableModalContent from "../common/components/Modal/CancellableModalContent";
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  parameters: {
+    layout: "centered",
+    docs: {
+      autodocs: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Primary: Story = {
+  args: {
+    isOpen: true,
+  },
+  render: function Render(args) {
+    return (
+      <Modal {...args}>
+        <CancellableModalContent
+          onConfirm={action("onConfirm")}
+          onClose={action("onClose")}
+        >
+          공고를 삭제하면 복구할 수 없습니다.
+          <br />
+          ㄱㅊ?
+        </CancellableModalContent>
+      </Modal>
+    );
+  },
+};

packages/web/src/stories/TextInput.stories.tsx

@@ -0,0 +1,54 @@
+import { useArgs } from "@storybook/preview-api";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import TextInput from "../common/components/Forms/TextInput";
+
+const meta: Meta<typeof TextInput> = {
+  component: TextInput,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextInput>;
+
+export const Primary: Story = {
+  args: {
+    label: "TextInput",
+    placeholder: "입력하세요.",
+    errorMessage: "",
+    area: false,
+    disabled: false,
+    value: "",
+  },
+  argTypes: {
+    value: { control: "text" },
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    errorMessage: { control: "text" },
+    area: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  render: function Render(args) {
+    const [{ value }, updateArgs] = useArgs<{ value: string }>();
+
+    const handleChange = (newValue: string) => {
+      updateArgs({ value: newValue });
+    };
+
+    return (
+      <TextInput
+        label={args.label}
+        placeholder={args.placeholder}
+        errorMessage={args.errorMessage}
+        area={args.area}
+        disabled={args.disabled}
+        value={value}
+        handleChange={handleChange}
+      />
+    );
+  },
+};