- 고가의 상품을 선물할 때 펀딩 방식을 통해 개인이 원하는 만큼 모금하여 부담 없이 선물할 수 있는 플랫폼
- 내가 아끼고 좋아하는 사람들을 위해 선물을 주는 것은 너무 기쁜 일이지만, 받는 사람은 선물 가격이 비싸다면 선뜻 의사를 밝히기 어렵고, 선물을 주는 사람 또한 흔한 선물보다는 의미 있는 값진 선물을 주고 싶은 경우가 많습니다.
- 따라서 고가의 상품을 선물할 때 펀딩 방식을 통해 참여자 별 부담 가능한 금액을 모금하여 전달하는 플랫폼을 기획하였습니다.
- 특정 대상(받는 사람)을 지정하여 참여자들의 펀딩 목적을 뚜렷하게 하고, 참여 금액은 자유롭게 설정할 수 있도록 하여 원하는 예산 내에서 선물에 동참할 수 있는 기회를 제공할 것입니다.
- 친구 목록에 등록된 사용자라면 해당 사용자가 받고 싶어하는 선물 목록을 확인한 후, 펀딩을 통해 진행하고자 하는 선물의 선택의 폭을 줄일 수 있는 기회를 제공할 수 있습니다.
- 해당 펀딩이 진행되는 링크를 통해 친구가 아니어도, 사용자들은 펀딩에 참여할 수 있기 때문에 선물을 할 수 있는 기회를 확대할 수 있습니다.
Demo link 프로젝트 데모영상 링크
팀 노션 Gift4U Team Notion
- 23.01.26일 - 23.03.09일 (약 6주)
회원가입
- 이메일 중복 확인을 통해 유효한 이메일 주소가 있으면 회원 가입이 가능
- 인증 코드 메일을 발송
- 인증 코드 만료 시간은 3분으로 redis를 통해 관리
- 회원가입 버튼 클릭 시 인증 코드 검사를 진행하며 정상 통과 시 회원가입이 진행
로그인
- 일반 로그인과 SNS 로그인은 JWT 토큰을 기반으로 관리
- 일반 로그인 : 로그인 성공 시 Access, Refresh Token을 발급하여 로그인 성공을 응답 (Refresh Token의 경우 Redis 를 이용하여 토큰 관리)
- OAuth 로그인 : 네이버, 깃허브 계정을 통해 로그인
- Front 에서 Authorization code 발급받아 Server 로 전달
- Authorization code 를 받아 Access Token 및 유저 정보를 요청
- 응답받은 유저 정보로 Database 를 검색하여 회원 정보 생성 및 수정
- 로그인 성공 시 Access, Refresh Token을 발급하여 응답
회원정보 변경 및 회원탈퇴
- 회원정보 수정
- 닉네임, 주소, 연락처, 프로필 이미지 변경 가능
- 일반 로그인 사용자와 OAuth 로그인 사용자는 동일한 항목에 대해 정보 변경 가능
- OAuth 로그인 사용자는 해당 사이트 계정에서 이름, 프로필이 변경된 경우 자동 적용
- 회원탈퇴
- 사용자는 회원탈퇴 버튼을 통해 안내사항을 확인 후 탈퇴가능
- 탈퇴 시 Database 에 등록된 사용자 관련 정보는 모두 삭제
- 탈퇴 후 사용자는 해당 계정으로 다시 로그인 불가능
- 비밀번호 분실 시 비밀번호 변경
- 일반 로그인으로 회원가입한 유저의 경우 비밀번호 분실 시 비밀번호를 변경 가능
- 가입했던 이메일로 발송된 인증코드를 통해 가입한 계정에 대한 인증을 받고, 변경하고자 하는 비밀번호를 입력하여 비밀번호를 변경
- Oauth 로그인 사용자는 이용 불가능
친구찾기 & 추가
- email, name, nickname 타입을 기반으로 회원가입된 전체 유저 목록을 검색
- 검색 전 인기 유저 추천
- 검색 후 기준에 맞는 검색 결과가 있으면 검색 결과
- 이미 친구인 경우 친구 삭제 버튼
- 친구가 아닌 경우 친구 추가 버튼
- 검색 결과가 없으면 “검색 결과가 없습니다.” 텍스트 띄움
- 친구 기능은 단방향으로 추가 가능, 별도의 수락 없음
- 일반 로그인으로 회원가입한 유저의 경우 비밀번호 분실 시 비밀번호를 변경 가능
친구목록
- Access Token을 기반으로 로그인한 유저를 판단하여 해당 유저의 친구 목록을 조회
- 친구 리스트 hover 시에 삭제 버튼 노출
- 삭제 버튼 이외 영역 클릭 시 친구의 펀딩 내역, 찜 목록 확인 가능
- 비로그인 상태에서 클릭하면 로그인 페이지로 연결
상품
- 상품 조회 기능
- 카테고리별(의류, 가전제품, 완구, 전자기기, 장신구, 가구, 기타 ) 상품 조회가 가능
- 매일 바뀌는 오늘의 베스트 상품을 메인 페이지에서 확인 가능
- 상품 추가 기능
- (관리자 페이지) 에서 상품 데이터를 추가
- 기타
- 베스트 상품 데이터는 매일 새벽 2시에 상품의 추천수를 기준으로 업데이트
- 상품검색
- Parameter로 전달된 Keyword로 상품을 검색
- 페이징처리로 한번에 전달되는 상품개수를 제한
- 상품 상세정보 조회
- URL 경로로 전달된 ProductId로 해당 상품에 대한 상세정보 조회
- 상품 리뷰 조회
- Parameter로 전달된 ProductId로 해당 상품 리뷰 조회
- 페이징처리로 한번에 전달되는 상품개수를 제한
찜목록
- 찜목록 추가
- 사용자는 원하는 상품을 본인의 찜목록에 자유롭게 추가
- 찜목록 조회
- 찜목록에 추가한 상품을 조회
- 친구의 찜목록을 조회하여 친구가 무슨 상품을 좋아하는지 확인 가능
- 찜목록 삭제
- 찜목록에 추가한 상품은 삭제 가능
펀딩
- 펀딩 시작
- 사용자는 원하는 상품, 펀딩 기간, 금액, 펀딩을 받을 대상자를 선택해 펀딩을 시작
- 사용자는 다른 유저들이 진행중인 펀딩에 추가로 참여
- 펀딩 조회
- 사용자는 본인이 참여한(시작한) 펀딩목록을 조회
- 사용자는 본인이 대상자인 펀딩목록을 조회
- 친구가 참여한 펀딩목록을 조회
- 메인 페이지에서 인기유저(인플루언서) 유저를 대상으로 진행중인 펀딩들을 조회
- 펀딩 상세정보 조회
- 펀딩에 참여한 사람들의 수, 유저, 내가 펀딩한 금액, 남은 금액 등 상세정보를 조회
- 펀딩이 완료된 대상자는 주소와 후기(코멘트)를 남겨 펀딩상품 수령
포인트
- 포인트 충전
- Access Token으로 전달된 UserId로 본인의 포인트를 10000증가
알림
- 알림 조회
- Access Token에 포함된 UserId로 본인의 알림목록 조회
- 알림 읽음
- URL경로로 전달된 AlarmId로 해당 알람을 읽음 처리
- 알림 삭제
- URL경로로 전달된 AlarmId로 해당 알람을 삭제
- SSE 기능
- Access Token으로 전달된 UserId로 본인에 대한 알림이 발생할때 실시간으로 서버에서 알림을 보냄
- 본인에 대한 읽지 않은 알림개수에 변화가 있을때 실시간으로 서버에서 알림을 보냄
- Badge알림
- Access Token에 포함된 UserId로 본인의 읽지 않은 알림의 개수를 조회
| Sign Up | Log In |
|---|---|
 |
 |
| Products | Wish List |
 |
 |
| Funding Start | Funding Attend |
 |
 |
| Find Friends | Friends List |
 |
 |
| Profile | Gift |
 |
 |
SSE(Sever-Sent-Event)
- 실시간 알림같은 경우는 서버에서 클라이언트 방향으로만 데이터를 보내면 되기 때문에 단방향 통신인 SSE가 적합하다.
- 클라이언트에서 처음 HTTP 연결을 맺고 나면 서버는 클라이언트로 계속하여 데이터를 전송할 수 있다.
- websocket과 달리 별도의 프로토콜을 사용하지 않고 HTTP 프로토콜만으로 사용이 가능하며 훨씬 가볍다.
- 접속에 문제가 있으면 자동으로 재연결을 시도한다.
- 최대 동시 접속 수는 HTTP/1.1의 경우 브라우저 당 6개이며, HTTP/2는 100개까지 가능하다.
- IE를 제외한 브라우저에서 지원된다.
Spring Batch / Scheduler
- 스케줄러를 통해 일정 주기마다 데이터를 처리해야 한다.!
- 위 경우 단순 메소드로 구현하기보단 데이터 처리, 자동화(사용자의 개입X), 신뢰성의 이유로 배치로 처리하기에 적합하다.
- 펀딩의 성공 여부와 같은 민감한 데이터를 처리할 시 특정 문제가 발생 시 아예 동작하지 못하도록 해야 한다. (Step별로 작업 처리)
- 매 정각마다 펀딩 만료 여부를 확인해야 한다.
- 현재 진행 중인 펀딩 데이터들에 한해서 매 정각(ex 1:00)시간 마다 펀딩 목표 기간이 지난 데이터들에 대해서 펀딩의 상태 값을 FAIL처리를 해준다.
Redis
- 베스트 상품은 하루를 주기로 업데이트 되기 때문에 하루 동안은 변하지 않는다. 이때 다수의 사용자가 매번 조회하기 보단, Redis를 통해 캐시화 하여 저장하면 많은 유저가 같은 날 조회를 해도 DB가 아닌 바로 Redis에서 값을 가져오므로 처리량이 줄고 효율이 증가한다.
- 토큰 기반 인증 방식에 Redis를 사용한 Refresh Token를 관리한다.
OAuth2 LOGIN
- [구현 방식]
- Front 에서 Authorization code 발급받아 Server 로 전달
- Authorization code 를 받아 Access Token 및 유저 정보를 요청
- 응답받은 유저 정보로 Database 를 검색하여 회원 정보 생성 및 수정
- 로그인 성공 시 WishMarket Server 에서 Access, Refresh Token을 발급하여 응답
- 네이버, 깃허브 이메일을 통해 로그인
- 계정의 생성, 인증 등 절차는 해당 OAuth Server 에서 관리
- WishMarket Server 에서는 이미 인증된 계정으로 간편하게 로그인 처리만 진행
Recoil
- Recoil을 활용하여 전역 상태 관리
- 비밀번호 찾기 → 비밀번호 변경 페이지
- 카테고리 하트 버튼 클릭 → 위시리스트 추가
React-datepicker / Daum-Postcode
- React-datepicker , Daum-Postcode 등 라이브러리를 이용해 사용자 친화적인 UI / UX
- 펀딩시작 : React-datepicker
- 마이페이지 - 정보변경, 받은선물 : Daum-Postcode
- 원세영(Back-end) : 회원가입, 팔로우, 펀딩 기능 및 배포
- 김선범(Back-end) : 상품검색, 포인트, 알림 기능
- 백동주(Back-end) : 소셜로그인, 유저정보관리 기능
- 고동우(Back-end) : 상품추가, 베스트상품 조회, 위시리스트, 펀딩 기능 및 배포
- 박주경(Front-end) : 상품 조회 및 검색, 헤더, 메인 컴포넌트, 마이 페이지 UI 구현 및 연동, 프론트 배포
- 조혜준(Front-end) : 로그인, 회원가입, 비밀번호변경, 친구검색, 펀딩 시작 & 참여, 메인 인기펀딩 페이지 UI 구현 및 연동