React, Node.js로 만드는 쇼핑몰 웹
- 검색어를 입력하거나 카테고리를 선택하여 상품을 검색할 수 있음
- 실시간 검색 가능
- 검색 경우
- 검색어만 입력하였을 경우 👉 모든 카테고리 내에서 해당 검색어를 포함한 이름을 가진 상품만 나타남
- 카테고리만 선택하였을 경우 👉 해당 카테고리에 있는 모든 상품이 나타남
- 검색어를 입력하고 카테고리를 선택하였을 경우 👉 해당 카테고리 내에서 해당 검색어를 포함한 이름을 가진 상품만 나타남
- 로고를 클릭하면 입력된 검색어나 카테고리를 초기화할 수 있음
- 배너 이미지는 일정 시간마다 다음 이미지로 넘어가며 반복됨
- 로그인 전과 후에는 오른쪽 위의 버튼 구성이 달라짐
- 로그인 및 회원가입 시 각각의 경우에 맞춰 경고 메시지 또는 alert가 나타남
- 각 상품에 대한 정보를 볼 수 있음
- 가격, 판매량, 재고
- 상세 이미지
- 리뷰 게시판
- Q&A 게시판
Add to Cart버튼 클릭 시 장바구니에 해당 상품이 한 개씩 추가됨- 해당 상품에 대한 재고가 없을 시, 품절 버튼이 나타나며 상품을 구매할 수 없음
- 해당 상품의 판매자라면, 수정 및 삭제 버튼이 나타남
- 상세 이미지, 리뷰 게시판, Q&A 게시판을 클릭하면 각각에 맞게 밑의 화면이 바뀜
- 나와 관련된 각종 정보를 보고 관리할 수 있음
- 내 정보
- 판매자 정보
- 아직 판매자로 등록되지 않았을 경우에는 판매자 등록 버튼이 존재
- 판매자로 등록되어 있을 경우에는 판매자 정보 및 판매 상품 정보, 판매 물품 등록과 판매자 해지 버튼이 존재
- 결제 내역
- 결제한 정보에 대해 상품이 뜨고, 해당 상품의 리뷰를 남길 수 있는 버튼이 존재
- 결제한 상품에 대해 리뷰를 남길 수 있음
- 원하는 상품만 선택하거나 삭제하고, 결제를 진행할 수 있음
- 장바구니 화면에서 결제 버튼 클릭 시, 밑에 결제 정보를 입력하는 부분이 나타남
- 구매에 성공하였을 경우
- 장바구니에서 해당 상품이 사라지고 해당 상품의 재고가 감소하고 판매량이 증가함
- 결제 내역에 구매한 정보가 추가됨
