리뷰레인저

배포 주소 : 리뷰레인저

🦸 프로젝트 소개

프로젝트 리뷰를 시각화하여 효과적으로 피드백을 확인하고
리뷰 목록을 손쉽게 관리할 수 있는 서비스

✨ 기획 배경

데브코스내에서 피어리뷰를 진행할 때 구글폼에 의존하면서 생기는 문제점을 해결하고자 했습니다.

개별 응답을 수집하고 종합하는 데 많은 시간이 소요되며 응답 유무를 확인하기 어렵고 또한, 주관식 응답을 정제하는 데 시간이 오래 걸리는 문제가 있습니다.

리뷰 결과를 여러 매체에 의존하지 않고 하나의 플랫폼으로 효과적으로 관리하고자 했습니다.

리뷰 결과를 시각적으로 한눈에 확인할 수 있도록 했으며 PDF 저장 기능을 도입해 결과를 개인적으로 소장할 수 있도록 했습니다.

실제 사용자를 유치하고 서비스를 지속 운영하고자 했습니다.

데브코스 인원들을 타겟으로 실사용자를 유치하고 테스터 경험을 통해 피드백 반영 후 안정적이며 지속적인 운영을 목표로 했습니다.

📅 프로젝트 기간

2023.10 - 2023.11

🛠 기술 스택

언어
라이브러리
라우터
상태관리
API
스타일링
포매터
린터
패키지 매니저
빌드
배포

☁️ 프론트엔드 소개

김주하 (팀장)	김효리	김효중
- 회원가입, 마이 페이지 - 답변 페이지(작성, 수정, 종료) - Hook Form 상태 관리	- 메인, 생성, 결과, 에러 페이지 - 토큰 에러 바운더리 - 토스트 구현 - 다크모드 상태 관리 - GPT 정제	- 생성한 리뷰 관리, 로그인 페이지 - msw 초기 세팅 - 커밋 린트 세팅 - 배포

💫 화면 구성

로그인	메인	프로필
리뷰 생성 (제목, 설명)	리뷰 생성 (질문 추가)	리뷰 생성 (응답자 선택)
리뷰 답변 (수신자 선택)	리뷰 답변 (답변 작성)	리뷰 답변 (경고 모달)
리뷰 관리 (작성자별)	리뷰 관리 (수신자별)	주관식 답변 정제
리뷰 결과	로그아웃	다크모드

❄️ 핵심 기능

리뷰 응답

리뷰에 대한 응답을 작성할 때

• 피어 리뷰에 적합한 다양한 질문 형식을 제공하고 있어요.
• 답변 과정에서 자유롭게 대상자를 변경하며 답변할 수 있어요.

리뷰 관리

생성한 리뷰를 관리할 때

• 주관식 답변들을 GPT를 통해 정제할 수 있어요.
• 작성자별 & 수신자별로 답변을 확인할 수 있어요.
• (추가 예정) 슬랙을 통해 리뷰에 참여하지 않은 사용자들에게 알림을 보낼 수 있어요.

리뷰 결과

나에 대한 피드백을 확인할 때

• 수집된 리뷰 결과들을 시각적으로 한 눈에 확인할 수 있어요.
• (추가 예정) 결과를 PDF로 확인할 수 있어요.

💦 파일 구조

─ 📁.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