storybook ci 추가

.env.example

@@ -0,0 +1 @@
+CHROMATIC_TOKEN=string

.github/workflows/chromatic.yml

@@ -0,0 +1,57 @@
+name: 'Chromatic Deployment'
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  chromatic-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install Dependency
+        run: pnpm install -no-frozen-lockfile
+
+      - name: Publish Chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create comment PR
+        uses: thollander/actions-comment-pull-request@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}'

.gitignore

@@ -31,6 +31,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

package.json

@@ -12,7 +12,8 @@
     "test:coverage": "vitest --coverage",
     "prepare": "husky install",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "bash scripts/chromatic_publish.sh"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -48,6 +49,7 @@
     "@vitest/browser": "^1.0.1",
     "@vitest/coverage-istanbul": "^1.0.1",
     "@vitest/coverage-v8": "^1.0.1",
+    "chromatic": "^10.1.0",
     "eslint": "^8",
     "eslint-config-next": "^14.0.3",
     "eslint-config-prettier": "^9.1.0",

scripts/chromatic_publish.sh

@@ -0,0 +1,2 @@
+CHROMATIC_TOKEN=$(grep CHROMATIC_TOKEN .env | cut -d "=" -f2)
+npx chromatic --project-token=$CHROMATIC_TOKEN

src/components/common/BottomSheet/BottomSheet.stories.tsx

@@ -32,6 +32,7 @@ export const Default: StoryObj<BottomSheet> = {
           onClick={() => {
             setIsShowing(true);
           }}
+          style={{ color: 'white' }}
         >
           Open!
         </button>