별,해달_React/TypeScript 프로젝트 기술서
01 Feb 2024별,해달_React/TypeScript 프로젝트 기술서
기간
2023년 11월 16일 ~ 12월 26일
링크
프로젝트 소개
[멋쟁이사자처럼 프론트엔드 스쿨 플러스 1기]에서 진행한 React/TypeScript 프로젝트입니다. [까까묵자] 반려동물 간식 웹사이트를 기반으로, 제공되는 마켓 백엔드 API를 사용해, 반려동물 간식 마켓 웹페이지를 구현했습니다.
조장 업무
프로젝트를 위한 tailwind 적용 및 페이지 배분, 최적화 고려한 환경 설정을 했습니다.
프로젝트 기간 동안 매일 오후에 스크럼을 진행하여 작업 상황 공유했습니다. 처음에 html/css 작업을 나누었고, 구현한 이후에는 기능 구현 위주로 다시 파트를 분배하여 작업하도록 했습니다.
[까까묵자]라는 프로젝트의 프로토타입이 된 사이트의 상품 정보들을 모두 크롤링하여 가져왔습니다. 강사님이 제공하시는 백엔드 API가 자주 업데이트 되었는데, 업데이트 상황을 이 프로젝트에 맞게 맞추었습니다.
담당 작업
반려동물 간식 마켓 웹사이트의 핵심 기능이라고 할 수 있는 상품 관련 페이지들을 도맡아 기능 구현했습니다.
메인 페이지, 상품 목록 페이지, 상품 상세 페이지, 찜 페이지, 장바구니 페이지, 주문 페이지의 기능들을 구현했습니다.
메인 페이지에서는 태그별로 해당 물품들 정리해서 보여주는 것이랑, 전체 품목 보여주는 기능이 있습니다. 리뷰 데이터도 보여주되, 별점 4개 이상 리뷰만 필터링해서 노출되도록 했습니다.
상품 목록 페이지도 전체 목록, 키워드별 목록을 보여주도록 했습니다. 페이지네이션 작업을 했고, 신상품, 상품명, 낮은 가격, 높은 가격으로 정렬이 가능합니다. 메인 페이지와 상품 목록 페이지에서 상품에 접근 시 위젯이 나타나도록 해, 바로 장바구니에 담거나 찜을 보거나 상세 페이지로 이동할 수 있도록 했습니다.
상품 상세 페이지에서는 상품 옵션이 있는 경우와 없는 경우를 나눠서 작업했습니다. 없는 경우 단순 개수만 파악해서 장바구니에 담거나 찜하거나 구매를 할 수 있도록 했습니다.
옵션이 있는 경우, 단순히 물품만 달라지는 경우가 있고, 가격이 높아지거나 낮아지는 경우가 있습니다. 각 옵션 별로 객체를 생성해서 옵션 별 개수와 가격을 계산해서 총합 계산이 이뤄지고 다음 행동이 가능하도록 했습니다.
찜 페이지와 장바구니 페이지는 각 기능에 맞게 찜한 것을 모아볼 수 있도록 했고, 장바구니에 담거나 바로 주문이 가능하도록 했습니다. 장바구니 역시 개별 물품을 찜하거나 전체, 부분 주문이 가능하도록 했습니다.
주문하기 페이지에서는 주문 상품 삭제 기능을 두었고, 주문 상품이 0개가 되면 장바구니 페이지로 이동합니다. 테스트 결제를 기능을 연동하여 KG 이니시스 결제 실제로 가능합니다(23시 이후 결제 취소).
찜, 장바구니, 주문 페이지에서 모두 사용하는 체크박스 관련 공통 로직은 커스텀 훅을 만들어서 관리했습니다.