🗝️ 옴니마켓 배포 링크 및 테스트 계정
👉 옴니마켓
구매자
ID: buyersonny
PW: 1q2w3e4r!
판매자
ID: sellersonny
PW: 1q2w3e4r!
* 회원 가입도 가능합니다."옴니마켓" 은 구매자와 판매자가 물건을 자유롭게 사고 팔 수 있는 커머스 사이트입니다.
이 프로젝트는 구매자가 상품을 검색하고, 장바구니에 저장하거나 구매할 수 있는 기능을 제공합니다. 또한 주문 내역을 확인할 수 있습니다.
판매자는 상품을 등록하고, 수정, 삭제 등의 상품 관리를 할 수 있습니다.
- FrontEnd
| 기술 스택 | 선택한 이유 |
|---|---|
| React.js | 모듈화된 UI 컴포넌트를 만들고, 데이터와 상태를 효율적으로 관리하여 코드의 재사용성과 유지보수성을 향상시키기 위해 선택했습니다. |
| React-Query v5 | 데이터 요청 및 캐싱, 상태 관리를 효율적으로 처리하고, 비동기 데이터 로딩 및 오류 처리를 간소화하여 사용자 경험을 향상시킬 수 있는 장점이 있어 선택했습니다. |
| TypeScript | 타입 에러를 사전에 방지하여 코드의 안정성을 높이기 위해 선택했습니다. |
| React-Hook-Form, Zod | 간편한 폼 관리와 타입 안전성과 강력한 스키마 기반 유효성 검사 구현을 위해 선택했습니다. |
-
BackEnd 및 DataBase
- weniv 제공
-
메인 페이지 페이지네이션
초기 페이지네이션 5페이지 이상 페이지가 있을 때 
-
상품 검색 기능
-
검색한 상품이 없을 때
상품 검색 검색 결과 
-
검색한 상품이 있 때
상품 검색 검색 결과 
-
-
로그인 페이지
구매자 로그인 판매자 로그인 
-
유효성 검사
- 아이디 또는 비밀번호가 일치하지 않을 때
-
-
회원가입 페이지
구매자 회원가입 판매자 회원가입 
-
회원가입 완료 시
-
유효성 검사
-
아이디 중복검사
사용 가능한 아이디일 때 이미 가입된 아이디일 때 
-
비밀번호 입력 확인
비밀번호 확인이 일치할 때 비밀번호 확인이 일치하지 않을 때 
-
판매자 회원가입일 경우 사업자등록번호 인증
사용 가능한 사업자등록번호일 때 사용 불가능한 사업자등록번호일 때 
-
구매자 회원가입 전체 입력값 유효성 검사
모든 입력이 유효할 떄 유효하지 않은 입력이 있을 때 
-
판매 회원가입 전체 입력값 유효성 검사
모든 입력이 유효할 떄 유효하지 않은 입력이 있을 때 
-
-
-
메인 페이지
-
로그인 타입에 따른 네비게이션 바 변화
구매자 메인 페이지 구매자 로그인 시 네비게이션 바 변경 
-
-
상품 상세 페이지
상품 상세 페이지 초기 화면 상품의 개수를 변경했을 때 바로구매 버튼을 눌렀을 때 장바구니 버튼을 눌렀을 때 
-
장바구니 페이지
장바구니에 담은 상품이 없을 때 장바구니에 상품이 있을 때 
장바구니 전체 주문하기를 눌렀을 때 장바구니 개별 상품의 주문하기를 눌렀을 때 
default.mp4
-
주문/결제 페이지
정보 입력 전 정보 입력 주문 완료 
-
유효성 검사
-
-
마이 페이지
-
주문목록
주문 수가 15개 이하일 때 주문 수가 16개 이상일 때 
-
주문목록 상세
주문한 상품이 2개 이하일 때 주문한 상품이 3개 이상일 때 
-
-
메인 페이지
-
로그인 타입에 따른 네비게이션 바 변화
판매자 메인 페이지 판매자 로그인 시 네비게이션 바 변경 
-
-
상품 상세 페이지
-
바로구매, 장바구니 버튼 클릭 시 구매회원 로그인 페이지로 이동
-
-
판매자 센터
-
판매중인 상품
판매중인 상품이 없을 때 판매중인 상품이 있을 때 
-
상품 등록
초기 화면 상품 정보 입력 
default.mp4
-
상품 수정
수정 전 초기 화면 상품 정보 수정 수정 후 
default.mp4
-
상품 삭제
삭제 전 삭제 확인 삭제 완료 삭제 후 
default.mp4
-
- 상품 상세 페이지에서 바로구매, 장바구니 버튼을 클릭 시 로그인 페이지로 이동
- 유효하지 않은 주소 입력 시 에러 페이지로 이동
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent