프로젝트 소개:

• 실제 사이트를 기준으로 원하는 구성과 목표를 세워서 만들어 보기 위함
• 홈, 상세 페이지, 장바구니 페이지와 검색창 기능 구현과 기준대로 CSS 구현해보기
• DB 연동 없이 api 목업 데이터를 만들었기에 상세 페이지는 상품 1개만 존재.

사용 기술 스택:

NextJs, tailwindcss, TypeScript, axios, recoil, swifer

페이지 별 기능

홈페이지

• 홈 화면 모양새 따라 만들기, Nav hover하면 드롭박스 CSS 시도해보기
• 검색 기능, 검색 모달창 띄우기.
• 이벤트까지 남은 기간을 실시간으로 보여주는 카운트 다운 만들기
• 화면 위로 돌아다니는 이벤트 쿠폰 만들어보기

상세 페이지 (목업 데이터 1개만 생성, 고정된 1개의 데이터만 사용)

• 상품 상세 이미지 슬라이드
• 상품 옵션 선택과 가격 표시, 선택한 옵션을 장바구니에 추가하기
• 상품 설명을 클릭에 따라 조건부로 보여주기.

장바구니 페이지

• 선택한 옵션 보여주기
• 수량 조절, 총 상품금액 5만원 이상 시 배송비 무료