이거어때?(What Do You Think About?)
음악, 식당, 영화, 강의, 여행지, 전자기기, 호텔, 와인, 옷, 앱 등
다양한 분야의 상품을 리뷰하는 플랫폼
🔗 프로젝트 링크 WDYTA
📅 개발 기간 : 24.05.18 ~ 24.06.24 (6주)
| 남현준 | 손승현 | 안연아 | 이주형 | 최수민 |
|---|---|---|---|---|
 @hyunjun9788 |
 @linason-esc |
 @yeona813 |
 @mangang0713 |
 @suMin-97 |
 |
 |
 |
 |
 |
 |
- 개발
- 공통 컴포넌트 : 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이 적용되어 이동
- 비교 후 이긴 상품의 상세 페이지로 이동 가능
- 상품 간의 비교가 무승부일 시 홈 페이지로 이동 가능
- 페이지 무한 스크롤 및 스켈레톤 적용
- 반응형을 고려한 그리드 레이아웃 구현
- query params 사용하여 URL에 userId 및 메뉴 이름 저장
- 본인 프로필은 userId를 입력하지 않아도 접근 가능
- 메뉴 이름 입력하지 않고 접근 시 '리뷰 남긴 상품'으로 기본값 설정
- query key에 상품 탭 이름을 props로 받아 효율적으로 데이터 갱신
- URL과 query key를 활용한 메뉴별 상품 리스트 정렬
- 본인 프로필이 아닌 다른 유저 프로필 경우 팔로우 기능 사용 가능
- 팔로워, 팔로잉 유저 목록 모달 무한 스크롤 적용
- 팔로우 버튼 Optimistic Updates 적용
- 본인 프로필 페이지인 경우에만 프로필 편집 기능 사용 가능
- 프로필 편집 기능으로 닉네임, 프로필 이미지, 소개글 변경 가능
- 이전 캐시 초기화 및 재요청으로 수정된 프로필이 화면에 바로 반영