README.md

Mogazoa - 음악, 식당, 영화, 강의, 여행지, 전자기기, 호텔, 와인, 옷, 앱 등 다양한 분야의 상품을 리뷰하는 플랫폼

• 개발 기간 : 2024.05.18 ~ 2024.06.27
• 배포 주소 : https://mogazoa4-20.vercel.app/

개발 모드로 실행하기

git clone https://github.com/Mogazoa-team20/mogazoa.git

npm install

npm run dev

---

⚙️ TechStack

🪡 Communication

👑 팀원 구성

FE : 길수진 @suzinxix	FE : 박유빈 @yb3143	FE : 박준영 @zoonyoung	FE : 유아름 @aoooec	FE : 이진우 @yeeZinu

🌸길수진

비개발 분야

• 프로젝트 초기 세팅
• 템플릿 추가

개발 분야

• 메인 페이지, 상품 추가 모달
• GNB/공통 드롭다운/프로덕트 카드 컴포넌트

🌻박유빈

비개발 분야

• 전체 일정 관리
• README 작성

개발 분야

• 비교하기 페이지
• 공통 칩 컴포넌트

🍀박준영

비개발 분야

• 전체 컨벤션 및 룰 문서화
• 회의록 작성

개발 분야

• 상품 상세 페이지, 리뷰 추가 모달
• 공통 모달/인풋 컴포넌트, 상품 리스트(쿠팡/네이버) 컴포넌트

🌷유아름 (팀장)

비개발 분야

• 발표
• 일정 관리, 기록 보조

개발 분야

• 로그인/회원가입/간편회원가입/에러/404 페이지
• 공통 유저 아이템/토스트 컴포넌트

🌼이진우

비개발 분야

• 레포지토리 생성
• 프로젝트 배포
• 웹 후크 연결

개발 분야

• 유저 페이지, 프로필 수정/팔로우/팔로잉 모달
• 공통 버튼/상품 통계 카드 컴포넌트

💻 프로젝트 내용

로그인 & 회원가입 페이지

• Cookie로 AccessToken을 저장하고 인증하여 로그인과 회원가입을 할 수 있습니다.

홈페이지

• 카테고리를 선택하지 않았거나 검색어가 없을 경우에는 “지금 핫한 상품 Top 6” 와 “별점이 높은 상품” 을 볼 수 있습니다.
• 메인 페이지에서 불러오는 데이터는 실시간으로 자주 바뀌지 않는 데이터라고 판단했습니다.
• 이러한 특성에 맞춘 서버 컴포넌트 선택하여 초기 로딩 속도를 크게 향상시켰습니다.

상품 상세 페이지

• 상품에 대한 정보를 확인할 수 있습니다. (이미지, 이름, 카테고리 등)
• 상품 상세 화면 링크를 카카오톡으로 공유하거나 클립보드에 복사할 수 있습니다.
• 비교하기, 상품 리뷰, 상품 찜 등 여러 기능들을 사용할 수 있습니다.

비교하기

• 상품 입력창을 통해 비교 상품을 수정하거나 제거할 수 있습니다.
• 이미 비교 등록했던 상품이 있다면 입력창에 상품이 입력된 채로 보여집니다.
• 상품 입력창에 상품명을 입력하면 입력값과 관련된 상품 목록이 보여집니다. 보여진 상품 목록에서 상품을 클릭하여 비교 상품을 등록할 수 있습니다.

유저 프로필 화면

• 나와 다른 유저의 프로필을 확인할 수 있습니다.
  
• 유저 닉네임, 프로필 이미지, 팔로워 수, 팔로잉 수, 프로필 소개를 확인할 수 있습니다.