Merge remote-tracking branch 'origin/master' into 360-feature-impleme…

…nt-testing-library-and-write-fundamental-ui-tests
gsainfoteam · Jan 8, 2025 · c2c2ace · c2c2ace
2 parents 3c45005 + 34d589c
commit c2c2ace
Show file tree

Hide file tree

Showing 194 changed files with 17,202 additions and 11,649 deletions.
diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml
@@ -5,53 +5,64 @@ on:
     types:
       - released
 
+env:
+  REGISTRY: ghcr.io
+  REPOSITORY: ${{ github.repository }}
+  IMAGE_TAG: prod${{ github.run_number }}
+
 jobs:
   build:
     runs-on: ubuntu-latest
+
     permissions:
+      contents: read
+      packages: write
       deployments: write
+
     environment:
       name: production
       url: https://ziggle.gistory.me
-    outputs:
-      ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
-      ECR_REPOSITORY: ziggle-frontend
-      IMAGE_TAG: prod${{ github.run_number }}
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: ap-northeast-2
-
-      - name: Login to Amazon ECR
-        id: login-ecr
-        uses: aws-actions/amazon-ecr-login@v2
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
 
       - name: setup environment
         run: |
           echo "${{ vars.ENV }}" >> .env.production
           echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env.production
           echo "IDP_CLIENT_SECRET=${{ secrets.IDP_CLIENT_SECRET }}" >> .env.production
+          echo "NEXT_PUBLIC_GA_TRACKING_ID=${{ secrets.GA_TRACKING_ID }}" >> .env.production
+          echo "NEXT_PUBLIC_AMPLITUDE_API_KEY=${{ secrets.AMPLITUDE_API_KEY }}" >> .env.production
 
-      - name: Build, tag, and push image to Amazon ECR
-        uses: docker/build-push-action@v5
-        env:
-          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
-          ECR_REPOSITORY: ziggle-frontend
-          IMAGE_TAG: prod${{ github.run_number }} # Use run number as image tag
+      - name: Login to the Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) from the Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.REPOSITORY }}
+          tags: ${{ env.IMAGE_TAG }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
         with:
           context: .
           push: true
-          tags: ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_TAG }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
+
   deploy:
     name: Update Git Repository
     needs: build
@@ -65,19 +76,12 @@ jobs:
           fetch-depth: 0
 
       - name: Update Kubernetes Manifest
-        env:
-          ECR_REGISTRY: ${{ needs.build.outputs.ECR_REGISTRY }}
-          ECR_REPOSITORY: ${{ needs.build.outputs.ECR_REPOSITORY }}
-          IMAGE_TAG: ${{ needs.build.outputs.IMAGE_TAG }}
         run: |
-          sed -i "s|image:.*|image: $ECR_REGISTRY\/$ECR_REPOSITORY:$IMAGE_TAG|g" infoteam/service/ziggle/next.prod.yaml
+          sed -i "s|image:.*|image: $REGISTRY\/$REPOSITORY:$IMAGE_TAG|g" infoteam/service/ziggle/next.prod.yaml
 
       - name: Commit and Push
-        env:
-          ECR_REPOSITORY: ${{ needs.build.outputs.ECR_REPOSITORY }}
-          IMAGE_TAG: ${{ needs.build.outputs.IMAGE_TAG }}
         run: |
           git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
           git config --global user.name "GitHub Actions"
-          git commit -am "Update image $ECR_REPOSITORY:$IMAGE_TAG"
+          git commit -am "Update image $REPOSITORY:$IMAGE_TAG"
           git push -u origin master
diff --git a/.github/workflows/staging.yaml b/.github/workflows/staging.yaml
@@ -5,53 +5,63 @@ on:
     branches:
       - master
 
+env:
+  REGISTRY: ghcr.io
+  REPOSITORY: ${{ github.repository }}
+  IMAGE_TAG: dev${{ github.run_number }}
+
 jobs:
   build:
+    name: Build docker image
     runs-on: ubuntu-latest
+
     permissions:
+      contents: read
+      packages: write
       deployments: write
+
     environment:
       name: staging
       url: https://stg.ziggle.gistory.me
-    outputs:
-      ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
-      ECR_REPOSITORY: ziggle-frontend
-      IMAGE_TAG: dev${{ github.run_number }}
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: ap-northeast-2
 
-      - name: Login to Amazon ECR
-        id: login-ecr
-        uses: aws-actions/amazon-ecr-login@v2
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: setup environment
         run: |
           echo "${{ vars.ENV }}" >> .env.production
           echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env.production
           echo "IDP_CLIENT_SECRET=${{ secrets.IDP_CLIENT_SECRET }}" >> .env.production
 
-      - name: Build, tag, and push image to Amazon ECR
-        uses: docker/build-push-action@v5
-        env:
-          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
-          ECR_REPOSITORY: ziggle-frontend
-          IMAGE_TAG: dev${{ github.run_number }} # Use run number as image tag
+      - name: Login to the Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) from the Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.REPOSITORY }}
+          tags: ${{ env.IMAGE_TAG }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
         with:
           context: .
           push: true
-          tags: ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_TAG }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
+
   deploy:
     name: Update Git Repository
     needs: build
@@ -65,19 +75,12 @@ jobs:
           fetch-depth: 0
 
       - name: Update Kubernetes Manifest
-        env:
-          ECR_REGISTRY: ${{ needs.build.outputs.ECR_REGISTRY }}
-          ECR_REPOSITORY: ${{ needs.build.outputs.ECR_REPOSITORY }}
-          IMAGE_TAG: ${{ needs.build.outputs.IMAGE_TAG }}
         run: |
-          sed -i "s|image:.*|image: $ECR_REGISTRY\/$ECR_REPOSITORY:$IMAGE_TAG|g" infoteam/service/ziggle/next.stg.yaml
+          sed -i "s|image:.*|image: $REGISTRY\/$REPOSITORY:$IMAGE_TAG|g" infoteam/service/ziggle/next.stg.yaml
 
       - name: Commit and Push
-        env:
-          ECR_REPOSITORY: ${{ needs.build.outputs.ECR_REPOSITORY }}
-          IMAGE_TAG: ${{ needs.build.outputs.IMAGE_TAG }}
         run: |
           git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
           git config --global user.name "GitHub Actions"
-          git commit -am "Update image $ECR_REPOSITORY:$IMAGE_TAG"
+          git commit -am "Update image $REPOSITORY:$IMAGE_TAG"
           git push -u origin master
diff --git a/.gitignore b/.gitignore
@@ -43,4 +43,7 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-playwright/.auth
+playwright/.auth
+playwright
+test-results
+playwright-report
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,6 +1,7 @@
-import type { StorybookConfig } from '@storybook/nextjs';
 import { dirname, join, resolve } from 'path';
 
+import type { StorybookConfig } from '@storybook/nextjs';
+
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
@@ -18,6 +19,10 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-postcss'),
   ],
 
+  features: {
+    experimentalRSC: true,
+  },
+
   framework: {
     name: getAbsolutePath('@storybook/nextjs'),
     options: {

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -14,6 +14,7 @@
   },
   "editor.formatOnSave": false,
   "cSpell.words": [
+    "Swal",
     "Zabo",
     "Ziggle"
   ],

diff --git a/README.md b/README.md
@@ -18,18 +18,17 @@
     │   └── tag
     ├── app
     │   ├── [lng]: 지글의 모든 화면은 이 디렉토리 밑에 있습니다
-    │   │   ├── (common)
-    │   │   │   ├── (common)
-    │   │   │   │   ├── mypage
-    │   │   │   │   ├── search
-    │   │   │   │   └── section
-    │   │   │   │       └── [type]
-    │   │   │   └── (needSidebar)
-    │   │   │       ├── [category]
-    │   │   │       └── notice
-    │   │   │           └── [id]
-    │   │   │               └── assets
-    │   │   ├── (empty): 레이아웃이 비어있는 화면
+    │   │   ├── (group): ziggle groups 관련 (분리 후 제거 예정)
+    │   │   │   └── group    
+    │   │   ├── (with-page-layout): Header, Footer, Toast Layout이 있는 페이지들
+    │   │   │   ├── (with-sidebar-layout): Sidebar가 있는 페이지들
+    │   │   │   │   ├── [category]
+    │   │   │   │   └── notice
+    │   │   │   │       └── [id] 
+    │   │   │   └── (without-sidebar-layout): Sidebar가 없는 페이지들
+    │   │   │       ├── mypage
+    │   │   │       └── search
+    │   │   ├── (without-page-layout): Header, Footer, Toast Layout이 없는 페이지들
     │   │   │   ├── app: /[lng]/app - 앱 설치 페이지 리다이렉션
     │   │   │   └── login: /[lng]/login - 로그인 페이지 리다이렉션
     │   │   └── (write): 사이드바가 없고, 상단바가 있는 글쓰기 화면
@@ -45,36 +44,25 @@
     │   │   │       │   └── foreign
     │   │   │       ├── additional
     │   │   │       └── full
-    │   │   └── og: open graph image를 생성하는 api
-    │   ├── components: 모든 컴포넌트는 이 디렉토리 밑에 있습니다
-    │   │   ├── atoms: 가장 작은 단위의 컴포넌트
-    │   │   │   ├── Analytics
-    │   │   │   ├── Button
-    │   │   │   ├── Checkbox
-    │   │   │   ├── ExternalLink
-    │   │   │   └── Toggle
-    │   │   ├── molecules: atom을 조합한 컴포넌트
-    │   │   │   ├── Chip
-    │   │   │   ├── DDay
-    │   │   │   ├── HighlightedText
-    │   │   │   ├── HorizontalScrollButton
-    │   │   │   ├── Pagination
-    │   │   │   ├── Tag
-    │   │   │   └── ZaboImage
-    │   │   ├── organisms: molecule을 조합한 컴포넌트
-    │   │   │   ├── DateTimePicker
-    │   │   │   ├── ImageCarousel
-    │   │   │   ├── Tags
-    │   │   │   └── Zabo
-    │   │   └── templates: organism을 조합한 컴포넌트
-    │   │       ├── Footer
+    │   │   ├── og: open graph image를 생성하는 api
+    │   │   ├── vapor-bff
+    │   │   │   └── [...ziggle]
+    │   │   └── ziggle
+    │   │       └── [...proxy]
+    │   ├── components: 여러 곳에서 공통적으로 쓰이는 컴포넌트
+    │   │   ├── layout: 레이아웃에 쓰이는 컴포넌트
+    │   │   │   ├── Footer
+    │   │   │   ├── Navbar
+    │   │   │   ├── NavbarWrite
+    │   │   │   └── Sidebar
+    │   │   └── shared: 레이아웃에 쓰이지 않고 공통적으로 쓰이는 컴포넌트
+    │   │       ├── Analytics
+    │   │       ├── Button
     │   │       ├── LoadingCatAnimation
-    │   │       ├── Navbar
-    │   │       ├── NavbarWrite
-    │   │       ├── ResultZabo
-    │   │       ├── SearchAnimation
-    │   │       ├── SearchResults
-    │   │       └── Sidebar
+    │   │       ├── Pagination
+    │   │       ├── Tags
+    │   │       ├── Toggle
+    │   │       └── Zabo
     │   └── i18next: 다국어 지원을 위한 설정
     │       └── locales
     │           ├── en
@@ -84,8 +72,7 @@
     │   ├── fonts
     │   ├── icons
     │   └── logos
-    ├── mock: 개발 환경(storybook)에서 사용하는 mock 데이터
-    └── utils: 유틸성 파일
+    └── mock: 개발 환경(storybook)에서 사용하는 mock 데이터
 ```
 
 ### 몇가지 알아두면 좋은 점

diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.11.9",
+    "@next/third-parties": "^15.0.3",
     "@tinymce/tinymce-react": "^4.3.0",
     "@toss/use-overlay": "^1.4.0",
     "@vercel/og": "^0.5.17",
@@ -28,6 +30,7 @@
     "lottie-react": "^2.4.0",
     "next": "14.2.3",
     "next-auth": "^4.24.7",
+    "next-themes": "^0.4.3",
     "react": "^18",
     "react-calendar": "^4.6.1",
     "react-clock": "^4.5.1",
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ @@
       },
       "editor.formatOnSave": false,
       "cSpell.words": [
+        "Swal",
         "Zabo",
         "Ziggle"
       ],
@@ Expand Down @@