Deploy: develop 브랜치 merge

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
+    jest: true,
   },
   extends: [
     'eslint:recommended',
@@ -35,8 +36,25 @@ module.exports = {
     'react',
   ],
   rules: {
+    'no-use-before-define': 'off',
+    '@emotion/jsx-import': 'off',
+    'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/jsx-props-no-spreading': 'off',
-    'react/jsx-filename-extension': ['warn', { extensions: ['.tsx'] }],
+    'react/jsx-filename-extension': ['warn', { extensions: ['.ts', '.tsx'] }],
+    'react/function-component-definition': [
+      'error',
+      { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' },
+    ],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'import/extensions': [
+      'error',
+      'ignorePackages', // 패키지는 무시하도록 설정
+      {
+        js: 'never', jsx: 'never', ts: 'never', tsx: 'never',
+      },
+    ],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
   },
 };

.github/ISSUE_TEMPLATE/documentation.md

@@ -0,0 +1,15 @@
+---
+name: 🔧 Documentation
+about: 문서화를 해야합니다.
+title: '📋 Docs: '
+labels: 'documentation'
+---
+
+## Description
+설명을 작성해주세요.
+
+## Documentation
+문서화의 결과를 알려주세요.
+
+## ETC
+기타사항을 작성해주세요.

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,16 @@
+---
+name: ✅ Feature
+about: 새로운 기능 추가
+title: '✅ Feature: '
+labels: 'feature'
+---
+
+## Description
+설명을 작성해주세요.
+
+## To Do
+- [ ] todo
+- [ ] todo
+
+## ETC
+기타사항을 작성해주세요.

.github/ISSUE_TEMPLATE/fix.md

@@ -0,0 +1,12 @@
+---
+name: 🐝 Fix
+about: 트러블 슈팅
+title: '🐝 Fix: '
+labels: 'fix'
+---
+
+## Description
+설명을 작성해주세요.
+
+## ETC
+기타사항을 작성해주세요.

.github/ISSUE_TEMPLATE/hotfix.md

@@ -0,0 +1,12 @@
+---
+name: 🐛HotFix
+about: 치명적인 버그
+title: '🐛 Hot-Fix: '
+labels: 'hotfix'
+---
+
+## Description
+설명을 작성해주세요.
+
+## ETC
+기타사항을 작성해주세요.

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,12 @@
+---
+name: 🔧 Question
+about: 궁금한 부분이 있어요.
+title: '❓ Question: '
+labels: 'question'
+---
+
+## Description
+궁금한 점을 작성해주세요.
+
+## ETC
+기타사항을 작성해주세요.

.github/ISSUE_TEMPLATE/refactoring.md

@@ -0,0 +1,18 @@
+---
+name: 🔧 Refactoring
+about: 리팩토링
+title: '🔧 Refactoring: '
+labels: 'refactoring'
+---
+
+## Description
+리팩토링 배경을 설명해주세요.
+
+## AS-IS
+기존에 구현되어있는 방식을 설명해주세요.
+
+## TO-BE
+어떻게 리팩토링 되어야하는 지 설명해주세요.
+
+## ETC
+기타사항을 작성해주세요.

.github/ISSUE_TEMPLATE/style.md

@@ -0,0 +1,16 @@
+---
+name: 👔 Style
+about: 디자인적인 요소 변경
+title: '👔 Style: '
+labels: 'style'
+---
+
+## Description
+설명을 작성해주세요.
+
+## To Do
+- [ ] todo
+- [ ] todo
+
+## ETC
+기타사항을 작성해주세요.

.github/ISSUE_TEMPLATE/test.md

@@ -0,0 +1,16 @@
+---
+name: 📋 Test
+about: 테스트 코드
+title: '📋 Test: '
+labels: 'test'
+---
+
+## Description
+설명을 작성해주세요.
+
+## To Do
+- [ ] todo
+- [ ] todo
+
+## ETC
+기타사항을 작성해주세요.

.github/pull_request_template.md

@@ -0,0 +1,21 @@
+## PR 제목
+
+### PR을 한 이유 🎯
+
+- (이곳에 PR을 작성한 이유를 간략하게 적어주세요.)
+
+### 이슈 번호 📎
+
+- (해결하고자 하는 이슈의 이름과 해시태그 번호를 적어주세요. 예: `이슈명 #123`)
+
+### 변경사항 🛠
+
+- (개발한 내용의 요약을 적어주세요. 예: "로그인 버그 수정", "새로운 기능 추가" 등)
+
+### 특이사항 📌
+
+- (이 PR에 대한 추가적인 정보나, 리뷰어가 주의깊게 봐야할 점 등을 적어주세요.)
+
+### 테스트 결과 📝
+
+- (테스트를 진행한 결과, 해당 결과에 따른 스크린샷 또는 기타 정보를 제공해주세요.)

.github/workflows/eslint.yml

@@ -0,0 +1,11 @@
+name: ESLint
+on: pull_request
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: yarn
+    - name: Run ESLint
+      run: yarn eslint . --ext .js,.jsx,.ts,.tsx

.github/workflows/jest.yml

@@ -0,0 +1,11 @@
+name: Jest
+on: pull_request
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: yarn
+    - name: Run Jest
+      run: yarn test

.github/workflows/playwright.yml

@@ -0,0 +1,31 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Server
+      run: yarn dev &
+    - name: Wait for server to start
+      run: sleep 10
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -26,10 +26,21 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*.development
+.env*.production
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# PWA
+/public/sw.js
+/public/sw.js.map
+/public/workbox-*.js
+/public/workbox-*.js.map
+/test-results/
+/playwright-report/
+/playwright/.cache/

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+./node_modules/.bin/commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn test

__test__/app.test.ts

@@ -0,0 +1,5 @@
+test('should be true', () => {
+  expect(true).toBe(true);
+});
+
+export {};

__test__/app2.test.ts

@@ -0,0 +1,5 @@
+test('should be true', () => {
+  expect(true).toBe(true);
+});
+
+export {};

commitlint.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  parserPreset: './custom-parser',
+  rules: {
+    'type-case': [2, 'always', 'sentence-case'],
+    'subject-case': [0],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'Build',
+        'Chore',
+        'CI',
+        'Docs',
+        'Feat',
+        'Fix',
+        '🐝 Fix',
+        'Hot-Fix',
+        '🐛 Hot-Fix',
+        'Refactor',
+        'Revert',
+        'Style',
+        'Test',
+      ],
+    ],
+  },
+};

custom-parser/index.js

@@ -0,0 +1,32 @@
+const headerPattern = /^(\W*\w*)(?:\((.*)\))?: (.*)$/;
+
+function parse(message) {
+  const match = message.match(headerPattern);
+
+  if (!match) return null; // 혹시나 매칭되지 않는 경우를 대비
+
+  const [, typeWithEmoji, scope, subject] = match;
+
+  const matches = typeWithEmoji.match(/(\W*)(\w+)/);
+  const type = matches ? matches[2] : null;
+
+  return {
+    header: message,
+    type,
+    scope,
+    subject,
+    body: null,
+    footer: null,
+    mentions: [],
+    references: [],
+    notes: [],
+  };
+}
+
+module.exports = {
+  parserOpts: {
+    headerPattern,
+    headerCorrespondence: ['type', 'scope', 'subject'],
+    parse,
+  },
+};

custom-parser/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "custom-parser",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}

e2e/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects the URL to contain intro.
+  await expect(page).toHaveURL(/.*intro/);
+});