Detail Page

디테일 페이지는 제품의 상세 이미지 슬라이드와 색상, 사이즈, 재고, 장바구니, 상세 정보 등으로 구성하여 구현하였다.

기능

1. 서브 이미지

• 마우스 클릭시 이미지 투명도 변화
  

2. 무한 슬라이드

• 좌우 버튼 클릭시 이미지 슬라이드 되어 보여짐
  

3. 색상 버튼

• 색상 버튼에 마우스 호버시 색상명 띄워줌
• 색상 버튼 클릭시 해당 색상으로 서브, 슬라이드 이미지 변경
  

4. 사이즈 버튼

• 사이즈 버튼 클릭시 선택된 사이즈 테두리 진해짐
• 사이즈 버튼 클릭시 재고 20개보다 적으면 "주문 가능한 수량이 n개 남았습니다" 알림 띄워줌
  

5. 장바구니 버튼

• 로그인 시에만 이용 가능

• 색상, 사이즈 모두 선택 후 장바구니에 추가 클릭하면 장바구니에 담김
  

• x 버튼 클릭시 장바구니에서 삭제됨
  

• 결제하면 해당 상품의 재고 줄어듦, TOP20에 구매 개수 반영됨
  

  

6. 좋아요 버튼

• 로그인 시에만 이용 가능
• 해당 상품에 좋아요 누르면 리스트 페이지에 반영되어 보여짐
• 로그아웃을 하거나 페이지를 껐다 켜도 반영되어 있는 상태 유지됨
  

✤ 반응형

화면을 줄였을 때 아래와 같이 보이게끔 구현하였다. 마찬가지로 슬라이드 기능, 색상, 사이즈, 장바구니, 좋아요 기능 모두 작동되게 하였다.

Front-end Repository : weareneverthat FE Repo