위치 기반 마켓 플레이스 홍시나무
- 위치 기반 마켓 플레이스 “홍시나무“
- 지역 판매자와 소비자를 연결하여 지역 상품과 서비스를 온라인으로 손쉽게 거래할 수 있는 플랫폼
- “홍시나무“ 지정된 지역 내에서만 상품을 거래를 할 수 있게 하였고, 구매자와 판매자가 모두 플랫폼을 이용 가능
- 유저들의 정보에 대한 정확함 및 “홍시나무” 신뢰도에 대한 인증을 위해, 유저 로그인 인가 시스템을 도입하였고, 현재 위치의 정보로 실시간 주변 위치 제품을 검색할 수 있도록 하기 위해 카카오맵과 같은 외부 api를 사용
- “홍시나무” 는 소셜 로그인 및 로그아웃, 메인페이지, 상세페이지, 결제페이지, 상품 등록 페이지, 구매, 판매, 후기, 마이페이지 등의 기능들을 구현
- 2023/09/04 ~ 2023/09/22
- 김슬기
- 김진희
- 전형민
- 최홍(Product Manager)
- 박건률(Project Manager)
- 김민수
- 김수영
- 임홍규
- 리액트 아이콘 라이브러리
$ npm install react-icons --save - 카카오 리액트
npm install react-kakao-maps-sdk
FRONTEND
BACKEND
CO-OP TOOLS
- "카카오 시작하기" 버튼을 누르면 카카오 페이지로 이동하여 이메일 및 패스워드를 입력
- 입력한 정보와 api 키값 그리고 리다이렉트 uri 정보로 카카오에 인가 토큰 요청
- 인가 토큰을 사용하여 access 토큰 획득 후 access 토큰을 이용해 카카오로부터 유저 정보를 요청하고 복호화
- DB에 유저 정보가 없으면 저장하고 JWT로 암호화하여 로딩 페이지로 이동 후 로그인하고, DB에 유저 정보가 있으면 JWT로 암호 화하여 제공하여 로그인 완료하여 상품 리스트(메인) 페이지로 이동
- 유저가 모바일에서도 사용할 수 있게 반응형 작업도 함께 구현
- GPS 또는 네트워크를 이용해 현재 위치 정보를 반환하는 HTML5 GeoLocation API 사용하여 유저의 현 위치를 확인
- GeoLocation으로 만든 Hook을 이용해 반복적으로 3초마다 현 위치를 확인하여 좌표값 재설정
- 반경 1km 내 판매중인 상품리스트를 출력
- 역 지오코딩을 사용하여 좌표값을 주소로 변환, 유저의 현 위치가 맞는지 스스로 확인할 수 있도록 변환한 주소를 상단에 배치
- 신상품 / 중고로 상품의 컨디션과 상품 종류 카테고리를 선택할 수 있도록 하여 소비자가 원하는 상품을 쉽게 찾을 수 있도록 구현
- 찜하기 기능으로 리스트 페이지에서 상품이 보이지 않더라도 찜한 상품을 보여주는 별도의 페이지에서 확인할 수 있도록 구현
- 현재 유저의 위치와 판매중인 상품을 시각적으로 보여주기 위해 카카오맵 API를 사용하여 지도 위 마커를 띄우는 UI를 구현
- GeoLocation API를 사용하여 현 위치를 자동으로 불러오고, 쿼리스트링으로 좌표값을 서버로 전달
- 좌표값 기준 반경 1km 내 판매중인 상품을 지도 위 마커로 표시
- 마커 표시된 상품은 메인에서 보이는 상품리스트와 동일
- 마커 위 hover시 판매상품의 간단한 정보를 볼 수 있고, 클릭 시 상세피이지로 이동
- 모바일 유저의 사용을 고려하여 마커 위 hover가 아닌 클릭 시 정보를 볼 수 있도록 수정이 필요해 보임
- 상단의 돋보기 아이콘을 눌러 검색창 모달을 띄움
- 빈 칸 상태로 검색을 진행 시, 1글자 이상 입력을 요구하는 경고메시지 출력
- 정상적으로 검색 진행 시, 검색 키워드를 리스트 상단에 띄워 유저가 확인할 수 있고, 키워드에 해당되는 상품을 리스트로 출력
- 슬라이드 라이브러리 사용 (클릭시 다음 사진으로 이동)
- axios를 이용한 백앤드와의 통신으로 상품들의 상태확인 & 정보를 불러옴
- 토글버튼 클릭시 후기를 불러올 수 있음
- 카카오 API를 사용하여 결제가 가능하게 구현
- 백앤드와의 통신으로 상품 상태, 가격 등을 get과 post로 전달 가능
- 결제중, 결제실패, 결제취소, 결제완료로 각각 연결될 수 있게 구현
- 카카오맵 API를 사용하여 구매자와 거래할 위치를 설정할 수 있도록 구현
- GeoLocation으로 현 위치를 우선 지정, 유저가 직접 거래/판매할 위치를 클릭하여 마커를 옮길 수 있도록 함
- 마커가 원하는 위치에 정확히 찍혔는지 확인할 수 있도록 역 지오코딩을 사용하여 좌표값을 주소로 변환, 마커 위에 출력
- 위치 지정 완료 버튼을 누르면 지정한 위치 좌표값을 쿼리스트링으로 상품 등록 페이지에 전달
- 거래할 위치를 설정한 후 나오는 페이지로 상품 등록한 위치정보를 useSearchParams를 사용하여 지도의 x와 y 값 그리고 지역명 값을 받아옴
- 상품 등록의 모든 사항들이 필수 데이터이기 때문에 모든 항목에서 유효성 검사(alert 창을 통해 메시지 전달)와 버튼에 비활성화를 주어 UI 상에서도 비활성화일 때와 활성화일 때의 버튼 색을 구분
- '상품 관련 이미지'는 최대 3장을 업로드 되도록 구현하였고 3장이 넘어가면 유효성 검사를 통해 alert 창에 "이미지는 최대 3개까지 가능" 하다는 메시지를 전달
- '상품 종류' 버튼을 눌렀을 때 '상품 상태' 버튼이 보이도록 토글 버튼으로 구현하였고 버튼을 hover했을 떄와 버튼 선택의 유무를 UI 상 구분되도록 구현
- 판매 금액과 재고 수량 값은 숫자만 입력되도록 구현하였고 숫자가 아닌 값이 입력될 때만 "숫자만 입력해 주세요"라는 메시지가 나와 전달할 수 있도록 구현
- 상품 등록에 필요한 모든 데이터는 폼데이터형식으로 서버에 전달하였고 이미지는 aws s3에 저장하여 s3 이미지 url을 데이터베이스에 저장 후 상품을 등록하는 방식으로 구현
- 상품등록 후에는 '상품 리스트(메인)' 페이지와 상품등록 할 때 지정한 위치를 '내주변' 페이지에서 상품을 확인 가능
- 유저에 토큰 값을 받아와서 유저의 구매내역과 판매내역, 유저의 카카오톡 프로필 사진과 이름을 받아와 보여줌
- '구매내역' 페이지는 유저가 구매한 상품 정보와 결제 정보를 보여줌
- '판매내역' 페이지는 상품 등록한 상품이 판매 중일 경우 CASE 문을 사용하여 판매 카운트 조건에 따라서 '판매 완료' 또는 '판매 중' 값을 반환하여 보여줌
- '로그아웃' 버튼을 누르게 되면 로컬 스토리지에 있는 토큰 값을 없앤 후 로그아웃이 되며 alert 창을 통해 확인 버튼을 누르면 '로그인' 페이지로 이동