chore: Chromatic을 사용한 storybook 배포 및 GitHub Actions을 통한 자동 배포

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,53 @@
+name: 'Deploy Storybook with Chromatic'
+
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - '**.stories.tsx'
+  push:
+    branches: [main]
+    paths:
+      - '**.stories.tsx'
+
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 8
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}-storybook
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: pnpm install
+
+      - name: Publish to chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: build-storybook
+          onlyChanged: true
+
+      - name: comment PR
+        uses: thollander/actions-comment-pull-request@v1
+        if: ${{ github.event_name == 'pull_request' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.ACTIONS_TOKEN }}
+        with:
+          message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}'

.gitignore

@@ -37,4 +37,5 @@ next-env.d.ts
 
 ## Panda
 styled-system
-styled-system-studio
+styled-system-studio
+*storybook.log

.storybook/main.ts

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

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

components/atoms/Button/Button.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'components/atoms/button',
+  component: Button,
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  args: {
+    children: 'Button',
+  },
+};

components/atoms/Button/Button.tsx

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ ...props }, ref) => <button ref={ref} {...props} />,
+);
+
+Button.displayName = 'Button';

components/atoms/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

components/atoms/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package.json

@@ -9,7 +9,9 @@
     "start": "next start",
     "lint": "next lint",
     "format:fix": "prettier --write --ignore-path .gitignore .",
-    "postinstall": "husky install"
+    "postinstall": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.45.1",
@@ -19,22 +21,34 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@pandacss/dev": "^0.41.0",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-onboarding": "^8.2.1",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/nextjs": "^8.2.1",
+    "@storybook/react": "^8.2.1",
+    "@storybook/test": "^8.2.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
-    "eslint": "^8",
+    "chromatic": "^11.5.5",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.2",
+    "storybook": "^8.2.1",
     "typescript": "^5"
   },
   "lint-staged": {