-
위치를 기반으로 동네에서 필요한 물물교환할 수 있는 웹사이트입니다.
기존의 지역거래 플랫폼을 모티브로, 현 플랫폼의 불편한 점과 아쉬운점을 개선했습니다.
다대다 채팅을 이용해 게시글에서 바로 거래할 수 있어 불필요한 구매 과정을 최소화했습니다.
-
React, Node.js 기반
-
개발인원: 6명
-
Front-end: 곽혜미, 이지은
-
Back-end: 원동균, 이재윤
-
Designer: 최혜진, 황나경
-
-
백엔드 github : https://github.com/WonDongGyun
-
프로젝트명: 동물마켓(동네에서 물물교환으로 마음에 드는 물건을 켓하세요)
-
개발기간: 2021.04.23~ 2021.05.28
-
개발언어: JavaScript
-
개발 라이브러리: React.js
-
협업 툴: git / notion / figma / zeplin
-
프로젝트 취지: 기존 지역거래 플랫폼의 수많은 1:1 채팅을 다대다 실시간 채팅으로 줄여 거래 과정을 간소화하고, 돈이 없어도 물건을 구할 수 있는 색다른 커머스를 구현하고자 함
-
프로젝트 기능:
-
사용자의 위치를 기반으로 위치 기반 등록된 거래 물품만 보여줌
-
마감 5시간 상품은 최상단에서 마감 뱃지로 알 수 있음
-
소켓 io를 통해, 게시글마다 실시간 채팅방에 다대다로 참여 가능
-
채팅창을 흐리는 블랙 컨슈머 강퇴 가능 및 교환을 원하는 유저와 교환 수립 기능
-
마이페이지에서 현 진행중인 거래, 완료 거래, 실패 거래를 확인할 수 있음
-
-
Geolocation을 이용한 실시간 사용자 위치 확인
-
kakao map api에서 제공해주는 geolocation으로 현 위치를 좌표로 수집
-
좌표를 주소로 변환 -> 서버에 주소값을 "구/시" 까지 전달 -> 유저 데이터 저장
-
위치가 부정확하게 나올 때, 수기로 정확한 주소를 입력할 수 있도록 daum-post-api 사용
-
우편번호 검색을 통한 주소 획득 -> 지번 주소 서버에 전달
-
설정한 주소에 맞는 게시글만 확인 가능(메인화면)
-
-
Socket io 를 이용한 실시간 채팅
-
socket.on / socket.emit으로 서버와 실시간 데이터 양방향 전송
-
채팅방 참여, 실시간 참여 인원, 메세지 전송 및 받기, 강퇴, 교환 수립 등 소켓 event 생성
-
실시간 유저 및 채팅방 참여 인원은 리덕스에서 관리
-
socket 연결을 custom hook으로 별도 관리하여 코드 및 렌더링 최적화
-
로그인 여부/ 기 참여 여부/ 방장 여부로 동일 페이지 채팅창 view 분리
-
비로그인 시 메인화면
-
소셜로그인, 이메일 인증
-
카카오/구글로그인 구현
-
카카오 비즈앱 신청으로 email 필수동의 전환
-
기본 로그인(JWT)
-
이메일 인증 기능 구현 -> 이메일 인증번호 확인 후 불일치 시 안내 문구 띄움
-
-
https 배포
- AWS S3 배포 후, cloudfront에서 인증서 발급 후 https 배포