KREAM

💻 개발 기간

23.08.21 ~ 23.09.01

🧑‍🤝‍🧑 멤버 구성

이지혜 : 사이즈선택, 즉시구매/즉시판매, 구매입찰/판매입찰, 결제페이지 UI와 기능 구현 및 API 연동
전미혜 : 로그인/회원가입, 메인페이지, 상세페이지 UI와 기능 구현 및 API 연동
김민수 : ERD모델링, 메인페이지 리스트, 각 신발의 사이즈별 가격 구현
최지준 : ERD모델링, 경매 체결 API, 주문 페이지 구현
양지은 : 초기설정,PET분석, 회원가입 API, 상세정보 API
홍지수 : 데이터 수집 및 추가, 로그인 API, 상세정보 API

🚀서비스 소개

기획 의도

한정판을 좋아하는 Z세대들에게 활발한 소비 및 투자로 리셀 스니커즈 시장을 확대하는 서비스를 기획

서비스 개요

KREAM은 리셀이라는 새로운 소비 트렌드를 캐치한 한정판 스니커즈 거래 중개 서비스로, 단순한 중개에서 벗어나 패션을 즐기는 고객들이 입찰 문화를 통해 소통할 수 있는 플랫폼

핵심 기능

회원가입

• 비밀번호 암호화
• 정규표현식

로그인

• 이메일 중복여부 확인
• 토큰 발급

메인페이지

• 쿼리 빌더 사용
• 정렬, 필터링, 페이징 구현

상세페이지

• 상품 정보 및 체결거래, 판매입찰, 구매입찰 데이터 전달 체결

입찰과 즉시체결

• transaction으로 rollback 처리
• 경매 방식 구현

⚙️ 기술 스택

Frontend

Backend

common

• common :
• 협업툴 :

📌 구현 기능

Login

[FE] : 실시간 유효성 검사를 통해, 사용자들이 잘못 기입하여 발생할 수 있는 에러를 미연에 방지하였습니다. 인증이 완료된 사용자가 페이지 이동시 매번 로그인하는 수고를 덜 수 있도록, Local Stroage에 토큰을 저장하는 방식 적용하였습니다.

[BE] : email,password 값이 일치하는 회원정보 제공, 로그인시 JWT(Json Web Token) 발급

Sign Up

[FE] : 비밀번호 8~15자, 올바른 email 형식, 모든 필수 동의 항목 3가지가 모두 충족할때 회원가입 버튼 활성화되도록 하였습니다. 선택 약관 동의 체크여부를 boolean 값으로 저장하여 POST 요청하였습니다. 신발사이즈 선택 모달창 구현했습니다.

[BE] : email 형식이 올바르고, 비밀번호 길이가 8~15 일때 회원가입 가능, 비밀번호 암호화

Sorting

[FE] : 쿼리스트링을 활용하여 상품 목록을 낮은 가격순과 높은 가격순으로 정렬하는 기능을 구현했습니다.

[BE] : 페이지 들어올시 가격이 오름차순으로 정렬, 높은 가격순 선택시 내림차순 정렬

Filtering, Pagination

[FE] : 사용자가 원하는 신발 브랜드와 종류 카테고리를 선택하면, 이를 쿼리스트링을 통해 서버로 전달하여 해당 조건에 맞는 상품 목록을 필터링하고, 페이지네이션을 통해 상품을 8개씩 보여주씩 보여지도록 기능을 구현했습니다.

[BE] : queyry builder 이용하여 브랜드와 신발 카테고리로 필터 기능, 8개씩 보여주는 paging 설정

Product Detail

[FE] : 사용자가 선택한 신발 사이즈별로 최근 거래 가격과와 즉시 구매 및 판매 가격을 조회할 수 있도록 하였습니다. 회원들의 거래 내역을 사이즈별 구매 입찰가, 판매 입찰가, 체결 날짜, 수량 등의 정보로 정리하여 표 형태로 조회할 수 있게 하였습니다. 체결 내역표는 로그인을 한 유저만 볼 수 있도록 하여 회원 유입을 유도했습니다.

[BE] : 각 제품의 모든 사이즈 구매가와 판매가중 낮은 가격 보이게 설정, 체결 거래, 판매 입찰 수량, 구매 입찰 수량 제공 함

Purchase & Payment

[FE] : 해당 상품의 사이즈를 선택하면, 제품의 즉시구매와 구매입찰 컴포넌트가 토글버튼으로 각각 보여지며, 즉시구매에서는 백엔드로부터 받아온 상품데이터의 가격을 저장하여 즉시구매하기 버튼을 누를 때 페이지 이동과 함께 가격데이터를 전송하였습니다. 결제에서는 유저의 포인트를 받아와서 사용 포인트를 입력하면 상품 금액에서 차감하여 나머지 금액을 저장하고 결제하기 버튼을 누르면 모달창에 유저의 구매 데이터를 보여주고 홈화면으로 이동하도록 하였습니다.

[BE] : 제품의 판매,구매 버튼의 각 사이즈 별 가격을 나타내고 클릭 하엿을때 즉시 구매와 구매 입찰을 하면, 포인트를 사용하여 결제를 하게 만들었습니다. 만일 뒤로 가기 버튼을 눌렀을때 결제가 진행 되지 않게 만들어 주었습니다.

Sell & Payment

[FE] : 해당 상품의 사이즈를 선택하면, 제품의 즉시판매와 판매입찰 컴포넌트가 토글버튼으로 각각 보여지며, 판매입찰에서는 유저가 입력한 금액을 판매입찰하기 버튼을 누를 때 페이지 이동과 함께 가격데이터를 전송하였습니다. 결제에서는 유저의 포인트를 받아와서 사용 포인트를 입력하면 상품 금액에서 차감하여 나머지 금액을 저장하고 결제하기 버튼을 누르면 모달창에 유저의 구매 데이터를 보여주고 홈화면으로 이동하도록 하였습니다.

[BE] :제품의 판매,구매 버튼의 각 사이즈 별 가격을 나타내고 클릭 하엿을때 즉시 판매와 판매 입찰을 하면, 포인트를 사용하여 결제를 하게 만들었습니다. 만일 뒤로 가기 버튼을 눌렀을때 결제가 진행 되지 않게 만들어 주었습니다.