스토리북 및 크로마틱 작업 (#57)

* chore: 스토리북 기본 세팅

* chore: 절대 경로 변경

* chore: chromatic 설치

* chore: chromatic ci 세팅

* fix: workflow 오타 수정

* chore: push 마다 배포하도록 변경

* chore: turbosnap 로직 제거

.eslintrc.json

@@ -11,7 +11,8 @@
     "plugin:tailwindcss/recommended",
     "plugin:react/recommended",
     "prettier",
-    "plugin:@tanstack/eslint-plugin-query/recommended"
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

.github/workflows/chromatic.yml

@@ -0,0 +1,23 @@
+name: 'Chromatic'
+
+on:
+  push:
+    branches-ignore:
+      - main
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/deploy.yml

@@ -6,7 +6,7 @@ env:
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
 
 permissions:
   contents: read

.gitignore

@@ -34,3 +34,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# chromatic
+build-storybook.log
+chromatic.log
+chromatic-build-*.xml
+chromatic-diagnostics.json

.storybook/main.ts

@@ -0,0 +1,28 @@
+import path from 'path';
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../app/**/*.mdx', '../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../'),
+      };
+    }
+
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react';
+import '../app/globals.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+export default preview;

app/Button.stories.tsx

@@ -0,0 +1,26 @@
+import Button from '@/components/common/buttons/button';
+import type { Meta, StoryObj } from '@storybook/react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: 'color' },
+  // },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  render: () => <Button>버튼</Button>,
+};