docs: 프로젝트 소개 작성

README.md

@@ -1 +1,258 @@
-# Team-12-ReviewRanger-FE
+# 리뷰레인저
+
+### 배포 주소 : [리뷰레인저](https://www.review-ranger.shop/)
+
+<br />
+
+## 🦸 프로젝트 소개
+
+<img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/086b88cb-06d8-4b94-9e71-de3a6e68a806" width="600px" />
+
+```
+프로젝트 리뷰를 시각화하여 효과적으로 피드백을 확인하고
+리뷰 목록을 손쉽게 관리할 수 있는 서비스
+```
+
+<br />
+
+## ✨ 기획 배경
+
+<b> 데브코스내에서 피어리뷰를 진행할 때 구글폼에 의존하면서 생기는 문제점을 해결하고자 했습니다. </b>
+
+> 개별 응답을 수집하고 종합하는 데 많은 시간이 소요되며 응답 유무를 확인하기 어렵고 또한, 주관식 응답을 정제하는 데 시간이 오래 걸리는 문제가 있습니다. </br>
+
+<b> 리뷰 결과를 여러 매체에 의존하지 않고 하나의 플랫폼으로 효과적으로 관리하고자 했습니다. </b>
+
+> 리뷰 결과를 시각적으로 한눈에 확인할 수 있도록 했으며 PDF 저장 기능을 도입해 결과를 개인적으로 소장할 수 있도록 했습니다.
+
+<b> 실제 사용자를 유치하고 서비스를 지속 운영하고자 했습니다. </b>
+
+> 데브코스 인원들을 타겟으로 실사용자를 유치하고 테스터 경험을 통해 피드백 반영 후 안정적이며 지속적인 운영을 목표로 했습니다. </br>
+
+</br>
+
+## 📅 프로젝트 기간
+
+2023.10 - 2023.11
+
+<br />
+
+## 기술 스택
+
+<table>
+<tr>
+ <td align="center">언어</td>
+ <td>
+  <img src="https://img.shields.io/badge/Typescript-3178c6?style=for-the-badge&logo=TypeScript&logoColor=ffffff"/>&nbsp
+ </td>
+</tr>
+<tr>
+ <td align="center">라이브러리</td>
+ <td>
+  <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=ffffff"/>&nbsp
+ </td>
+</tr>
+<tr>
+ <td align="center">라우터</td>
+ <td>
+  <img src="https://img.shields.io/badge/React Router-CA4245?style=for-the-badge&logo=ReactRouter&logoColor=ffffff"/>&nbsp
+ </td>
+</tr>
+<tr>
+ <td align="center">상태관리</td>
+ <td>
+  <img src="https://img.shields.io/badge/tanstack query v5-ff4154?style=for-the-badge&logo=ReactQuery&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/React Hook Form-ec5990?style=for-the-badge&logo=ReactHookForm&logoColor=ffffff"/>&nbsp
+</tr>
+<tr>
+ <td align="center">API</td>
+ <td>
+  <img src="https://img.shields.io/badge/axios-5a29e4?style=for-the-badge&logo=axios&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Mock Service Worker-ff6a33?style=for-the-badge&logo=MockServiceWorker&logoColor=ffffff"/>&nbsp
+</tr>
+<tr>
+ <td align="center">스타일링</td>
+ <td>
+  <img src="https://img.shields.io/badge/Tailwind CSS-06b6d4?style=for-the-badge&logo=TailwindCSS&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Chart.js-ff6384?style=for-the-badge&logo=Chart.js&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/Ripple UI-000000?style=for-the-badge"/>&nbsp
+</tr>
+<tr>
+ <td align="center">포매터</td>
+ <td>
+  <img src="https://img.shields.io/badge/Prettier-f7b93e?style=for-the-badge&logo=Prettier&logoColor=white"/>&nbsp 
+ </td>
+</tr>
+<tr>
+ <td align="center">린터</td>
+ <td>
+ <img src="https://img.shields.io/badge/ESLint-4b32c3?style=for-the-badge&logo=ESLint&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/commitlint-000000?style=for-the-badge&logo=commitlint&logoColor=white"/>&nbsp
+  <img src="https://img.shields.io/badge/husky-808080?style=for-the-badge"/>&nbsp
+ </td>
+</tr>
+<tr>
+ <td align="center">패키지 매니저</td>
+ <td>
+  <img src="https://img.shields.io/badge/npm-cb3837.svg?style=for-the-badge&logo=npm&logoColor=white"/>&nbsp 
+ </td>
+</tr>
+<tr>
+ <td align="center">빌드</td>
+ <td>
+    <img src="https://img.shields.io/badge/Vite-646cff?style=for-the-badge&logo=Vite&logoColor=white"/>&nbsp
+</tr>
+<tr>
+ <td align="center">배포</td>
+ <td>
+    <img src="https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=Vercel&logoColor=white"/>&nbsp
+</tr>
+</table>
+
+<br>
+
+## ☁️ 프론트엔드 소개
+
+<table>
+  <tr>
+    <td><img src="https://avatars.githubusercontent.com/u/88622675?v=4" width="140px"/></td>
+    <td><img src="https://avatars.githubusercontent.com/u/97094709?v=4" width="140px"/></td>
+    <td><img src="https://avatars.githubusercontent.com/u/59411107?v=4" width="140px"/></td>
+  </tr>
+  <tr>
+    <td style="text-align: center;"><a href="https://github.com/hayamaster">김주하 (팀장)</a></td>
+    <td style="text-align: center;"><a href="https://github.com/hyoribogo">김효리</a></td>
+    <td style="text-align: center;"><a href="https://github.com/khj0426">김효중</a></td>
+  </tr>
+  <tr>
+    <td style="width: 150px;">- 회원가입, 마이 페이지 <br />- 답변 페이지(작성, 수정, 종료)<br />- Hook Form 상태 관리</td>
+    <td style="width: 150px;">- 메인, 생성, 결과, 에러 페이지<br />- 토큰 에러 바운더리<br />- 토스트 구현<br />- 다크모드 상태 관리<br />- GPT 정제</td>
+    <td style="width: 150px;">- 생성한 리뷰 관리, 로그인 페이지 <br />- msw 초기 세팅<br />- 커밋 린트 세팅<br />- 배포</td>
+  </tr>
+</table>
+
+<br />
+
+## 💫 화면 구성
+
+<br />
+
+<table>
+  <tr>
+    <th style="text-align: center;">로그인</th>
+    <th style="text-align: center;">메인</th>
+    <th style="text-align: center;">프로필</th>
+  </tr>
+  <tr>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/e8feaa93-aee3-49c4-b6bd-5c247c512207" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/fd4b801f-2e9d-4a74-9949-559fbd407b5e" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/9b2e2c17-0a22-40c1-b993-667dee359a18" width="200px" /></td>
+  </tr>
+  <tr>
+    <td style="text-align: center;">리뷰 생성 (제목, 설명)</td>
+    <td style="text-align: center;">리뷰 생성 (질문 추가)</td>
+    <td style="text-align: center;">리뷰 생성 (응답자 선택)</td>
+  </tr>
+  <tr>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/6149b7f5-8854-4869-8260-7a4b7f22573a" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/ec6e4408-9663-47c8-a64f-65d92b3e623f" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/3b079bcb-05a4-46c5-809d-f54ffbeb268e" width="200px" /></td>
+  </tr>
+  <tr>
+    <td style="text-align: center;">리뷰 답변 (수신자 선택)</td>
+    <td style="text-align: center;">리뷰 답변 (답변 작성)</td>
+    <td style="text-align: center;">리뷰 답변 (경고 모달)</td>
+  </tr>
+  <tr>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/cf5342f5-a41a-4aaf-9a9f-d7d79e177e6e" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/f6dacf99-208f-44bc-b039-d7cb1a210e0f" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/9074dee1-09f3-42aa-bfb6-7eca809cf5a8" width="200px" /></td>
+  </tr>
+  <tr>
+    <td style="text-align: center;">리뷰 관리 (작성자별)</td>
+    <td style="text-align: center;">리뷰 관리 (수신자별)</td>
+    <td style="text-align: center;">주관식 답변 정제</td>
+  </tr>
+  <tr>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/d62c1e4b-79e9-43e6-a743-76cabca95761" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/05974704-3ee6-4eb4-beaa-8f64a4c8a1f8" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/5f8b7591-bb6b-4eef-b3d0-a1397cc9d04e" width="200px" /></td>
+  </tr>
+  <tr>
+    <td style="text-align: center;">리뷰 결과</td>
+    <td style="text-align: center;">로그아웃</td>
+    <td style="text-align: center;">다크모드</td>
+  </tr>
+  <tr>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/9dd0def9-6bff-4b08-9d70-2a8666f9bf18" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/1a027cd5-74a4-4aae-a1fd-742630280b8b" width="200px" /></td>
+    <td style="text-align: center;"><img src="https://github.com/prgrms-web-devcourse/Team-12-ReviewRanger-FE/assets/97094709/505d9aa3-4ec4-4308-ad3e-3a6f36cc07ac" width="200px" /></td>
+  </tr>
+</table>
+
+<br />
+
+## ❄️ 핵심 기능
+
+### 리뷰 응답
+
+리뷰에 대한 응답을 작성할 때
+
+- 피어 리뷰에 적합한 **다양한 질문 형식**을 제공하고 있어요.
+- 답변 과정에서 **자유롭게 대상자를 변경**하며 답변할 수 있어요.
+
+### 리뷰 관리
+
+생성한 리뷰를 관리할 때
+
+- 주관식 답변들을 **GPT를 통해 정제**할 수 있어요.
+- **작성자별 & 수신자별**로 답변을 확인할 수 있어요.
+- (추가 예정) 슬랙을 통해 리뷰에 참여하지 않은 사용자들에게 **알림**을 보낼 수 있어요.
+
+### 리뷰 결과
+
+나에 대한 피드백을 확인할 때
+
+- 수집된 리뷰 결과들을 시각적으로 **한 눈에 확인**할 수 있어요.
+- (추가 예정) 결과를 **PDF로 확인**할 수 있어요.
+
+<br />
+
+### 💦 파일 구조
+
+```
+─ 📁.github
+─ 📁.husky
+─ 📁public
+   └── mockServiceWorker.js
+─ 📁src
+   ├── 📁apis
+   │   ├── apiClient.ts
+   │   └── 📁hooks
+   ├── 📁assets
+   ├── 📁components
+   ├── 📁constants
+   ├── 📁contexts
+   ├── 📁hooks
+   ├── 📁pages
+   ├── 📁routes
+   ├── 📁util
+   ├── App.tsx
+   ├── main.tsx
+   ├── index.css
+   └── vite-env.d.ts
+─ .env
+─ .eslint.cjs
+─ .gitignore
+─ .prettierrc
+─ commitlint.config.cjs
+─ index.html
+─ package-lock.json
+─ package.json
+─ postcss.config.js
+─ README.md
+─ tailwind.config.js
+─ tsconfig.json
+─ tsconfig.node.json
+─ vite.config.ts
+```