From e49bb1704929c7acc2a3152ffb300305fea0d4ab Mon Sep 17 00:00:00 2001
From: hynseok <wefwef12e@naver.com>
Date: Tue, 16 Jul 2024 21:44:30 +0900
Subject: [PATCH] feat: chromatic setup

---
 .github/workflows/storybook.yml | 41 +++++++++++++++++++++++++++++++++
 package-lock.json               |  1 +
 package.json                    |  4 +++-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/storybook.yml

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
new file mode 100644
index 00000000..9afd2212
--- /dev/null
+++ b/.github/workflows/storybook.yml
@@ -0,0 +1,41 @@
+name: Storybook Deployment
+run-name: ${{ github.actor }}'s Storybook Deployment
+on:
+  pull_request:
+    branches:
+      - develop
+jobs:
+  storybook:
+    runs-on: ubuntu-20.04
+    outputs:
+      status: ${{ job.status }}
+    steps:
+      - 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('**/package-lock.json') }}-storybook
+
+      - name: depedency install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: publish to chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.ACTION_TOKEN }}
+
+      - name: comment PR
+        uses: thollander/actions-comment-pull-request@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.ACTION_TOKEN }}
+        with:
+          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"
diff --git a/package-lock.json b/package-lock.json
index 700c4683..d856d149 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "@types/react-dom": "^18",
         "@typescript-eslint/eslint-plugin": "^7.16.0",
         "@typescript-eslint/parser": "^7.16.0",
+        "chromatic": "^11.5.5",
         "eslint": "^8.57.0",
         "eslint-config-next": "^14.2.4",
         "eslint-config-prettier": "^9.1.0",
diff --git a/package.json b/package.json
index de97016a..9bce4cf9 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "jest"
+    "test": "jest",
+    "chromatic": "npx chromatic --project-token=chpt_4df1876da1b9766"
   },
   "dependencies": {
     "@mantine/core": "^7.11.1",
@@ -44,6 +45,7 @@
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
+    "chromatic": "^11.5.5",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",