Setup storybook

packages/web/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

packages/web/.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../stories/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

packages/web/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>

packages/web/.storybook/preview.ts

@@ -0,0 +1,46 @@
+import react from "React";
+
+import type { Preview } from "@storybook/react";
+
+import { ThemeProvider } from "styled-components";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+
+import colors from "../src/styles/themes/colors";
+import fonts from "../src/styles/themes/fonts";
+import responsive from "../src/styles/themes/responsive";
+import round from "../src/styles/themes/round";
+import shadow from "../src/styles/themes/shadow";
+import sizes from "../src/styles/themes/sizes";
+import zIndices from "../src/styles/themes/zIndices";
+
+const Theme = {
+  colors,
+  fonts,
+  responsive,
+  round,
+  shadow,
+  sizes,
+  zIndices,
+};
+
+// import fonts from '@sparcs-students/web/common/components/styles/themes.d.ts'
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    withThemeFromJSXProvider({
+      themes: {
+        Theme,
+      },
+      Provider: ThemeProvider,
+    }),
+  ],
+};
+
+export default preview;

packages/web/package.json

@@ -9,7 +9,9 @@
     "lint": "next lint",
     "build-start": "next build && next start",
     "mock:front": "pnpm dev",
-    "mock:back": "echo \"In mock:back mode, the 'web' package will not be run. Exiting.\""
+    "mock:back": "echo \"In mock:back mode, the 'web' package will not be run. Exiting.\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/cache": "11.11.0",
@@ -36,11 +38,23 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
     "@sparcs-students/interface": "workspace:*",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-onboarding": "^8.3.6",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/nextjs": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/test": "^8.3.6",
     "@tanstack/react-query-devtools": "^5.28.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "storybook": "^8.3.6",
     "typescript": "^5"
   },
   "packageManager": "[email protected]"

packages/web/stories/BreadCrumb.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import BreadCrumb from "@sparcs-students/web/common/components/BreadCrumb/index";
+
+const meta: Meta<typeof BreadCrumb> = {
+  title: "components/BreadCrumb",
+  component: BreadCrumb,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    items: {
+      control: { type: "object" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    items: [
+      {
+        name: "동아리 목록",
+        path: "/clubs",
+      },
+    ],
+    enableLast: false,
+  },
+};

packages/web/stories/Buttons/Button.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { fn } from "@storybook/test";
+
+import Button from "@sparcs-students/web/common/components/Buttons/Button";
+import Tag from "@sparcs-students/web/common/components/Tag";
+
+const meta: Meta<typeof Button> = {
+  title: "components/Buttons/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    type: {
+      control: { type: "select", options: ["default", "outlined", "disabled"] },
+      defaultValue: "default",
+    },
+    buttonText: {
+      control: "text",
+    },
+    iconType: {
+      control: "text",
+    },
+    children: {
+      control: false,
+    },
+  },
+  args: { onClick: fn() },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    type: "default",
+    buttonText: "Button",
+    children: <Tag color="GREEN">Example Tag Children</Tag>,
+  },
+};

packages/web/stories/Buttons/TextButton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { fn } from "@storybook/test";
+
+import TextButton from "@sparcs-students/web/common/components/Buttons/TextButton";
+
+const meta: Meta<typeof TextButton> = {
+  title: "components/Buttons/TextButton",
+  component: TextButton,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    text: {
+      control: "text",
+    },
+  },
+  args: { onClick: fn() },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    text: "Button",
+  },
+};