리드미 작성

README.md

@@ -1,3 +1,163 @@
-# WDYTA
+![image](https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/fb2cae2a-760f-4ac3-a213-21b49320452c)
 
-# What Do You Think About?
+# What Do You Think About?
+
+![BuildTest](https://github.com/Codeit-Part4-SFJs/WDYTA/actions/workflows/BuildTest.yml/badge.svg)![CICD](https://github.com/Codeit-Part4-SFJs/WDYTA/actions/workflows/CICD.yml/badge.svg)![NotificateMerged](https://github.com/Codeit-Part4-SFJs/WDYTA/actions/workflows/NotificateMerged.yml/badge.svg)![NotificatePullRequest](https://github.com/Codeit-Part4-SFJs/WDYTA/actions/workflows/NotificatePullRequest.yml/badge.svg)
+
+```
+이거어때?(What Do You Think About?)
+음악, 식당, 영화, 강의, 여행지, 전자기기, 호텔, 와인, 옷, 앱 등
+다양한 분야의 상품을 리뷰하는 플랫폼
+```
+
+🔗 프로젝트 링크 [WDYTA](https://www.wdyta.store/)
+
+📅 개발 기간 : 24.05.18 ~ 24.06.24
+
+# 💁🏻‍♀팀원 소개💁🏻‍♂
+
+|                                                                    남현준                                                                    |                                                                   손승현                                                                    |                                                                 안연아                                                                 |                                                                    이주형                                                                    |                                                                 최수민                                                                 |
+| :------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: |
+| [<img src="https://avatars.githubusercontent.com/u/121845820?v=4" height="120" width="120"><br>@hyunjun9788](https://github.com/hyunjun9788) | [<img src="https://avatars.githubusercontent.com/u/67824465?v=4" height="120" width="120"><br>@linason-esc](https://github.com/linason-esc) | [<img src="https://avatars.githubusercontent.com/u/129318957?v=4" height="120" width="120"><br>@yeona813](https://github.com/yeona813) | [<img src="https://avatars.githubusercontent.com/u/139374266?v=4" height="120" width="120"><br>@mangang0713](https://github.com/mangang0713) | [<img src="https://avatars.githubusercontent.com/u/155162841?v=4" height="120" width="120"><br>@suMin-97](https://github.com/suMin-97) |
+
+# ⚙️ 기술 스택
+
+![기술스택](https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/701dae56-71dd-4d03-90e8-d94f3c20ff1d)
+
+# 📺 화면 구성
+
+<table>
+  <tr>
+    <td><img src="https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/441da87b-1aa5-4ec4-8bd3-12af07e90541" alt="Image 1" width="250"/></td>
+    <td><img src="https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/917f49ff-16dd-4d7d-8b9b-45ae4deff4f9" alt="Image 2" width="250"/></td>
+    <td><img src="https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/97f8ab6d-3c7d-4ed3-adf9-b9ec28ca9467" alt="Image 3" width="250"/></td>
+  </tr>
+  <tr>
+    <td><img src="https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/774700e8-cf6a-45bf-8c8c-701458fa1afe" alt="Image 4" width="250"/></td>
+    <td><img src="https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/874b863e-a627-4ffc-a95a-b10f4057e49b" alt="Image 5" width="250"/></td>
+    <td><img src="https://github.com/Codeit-Part4-SFJs/WDYTA/assets/129318957/91b9bc35-f4c7-4bbc-810d-2374ed19f59e" alt="Image 6" width="250"/></td>
+  </tr>
+</table>
+
+<br/>
+
+# 📋 역할 분담
+
+### 🐻 남현준
+
+- 개발
+  - 공통 컴포넌트 : image, icon, loading, productCard
+  - 페이지 : 프로필 페이지
+  - 모달 : 팔로워, 팔로잉 유저 목록, 프로필 편집 모달
+  - Product, Follow API 초기 세팅
+- 비개발
+  - 화면 구성 이미지 제작
+
+### 🐰손승현
+
+- 개발
+  - 공통 컴포넌트 : chip
+  - 페이지 : 홈페이지
+  - 모달 : 상품 추가 모달
+  - 로고, favicon 디자인
+- 비개발
+  - 팀미팅 회의록 작성
+
+### 🐤 안연아
+
+- 개발
+  - 공통 컴포넌트 : input
+  - 페이지 : 로그인, 회원가입, 소셜 로그인, 404 페이지
+  - 모달 : Alert, 리뷰 작성, 상품 편집 모달
+  - Oauth, Image, Auth API 초기 세팅
+  - 상품 추가, 상품 리뷰 수정 모달 UI
+- 비개발
+  - 피그마를 활용한 기술스택 제작
+  - 발표 자료 준비 및 제작
+  - 리드미 작성
+
+### 🐭 이주형
+
+- 개발
+  - 개발 환경 초기 세팅
+  - 공통 컴포넌트 : button, dropdown, floating, sort
+  - 페이지 : 상품 비교 페이지
+  - 모달 : 비교 상품 교체 모달, 비교 상품 확인 모달
+- 비개발
+  - 팀미팅 회의 진행
+  - 발표
+
+### 🐶 최수민
+
+- 개발
+  - 개발환경 초기 세팅
+  - 공통 컴포넌트 : gnb, sidemenu
+  - 페이지 : 상품 상세 페이지
+  - 모달 : 리뷰 수정 모다리
+  - Category, Review, User API 초기 세팅
+  - 모달, Tanstack Query, Zustand 초기 세팅
+  - AWS 배포 및 CICD 자동화 구축
+- 비개발
+  - 발표 자료 준비
+
+# ⚒️ 주요 기능
+
+> ### 회원가입, 로그인 페이지
+
+- React Hook Form을 사용하여 모든 입력 필드를 효율적으로 관리
+- 이메일, 닉네임, 비밀번호를 입력하여 회원가입 가능
+- 중복된 이메일•닉네임으로 가입이 불가
+- 이메일과 비밀번호를 입력하여 로그인 가능
+- 로그인 성공 시, 발급된 accessToken•userId를 Next.js 쿠키에 저장
+
+> ### 소셜 로그인 페이지
+
+- OAuth 2.0을 활용한 카카오톡, 구글 간편 로그인 가능
+- 소셜 로그인 성공 시, 발급된 accessToken•userId를 Next.js 쿠키에 저장
+
+> ### 홈 페이지
+
+- 페이지 무한 스크롤 및 스켈레톤 적용
+- 반응형을 고려한 그리드 레이아웃 구현
+- 리뷰 수로 정렬된 상위 6개 상품("지금 핫한 상품"), 별점으로 정렬된 상위 6개 상품("별점이 높은 상품") 데이터 반영
+- 카테고리•검색•정렬을 변경할 시 URL 및 query key 변경으로 상품 동적 데이터 반영
+- Zustand를 활용하여 페이지 이동 시 검색어 삭제
+- 팔로워 수에 따른 리뷰어 랭킹 확인 가능
+- 상품 추가하기 버튼(Floating)을 통한 새로운 상품 추가 가능
+  - 상품 추가 모달을 통한 상품의= 이름, 카테고리, 이미지, 소개글 작성 가능
+  - 상품 추가 완료 후 추가한 상품 상세 페이지로 이동
+- 설정하기 버튼을 통한 내프로필 페이지 이동 및 로그아웃 기능
+
+> ### 상품 상세 페이지
+
+- 찜 버튼과 리뷰 좋아요 Optimistic Updates 적용
+- 카카오 공유하기 및 URL 클립보드 복사 가능
+- 리뷰 무한 스크롤 적용
+- 리뷰 정렬 버튼을 클릭할 때 URL을 변경하고, 이에 따라 URL의 query key를 변경하여 리뷰 리스트의 정렬 순서를 조정
+- 비교하기 버튼을 통해 비교 상품 변경 가능
+  - 이미 비교 상품에 들어가 있는 상품을 비교하려고 할 시 중복 알림 기능
+  - 비교 상품 두 개 중 하나를 선택하여 교체 가능
+  - 즉시 비교하기 페이지로 이동 가능
+- 자신이 생성한 상품일 경우 상품 편집하기 버튼 표시
+  - 상품 편집하기 모달을 통한 상품의 상품명, 이미지, 카테고리, 소개글 변경 가능
+  - 이전 캐시값 초기화 및 재요청으로 편집된 상품 정보가 화면에 바로 반영
+- 자신이 생성한 리뷰일 경우 수정 및 삭제 기능 추가
+  - 상품 리뷰 작성•수정 모달을 통한 상품의 별점, 리뷰 이미지, 리뷰글 변경 가능
+  - 이전 캐시값 초기화 및 재요청으로 수정된 리뷰가 화면에 바로 반영
+
+> ### 비교하기 페이지
+
+- QueryString을 통해 URL의 상태에 따라 페이지 초기값이 변경
+- Zustand를 통해 Compare 페이지 접근 시 자동으로 QueryString이 적용되어 이동
+- 비교 후 이긴 상품의 상세 페이지로 이동 가능
+- 상품 간의 비교가 무승부일 시 홈 페이지로 이동 가능
+
+> ### 프로필 페이지
+
+- 페이지 무한 스크롤 및 스켈레톤 적용
+- URL과 query key를 활용한 메뉴별 상품 리스트 정렬
+- 팔로워, 팔로잉 유저 목록 모달 무한 스크롤 적용
+- 팔로우 버튼 Optimistic Updates 적용
+- 본인 프로필 페이지인 경우 프로필 편집 버튼 표시
+  - 프로필 편집 기능으로 닉네임, 프로필 이미지, 소개글 변경 가능
+  - 이전 캐시 초기화 및 재요청으로 수정된 프로필이 화면에 바로 반영