원티드 프리온보딩 인턴쉽 2주차 과제

Travel Tech 스타트업 라이크어로컬 기업 과제 입니다.

🔗 결과 링크

최종 결과물 바로가기

📝 과제 목적

여행 상품 리스트를 보고 장바구니에 저장할 수 있는 사이트 구현
Best Practice 만들어 제출하기

👨‍💻 팀원 소개

📷 DEMO

예약하기 기능

다중 필터링 기능

장바구니 기능

⚙️ 설치 및 실행 가이드

Install

npm i

Build

npm run build

Start

npm start

🚀 기능

메인 페이지

여행 상품 정보 (Mock JSON) 를 활용하여 여행 상품 정보 노출
예약 버튼 클릭 시 여행 상품 장바구니에서 사용 할 수 있도록 상품 데이터를 저장
여행 상품 정보 클릭 시 모달창을 통해 여행 상품을 자세히 안내
여행 상품 조회 시 필터 기능 (가격, 지역, 다중 필터)

장바구니 페이지

장바구니 내부 여행 상품 조회
장바구니 내부 여행 상품 삭제
장바구니 내부 여행 상품의 구매 수량 변경
장바구니 내부 여행 상품의 총 결제액, 총 상품 개수를 계산하여 표시

✨ 기술 스택

React
Typescript
redux-toolkit
axios
react-router-dom
chakra-ui
emotion
craco → webpack 설정을 확장하기 위해 사용하였습니다. Path Alias를 사용합니다

🤝 협업 툴

Discord
Notion
Github
Figma

✅ 과제 진행 방법

기능 구현 목록을 작성 후 아래와 같이 분류하였습니다.

main page 구현
상품 필터 기능 구현
reservations page 구현

분류에 따라 팀원 개개인이 과제를 수행했습니다. 리뷰 시간을 정하여 해당 시간에 PR에서 코드리뷰를 했습니다. 투표를 통해 Best Practice를 선정한 후, 다른 과제 중 좋았던 구현들을 의논하여 추가하였습니다. 이슈와 PR메시지를 활용하여 문서화하였습니다.

🌟 Best Practice Process

Mar 8, 2023 | main page 구현

context API의 렌더링 이슈로 인해 context API가 아닌 redux/toolkit을 사용한 것
향후 각 페이지의 크기를 고려하여 lazy와 suspense를 사용해서 코드 스플리팅을 사용한 것
toast message를 통한 UX 향상
코드 가독성
장바구니, 상품 상태 전역적 상태 관리

Mar 9, 2023 | 여행 상품 filter 구현

필터링에 사용되는 항목들을 utils로 묶어서 코드 분리한 점
전역적으로 관리할 필요가 없는 항목에 대해 useState와 useEffect로 상품 필터 기능을 구현한 것
공간 필터 버튼의 토글 기능을 통한 여러 조건의 필터링이 가능한 점
관심사의 분리가 잘 되서 좋은 가독성

Mar 10, 2023 | reservations page 구현

삭제 기능 실행 전 유저에게 확인받는 과정이 있는 점
재사용성과 관심사에 따라 적절한 코드 분리
장바구니에 관련된 action을 한 가지로 통일한 후 commandType을 전달하여 각 type에 맞게 state를 변경하는 방식을 통해 action을 직접 사용하는 코드 단에서 코드의 길이가 줄어들고, 가독성이 좋아짐
장바구니에 담긴 배열에서 findIndex를 통해 배열의 전체 순회를 딱 한 번만 실행하고, index를 통해 상품에 직접 접근하여 state를 변경시켜주는 부분
Chakra-UI의 Table을 사용한 장바구니 UI 구현
UI 관련 포멧팅 함수 작성
적절한 커밋 태그와 추가적인 설명이 필요하면 작성한 커밋 본문
중복되는 코드를 템플릿화 하여 줄임(toast 템플릿 생성기)

🐞 이슈 및 버그

Mar 7, 2023 | 상태 관리 툴 사용 유무

🗂️ 파일 구조

src
 ┣ api
 ┃ ┗ product
 ┣ components
 ┃ ┣ main
 ┃ ┗ reservations
 ┣ constants
 ┣ interface
 ┣ lib
 ┃ ┣ hooks
 ┃ ┗ utils
 ┣ pages
 ┗ store
   ┗ slices

tnghgks/pre-onboarding-9th-2-8