2021.07.05 - 2021.07.16
데모페이지 보러가기 **시연영상 | 깃허브 | 회고록**
Dr.Jart+ USA 홈페이지를 모티브로 한 웹페이지 제작 프로젝트를 프론트엔드, 백엔드 엔지니어와 함께 팀 프로젝트로 진행했습니다. Dr.Jart는 화장품을 판매하는 커머스 웹페이지로, 다양한 filtering, sorting 기능과 함께 장바구니 추가 및 삭제 기능이 있어 리액트의 state 및 컴포넌트 사용을 적극적으로 활용할 수 있었습니다.
구성원
프론트엔드 3명, 백엔드 3명
기술스택
HTML/CSS, JavaScript, React, Sass
담당부분
<aside> 💁♀️ 결과물 자세히 보기
✔️ 상품디테일 페이지 state와 props를 사용하여 컴포넌트 간에 데이터 전송을 가능하도록 하여, 좌측의 상품이미지 리스트에서 이미지 클릭시 보여지는 이미지를 변환하는 기능을 구현하였습니다. 또한 우측의 용량 옵션을 선택함에 따라 가격 또한 변동이 생기며, 장바구니에 담을 시 선택된 용량 및 가격 옵션을 전송할 수 있도록 구현했습니다.
✔️ 상품카드 컴포넌트 상품리스트에서 반복되어 사용되는 상품 카드를 효율적으로 구현하기 위해 컴포넌트화 하였으며, 상품디테일 페이지와 마찬가지로 상품 옵션 선택 등 컴포넌트간 데이터 전송에 주안점을 두어 구현하였습니다.
✔️ 상품리스트 페이지 카테고리 선택을 통한 filtering과 가격순, 판매순 등 상품 특성에 따른 sorting기능을 API 연동을 통해 구현하였습니다. 특히 카테고리를 선택했을 때 상단 배너 부분이 선택된 값에 따라 달라질 수 있도록 props와 state값을 적극 활용하여, 조건부 연산자를 통해 구현하였습니다.
</aside>