frontend-pull-request.yml

name: frontend-pull-request

on:
  pull_request:
    types: [opened, synchronize]
    branches: [main, fe-dev]
    paths:
      - "client/**"

jobs:
  test:
    runs-on: ubuntu-latest

    defaults:
      run:
        shell: bash
        working-directory: ./client

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.15.1"

      - name: Install dependencies
        run: npm install

      - name: Run lint
        run: npm run lint

      - name: Run test
        run: npm run test

      - name: Cypress test
        run: npm run dev &
        env:
          CI: true

      - name: Wait for the server to start
        run: sleep 3

      - name: Run Cypress tests
        run: npm run cypress-run

  feature-deploy:
    runs-on: ubuntu-latest

    defaults:
      run:
        shell: bash
        working-directory: ./client

    # pull request base ref가 fe-dev일 때만 feature-deploy 작업 수행
    if: github.base_ref == 'fe-dev'

    steps:
      # 1. Git 리포지토리 체크아웃
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. Node js 20.15.1 버전으로 셋팅
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.15.1"

      # 3. feature 브랜치 이름 추출 (feature/#123 -> feature123)
      - name: Extract and format branch name
        run: |
          echo "BRANCH_NAME=$(echo '${{ github.head_ref }}' | sed 's#[/#]##g')" >> $GITHUB_ENV

      # 4. 의존성이 캐시에 있는지 확인
      - name: Cache dependencies
        id: cache
        uses: actions/cache@v3
        with:
          path: "**/node_modules"
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}-v1
          restore-keys: |
            ${{ runner.os }}-npm-

      # 5. 의존성 설치
      - name: Install dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      # 6. Dev 환경으로 빌드
      - name: Build dev environment
        run: npm run build-dev-feature
        env:
          API_BASE_URL: ${{ secrets.API_BASE_URL }}
          AMPLITUDE_KEY: ${{ secrets.AMPLITUDE_KEY }}
          KAKAO_JAVASCRIPT_KEY: ${{ secrets.KAKAO_JAVASCRIPT_KEY }}
          IMAGE_URL: ${{ secrets.IMAGE_URL }}
          KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }}
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          BRANCH_NAME: ${{ env.BRANCH_NAME }}

      # 7. AWS 인증 설정
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v3
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      # 8. S3에 업로드
      - name: Deploy to S3
        env:
          BRANCH_NAME: ${{ env.BRANCH_NAME }}

        run: |
          aws s3 sync ./dist s3://${{ secrets.S3_BUCKET_NAME }}/dev/${BRANCH_NAME}/ \
            --delete

      # 9. CloudFront 캐시 무효화
      - name: Invalidate CloudFront Cache
        env:
          BRANCH_NAME: ${{ env.BRANCH_NAME }}

        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.DEV_CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/${BRANCH_NAME}/*"

      # 10. 배포 주소 PR에 코멘트 작성
      - name: Comment on PR
        env:
          BRANCH_NAME: ${{ env.BRANCH_NAME }}

        uses: thollander/actions-comment-pull-request@v2
        with:
          message: "🚀 **Deploy Link**: ${{ secrets.DEV_BASE_URL }}/${{ env.BRANCH_NAME }}"

  chromatic:
    name: Run Chromatic
    runs-on: ubuntu-latest

    defaults:
      run:
        shell: bash
        working-directory: ./client

    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.15.1"

      - name: Cache dependencies
        id: cache
        uses: actions/cache@v3
        with:
          path: "**/node_modules"
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}-v1
          restore-keys: |
            ${{ runner.os }}-npm-

      - name: Install dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      - name: Run Chromatic
        uses: chromaui/action@latest
        id: publish_chromatic
        with:
          workingDir: client
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

      - name: Comment on PR
        uses: thollander/actions-comment-pull-request@v2
        with:
          message: "🚀 **storybook**: ${{ steps.publish_chromatic.outputs.storybookUrl }}"