📂 자료 다운로드
💡 서버 api와 피그마 링크가 제공됩니다.
0. 오픈마켓 서비스
오픈마켓 서비스는 판매자와 구매자를 구별하여 판매자가 상품을 등록, 판매하며 구매자는 구매하는 서비스입니다.
상품을 판매하려고 한다면 판매자로 로그인하여 상품 정보를 등록 및 수정할 수 있습니다. 판매자가 상품을 구매하는 것은 불가능합니다. 오픈마켓에 등록되어 있는 상품을 구매하고자 한다면 상품의 세부사항을 확인한 뒤, 장바구니에 넣어, 상품을 구매할 수 있습니다.
1. 프로젝트 설명
오픈마켓 프로젝트는 바닐라JS(추후 React로 업데이트)를 사용하여 상품 등록, 결제, 상품에 대한 CRUD를 직접 구현해보는 프로젝트입니다. 개인 프로젝트로 진행되며, 감귤마켓과 마찬가지로 서버 API를 제공하며 API를 사용하여 기능을 구현하시면 됩니다. 백엔드 구현은 하지 않으셔도 됩니다.
자세한 내용은 아래 요구사항 명세를 참고해주세요.
2. 디자인(피그마 링크)
3. 요구사항 명세
요구사항은 필수로 구현해야 하는 부분과 선택(도전) 과제가 있습니다.
오픈마켓은 필수과제와 선택과제 모두 싱글페이지(SPA)로 만들어야합니다.
3.0 오픈마켓 API
3.1 필수과제 - 구매자
[구현 페이지]
- 로그인 페이지
- 회원 가입 페이지
- 상품 목록 페이지
- 상품 상세 페이지
- 장바구니 페이지
- 주문/결제 페이지
1) 로그인 페이지
- 아이디나 비밀번호가 일치하지 않거나, 아이디나 비밀번호를 입력하지 않은 채 로그인 버튼을 누르면 경고 문구가 나타납니다.
- 입력 창 아래에 경고창이 나타나면 로그인 버튼을 눌러도 로그인 되지 않습니다.
- 입력 창에 입력이 안된 부분이 존재한 채로 로그인 버튼을 누르면 입력되지 않은 입력 창에 focus 이벤트가 작동하고 로그인은 되지 않습니다.
- 아이디나 비밀번호가 일치하지 않는다면, 비밀번호 입력창에 focus이벤트가 발생하고 빈칸이 됩니다.
- 로그인이 성공할 시, 로그인하기 이전 페이지로 이동합니다.
- 구매자 : 구매 회원 로그인 탭을 클릭하면 구매 회원으로 로그인합니다.
- 판매자 : 판매 회원 로그인 탭을 클릭하면 판매 회원으로 로그인합니다.
2) 회원가입 페이지
- 회원가입 할 때는 모든 입력을 완료하고 동의하기 체크를 눌러야만 회원가입이 가능합니다.
- 회원 정보 입력 후 회원가입 버튼을 누르면 로그인 페이지로 이동합니다.
- 아이디의 중복 확인 버튼을 눌렀을 때 중복이 된다면 입력창 아래에 경고 문구가 나타납니다.
- 구매자 : 구매 회원 가입 탭을 누르고, 모든 입력을 마친 뒤(이용약관 체크박스 포함) 가입하기 버튼을 누르면 구매자로 회원가입이 됩니다.
3) 상품 목록 페이지
- 목록에서 상품을 클릭하면 상품 상세 페이지로 이동합니다.
- 상품에는 상품 판매자, 상품명, 가격이 보여집니다.
4) 상품 상세 페이지
- productId에 해당하는 상품을 불러오고, 해당 상품 정보를 보여줍니다.
+버튼과-버튼을 사용해야만 수량 변경이 가능합니다.
- 수량을 변경할 때 현재 상품의 재고 수량을 초과하면
+버튼이 비활성화됩니다.
- 선택된 옵션에 맞춰서 가격을 계산하고, 총 가격이 나타나야 합니다.
- 이미 선택된 상품을 다시 선택하였을 때, 상품은 추가되지 않아야 합니다.
- 바로 구매 버튼을 눌렀을 시, 결제 페이지로 넘어갑니다.
- 장바구니 버튼을 눌렀을 시, 장바구니 페이지로 이동합니다. (상품 상세 페이지에서 선택한 제품은 장바구니에 추가됩니다.)
5) 장바구니 페이지
- 장바구니에서 상품의 수량을 수정할 때,
+나-버튼을 누르면 수량 수정을 위한 모달창이 나타납니다. 모달창에서 (상품 상세 페이지와 마찬가지로) 상품의 재고 수량을 초과하면+버튼은 비활성화됩니다.
- 선택된 정보만 총 상품금액과 할인, 배송비가 적용되어 총 결제할 가격이 나타나야 합니다.
- 상품의
x버튼을 클릭할 시 상품 삭제를 재확인하는 모달 창이 중앙에 나타나야 합니다.
- 상품 삭제를 재확인하는 모달의 확인 버튼을 클릭하면 상품이 삭제되어야 합니다.
- 이미 장바구니에 넣은 제품을 다시 넣는 경우, 이전 수량과 합쳐집니다.
- 이미 넣은 제품의 수량 2개, 다시 넣은 제품의 수량 3개 ⇒ 장바구니에 들어간 상품의 수량은 총 5개)
- 합쳐진 수량이 제품의 재고 수량 보다 많을 경우, 재고 수량이 초과 되었다는 모달창이 나타납니다.
6) 페이지 상단 글로벌 네비게이션 영역(GNB)
- 상단 검색창은 UI로만 존재합니다.
- 구매 회원, 비로그인 회원의 페이지 상단 바에는 검색창과 장바구니 버튼만 존재합니다.
- 장바구니 버튼을 누르면 장바구니 페이지로 이동합니다(비로그인 유저일 경우 모달창으로 로그인 안내)
- 판매회원의 페이지 상위 버튼에는 마이페이지 버튼과 판매자 센터 버튼만 있어야 하며, 클릭 시 판매자 센터 페이지로 이동합니다.(장바구니 버튼은 사라집니다.)
7) 주문/결제 페이지
- 주문/결제 페이지에서 상품 정보는 수정 불가합니다.
- 배송 정보 칸에 주문자 정보와 배송지 정보를 입력할 수 있어야 합니다.
- 모든 입력이 완료되어야 결제하기 버튼이 활성화됩니다.
- 결제하기 버튼을 누르면 결제가 진행됩니다.
8) 로그인을 요청하는 모달
- 비로그인 사용자는 장바구니, 바로구매를 클릭했을 시 로그인을 해달라는 모달 창이 떠야합니다.
9) 마이페이지
- 상단 네비게이션에 있는 마이페이지를 클릭하면, 마이페이지,로그아웃 기능이 있는 드롭다운 박스가 생깁니다.
- 드롭다운 박스에 있는 마이페이지는 UI로만 존재합니다.
- 드롭다운 박스에 있는 로그아웃을 클릭했을 시, 로그아웃 됩니다.
1. 마이페이지 아이콘을
클릭했을 때
- 마이페이지 아이콘이 메인컬러로 변경됩니다.
- 드롭다운 UI가 나타나며 백그라운드를 클릭하면 UI가 사라집니다.10) 푸터(Footer)
- 피그마 그대로 구현하시면 됩니다.
3.2 도전 과제 - 판매자
도전 과제는 판매자 관련 기능을 추가 구현하는 것입니다.
[구현 페이지]
- 로그인 페이지
- 회원 가입 페이지
- 상품 목록 페이지
- 상품 상세 페이지
- 판매자 센터 페이지
- 상품 등록 페이지
1) 로그인 페이지
- 판매회원 로그인 탭을 클릭하면 판매 회원으로 로그인합니다.
2) 회원가입 페이지
- 판매회원 가입 탭을 누르고, 모든 입력을 마친 뒤(이용약관 체크박스 포함) 가입하기 버튼을 누르면 판매자로 회원가입이 됩니다.
- 사업자 등록번호에서 인증 버튼을 눌렀을 때 10개의 숫자가 아니면 입력 창 아래에 경고메세지가 나타납니다.
3) 상품 목록 페이지
- 판매자 센터에서 상품이 등록되면 상품 목록 페이지에도 동일한 상품이 나타납니다.
- 상품 목록 페이지에 있는 배너를 슬라이드로 구현해봅니다.
3) 상품 상세 페이지
- 상세 페이지에
+-버튼과 ,장바구니, 바로 구매 버튼은 비활성화 됩니다
4) 페이지 상단 글로벌 네비게이션 영역(GNB)
- 판매 회원의 페이지 상위 버튼에는 판매자 센터 버튼만 있어야 하며, 클릭 시 판매자 센터 페이지로 이동합니다.(장바구니 버튼은 사라집니다.)
- 페이지 상단 검색창에 검색 단어를 입력하게 되면 검색 단어가 포함된 제품명 목록이 나타납니다.
- 검색 버튼을 누르면 검색 결과 페이지로 이동합니다.
5) 판매자 센터 페이지
- 상품 업로드 페이지에서 등록한 상품들이 판매 상품 목록에 보여집니다.
- 수정 버튼을 누르면 상품 업로드 페이지로 이동하며, 상품 업로드 페이지에 productId 등록한 상품에 해당하는 상품의 내용이 보여집니다.
- 삭제 버튼을 누르면 삭제를 재확인하는 모달이 나타납니다. 삭제 버튼을 누르면 등록된 상품이 삭제됩니다.
6) 상품 업로드 페이지
- 상품 이미지를 등록할 수 있습니다.(상세페이지와 상품목록페이지에서 보이는 이미지)
- 상품명, 판매가, 기본 배송비, 재고 모두 입력 가능 합니다.(default 값은 모두 0입니다.)
- 상품명은 20자로 제한됩니다.
- 저장하기 버튼을 누르면 상품 등록이 완료되며 상품 상세 페이지로 이동합니다.
- 상품 상세 정보를 입력하는 에디터 영역 기능이 있습니다. (UI를 제공하지 않습니다)
7) 검색 결과 목록 페이지
- 검색 결과 페이지는 검색한 단어와 연관된 모든 상품의 목록이 나타납니다.
- 상품 목록의 상품을 클릭하면 상품 상세 페이지로 이동합니다.