🥕와플마켓🧇

• 온라인 중고거래 플랫폼인 당근마켓 앱을 웹 버전으로 클론코딩 해보았습니다.
• 당근마켓의 핵심 기능들인 물품 거래, 커뮤니티 활동, 채팅 등을 중점으로 구현하면서, 새로운 기능인 경매 기능을 추가하였습니다.
• 배포 URL: https://toykarrot.shop/

프론트엔드 팀 구성

김채민 (GlassyFoozle)	허용재 (Quad72)
로그인, 동네생활, 프로필 관련 페이지 담당	중고거래, 채팅, 경매 관련 페이지 담당

프론트엔드 기술 스택

• 개발 언어

• 프레임워크 및 라이브러리

• Linter

전체 기능

회원가입

• 닉네임, 아이디, 비밀번호, 이메일을 받아 회원가입을 진행합니다.

로그인

• 일반 로그인 및 소셜 로그인을 지원합니다.

동네 설정

• 사용자의 동네를 설정합니다. 아직 지역 기반 서비스는 구현하지 못했습니다.

홈 (중고거래)

• 물품 올리기: 판매자가 물품을 등록할 수 있습니다.
• 물품 조회: 현재 판매중인 모든 물품을 최신순으로 보여줍니다.
• 물품 관심 기능: 관심 있는 물품을 저장할 수 있습니다.
• 판매자와 채팅: 구매자와 판매자가 실시간으로 채팅할 수 있습니다.

동네 생활

• 글쓰기: 사용자가 동네 생활 게시글을 작성할 수 있습니다.
• 글 조회: 게시글을 조회하고 댓글을 작성할 수 있습니다.
• 댓글 좋아요: 댓글에 좋아요를 누를 수 있습니다.
• 공감: 게시글에 공감을 표시할 수 있습니다.

경매 (새로운 기능)

• 경매 물품 올리기: 판매자가 경매 물품을 등록합니다.
• 경매 참여: 구매자가 경매에 참여하여 입찰합니다.
• 경매 종료: 가장 높은 가격을 부른 구매자와 판매자 간의 채팅방이 생성됩니다.

채팅

• 채팅 기록 저장: 물건을 구매할 때 채팅했던 기록이 저장됩니다.
• 실시간 채팅: WebSocket을 이용하여 실시간 채팅을 구현하였습니다.

나의 당근

• 프로필 수정: 사진, 닉네임, 동네를 수정할 수 있습니다.
• 매너온도 확인: 사용자의 매너온도를 확인할 수 있습니다.
• 내 매너 평가 조회: 다른 사용자로부터 받은 매너 평가를 확인할 수 있습니다.
• 거래 후기 조회: 거래 후기를 조회할 수 있습니다.
• 관심목록: 하트를 누른 중고거래 글 목록을 반환합니다.
• 판매내역: 판매한 물품의 내역을 조회할 수 있습니다.
• 구매내역: 구매한 물품의 내역을 조회할 수 있습니다.
• 내 동네생활 글: 동네생활에 작성한 글, 댓글단 글, 공감한 글을 조회할 수 있습니다.

타사용자 프로필

• 매너 칭찬: 다른 사용자의 매너를 칭찬할 수 있습니다.
• 판매물품 목록: 해당 사용자가 판매 중인 물품을 조회할 수 있습니다.
• 받은 매너 평가: 해당 사용자가 받은 매너 평가를 확인할 수 있습니다.
• 받은 거래 후기 조회: 해당 사용자가 받은 거래 후기를 조회할 수 있습니다.

이미지

• AWS S3 활용: Presigned Url을 발급하고 넘겨줘 프론트에서 AWS S3 버킷에 바로 이미지를 업로드할 수 있도록 했습니다.

회원탈퇴

• 회원탈퇴: 기존 활동 기록은 남습니다. 회원 정보(닉네임, 이메일 등)를 바꾸어 사용자가 누군지 알 수 없게 만듭니다.

스크린샷 모음

1. 메인 페이지

1.1. 랜딩 페이지

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

1.2. 회원가입 페이지

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

1.3. 로그인 페이지

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

1.4. 지역 설정 페이지

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

2. 홈 페이지

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

2.1. 내 물건 팔기 페이지

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

2.2. 물건 관심 설정

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

3. 동네생활 페이지

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

3.1. 동네생활 글쓰기

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

3.2. 동네생활 게시글

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

4. 새로운 기능 경매 페이지

5. 채팅 페이지

6. 검색 페이지

• 중고거래 및 동네생활 게시글들을 한 번에 검색할 수 있는 페이지
• localStorage를 활용해 최근 검색어들을 저장하고 조회할 수 있으며, 선택적으로 삭제할 수 있음

7. 나의 당근 페이지

7.1. 프로필 페이지

7.2. 나의 거래 - 관심목록, 판매내역, 구매내역

7.3. 기타 페이지들

내 동네생활 글	앱 설정
내가 작성한 동네생활 글, 댓글을 단 글, 공감한 글을 모아볼 수 있습니다.	로그아웃 및 회원 탈퇴를 할 수 있는 설정 화면입니다.