develop -> main

.eslintrc.json

@@ -1,9 +1,10 @@
 {
   "extends": ["next/core-web-vitals", "prettier"],
-  "plugins": ["prettier", "react-hooks"],
+  "plugins": ["prettier", "react-hooks", "@typescript-eslint"],
   "rules": {
     "prettier/prettier": "error",
-    "no-unused-vars": "error"
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
   },
   "settings": {
     "import/resolver": {

.gitattributes

@@ -0,0 +1,2 @@
+*.ts    text eol=lf
+*.tsx   text eol=lf

.github/workflows/chromatic.yml

@@ -2,7 +2,14 @@
 name: 'Chromatic Deployment'
 
 # Event for the workflow
-on: push
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - '**'
+      - '!main'
 
 # List of jobs
 jobs:

.github/workflows/ci.yml

@@ -0,0 +1,91 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - '**'
+      - '!main'
+  push:
+    branches:
+      - develop
+
+jobs:
+  ci:
+    name: Lint, Test, and Build
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run Tests
+        run: npm test
+
+      - name: Build Next.js app
+        run: npm run build
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+  notify-discord:
+    needs: ci
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
+      - name: Send Discord Notification
+        env:
+          WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          DATA: >
+            {
+              "embeds": [
+                {
+                  "title": "${{ 
+                    format('{0}', 
+                      (github.base_ref == 'develop' || github.ref_name == 'develop') 
+                      && '🚀 Develop 브랜치 CI 알림' 
+                      || '🎉 새 작업 CI 알림'
+                    )
+                  }}",
+                  "description": "${{ 
+                    format('{0}',
+                      github.event_name == 'pull_request' 
+                      && (github.base_ref == 'develop' 
+                        && format('Develop 브랜치로 새로운 PR이 등록되었습니다! ({0} → develop)', github.head_ref)
+                        || format('새로운 PR이 등록되었습니다! ({0} → {1})', github.head_ref, github.base_ref)
+                      )
+                      || 'Develop 브랜치에 Push가 완료되었습니다!'
+                    )
+                  }}",
+                  "url": "${{ github.event.pull_request.html_url || github.event.head_commit.url }}",
+                  "color": 5814783,
+                  "fields": [
+                    {
+                      "name": "Repository",
+                      "value": "${{ github.repository }}"
+                    },
+                    {
+                      "name": "Branch",
+                      "value": "${{ github.event_name == 'pull_request' && github.head_ref || github.ref_name }}"
+                    }
+                  ]
+                }
+              ]
+            }
+        run: |
+          curl -X POST \
+            -H "Content-Type: application/json" \
+            -d "$DATA" \
+            $WEBHOOK_URL

.github/workflows/main-deploy.yml

@@ -14,18 +14,49 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x]  # Node.js 18.x와 20.x 버전으로 테스트
+        node-version: [18.x, 20.x]
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}  # 매트릭스를 사용하여 버전 설정
+          node-version: ${{ matrix.node-version }}
 
       - name: Install dependencies
         run: npm install
 
       - name: Build Next.js app
         run: npm run build
+
+  notify-discord:
+    needs: deploy-production
+    runs-on: ubuntu-latest
+    if: success()
+    steps:
+      - name: Send Discord Notification
+        env:
+          WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          DATA: >
+            {
+              "embeds": [
+                {
+                  "title": "🚀 main 브랜치 알림",
+                  "description": "${{ github.event_name == 'pull_request' && '새로운 PR이 성공적으로 등록되었습니다!' || 'Push가 성공적으로 완료되었습니다!' }}",
+                  "url": "${{ github.event.pull_request.html_url || github.event.head_commit.url }}",
+                  "color": 5814783,
+                  "fields": [
+                    {
+                      "name": "Repository",
+                      "value": "${{ github.repository }}"
+                    }
+                  ]
+                }
+              ]
+            }
+        run: |
+          curl -X POST \
+            -H "Content-Type: application/json" \
+            -d "$DATA" \
+            $WEBHOOK_URL

.storybook/preview.ts

@@ -9,6 +9,31 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '1168px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '744px',
+            height: '1343px',
+          },
+        },
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1920px',
+            height: '1080px',
+          },
+        },
+      },
+    },
   },
 };
 

global.d.ts

@@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    daum: {
+      Postcode: new (config: any) => any;
+    };
+  }
+}
+
+export {};

jest.config.js

@@ -1,9 +1,18 @@
-module.exports = {
-  testEnvironment: "jest-environment-jsdom",
-  transform: {
-    "^.+.tsx?$": "ts-jest",
-  },
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/$1",
-  },
+const nextJest = require('next/jest');
+
+/** @type {import('jest').Config} */
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(config);

next.config.ts

@@ -1,7 +1,9 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
+  },
 };
 
 export default nextConfig;