Wikea Project

내가 맡은 이케아 웹사이트의 메인 페이지에서 진행중인 이벤트 및 프로모션, 추천제품, 신제품을 보여주는 컴포넌트를 캐러셀 형식으로 구현해야 했다. 직접 만드는 방식과 라이브러리를 이용하는 방식 중 고민한 결과, 이전까지 라이브러리를 활용해본 적이 없어 라이브러리를 실전

useEffect 훅을 이용해 쿼리에 저장한 카테고리 값이 변경되면 카테고리 아이디를 파라미터로 넘겨 getList thunk 함수를 디스패치해 서버로 API를 요청하고, 리스트 데이터를 받아온다.

listHeader의 제품과 디지털쇼룸 클릭 시, 불러오는 이미지 데이터를 변경하도록 구현했다. 제품 이미지가 기본값이며 디지털 쇼룸에 해당하는 이미지가 없으면 일반 제품 이미지를 보여준다.

장바구니 기능은 생각보다 디테일하게 신경 쓸 부분들이 많았다. 그중에서 수량을 선택하는 컴포넌트를 공통 컴포넌트로 만드는데 시간을 오래 쏟기도 했다. 완성하고 보면 간단해 보이는 코드도 백지 상태에서 만들 때는 눈앞이 하얘지는 순간들을 종종 만났다.

리스트 페이지에서 출력하는 상품 목록을 특정 기준으로 정렬할 수 있도록 구현했다. 기본값은 신제품이며, 낮은가격 순, 높은 가격 순, 이름 순, 고객평가 순, 가장 인기있는 순으로 세부 항목을 선택할 수 있다.

- 개발기간 : 2021.1 ~ 2021.2 약 3주 - 인원 : Front + Back - 1인 / Front - 2인 / 총 3인 - 리액트를 이용한 글로벌 홈퍼니싱 브랜드 이케아의 웹사이트 클론 프로젝트 - 목표: 협업 툴을 활용한 스크럼 방식의 프로젝트를 진