배포 (#474)

* [Refactor] context provider를 컴포넌트로 분리 (#437)

* refactor: device type provider component로 분리

* chore: alias 추가

* refactor: useDeviceType 적용

* refactor: recruiting info provider component로 분리

* refactor: useRecruitingInfo 적용

* refactor: theme provider component로 분리

* refactor: useTheme 적용

* docs: 기존 파일 제거

* chore: 에러 메세지 수정

* chore: 변수명 통일

* chore: 불필요한 export 제거

* [Refactor] 번들 크기 개선 - 1 (#434)

* buil: bundle size visualizer 설치

* refactor: lottie 관련 필요 기능만 구현하기

* build: light 버전 import

* chore: lottie file size 줄이기

* [Refactor] 번들 크기 개선 - 2 (#435)

* build: date-fns locale import 범위 좁히기

* chore: 코드 복구

* [Refactor] 번들 크기 개선 - 3 (#432)

* refactor: lazy loading 적용

* refactor: dialogs들에도 lazy import 적용

* build: manual chunk 적용

* chore: visualizer 자동 open option 제거

* [Feat] 테스트 코드 초기 세팅 (#439)

* build: library 설치

* feat: lint 설정

* feat: config 설정

* feat: custom render 생성

* build: library 추가 설치

* feat: test setup 파일 추가

* chore: alias 추가

* fix: custon render option 속성 optional 하게 받기

* chore: 주석 제거

* build: test library 버전업

* fix: custom render type 수정

* feat: custom render에 memory router 추가

* feat: custom render에 query client provider 추가

* fix: fillStyle을 null로 설정할 수 없는 에러 해결

* fix: test 환경에 modal div 생성

* fix: custom render에 form provider 추가

* fix: window 함수 선언

* docs: README 수정

* [Chore] reviewer에 주용이 추가 (#443)

* chore: 주용이 추가

* [Refactor] token 필요없는 fetch custom hook 만들기 (#445)

* feat: 기존 axios instace -> fetch instance로 대체

* refactor: 기존 코드 fetch instance로 변경

* refactor: headers type 제한

* feat: instace option method type 제한

* [Refactor] ApplyPage 로직 분리 - 1 (#441)

* chore: 관심사 끼리 분류

* refactor: 페이지 이탈 alert custom hook으로 분리

* refactor: isReview 전역 변수로 빼기

* refactor: apply page loading 제거

* feat: useDialog hook 생성

* refactor: useDialog 적용

* chore: dialog들 Form Provider 바깥으로 빼기

* chore: 오타 제거

* refactor: isReview 전역변수 제거

* feat: useEventListener custom hook 제작

* refactor: useEventListener 적용

* [Feat] env 개발 환경 분리하기 (#448)

* feat: env 분리

* feat: build 명령어 분리

* fix: build 명령어 수정

* [Feat] 환경변수를 활용한 동적 메타태그 구현 (#455)

* install: react-helmet-async 설치

* feat: provider 추가

* feat: index.html에서 helmet으로 이동

* feat: URL 추가

* fix: isMakers context->env로 가져오기

* chore: 테스트용 연산자 제거

* fix: 환경변수 말고 MODE 활용

* fix: useDate 내부 isMakers도 수정

* [Refactor] fetch instance 기능 보강 (#450)

* feat: error 처리 로직 세분화를 위한 custom error 생성

* feat: params 처리

* feat: form data 처리

* refactor: instance 적용

* chore: fetcher로 이름 변경

* [Feat] browserslist 추가 (#452)

* feat: browserslist 추가

* feat: 지원되는 browser 파악하는 regex 생성

* design: 지원 안 되는 브라우저 안내 페이지 생성

* feat: browser 판단 로직 구현

* fix: supported browsers ts로 변경

* [Design] 지원 안 되는 브라우저 안내 페이지 퍼블리싱 (#464)

* design: 지원되지 않는 페이지 퍼블리싱

* fix: icon들 png -> svg 변경

* desing: 반응형 구현

* design: 중앙 정렬

* fix: 문의하기 링크 수정

* design: 높이 수정

* design: header 추가

* design: layout 추가

* design: css 수정

* design: sopt logo 변경

* fix: 비교 연산자 수정

* [Feat] 지원 안 되는 브라우저 안내 페이지 pre render 하기 (#465)

* feat: unsupported page  html 파일 생성하기

* fix: 지원 안되는 브라우저 경로 수정

* design: 문장 사이 공백 추가

* refactor: script 위치 수정

* design: css 파일 추출

* refactor: build 명령어 수정에 따른 html, css 파일 수정

* refactor: renderToStaticMarkup으로 변경

* feat: gitignore에 unsupported.html 추가

* design: css 수정

* [Refactor] lottie-react 재도입 및 patch를 이용한 번들 사이즈 감소 (#466)

* chore: 사용 안되는 컴포넌트 제거

* refactor: lottie-react로 변경

* refactor: patch를 이용하여 lottie-web/light 버전 이용

* docs: read me 수정

* [Feat] MSW 도입 (#453)

* install: msw 설치

* feat: generate worker script

* feat: msw 기본 코드 테스트

* chore: amplitude 주석처리

* chore: 주석 해제

* [Refactor] date-fns 라이브러리 제거 (#469)

* feat: isBefore, isAfter 함수 구현

* feat: differenceInSeconds 함수 구현

* feat: subMinutes 함수 구현

* feat: format 함수 구현

* remove: Intl 덜어내기

* feat: string -> Date 형변환 처리 추가

* remove: test 용 파일 삭제

* remove: date-fns 라이브러리 삭제

* feat: EEEE RegExp 추가

* fix: toDate 함수 분리

* fix: 요일 인덱스 버그 픽스

* fix: toDate 적용 및 throw Error -> console error로 수정

* fix: throw Error 코드 복구

* fix: chrome 판단 regex 수정 (#470)

* [Refactor] OpenAPI를 이용하여 api interface 추출하기 (#472)

* feat: openapi spec을 이용한 api interface 생성

* feat: api interface를 가지는 fetcher 생성

* feat: 각 api에 맞는 interface 추출하기 위한 명령어 작성

* chore: 명령어 실행

* feat: gitattributes 설정

* fix: 명령어 폴더명 수정

* fix: 빌드 에러 수정

* [Refactor] Amplitude tracking 로직 컴포넌트로 분리 (#473)

* feat: amplitude event track component 생성

* feat: Button component에 Amplitude event track component 감싸기

* refactor: amplitude event track component 적용

* fix: build error

* fix: build error

* fix: 지원되지 않는 브라우저 로직 수정

---------

Co-authored-by: lydiacho <[email protected]>

.eslintrc.cjs

@@ -11,6 +11,9 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
+    'plugin:testing-library/react',
+    'plugin:vitest/recommended',
+    'plugin:jest-dom/recommended',
   ],
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],

.gitattributes

@@ -0,0 +1 @@
+/src/__generated__/* linguist-generated=true

.github/auto_assign.yml

@@ -8,6 +8,7 @@ addAssignees: author
 reviewers:
   - eonseok-jeon
   - lydiacho
+  - wuzoo
 
 # A number of reviewers added to the pull request
 # Set 0 to add all the reviewers (default: 0)

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+public/unsupported.html
 *.local
 
 # Editor directories and files
@@ -23,4 +24,6 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env
+.env.makers
+.env.sopt

README.md

@@ -13,10 +13,12 @@
 <img src="https://img.shields.io/badge/Tanstack%20Query-FF4154?style=flat-square&logo=react-query&logoColor=white" alt="Tanstack Query Badge"/></a>
 <img src="https://img.shields.io/badge/React--hook--form-EC5990?style=flat-square&logo=react-hook-form&logoColor=white" alt="React-hook-form Badge"/></a>
 <img src="https://img.shields.io/badge/Date--fns-3D7DCA?style=flat-square&logo=date-fns&logoColor=white" alt="Date-fns Badge"/></a>
-<img src="https://img.shields.io/badge/Lottie--react-8DD6F9?style=flat-square&logo=lottie-react&logoColor=white" alt="Lottie-react Badge"/></a>
+<img src="https://img.shields.io/badge/Lottie--react-4F8DF5?style=flat-square&logo=lottie-react&logoColor=white" alt="Lottie-react Badge"/></a>
 <img src="https://img.shields.io/badge/Cloudflare-F38020?style=flat-square&logo=cloudflare&logoColor=white" alt="Cloudflare Badge"/></a>
 <img src="https://img.shields.io/badge/Firebase-FFCA28?style=flat-square&logo=firebase&logoColor=white" alt="Firebase Badge"/></a>
 <img src="https://img.shields.io/badge/Amplitude-FF9D00?style=flat-square&logo=amplitude&logoColor=white" alt="Amplitude Badge"/></a>
+<img src="https://img.shields.io/badge/Testing%20Library-E33332?style=flat-square&logo=testing-library&logoColor=white" alt="Testing Library Badge"/>
+<img src="https://img.shields.io/badge/Vitest-6E9F18?style=flat-square&logo=vitest&logoColor=white" alt="Vitest Badge"/>
 
 ## 만든 사람들
 
@@ -39,7 +41,7 @@
         </td>
     </tr>
     <tr align="center">
-     <td><sub>24.02 ~ 24.07</sup></td>
+     <td><sub>24.02 ~ 현재</sup></td>
         <td>
             전언석 <br />
         </td>

index.html

@@ -12,38 +12,13 @@
 
       gtag('config', 'G-DNPBGP8WDE');
     </script>
+    <script async type="module" src="./src/views/UnsupportedPage/utils/checkBrowser.ts"></script>
 
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="ko_KR" />
-
     <link rel="manifest" href="/manifest.webmanifest" />
-
-    <link rel="icon" href="/makersFavicon.ico" sizes="32x32" />
-    <link rel="icon" href="/makersIcon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="https://recruiting.sopt.org/makers-touch-icon.png" />
-
-    <meta property="og:title" content="SOPT makers 모집 지원하기" />
-    <meta property="og:description" content="SOPT makers의 신입 기수 모집페이지입니다." />
-    <meta property="og:site_name" content="SOPT makers 리크루팅" />
-    <meta property="og:url" content="https://recruiting.sopt.org" />
-
-    <meta property="og:image" content="/makersOg.png" />
-    <meta property="og:image:alt" content="SOPT makers 리크루팅" />
-    <meta property="og:image:width" content="800" />
-    <meta property="og:image:height" content="400" />
-
-    <meta property="twitter:card" content="website" />
-    <meta name="twitter:title" content="SOPT makers 모집 지원하기" />
-    <meta name="twitter:description" content="SOPT makers의 신입 기수 모집페이지입니다." />
-    <meta name="twitter:image" content="/makersOg.png" />
-    <meta property="twitter:image:alt" content="SOPT makers 리크루팅" />
-    <meta property="twitter:site" content="https://recruiting.sopt.org" />
-
-    <title>SOPT makers 모집 지원하기</title>
-    <meta name="author" content="sopt makers team official 4th" />
-    <meta name="description" content="SOPT makers의 신입 기수 모집페이지입니다." />
   </head>
   <body>
     <div id="modal"></div>

package.json

@@ -4,11 +4,34 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
+    "dev": "NODE_ENV=makers vite --mode makers",
+    "dev:sopt": "NODE_ENV=sopt vite --mode sopt",
+    "dev:dev": "vite --mode development",
+    "build:ssg": "tsc && vite build --mode makers --ssr src/views/UnsupportedPage/pre-render.tsx && node dist/pre-render.js",
+    "build:ssg:sopt": "tsc && vite build --mode sopt --ssr src/views/UnsupportedPage/pre-render.tsx && node dist/pre-render.js",
+    "build": "yarn build:ssg && tsc && NODE_ENV=makers vite build --mode makers",
+    "build:sopt": "yarn build:ssg:sopt && tsc && NODE_ENV=sopt vite build --mode sopt",
+    "build:dev": "tsc && vite build --mode development",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "supportedBrowsers": "echo \"export default $(browserslist-useragent-regexp --allowHigherVersions);\" > ./src/views/UnsupportedPage/supportedBrowsers.ts",
+    "postinstall": "patch-package",
+    "openapi-typescript": "npx openapi-typescript ./src/__generated__/api-spec.yml -o ./src/__generated__/api.d.ts",
+    "swagger-typescript-api": "swagger-typescript-api -p ./src/__generated__/api-spec.yml -r -o ./src/__generated__/api-types --modular -d --extract-request-body --extract-response-body --extract-response-error",
+    "api-spec": "yarn openapi-typescript && yarn swagger-typescript-api"
   },
+  "browserslist": [
+    "> 0.3%",
+    "chrome >0 and last 2.5 years",
+    "edge >0 and last 2.5 years",
+    "safari >0 and last 2.5 years",
+    "firefox >0 and last 2.5 years",
+    "and_chr >0 and last 2.5 years",
+    "and_ff >0 and last 2.5 years",
+    "ios >0 and last 2.5 years",
+    "not dead"
+  ],
   "dependencies": {
     "@amplitude/analytics-browser": "^2.9.3",
     "@amplitude/plugin-session-replay-browser": "^1.6.13",
@@ -20,36 +43,58 @@
     "@vanilla-extract/css": "^1.15.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "axios": "^1.6.8",
-    "date-fns": "^3.6.0",
     "firebase": "^10.12.4",
     "lottie-react": "^2.4.0",
     "nanoid": "^5.0.7",
+    "openapi-fetch": "^0.13.0",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.51.5",
     "react-responsive": "^10.0.0",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "swagger-typescript-api": "^13.0.23"
   },
   "devDependencies": {
     "@hookform/devtools": "^4.3.1",
     "@tanstack/eslint-plugin-query": "^5.35.6",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vanilla-extract/vite-plugin": "^4.0.9",
     "@vitejs/plugin-react": "^4.2.1",
+    "browserslist-useragent-regexp": "^4.1.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-testing-library": "^6.3.0",
+    "eslint-plugin-vitest": "^0.5.4",
+    "jsdom": "^25.0.0",
+    "msw": "^2.4.9",
+    "openapi-typescript": "^7.4.3",
     "prettier": "^3.2.5",
+    "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vitest": "^2.0.5"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }

patches/lottie-react+2.4.0.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/lottie-react/build/index.es.js b/node_modules/lottie-react/build/index.es.js
+index a2d9d48..1f08a0b 100644
+--- a/node_modules/lottie-react/build/index.es.js
++++ b/node_modules/lottie-react/build/index.es.js
+@@ -1,5 +1,5 @@
+-import lottie from 'lottie-web';
+-export { default as LottiePlayer } from 'lottie-web';
++import lottie from "lottie-web/build/player/lottie_light";
++export { default as LottiePlayer } from 'lottie-web/build/player/lottie_light';
+ import React, { useState, useRef, useEffect } from 'react';
+
+ function _iterableToArrayLimit(arr, i) {