25 button component

src/App.tsx

@@ -54,7 +54,7 @@ function App() {
         </section>
         <section>
           <Heading level={2}>섹션 2</Heading>
-          <Button>클릭</Button>
+          <Button variant={"solid"}>클릭</Button>
         </section>
       </main>
       <footer>

src/components/Button/Button.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+import { vstack } from "../../../styled-system/patterns";
+
+export default {
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    children: "시작하기",
+    variant: "solid",
+  },
+} satisfies Meta<typeof Button>;
+
+export const Basic: StoryObj<typeof Button> = {};
+
+export const Variants: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} variant="solid">
+          솔리드 버튼
+        </Button>
+        <Button {...args} variant="outline">
+          아웃라인 버튼
+        </Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    variant: {
+      control: "radio",
+      options: ["solid", "outline"],
+    },
+  },
+};
+
+export const Tones: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} tone="neutral">
+          중립 색조
+        </Button>
+        <Button {...args} tone="accent">
+          강조 색조
+        </Button>
+        <Button {...args} tone="danger">
+          위험 색조
+        </Button>
+        <Button {...args} tone="warning">
+          경고 색조
+        </Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    tone: {
+      control: "radio",
+      options: ["neutral", "accent", "danger", "warning"],
+    },
+  },
+};
+
+export const Sizes: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} size="small">
+          작은 버튼
+        </Button>
+        <Button {...args} size="medium">
+          중간 버튼
+        </Button>
+        <Button {...args} size="large">
+          큰 버튼
+        </Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    size: {
+      control: "radio",
+      options: ["small", "medium", "large"],
+    },
+  },
+};
+
+export const Disabled: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} disabled>
+          비활성화 버튼
+        </Button>
+        <Button {...args}>활성화 버튼</Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+};

src/components/Button/Button.test.tsx

@@ -1,23 +1,108 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, it, vi } from "vitest";
+import { composeStories } from "@storybook/react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import * as stories from "./Button.stories";
 import { Button } from "./Button";
 
-describe("<Button>", () => {
-  it("renders a button with text", () => {
-    render(<Button>Click</Button>);
+const { Basic, Variants, Tones, Sizes, Disabled } = composeStories(stories);
 
-    expect(screen.getByRole("button")).toHaveTextContent("Click");
-  });
+test("renders the button with the correct text content", () => {
+  render(<Basic>테스트</Basic>);
 
-  it("calls onClick handler when clicked", async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
+  expect(screen.getByText("테스트")).toBeInTheDocument();
+});
+
+test("applies the correct variant styles", () => {
+  render(<Variants />);
+
+  expect(screen.getByText("솔리드 버튼")).toHaveClass("bg_bg");
+  expect(screen.getByText("아웃라인 버튼")).toHaveClass("bd_3px_solid");
+});
+
+test("applies the correct tone styles", () => {
+  render(<Tones />);
+
+  expect(screen.getByText("중립 색조")).toHaveClass("bg_bg");
+  expect(screen.getByText("강조 색조")).toHaveClass("bg_bg.accent");
+  expect(screen.getByText("위험 색조")).toHaveClass("bg_bg.danger");
+  expect(screen.getByText("경고 색조")).toHaveClass("bg_bg.warning");
+});
+
+test("applies the correct font size based on the size prop", () => {
+  render(<Sizes />);
+
+  expect(screen.getByText("작은 버튼")).toHaveClass("fs_sm");
+  expect(screen.getByText("중간 버튼")).toHaveClass("fs_md");
+  expect(screen.getByText("큰 버튼")).toHaveClass("fs_lg");
+});
+
+test("applies the correct disabled styles", () => {
+  render(<Disabled />);
 
-    render(<Button onClick={handleClick}>Click</Button>);
+  expect(screen.getByText("비활성화 버튼")).toBeDisabled();
+  expect(screen.getByText("활성화 버튼")).toBeEnabled();
+  expect(screen.getByText("비활성화 버튼")).toHaveClass("[&:disabled]:op_0.5");
+});
+
+test("renders a button with type='button' by default", () => {
+  render(<Basic>Default Button</Basic>);
+  const button = screen.getByText("Default Button");
+  expect(button).toHaveAttribute("type", "button");
+});
 
-    await user.click(screen.getByRole("button"));
+test("renders a button with type='button' by default", () => {
+  render(<Basic variant="solid">Default Button</Basic>);
+  const button = screen.getByText("Default Button");
+  expect(button).toHaveAttribute("type", "button");
+});
+
+test("renders a button with type='button' when specified", () => {
+  render(
+    <Button type="button" variant="solid">
+      Button Type Button
+    </Button>
+  );
+  const button = screen.getByText("Button Type Button");
+  expect(button).toHaveAttribute("type", "button");
+});
+
+test("renders a button with type='submit' when specified", () => {
+  render(
+    <form>
+      <Button type="submit" variant="solid">
+        Submit Type Button
+      </Button>
+    </form>
+  );
+  const button = screen.getByText("Submit Type Button");
+  expect(button).toHaveAttribute("type", "submit");
+});
+
+test("submits the form when type='submit' button is clicked", () => {
+  const handleSubmit = vi.fn();
+  render(
+    <form onSubmit={handleSubmit}>
+      <Button type="submit" variant="solid">
+        Submit Button
+      </Button>
+    </form>
+  );
+
+  const submitButton = screen.getByText("Submit Button");
+  fireEvent.click(submitButton);
+  expect(handleSubmit).toHaveBeenCalledTimes(1);
+});
 
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
+test("does not submit the form when type='button' button is clicked", () => {
+  const handleSubmit = vi.fn();
+  render(
+    <form onSubmit={handleSubmit}>
+      <Button type="button" variant="solid">
+        Button Type Button
+      </Button>
+    </form>
+  );
+  const buttonTypeButton = screen.getByText("Button Type Button");
+  fireEvent.click(buttonTypeButton);
+  expect(handleSubmit).toHaveBeenCalledTimes(0);
 });