- 온라인 중고거래 플랫폼인 당근마켓 앱을 웹 버전으로 클론코딩 해보았습니다.
- 당근마켓의 핵심 기능들인 물품 거래, 커뮤니티 활동, 채팅 등을 중점으로 구현하면서, 새로운 기능인 경매 기능을 추가하였습니다.
- 배포 URL: https://toykarrot.shop/
김채민 (GlassyFoozle) | 허용재 (Quad72) |
---|---|
로그인, 동네생활, 프로필 관련 페이지 담당 | 중고거래, 채팅, 경매 관련 페이지 담당 |
- 개발 언어
- 프레임워크 및 라이브러리
- Linter
- 닉네임, 아이디, 비밀번호, 이메일을 받아 회원가입을 진행합니다.
- 일반 로그인 및 소셜 로그인을 지원합니다.
- 사용자의 동네를 설정합니다. 아직 지역 기반 서비스는 구현하지 못했습니다.
- 물품 올리기: 판매자가 물품을 등록할 수 있습니다.
- 물품 조회: 현재 판매중인 모든 물품을 최신순으로 보여줍니다.
- 물품 관심 기능: 관심 있는 물품을 저장할 수 있습니다.
- 판매자와 채팅: 구매자와 판매자가 실시간으로 채팅할 수 있습니다.
- 글쓰기: 사용자가 동네 생활 게시글을 작성할 수 있습니다.
- 글 조회: 게시글을 조회하고 댓글을 작성할 수 있습니다.
- 댓글 좋아요: 댓글에 좋아요를 누를 수 있습니다.
- 공감: 게시글에 공감을 표시할 수 있습니다.
- 경매 물품 올리기: 판매자가 경매 물품을 등록합니다.
- 경매 참여: 구매자가 경매에 참여하여 입찰합니다.
- 경매 종료: 가장 높은 가격을 부른 구매자와 판매자 간의 채팅방이 생성됩니다.
- 채팅 기록 저장: 물건을 구매할 때 채팅했던 기록이 저장됩니다.
- 실시간 채팅: WebSocket을 이용하여 실시간 채팅을 구현하였습니다.
- 프로필 수정: 사진, 닉네임, 동네를 수정할 수 있습니다.
- 매너온도 확인: 사용자의 매너온도를 확인할 수 있습니다.
- 내 매너 평가 조회: 다른 사용자로부터 받은 매너 평가를 확인할 수 있습니다.
- 거래 후기 조회: 거래 후기를 조회할 수 있습니다.
- 관심목록: 하트를 누른 중고거래 글 목록을 반환합니다.
- 판매내역: 판매한 물품의 내역을 조회할 수 있습니다.
- 구매내역: 구매한 물품의 내역을 조회할 수 있습니다.
- 내 동네생활 글: 동네생활에 작성한 글, 댓글단 글, 공감한 글을 조회할 수 있습니다.
- 매너 칭찬: 다른 사용자의 매너를 칭찬할 수 있습니다.
- 판매물품 목록: 해당 사용자가 판매 중인 물품을 조회할 수 있습니다.
- 받은 매너 평가: 해당 사용자가 받은 매너 평가를 확인할 수 있습니다.
- 받은 거래 후기 조회: 해당 사용자가 받은 거래 후기를 조회할 수 있습니다.
- AWS S3 활용: Presigned Url을 발급하고 넘겨줘 프론트에서 AWS S3 버킷에 바로 이미지를 업로드할 수 있도록 했습니다.
- 회원탈퇴: 기존 활동 기록은 남습니다. 회원 정보(닉네임, 이메일 등)를 바꾸어 사용자가 누군지 알 수 없게 만듭니다.

- 사용자가 처음 도달하는 페이지
- 회원가입, 로그인, 소셜로그인(카카오, 구글, 네이버)를 선택 가능

- 회원가입 페이지
- 회원가입 시에 아이디와 비밀번호는 바로 조건을 충족했는지 확인을 진행하고 경고 메시지를 출력
- 회원 가입 완료 후 다시 랜딩페이지로 이동하여 로그인 진행

- 직접 회원가입시 로그인 페이지
- 로그인이 성공하고, 만약 처음 로그인이어서 지역 설정이 필요하다면 지역 설정 페이지로 이동
- 지역이 이미 설정되어 있는 기존 회원이라면 바로 홈 화면으로 이동

- 지역을 설정하는 페이지
- 현재는 관악구 내의 동만 설정 가능

- 중고거래 물건을 보여주는 메인 페이지
- 20개씩 로딩하는 무한스크롤 구현
- 노출 순서는 최신순을 기준으로 표시

- 내 물건 팔기 페이지
- 내 중고거래 물건을 등록하는 페이지. 최대 10장의 이미지 업로드 가능
- 본인의 물건에 대한 상세 설정 가능(태그, 가격, 설명, 거래 희망 장소)
- 물건을 업로드 하고난 후에는 내가 올린 물건의 상세 페이지로 리다이렉트

- 중고거래 물건에 관심 설정 가능
- 하트의 색 변화로 관심여부를 표시

- 동네생활 페이지
- 중고물품 페이지와 마찬가지로 20개씩 로딩 되도록 무한스크롤 구현
- 각각의 태그가 표시되고, 정렬은 최신순으로


- 동네생활 글쓰기 페이지
- 글쓰기 페이지에 진입하면서 카테고리 선택
- 사진 버튼을 이용해 이미지 업로드 가능, 태그 버튼을 통해 쉽게 태그 추가 가능
- 글쓰기 작성완료 후 본인이 작성한 글의 상세 페이지로 리다이렉트


- 동네생활 게시글 페이지
- 글에 대한 정보, 작성자 정보 확인 가능
- 공감하기 버튼을 클릭해서 공감 표시 가능
- 본인이 공감한 경우, 공감하기 버튼에 하이라이트 표기를 해서 알아볼 수 있도록 함
- 댓글 작성 가능
- 댓글에도 좋아요 기능 추가

- 중고거래 및 동네생활 게시글들을 한 번에 검색할 수 있는 페이지
- localStorage를 활용해 최근 검색어들을 저장하고 조회할 수 있으며, 선택적으로 삭제할 수 있음
![]() |
![]() |
내 동네생활 글 | 앱 설정 |
내가 작성한 동네생활 글, 댓글을 단 글, 공감한 글을 모아볼 수 있습니다. | 로그아웃 및 회원 탈퇴를 할 수 있는 설정 화면입니다. |