chore: storybook 배포 action 설정

Author: sikkzz

.github/workflows/storybook.yml

@@ -0,0 +1,74 @@
+name: Chromatic Deployment
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  chromatic-deployment:
+    name: Chromatic
+    runs-on: ubuntu-latest
+    outputs:
+      statis: ${{ job.status }}
+      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
+      currnent_time: ${{ steps.current-time.outputs.formattedTime }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "yarn"
+
+      - name: Set yarn version
+        id: set-version
+        run: |
+          yarn set version 4.1.1
+          echo "YARN_VERSION=$(yarn -v)" >> $GITHUB_OUTPUT
+
+      - name: Yarn cache - PnP
+        uses: actions/cache@v4
+        with:
+          path: |
+            .yarn/cache
+            .pnp.*
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ steps.set-version.outputs.YARN_VERSION }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Publish to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          exitZeroOnChanges: true
+          autoAcceptChanges: true
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - name: Get current time
+        uses: josStorer/get-current-time@v2
+        id: current-time
+        with:
+          format: "YYYY년 MM월 DD일 HH시 mm분"
+          utcOffset: "+09:00"
+
+  github-storybook-comment:
+    runs-on: ubuntu-latest
+    needs: [chromatic-deployment]
+    steps:
+      - name: Comment PR
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          comment-tag: ${{ github.event.number }}-storybook
+          message: |
+
+            🧷 Storybook: ${{ needs.chromatic-deployment.outputs.storybook_url }}
+
+            ⏰ Update: ${{ needs.chromatic-deployment.outputs.currnent_time }}

.pnp.cjs

@@ -11,6 +11,7 @@
     "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
     "format": "prettier --write src/**/*.{ts,tsx,js,jsx}",
     "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "jest",
     "cypress": "cypress open"
   },
@@ -41,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "chromatic": "^11.25.1",
     "cypress": "^14.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.0.1",

.yarn/cache/chromatic-npm-11.25.1-1866a739e4-869939cf65.zip

@@ -3648,6 +3648,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:^11.25.1":
+  version: 11.25.1
+  resolution: "chromatic@npm:11.25.1"
+  peerDependencies:
+    "@chromatic-com/cypress": ^0.*.* || ^1.0.0
+    "@chromatic-com/playwright": ^0.*.* || ^1.0.0
+  peerDependenciesMeta:
+    "@chromatic-com/cypress":
+      optional: true
+    "@chromatic-com/playwright":
+      optional: true
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: 10c0/869939cf65ddc4c606ac982cbbaba63d3d6cbc8082e24f04f74ee6a5e3979cdec49e8fab2549f87e8cfa8127c15dbda1f86371306642bdabcb43ee9cff46ceae
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^3.2.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
@@ -7778,6 +7797,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^8.20.0"
     "@typescript-eslint/parser": "npm:^8.20.0"
     "@vitejs/plugin-react": "npm:^4.3.4"
+    chromatic: "npm:^11.25.1"
     classnames: "npm:^2.5.1"
     cypress: "npm:^14.0.0"
     eslint: "npm:^8.57.0"