Travel Tech 스타트업 라이크어로컬 기업 과제 입니다.
- 여행 상품 리스트를 보고 장바구니에 저장할 수 있는 사이트 구현
- Best Practice 만들어 제출하기
 
|
 
|
 
|
 
|
 
|
 
|
 
|
 
|
npm i
npm run build
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메시지를 활용하여 문서화하였습니다.
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