Chore: Refactor github action workflow storybook.yml

.github/workflows/storybook.yml

@@ -13,48 +13,34 @@ permissions:
   pull-requests: write
 
 jobs:
-  storybook-build:
+  chromatic:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '18'
-
-      - name: Cache Dependencies
-        uses: actions/cache@v3
+      - name: cache dependencies
+        id: cache
+        uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-storybook
 
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build Storybook
-        run: npm run build-storybook
+      - name: depedency install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
 
       - name: Publish to Chromatic
         id: chromatic
-        env:
-          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-        run: |
-          npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN | tee chromatic-output.txt
-
-      - name: Extract Chromatic URL
-        id: extract_url
-        run: |
-          url=$(grep -oP 'https://[^ ]+-czwwzirjla.chromatic.com/' chromatic-output.txt | head -n 1)
-          echo "storybookUrl=$url" >> $GITHUB_ENV
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
-      - name: Comment on PR
+      - name: comment PR
         uses: thollander/actions-comment-pull-request@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          message: 'storybook 확인좀용: ${{ env.storybookUrl }}'
+          message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}'