여섯걸음마켓(미확정) 기획 정리

프로젝트 개요

프로젝트명: 여섯걸음마켓

설명: 카카오 지도 API를 활용한 위치 기반 중고 거래 플랫폼

사용 기술:

• 프론트엔드: React (Vite), Zustand (상태 관리), TanStack Query (데이터 패칭)
• 백엔드: Supabase (인증, 데이터베이스, 스토리지)
• 외부 API: KAKAOMAP API

프로젝트 소개

한 줄 소개: 사용자가 직접 물품을 등록하고, 지도에서 거래 물품을 확인할 수 있는 중고 거래 플랫폼

포함 기능:

• 물품 등록: 사용자가 판매할 물품을 등록하고, 사진, 가격, 카테고리, 설명 등을 입력 후 카카오 지도 API를 통해 거래 장소 선택
• 물품 검색: 사용자는 지도에서 근처 물품을 검색하고, 클릭하여 상세 정보 확인 가능
• 지도 위치 설정: 사용자가 물품 등록 시 현재 위치 기반 자동 설정 or 직접 마커를 찍어서 설정 가능
• 물품 위치 표시: 지도에서 물품 아이콘을 클릭하면 상세 정보 확인 & 사용자가 쉽게 위치를 찾을 수 있도록 UI 구성
• 찜하기 기능: 관심 있는 상품을 찜하고, 마이페이지에서 확인 가능

프로젝트 구조 & 팀원 역할 분배

1. Main (메인 페이지)

프로젝트 소개
주요 기능 안내

2. MyPage (마이페이지)

• 담당: (나)

내 정보: 프로필 이미지, 닉네임, 이메일
내가 등록한 물품: 본인이 등록한 거래 물품 리스트
내가 찜한 물품: 관심 상품 찜 목록

3. SignIn (로그인)

• 담당: (팀원1)

이메일 & 비밀번호 로그인
소셜 로그인 (Google, Kakao)

4. SignUp (회원가입)

• 담당: (팀원1)

이메일 & 비밀번호 회원가입
닉네임 설정

5. ProductList (물품 리스트 + 지도)

• 담당: (팀원2) / (팀원3)

최신 등록순으로 물품 리스트 제공 (10개씩 페이지네이션?)
검색어 입력 시, 검색어와 일치하는 물품 필터링
지도와 연동하여 물품 위치 표시

6. ProductDetail (물품 상세 페이지)

• 담당: (팀원4)

판매자 정보 + 물품 정보 제공
거래 상태 (거래 중 / 거래 완료) 표시
댓글 기능 + 찜하기 기능 추가

7. ProductRegistration (물품 등록 페이지)

• 담당: (팀원5)

물품 정보 입력 (이미지, 상품명, 설명, 가격 등)
사용자 정보 표시 (닉네임 포함)
카카오 지도 API를 활용한 위치 설정 기능

와이어 프레임

와이어 프레임(피그마)