더취페이 (DutchiePay)

더치페이 + 자취 = 더취페이

자취생들을 타겟으로한 공동구매 및 커뮤니티 서비스

https://www.dutchie-pay.site/

📅 개발 기간

2024.07.01 ~ 2024.08.31 - 기획

2024.09.01 ~ 2025.01.19 - 개발

🛠️ 개발 환경

🧑🏻‍💼 팀원 👩🏻‍💼

장현지	박용호	유나영	박성민	남예빈
PM, FE	FE	BE	BE	BE

장현지

주요 역할 펼쳐보기

- 랜딩 페이지
- 소셜 로그인 (카카오, 네이버)
- 자동 로그인
- 탭 간 sessionStorage 공유 (Broadcast Channel)
- 접근 제한 (Protected Route)
- 배송지 주소 관리
- 데이터 암호화/복호화
- 우편번호 찾기
- 이미지 S3 업로드 (File, base64)
- 상품 리스트 및 필터링, 상세페이지
- 상품 주문 및 결제
- 주문(결제) 내역
- 상품 별점
- 상품 좋아요(찜)
- 검색 및 검색어 자동완성
- 게시글 작성, 수정 및 삭제
- 지역 게시글 위치 정보
- 리팩토링 및 성능 개선
- storybook

박용호

주요 역할 펼쳐보기

- 회원가입, 회원 탈퇴
- 이메일 로그인, 로그아웃
- 아이디, 비밀번호 찾기 및 재설정
- 휴대폰 인증
- access token 재발행
- redux 설정
- 위치 정보 불러오기
- 프로필 정보 변경
- 무한스크롤 hook 구현
- 페이지 네이션 구현
- 상품 후기 및 문의
- 주문 취소, 환불
- 게시판 리스트 및 필터링
- 댓글 및 답글
- 알림
- 채팅
- Jest

해당 README에서는 프론트 팀원의 역할만 기재합니다. 백엔드 Repository 바로가기 🚀

기획 문서

• figma 🎨
• Notion 📜
• Code Convention ❗
• Git Convention 😺

💫 주요 기능

1. 이메일/소셜 회원가입 및 로그인

- 이메일(중복비허용), 비밀번호, 전화번호(중복비허용), 지역, 닉네임(중복비허용)을 이용한 이메일 회원가입

- React Hook Form을 이용한 실시간 유효성 검사

- 카카오, 네이버 소셜 로그인을 이용한 간편로그인 및 전화번호와 지역 정보 추가 입력

- coolSMS를 이용한 전화번호 인증

- Geolocation API와 네이버 MAP을 이용한 지역 정보 불러오기

- 이메일(중복비허용), 비밀번호, 전화번호(중복비허용), 지역, 닉네임(중복비허용)을 이용한 이메일 회원가입

- 소셜 로그인 시 PostMessage API와 crypto-js를 이용한 서버와 클라이언트 간 로그인 데이터 전달

- 자동로그인 선택 여부에 따른 쿠키 저장 기간 설정 (세션 쿠키 || 지속 쿠키)

- access token 만료 시 access token 재발행

- 최근 로그인 방식 표시

- BroadcastChannel API를 이용한 탭 간 sessionStorage 데이터 공유

2. 계정 찾기 및 비밀번호 재설정

- coolSMS를 이용한 전화번호 인증을 통한 이메일 일부 값 반환

- 이메일 주소와 전화번호 인증을 통한 비밀번호 재설정 (비회원)

- 현재 비밀번호 인증을 통한 비밀번호 재설정 (회원)

3. 유저 프로필 관리

- 닉네임(중복비허용), 프로필 이미지, 지역, 전화번호 변경 가능

- coolSMS를 이용한 전화번호 인증을 통한 전화번호 변경

- 다음 우편번호 API를 이용한 최대 5개의 배송지 관리 및 default 배송지 설정 가능

- crypto-js를 이용해 배송지 데이터를 안전하게 저장

4. 마이페이지

- 사용자 프로필 관리 (3번 참고)

- 작성한 게시글, 댓글 단 게시글 목록 확인 가능

- 좋아요(찜)한 공동구매 상품 목록, 카테고리 필터링 가능

- 구매한 상품 목록, 주문 상태에 따른 필터링 가능

- 주문 상태에 따른 문의/후기/주문취소/교환/환불 가능

- 작성한 문의 및 후기 목록 확인 가능

5. 공동구매 상품

- 무한스크롤을 이용한 상품 리스트, 카테고리/필터링 가능

- 마감된 상품 포함 여부에 따른 상품 리스트 확인 가능

- 카드 형태의 상품 공구 진행 상태, 별점, 리뷰, 할인율 확인 가능

- 무한스크롤을 이용한 상품 리스트, 카테고리/필터링 가능

- 주문 마감까지 남은 시간 실시간 표시

- 주문 상품 수량 선택 가능

- 공동구매 상품 좋아요(찜)

- 상품 정보 더보기를 통한 사용자 경험 향상

- 주문량이 많은 상품 TOP10을 Carousel AutoPlay를 이용하여 표시

6. 공동구매 후기 및 문의

- 페이지네이션을 이용한 후기, 문의 확인 가능

- 포토리뷰 선택 여부에 따른 후기 확인 가능

- 후기 수정 횟수와 수정 가능 기간을 활용한 수정 가능 조건 설정

- 5점만점 별점 선택 가능 및 특정 상품 평균 별점, 별점 분포도 확인 가능

- 비밀글 설정 여부에 따른 문의 표시 여부 결정

7. 공동구매 결제

- tossPayment와 카카오페이를 이용한 결제 가능

- 사용자 배송지가 존재할 경우, default 배송지 설정

- 기본 배송메시지 및 custom 배송메시지 입력 가능

- 결제 성공 시 주문번호 반환

8. 공동구매 상품 검색

- hangul-js을 이용한 검색어 자동완성

- 키보드만을 이용해 검색 가능하도록 하여 접근성 향상

- 최근 검색어를 LocalStorage에 저장하여 사용성 향상 (저장 여부 선택 가능)

9. 지역 커뮤니티 (마트/배달, 거래/나눔)

- 유저의 지역과 동일한 사용자들간의 게시글 확인 가능 (비회원 시 서울시 중구로 게시글만 표시)

- 무한스크롤을 이용한 게시글 목록 확인 가능

- 검색 창을 통해 게시글 제목 검색 가능

- 게시글 작성 시, 위치 정보 설정을 통해 마트, 거래 등을 진행할 위치 설정

- 게시글 상태를 통해 진행 상태 실시간 확인 가능

- 게시글 내 채팅방 이동 버튼을 통해 채팅방 입장 가능

- 게시글 작성자의 최근 완료된 거래 목록 확인 가능

10. 전체 커뮤니티 (커뮤니티)

- 모든 사용자의 게시글 확인 가능

- 무한스크롤을 이용한 게시글 목록 및 필터링 가능

- 검색 창을 통해 게시글 제목 검색 가능

- 댓글/답글 기능을 통한 자유로운 소통 가능

- 같은 카테고리, 조회수 높은 게시글 확인 가능

11. 게시글 (React Quill)

- React Quill를 이용한 간편한 게시글 작성

- 이미지 핸들러를 통한 S3 서버 이미지 업로드

- 이미지 붙여넣기 시, base64 이미지를 Blob 파일로 변환하여 S3 서버 이미지 업로드

- 업로드한 이미지 관리 및 대표 이미지 설정 가능

- Dompurify와 dangerouslySetInnerHTML를 이용한 안전한 HTML 출력

12. 알림

- SSE를 이용하여 7일 간에 모든 댓글/답글, 공동구매, 채팅 관련 실시간 알림 표시

- Floating 알림 창을 통해 모든 페이지에서 자유롭게 알림 접근 가능

- 같은 Origin 내 알림을 간략하게 표시하여 알림 창 가독성 향상

- 알림 삭제 기능을 통해 알림 창 정리 가능

13. 채팅

- Websocket과 STOMP를 이용하여 실시간 단체/1:1 채팅 기능

- 단체 채팅방 방장(게시글 작성자)에게 강퇴 권한을 추가하여 원활한 채팅방 관리

- 무한스크롤을 이용하여 이전 채팅 목록 불러오기

14. 기타

- 코드 스플리팅, Dynamic과 Skeleton UI를 활용한 성능 향상

- Protected Route를 이용해 회원 페이지 비회원 접근 제한

- PresignedURL을 이용해 안전하게 S3 서버로 이미지 업로드

- UP/DOWN 버튼을 통해 스크롤 부담없이 이용 가능