Merge pull request #11 from dnd-side-project/feat/storybook-setup

스토리북 및 크로마틱 자동 배포 워크플로우 추가 셋업

.github/CODEOWNER

@@ -0,0 +1 @@
+* @froggy1014

.github/workflows/_build.yaml

@@ -23,11 +23,9 @@ jobs:
         with:
           node-version: ${{ inputs.NODE_VERSION }}
           cache: "pnpm"
-          cache-dependency-path: '**/pnpm-lock.yaml'
+          cache-dependency-path: "**/pnpm-lock.yaml"
 
       - name: Install dependencies
-        run: |
-          pnpm install
+        run: pnpm install
       - name: build
-        run: |
-          pnpm run build
+        run: pnpm run build

.github/workflows/chromatic.yml

@@ -0,0 +1,57 @@
+# .github/workflows/chromatic.yml
+name: "Chromatic Deployment"
+run-name: Storybook deployment by ${{ github.actor }}
+
+on:
+  pull_request:
+    branches:
+      - develop
+    paths:
+      - "**.stories.tsx"
+
+jobs:
+  chromatic:
+    name: Run Chromatic Deployment
+    # Operating System
+    runs-on: ubuntu-latest
+    outputs:
+      status: ${{ job.status }}
+
+    # Job steps
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        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.GITHUB_TOKEN }}
+        with:
+          message: "💅 ## storybook-URL - ${{ steps.chromatic.outputs.storybookUrl }}"

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.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: {},
+  },
+  staticDirs: ["../public"],
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/styles/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -9,10 +9,13 @@
     "lint": "next lint",
     "prepare": "husky",
     "cz": "cz",
-    "formatting": "prettier --write '**/*.{ts,tsx}' && eslint --fix ."
+    "formatting": "prettier --write '**/*.{ts,tsx}' && eslint --fix .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/themes": "^3.1.1",
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
     "clsx": "^2.1.1",
@@ -26,6 +29,15 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-onboarding": "^8.2.6",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/nextjs": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/test": "^8.2.6",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/eslint-plugin-query": "^5.50.1",
     "@types/node": "^20",
@@ -35,6 +47,7 @@
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.4.19",
+    "chromatic": "^11.5.6",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^7.1.0",
     "eslint": "^8.57.0",
@@ -44,12 +57,14 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "eslint-plugin-unused-imports": "^3.2.0",
     "husky": "^9.0.11",
     "jiti": "^1.21.6",
     "postcss": "^8",
     "prettier": "^3.3.2",
+    "storybook": "^8.2.6",
     "tailwindcss": "^3.4.6",
     "typescript": "^5"
   },