feat(actions): Add netlify preview (#229)

* feat(actions): Add netlify preview

* feat(actions): Add preview

.github/actions/netlify-preview/action.yml

@@ -0,0 +1,63 @@
+name: netlify-preview
+
+inputs:
+  NETLIFY_SITE_ID:
+    required: true
+  NETLIFY_API_TOKEN:
+    required: true
+  HEAD_COMMIT:
+    required: true
+
+runs:
+  using: composite
+
+  steps:
+    # https://cli.netlify.com/
+    - name: Netlify deploy
+      id: netlify-deploy
+      shell: bash
+      run: |
+        pnpm nf deploy \
+          --dir out \
+          --site ${{ inputs.NETLIFY_SITE_ID }} \
+          --auth ${{ inputs.NETLIFY_API_TOKEN }} \
+          --json \
+          > deploy_output.json
+
+    - name: Generate URL Preview
+      id: url-preview
+      shell: bash
+      # pnpm 샌드박스 로그가 json 파일에 상단에 추가되는 버그가 있음.
+      # 로그 삭제후 5번째 라인부터 JSON 파일 재생성
+      run: |
+        tail -n +5 deploy_output.json > parsed_output.json
+        echo $(cat parsed_output.json)
+        NETLIFY_PREVIEW_URL=$(jq -r '.deploy_url' parsed_output.json)
+        echo "NETLIFY_PREVIEW_URL=$NETLIFY_PREVIEW_URL" >> "$GITHUB_OUTPUT"
+
+    - name: Comment URL Preview on PR
+      uses: actions/github-script@v7
+      env:
+        NETLIFY_PREVIEW_URL: ${{ steps.url-preview.outputs.NETLIFY_PREVIEW_URL }}
+        HEAD_COMMIT: ${{ inputs.HEAD_COMMIT }}
+      with:
+        script: |
+          async function comment(){
+            const result = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              commit_sha: process.env.HEAD_COMMIT,
+            });
+            const issueNumber = result.data[0]?.number;
+            if (issueNumber) {
+              await github.rest.issues.createComment({
+                issue_number: issueNumber,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: `Preview URL: ${process.env.NETLIFY_PREVIEW_URL}`
+              });
+            } else {
+              console.log('No PR found for commit ' + process.env.HEAD_COMMIT);
+            }
+          }
+          comment();

.github/workflows/code.yml

@@ -5,6 +5,8 @@ on:
     branches: [main]
   pull_request:
     branches: [main]
+permissions:
+  pull-requests: write
 
 jobs:
   lint:
@@ -28,3 +30,22 @@ jobs:
 
       - name: 🏗 Build and Export
         uses: ./.github/actions/nextjs-build-export
+
+  preview:
+    runs-on: macos-latest
+    needs: build-export
+    steps:
+      - uses: actions/checkout@v4
+
+      # 캐싱 된 값을 사용
+      - name: 🌱 Install pnpm
+        uses: ./.github/actions/pnpm-install
+      - name: 🏗 Build and Export
+        uses: ./.github/actions/nextjs-build-export
+
+      - name: 🌈 Netlify preview
+        uses: ./.github/actions/netlify-preview
+        with:
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_API_TOKEN: ${{ secrets.NETLIFY_API_TOKEN }}
+          HEAD_COMMIT: ${{ github.event.pull_request.head.sha }}

package.json

@@ -27,6 +27,7 @@
     "e2e": "pnpm playwright test",
     "clean": "rm -rf .next out node_modules",
     "knip": "knip",
+    "nf": "netlify",
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
@@ -62,6 +63,7 @@
     "knip": "^5.9.4",
     "markdownlint": "0.34.0",
     "markdownlint-cli": "0.41.0",
+    "netlify-cli": "^17.25.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "stylelint": "^16.3.1",