Release client (#139)

* [Feat/CK-126] develop-client 빌드 오류를 해결한다 (#57) * fix: develop-client 빌드 오류 해결 * refactor: id 타입 null추가 * feat: 문자열에서 -(대시) 삭제하는 유틸 함수 구현 * test: 대시 삭제 유틸 함수 테스트 작성 * fix: merge conflict resolved * fix: merge conflicts resolved * feat: 투두 생성 rule 정의 * feat: modal shadow value theme 에 정의 * refactor: useValidateInput generic type 으로 변경 * design: todo 모달 스타일 구현 * feat: DialogContent wrapper div 태그 대신 fragment 사용하도록 변경 * feat: 투두 생성 validation 훅 구현 * feat: 투두리스트 모달 구현 * feat: backdrop style 을 스타일 파일로 이동 * feat: 투두리스트 추가 로직 구현 및 적용 * feat: GoalRoomTodoResponse 타입 정의 * chore: 골룸 전체 todolist 받는 mocking handler 추가 * feat: useFetchGoalRoomTodos (골룸 투두리스트 fetchin) 훅 구현 * feat: spinner loading component 구현 및 suspense fallback 으로 적용 * feat: 투두리스트 전체보기 데이터 매핑 * feat: request url 에서 prefix api/ 제거 * feat: Readmap List mock 요청 구현 및 API 명세에 맞춰 타입 수정 * refactor: Readmap List Dummy데이터 제거 및 API 연결 * refactor: Home 화면에 Main 컴포넌트 대신 Roadmap List 컴포넌트를 할당 * feat: 카테고리 선택 기능을 가진 훅 구현 * feat: 카테고리로 로드맵을 필터링 하는 기능 구현 * feat: 추천 로드맵 목록 컴포넌트 제거 * feat: "전체" 카테고리 추가 * feat: goalroomId prop drilling 해결하고자 scoped context api 구현 및 래핑 * feat: 인증피드 생성 훅 구현 * design: 인증 피드 모달 스타일 구현 * feat: 인증 피드 전체보기 모달 구현 및 생성 로직 매핑 * refactor: 로드맵 목록 컴포넌트 생성 * feat: 명세 변경에 맞추어 타입 변경 * feat: 요청 endpoint 변경 * refactor: 불필요한 object wrapping 제거 * refactor: 각 조건마다 boolean return 하도록 리팩토링 * refactor: Axios 설정 동기화 * [feat/CK-45] 로드맵 생성 api를 연결한다 (#58) * feat: 로드맵 생성 api 함수 & 훅 선언 * fix: interceptor의 response 값 수정 * design: 난이도 select 스타일 변경 * fix: 본문의 value가 가져와지지 않는 오류 해결 * refactor: 컴포넌트 역전을 위한 구조 변경 * design: 로드맵 추가하기 버튼 스타일 생성 * refactor: onclick시에 이벤트 버블링 방지하는 로직 추가 * feat: 입력된 태그를 가져오는 로직 구현 * feat: 로드맵 생성 api를 위한 타입 선언 * refactor: textarea 에서 input 태그로 변경 * feat: 로드맵 생성 api연결 * feat: form안에서 각 input들의 값을 가져오고 제출하는 커스텀 훅 생성 * style: 코드 개행 정리 * [feat/CK-99] 골루 목록 조회의 api를 연결한다 (#61) * chore: 불필요한 파일 삭제 * feat: 골룸 목록조회 페이지 경로 설정 * feat: 골룸 목록 조회 api 로직 구현 * feat: 골룸 목록 조회 UI구현 * feat: 충돌사항 해결 * feat: 골룸 목록 페이지 라우팅 * feat: 골룸목록조회 api 연결 * feat: 골룸목록조회 api 연결 * fix: response에서 access_token 에 접근하지 못하는 오류 해결 * feat: ui데이터 변경 * [feat/CK-129] 오류해결 & 통합한다 (#62) * fix: develop-client 오류 해결 * fix: develop-client 오류 해결 * feat: user 저장 context 구현 * feat: 유저 로그인 기능 고도화 * feat: 유저 정보 존재 validation util 구현 * chore: toast message 시간 증가 * feat: oath 버튼 주석처리 * feat: 변경된 todo type에 맞게 적용 * feat: todo 상태 변경 훅 구현 * feat: 투두 컴포넌트에 상태변경 로직 적용 * feat: 리스트 페이지 웹 접근성 향상 * [feat/CK-130] 페이지 라우팅과 잔여 서버 연결을 처리한다 (#66) * feat: 버튼 공용 컴포넌트에 onclick 추가 * feat: 로드맵 목록과 단일조회 라우팅 연결 * refactor: 데이터 패칭 함수 & 타입 네이밍 변경 * feat: 로드맵 단일조회 실제 데이터 적용 * fix: 데이터 반환 네이밍이 맞지 않는 오류 해결 * refactor: 더미데이터 제거 * refactor: 로드맵 단일조회 데이터 반환 네이밍 수정 * fix: fixture 데이터 타입 변환 * refactor: 타입 변경 * chore: 불필요한 파일 제거 * feat: dialog컴포넌트에 defaultOpen 속성 추가 * feat: 골룸 단일조회 UI구현 * design: 모달 디자인 변경 * feat: 골룸 단일조회 api 로직 구현 * feat: dialog 컴포넌트 스크롤 방지 로직 구현 * feat: 골룸 단일 조회 타입 선언 * feat: 골룸 단일 조회 데이터 연결 * design: 골름 목록 반응형 ui 적용 * design: 로드맵 생성 ui 수정 * feat: 로드맵 생성 후 경로설정 * feat: 골룸 생성하는 페이지 라우팅 * refactor: node의 textarea 스타일 수정 * feat: 통신 에러 해결 * feat: 통신 에러 해결 * fix: 골룸 생성 시, 로드맵 노드에 대한 날짜 값이 변경되지 않는 버그 수정 * refactor: 골룸을 생성하면, 골룸 리스트 페이지로 이동하도록 변경 * refactor: 골룸 생성 요청의 반환 타입에 요청 타입이 적용된 것 수정 * refactor: 골룸을 생성 시, Toast로 사용자에게 알려주도록 변경 * refactor: 골룸 생성 응답에 대한 후 처리 로직을 골룸 생성 요청 훅 내부에서 수행하도록 변경 * chore: 배경 투명한 약간 파란색 팔레트에 추가 * chore: 성별 별 얼굴 svg icon 추가 * feat: 내가 속한 골룸 조회 훅 구현 * feat: 마이 페이지 컴포넌트 구현 * refactor: 모달 내부에서 스크롤 Y 적용 및 스크롤바 제거 * refactor: on, off 기능을 useSwitch 훅으로 대체 * refactor: 컴파운드 패턴으로 구현된 모달의 상태가 외부에서 다루어지고 있는 이슈로 인한 버그 해결 * refactor: 컴포넌트 내부에서 useNavigate 대신 Link를 사용하도록 수정 * refactor: console 문 제거 및 존재하지 않는 데이터에 대한 UI 제거 * feat: 입력받은 날짜가 현재를 기준으로 유효한지 판별하는 함수 구현 * feat: 골룸 인증 피드 도출 hook 구현 * feat: 골룸 인증피드 모달에 인증피드 카드 리스트 도출 * feat: 사용자가 골룸에 참여하지 않았다면 골룸 참여버튼을 통해 참여시키기 * refactor: 사용자가 골룸에 참가중인지 아닌지 판별하지 못했던 이슈 해결 * refactor: useValidateInput 훅 검증 통과하지 못하더라도 상태는 바뀌도록 변경 * chore: 토스트 메세지 띄워지는 시간 증가 * feat: 회원가입 regex, 에러 메세지 구현 * feat: 회원가입 성공시 토스트 메세지와 함께 로그인 페이지로 이동하는 로직 구현 * feat: 회원가입 폼 검증 훅 구현 * refactor: GoalRoomCertificationFeedsResponse type 타입 선언 형식 컨벤션에 맞추어 변경 * [feat/CK-136] 로그인 유지와 UI 버그를 해결한다 (#97) * fix: 로그인이 유지되지 않는 오류 해결 * fix: 로드맵 리스트의 아이템의 크기가 다른 오류 해결 * fix: 목록조회 페이지의 높이 문제 해결 * style: 코드 스타일 정리 * refactor: unmount되었을 때 비동기 작업 취소 로직 구현 * feat: 사용하지 않는 훅 제거 * [feat/CK-142] 로드맵 생성페이지 버그를 해결한다 (#101) * design: 태그 삭제버튼 생성 * feat: 태그 삭제버튼 생성 & 태그 placeholder적용 * feat: 태그를 삭제하는 로직 구현 * style: 코드 스타일 정리 * refactor: 태그를 완성하는 trigger 분리 후 적용 * fix: 로드맵 입력부분 크기가 맞지 않는 오류 해결 * fix: 소개글 입력창의 높이가 늘어나지 않는 오류 해결 * refactor: 로드맵 입력 placeholder추가 * style: 오타 수정 * feat: onChange가 발생했을 때, onSubmit이 발생했을 때 유효성 검사를 수행하도록 Hook 확장 * chore: handleSubmit 함수에 대한 주석 추가 * feat: 코끼리끼리 InputField 구현 * design: number 타입일 떄의 스타일 추가 * design: form을 section 별로 분리 및 스타일 재조정 * feat: 객체 내부의 yyyy-mm-dd 형식의 문자열을 yyyymmdd 형태로 변환하는 함수 구현 * refactor: 외부에서 handleInputChange 함수의 타입과 에러 객체의 타입에 접근할 수 있도록 변경 * feat: 변동사항에 맞게 api fetching spec 변경 * feat: 변동사항에 맞게 api fetching spec 변경 * feat: 변동사항에 맞게 api fetching spec 변경 * feat: 무한 스크롤 적용 * feat: useIntersection hook 구현 * refactor: 각 Input의 validation을 하나의 함수로 작성하도록 리펙토링 * refactor: useFormInput 중복 로직 제거 리펙토링 * feat: 무한스크롤 적용된 api명세 반영 * feat: render-props를 이용한 필터링 컴포넌트 구현 * design: 필터링 컴포넌트 스타일 코드 작성 * feat: 골룸 필터링 constants 생성 * feat: Object.hasOwn의 타입 커스텀 * refactor: validation 객체의 메서드 내부에서 모든 유효성 검사 로직을 수행하도록 변경 * design: 에러 메시지가 잘리지 않도록 스타일 수정 * feat: any 타입을 최소화하도록 타입 리펙토링 * feat: 회의 이후 구현하지 않기로 한 Calender 컴포넌트 제거 * feat: suspense fallback 에 Spinner 컴포넌트 할당 * feat: useInfiniteScroll 훅 구현 * feat: 로드맵 리스트 Fetching 훅에 무한 스크롤 로직 적용 * feat: 로드맵 리스트 Fetching 훅에 무한 스크롤 로직 적용 * feat: RoadmapList 컴포넌트에 무한 스크롤 적용 * refactor: validation utils 함수 분리 및 테스트 코드 작성 * feat: 골룸 사용자 fetching api function 구현 * feat: 골룸 참여자 query hook 구현 * feat: 롤룸 랭킹 대시보드 박스 구현 * feat: isValidMaxValue 함수 구현 및 테스트 코드 작성 * feat: 인원수에 대한 Input 추가 * refactor: validation의 매직넘버와 에러 메시지를 상수화 * feat: InputField에 textarea 태그를 조건 분기로 추가 * refactor: 로드맵 Info 맵핑 * feat: 유저 전체 조회 query 훅 구현 * feat: 유저 전체보기 모달 구현 * feat: 로드맵 검색 컴포넌트 UI구현 * feat: 로드맵 검색 api 로직 생성 * feat: hotfix * feat: hotfix * [feat/CK-151] Selectbox의 오류를 해결한다 (#107) * design: option 넓이 수정 * fix: render props를 받는 컴포넌트 생성으로 난이도 value표시 오류 해결 * fix: render props를 받는 컴포넌트 생성으로 난이도 value표시 오류 해결 * feat: 리턴하는 상태 추가 * feat: 사이드 네브바가 항상 최상위 요소이도록 수정 * refactor: 골룸 아이템의 height가 늘어나는 버그 수정 * refactor: 골룸을 생성한 후, 골룸 목록을 다시 불러오도록 구현 * refactor: 골룸 생성 페이지에 Suspense 적용 * refactor: 골룸 모달 내부의 컨텐츠를 눌러도 모달이 닫히는 버그 수정 * design: 네브바 스타일 고도화 * feat: 로그아웃 버튼 구현 * design: 로그인 시 뒤로가기 버튼과 로고가 겹치지 않도록 수정 * refactor: 기존 로그인 form 을 핸들링하면 홈으로 갔던 로직에서 응답이 성공 시 navigating 하도록 리팩토링 * feat: image src path S3 적용한 path로 번경 * feat: 로드랩 검색결과 서브라우팅 * feat: 로드맵 검색 결과 api로직 생성 * design: 검색 아이콘 생성 * design: 로드맵 검색 스타일 코드 작성 * design: 로드맵 생성버튼 UI변경 * feat: 로드맵 검색바 구현 * refactor: 무한 스크롤의 트리거가 되는 컴포넌트 분리 * feat: 골룸 리스트 무한 스크롤 적용 * feat: 주어진 날짜 string 이 오늘 혹은 이후인지 판별하는 유틸 구현 * feat: 컴포넌트 내 페이지 이동에 Link 사용 * feat: 골룸 시작 쿼리 함수 구현 * feat: 골룸 시작 버튼 적용 * feat: 골룸 대시보드 query key 상수 적용 * feat: 인증피드 등록 시 invalidate 처리와 Input reset 로직 구현 * feat: 골룸 생성자가 아니라면 투두 생성 폼 보지 못하도록 처리 * design: 인증피드 content min-width 적용 * feat: 대시보드에서 채팅 섹션 제거 후 전체적인 레이아웃 리사이징 * feat: 대시보드에서 채팅 섹션 제거 후 전체적인 레이아웃 리사이징 * design: paylayout min-height 적용 * feat: query key 상수화 및 dependent 엘리먼트 추가 * feat: 대시보드 투두, 인증피드 총 개수 도출 로직 구현 * feat: 대시보드 투두, 인증피드 총 개수 도출 로직 구현 * fix: merge conflicts resolved * feat: 골룸 유저 랭킹 * feat: 골룸 본인 랭킹 도출 로직 구현 * feat: 골룸 본인 랭킹 폰트 변경 * feat: 날짜 변환 유틸 함수 구현 * feat: 나의 로드맵 리스트 fetching hook 구현 * feat: 마이페이지에 나의 로드맵 탭 추가 * design: 코끼리 로고 중앙정렬 * design: 로드맵 리스트 컨텐츠 가시성 문제 개선 * refactor: mainPage 제작을 위한 라우팅 처리 * feat: 메인 페이지 구현 * design: 기존 권장 소요기간 days 에서 일로 변경 * feat: 로드맵 소개 글 추가 * chore: 오타 수정 * feat: 기존 하단 진행중인 골룸보기 버튼에서 골룸 생성 버튼으로 변경 * feat: 메인 코끼리 애니메이션 추가 * chore: 파비콘 추가 * feat: 응답받은 response 변수의 네이밍을 ~Response로 일치시키도록 변경 * feat: 불피요한 컴포넌트 제거 * [feat/CK-168] 로드맵 생성부분의 변경된 api를 반영한다 ( 사진추가 기능 ) (#122) * feat: 로드맵 생성 api headers 변경 반영 * design: 이미지 업로드 아이콘 생성 * design: 로드맵 생성의 이미지 삽입 UI구현 * feat: 로드맵 생성 api 파라미터 타입 변경 * feat: 이미지를 업로드하면 preview 이미지가 보이는 기능 구현 * design: 로드맵 생성하기 버튼 UI 변경 * feat: 업로드된 이미지를 취합하는 기능 구현 * feat: 이미지를 업로드하는 커스텀 훅 생성 * feat: 로드맵 생성 관련 타입 수정 * design: 골룸 아이템의 전체적인 border-radius 조정 * feat: 골룸 정렬 로직 상수화 및 API 수정 사항 반 * feat: 시작하지 않은 골룸 대시보드 만질 수 없게 처리 * feat: 골룸 리스트 스타일 고도화 * feat: 골룸 생성 시, 날짜에 대한 유효성 검사 강화 * feat: 에러 바운더리 구현 및 적용 * [feat/CK-171] 로드맵 확인하기를 구현한다 & 로드맵 리스트의 UI를 변경한다 (#127) * feat: 충돌해결 * fix: merge conflict 해결 * design: 로드맵 리스트 정렬 변경 * feat: 로드맵 노드 리스트 api 함수 생성 * [feat/CK-157] 로드맵 리스트의 검색기능을 구현한다 (#130) * fix: mutate의 인자 변경 * feat: 로드맵 검색 api수정 * feat: select컴포넌트의 default 선택값이 있도록 수정 * refactor: 카테고리 선택에 따른 api요청을 query string을 이용하는것으로 변경 * feat: 로드맵 검색기능 구현 * fix: 로그인이 되어 있지 않을 때, 인증 헤더를 계속 재요청하는 버그 수정 * refactor: 로드맵 생성 시, 로드맵 목록을 refetch하도록 변경 * feat: private router 컴포넌트 생성 * design: 로드맵 아이템 UI 위치수정 * feat: 골룸 대시보드 로드맵 구현 * fix: 골룸 단일조회 모달 배경 z-index 오류 수정 * feat: selectBox option에 defaultOption 속성 추가 * feat: selectBox option에 defaultOption 속성 추가 * fix: 로드맵 본문이 저장되지 않는 오류 해결 * design: 로드맵 생성하기 버튼 UI수정 * fix: 카테고리 id 수정 * feat: 로드맵 생성 시 get을 받아오는 로직 추가 * fix: 로드맵 본문이 저장되지 않는 오류 해결 * refactor: 오타 수정 및 골룸 생성 페이지의 노트 설명에 Y축 스크롤 추가 * fix: 골룸생성의 쿼리스트링을 roadmapId에서 content.id로 수정 * feat: ux 개선 * fix: 없는 카테고리 삭제 (#137) --------- Co-authored-by: sh981013s <[email protected]> Co-authored-by: Jungwoo <[email protected]> Co-authored-by: Woody <[email protected]> Co-authored-by: Jiwon Lee <[email protected]>
woowacourse-teams · Sep 1, 2023 · dd0a222 · dd0a222
1 parent 5af5d8c
commit dd0a222
Show file tree

Hide file tree

Showing 293 changed files with 59,277 additions and 0 deletions.
diff --git a/.github/workflows/ci-client-test.yml b/.github/workflows/ci-client-test.yml
@@ -0,0 +1,27 @@
+name: client test CI
+
+on:
+  pull_request:
+    branches: [ develop-client ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: |
+          cd client
+          npm ci
+          npm run build --if-present
+          npm run test
+          
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+.vscode
+.idea
+
+# test coverage dir
+coverage
+
+# misc
+.DS_Store
diff --git a/client/.babelrc b/client/.babelrc
@@ -0,0 +1,21 @@
+{
+  "presets": [
+    ["@babel/preset-env"],
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "displayName": true
+      }
+    ],
+    "@babel/plugin-transform-runtime"
+  ]
+}
diff --git a/client/.eslintignore b/client/.eslintignore
@@ -0,0 +1 @@
+*.styles.ts
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
@@ -0,0 +1,119 @@
+module.exports = {
+  ignorePatterns: ['/*', '!/src'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react'],
+  extends: [
+    'airbnb',
+    'airbnb/hooks',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        paths: ['src'],
+      },
+      alias: {
+        map: [
+          ['@', './src'],
+          ['@apis', './src/apis'],
+          ['@assets', './src/assets'],
+          ['@components', './src/components'],
+          ['@constants', './src/constants'],
+          ['@hooks', './src/hooks'],
+          ['@mocks', './src/mocks'],
+          ['@pages', './src/pages'],
+          ['@styles', './src/styles'],
+          ['@myTypes', './src/myTypes'],
+          ['@utils', './src/utils'],
+        ],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+      },
+    },
+  },
+  rules: {
+    'import/extensions': [
+      'off',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'prettier/prettier': 'error',
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    ],
+    'space-before-blocks': ['error', 'always'],
+    'react/button-has-type': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'no-console': [
+      'warn',
+      {
+        allow: ['warn', 'error'],
+      },
+    ],
+    'prefer-const': 'warn',
+    eqeqeq: 'warn',
+    'prefer-arrow-callback': 'error',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'react/function-component-definition': [
+      2,
+      {
+        namedComponents: 'arrow-function',
+      },
+    ],
+    'react-hooks/exhaustive-deps': 'off',
+    'no-shadow': 'off',
+    'import/prefer-default-export': 'off',
+    'global-require': 'warn',
+    'import/no-extraneous-dependencies': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      {
+        ignoreTypeReferences: true,
+      },
+    ],
+    'no-plusplus': 'off',
+    'no-param-reassign': 'off',
+    'react/require-default-props': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'import/no-unresolved': 'off',
+    'import/order': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'no-nested-ternary': 'off',
+    'react/jsx-no-useless-fragment': 'off',
+    'react/no-unescaped-entities': 'off',
+    'no-else-return': 'off',
+  },
+};
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+
+/dist
+
+.env
diff --git a/client/.husky/commit-msg b/client/.husky/commit-msg
@@ -0,0 +1,71 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+
+# 커밋 컨벤션
+# 0. 검사 예외 조건 (자동 생성, 최초 커밋)
+# - Merge branch*, Merge pull request*, initial*
+# 1. 접두사의 글자는 소문자
+# 2. 맨 마지막 글자 '.' 마침표 금지
+# 3. 커밋 접두사 (규칙: '접두사' + '콜론' + ' ')
+# - feat: 새로운 기능 추가
+# - fix: 버그 수정
+# - docs: 문서의 수정
+# - style: (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)
+# - refactor: 코드를 리펙토링
+# - test: Test 관련한 코드의 추가, 수정
+# - chore: (코드의 수정 없이) 설정을 변경
+# - design: css 코드 수정
+
+COMMIT_MSG_FILE=$1
+FIRST_LINE=`head -n1 ${COMMIT_MSG_FILE}`
+RES="needCheck" # needCheck, auto, initial, lintError*, clear
+
+if [[ $FIRST_LINE =~ ^(Merge branch) ]] ||
+   [[ $FIRST_LINE =~ ^(Merge pull request) ]]; then
+  RES="auto"
+fi
+
+if [[ $FIRST_LINE =~ ^(initial) ]]; then
+  RES="initial"
+fi
+
+if [ $RES == "needCheck" ]; then
+  if [[ $FIRST_LINE =~ (\.)$ ]]; then
+    RES="lintError1"
+  fi
+
+  if [[ ! $FIRST_LINE =~ ^(feat: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(fix: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(docs: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(style: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(refactor: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(test: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(design: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(build: ) ]] &&
+     [[ ! $FIRST_LINE =~ ^(chore: ) ]]; then
+    RES="lintError2"
+  fi
+
+  if [[ ! $RES =~ ^(lintError) ]]; then
+    RES="clear"
+  fi
+fi
+
+if [[ $RES =~ ^(lintError) ]]; then
+  if [[ $RES == "lintError1" ]]; then
+    echo "CommitLint#1: 문장 마지막의 ('.') 마침표를 제거해주세요."
+  fi
+  if [[ $RES == "lintError2" ]]; then
+    echo "CommitLint#2: 접두사, 콜론, 띄어쓰기 형태를 확인하세요. (feat: , fix: , docs: , style: , refactor: , test: , chore: )"
+  fi
+  exit 1
+elif [[ $RES == "auto" ]]; then
+  echo "Automatically generated commit message from git"
+elif [[ $RES == "initial" ]]; then
+  echo "Initial commit"
+elif [[ $RES == "clear" ]]; then
+  echo "Pass commit lint!"
+fi
+
+exit 0
diff --git a/client/.husky/pre-commit b/client/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd client && echo 👩🏿‍💻FE 👩🏿‍💻 pre-commit rules applying... &&  npm run lint-fix && node checkUtilTests.js && npm test
diff --git a/client/.prettierrc b/client/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 90,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "newline-between-functions": true
+}
diff --git a/client/.storybook/main.ts b/client/.storybook/main.ts
@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;
diff --git a/client/.storybook/preview.ts b/client/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/client/.stylelintrc b/client/.stylelintrc
@@ -0,0 +1,5 @@
+{
+  "extends": ["stylelint-config-clean-order"],
+
+  "customSyntax": "postcss-styled-syntax"
+}
diff --git a/client/checkUtilTests.js b/client/checkUtilTests.js
@@ -0,0 +1,40 @@
+const fs = require('fs');
+const path = require('path');
+
+const checkDirectory = (dir) => {
+  fs.readdir(dir, (err, files) => {
+    if (err) throw err;
+
+    files.forEach((file) => {
+      const filePath = path.join(dir, file);
+      fs.stat(filePath, (err, stats) => {
+        if (err) throw err;
+        if (stats.isDirectory()) {
+          checkDirectory(filePath);
+        } else if (filePath.endsWith('.js') || filePath.endsWith('.ts')) {
+          const baseFileName = file.substring(0, file.length - 3);
+          const testFile = path.join(
+            process.cwd(),
+            'src',
+            'tests',
+            'utilTests',
+            `${baseFileName}.test.ts`
+          );
+
+          if (!fs.existsSync(testFile)) {
+            console.error(
+              `${file} <= 유틸 파일에 대한 테스트 파일이 없습니다. 서운합니다 😢\n${file.substring(
+                0,
+                file.length - 3
+              )}.test.ts 파일을 만들어주세요.`
+            );
+            process.exit(1);
+          }
+        }
+      });
+    });
+  });
+};
+
+const utilsDir = path.join(process.cwd(), 'src', 'utils');
+checkDirectory(utilsDir);
diff --git a/client/jest.config.js b/client/jest.config.js
@@ -0,0 +1,33 @@
+module.exports = {
+  clearMocks: true,
+  collectCoverage: true,
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: 80,
+    },
+  },
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  coverageReporters: ['text', 'text-summary', 'lcov'],
+  moduleFileExtensions: ['js', 'mjs', 'cjs', 'jsx', 'ts', 'tsx', 'json', 'node'],
+  testEnvironment: 'jsdom',
+  testMatch: [
+    '<rootDir>/**/*.test.(js|jsx|ts|tsx)',
+    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
+  ],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  moduleDirectories: ['node_modules', 'src'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
+  },
+  resetMocks: false,
+  setupFiles: ['dotenv/config'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  globals: {
+    PRODUCT_ENV: 'test',
+  },
+};
diff --git a/client/jest.setup.js b/client/jest.setup.js
@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';