React를 사용한 맞춤형 영양제 사이트 'Care of'(https://takecareof.com/) 웹사이트 클론.
- 프로젝트 기간: 2021년 04월 21일 ~ 2021년 05월 07일
- 프로젝트 참가자 (Front & Back) 🔜 FrontEnd: 김희열, 서동이, 서민석 🔙 BackEnd: 김현영, 박형섭, 안정현(PM)
💻 🌸 Front-end Work Details
Sign up
:Profile
:
Nav
: 공통으로 쓰이는 Nav 컴포넌트- 스크롤 시 Nav 바가 가려지는 시점부터 고정 기능
- 전체 카테고리에 마우스 오버 시 서버로부터 받아온 카테고리 리스트 드롭다운
- 전체 카테고리가 선택 되었을 시에만 서브 카테고리 조건부 렌더링
Main
: 웹 앱의 첫 메인 페이지- 자동으로 슬라이드 되는 캐러셀, 캐러셀 필터링 기능
- 24시간 한정 세일을 위한 타이머 기능
- 총 6개 추천 품목 (suggestions, sales, new 등) 으로 나누어진 상품들을 각 캐러셀로 구현
Quiz
: 선택된 카테고리의 상품 리스트 페이지- 동적 라우팅으로 각 서브 카테고리의 상품 리스트 구현
- 동적 라우팅으로 신상품순, 가격순 필터링 구현
- Pagination 구현
- 장바구니 모달창 기능 구현
Product List
:Cart
:
###김현영
###박형섭
Product Category
Order
🔧 기술 스택
- 김현영 :
- 김희열 :
- 박형섭 :
- 서동이 :
- 서민석 :
- 안정현 :
❗️ 레퍼런스 이 프로젝트는 singulart 웹사이트를 참조하여 학습목적으로 만들었습니다. 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다. 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.