docs : README 수정

.eslintrc.json

@@ -24,13 +24,16 @@
       "error",
       {
         "devDependencies": [
-          "**/*.stories.@(ts|tsx|js|jsx)",
-          "**/*.test.@(ts|tsx|js|jsx)",
-          "**/next.config.js",
-          "**/next.config.mjs"
-        ]
+          "test.{ts,tsx}",
+          "test-*.{ts,tsx}",
+          "**/*{.,_}{test,spec}.{ts,tsx}",
+          "**/jest.config.ts",
+          "**/jest.setup.ts"
+        ],
+        "optionalDependencies": false
       }
     ],
+
     "jsx-a11y/media-has-caption": "off",
     "no-nested-ternary": "off",
     "no-console": "off",

.github/workflows/deploy-main.yml → .github/workflows/main-deploy.yml

@@ -1,11 +1,11 @@
-name: Deploy to Docker Hub
+name: Main Branch Deployment
 
 on:
   push:
     branches: [main]
 
 jobs:
-  build-and-push:
+  build-and-push-docker:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -27,8 +27,8 @@ jobs:
           push: true
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/snappy:latest
 
-  deploy:
-    needs: build-and-push
+  deploy-to-server:
+    needs: build-and-push-docker
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -55,3 +55,39 @@ jobs:
             docker-compose down
             docker-compose up -d
             docker image prune -f
+
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Publish to Chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          buildScriptName: build-storybook
+
+      - name: Comment PR
+        if: github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: '🎉 Storybook 미리보기: ${{ steps.chromatic.outputs.storybookUrl }}'
+          pr_number: ${{ github.event.pull_request.number }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/staging-pr-checks.yml

@@ -93,9 +93,18 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Publish to Chromatic
+        id: chromatic
         uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          buildScriptName: build-storybook
+      - name: comment PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: '🎉 Storybook 미리보기: ${{ steps.chromatic.outputs.storybookUrl }}'
+          pr_number: ${{ github.event.pull_request.number }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   docker:
     runs-on: ubuntu-latest

README.md

@@ -1,38 +1 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## 도커테스트 퍼블릭 키 설정 수정
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+## 안녕하세요! 우리는 스냅피입니다!

jest.config.ts

@@ -1,8 +1,21 @@
-export default {
+import type { Config } from '@jest/types'
+
+const config: Config.InitialOptions = {
   preset: 'ts-jest',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.jest.json',
+    },
+  },
 }
+
+export default config

package.json

@@ -12,17 +12,17 @@
     "lint:fix": "eslint --fix .",
     "format": "prettier --check --ignore-path .gitignore .",
     "format:fix": "prettier --write --ignore-path .gitignore .",
-    "test": "jest",
+    "test": "jest --config jest.config.ts",
     "docker-compose": "docker-compose up --build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_e99b5807ca49c9f"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@jest/types": "^29.6.3",
     "@storybook/addon-styling-webpack": "^1.0.0",
     "@tanstack/react-query": "^5.51.23",
-    "@testing-library/react": "^16.0.0",
     "axios": "^1.7.4",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.12",
@@ -46,7 +46,8 @@
     "@storybook/nextjs": "^8.2.5",
     "@storybook/react": "^8.2.5",
     "@storybook/test": "^8.2.5",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "22.4.1",
     "@types/qrcode": "^1.5.5",
@@ -62,11 +63,13 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "storybook": "^8.2.5",
     "tailwindcss": "^3.4.4",
-    "ts-jest": "^29.2.2",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^5.4.4"
   }
 }

src/utils/mathUtils.test.ts

@@ -0,0 +1,38 @@
+import { add, subtract, isEven } from './mathUtils'
+
+describe('Math Utils', () => {
+  describe('add function', () => {
+    it('should correctly add two positive numbers', () => {
+      expect(add(2, 3)).toBe(5)
+    })
+
+    it('should correctly handle negative numbers', () => {
+      expect(add(-1, 1)).toBe(0)
+      expect(add(-1, -1)).toBe(-2)
+    })
+  })
+
+  describe('subtract function', () => {
+    it('should correctly subtract two positive numbers', () => {
+      expect(subtract(5, 3)).toBe(2)
+    })
+
+    it('should correctly handle negative numbers', () => {
+      expect(subtract(1, -1)).toBe(2)
+      expect(subtract(-1, -1)).toBe(0)
+    })
+  })
+
+  describe('isEven function', () => {
+    it('should return true for even numbers', () => {
+      expect(isEven(2)).toBe(true)
+      expect(isEven(0)).toBe(true)
+      expect(isEven(-4)).toBe(true)
+    })
+
+    it('should return false for odd numbers', () => {
+      expect(isEven(1)).toBe(false)
+      expect(isEven(-3)).toBe(false)
+    })
+  })
+})

src/utils/mathUtils.ts

@@ -0,0 +1,16 @@
+// 테스트 코드를 테스트 하기 위한 함수 작성. 추후 삭제 예정
+
+/**
+ * 두 숫자의 합을 반환합니다.
+ */
+export const add = (a: number, b: number): number => a + b
+
+/**
+ * 두 숫자의 차를 반환합니다.
+ */
+export const subtract = (a: number, b: number): number => a - b
+
+/**
+ * 주어진 숫자가 짝수인지 확인합니다.
+ */
+export const isEven = (num: number): boolean => num % 2 === 0

tsconfig.jest.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "esModuleInterop": true
+  }
+}

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["jest", "node"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -32,7 +33,7 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "jest.config.ts",
-    "jest.setup.js",
+    "jest.setup.ts",
     "src",
     "next.config.mjs",
     "server.mjs"