🔨 Refactor: 코드 재작성

.github/workflows/preview.yml

@@ -1,46 +1,84 @@
 name: Preview
 
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
 on:
   pull_request:
     branches: ['main']
 
 jobs:
-  ci:
+  build:
     runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pages: write
+      deployments: write
+      id-token: write
+      issues: write
+      pull-requests: write
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Node.js 및 NPM 설치
-        uses: ./.github/actions/install
+      - name: Node.js 설치
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+
+      - name: 의존성 캐싱
+        uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+
+      - name: 의존성 설치
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
 
-      - run: npm run build
+      - name: React 빌드
+        run: npm run build --if-present
 
   vercel-preview:
     runs-on: ubuntu-latest
-    env:
-      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
     steps:
       - uses: actions/checkout@v4
 
       - name: Vercel CLI 설치
         run: npm install --global vercel@latest
 
-      - name: Vercel 환경 변수 가져오기
+      - name: Pull Vercel Environment Information
         run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Project Artifacts 빌드하기
+      - name: Build Project Artifacts
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Vercel에 Project Artifacts 배포하기
-        id: deploy
-        run: |
-          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > vercel-output.txt
-          echo "preview_url=$(cat vercel-output.txt)" >> $GITHUB_OUTPUT
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+
+      - run: sleep 30
+
+      - name: vercel-preview-url
+        uses: zentered/[email protected]
+        id: vercel_preview_url
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        with:
+          vercel_project_id: ${{ env.VERCEL_PROJECT_ID }}
+    outputs:
+      vercel_url: ${{ steps.vercel_preview_url.outputs.preview_url }}
 
+  github-bot:
+    runs-on: ubuntu-latest
+    needs: [vercel-preview]
+    steps:
       - name: PR 코멘트로 Preview URL 남기기
         uses: thollander/actions-comment-pull-request@v2
         with:
           message: |
-            🎉 Pull Request 미리보기: ${{ steps.deploy.outputs.preview_url }}
+            🎉 Pull Request React 미리보기: https://${{ needs.vercel-preview.outputs.vercel_url }}