Project

프로젝트 기간

2023년 2월 7일 ~ 2월 15일

project github

project notion

프로젝트 소개

Fake API를 사용한 React 쇼핑몰입니다.

카테고리를 패션, 악세서리, 디지털로 나누고 해당하는 상품을 보여줍니다.

상품마다 상세 페이지가 있고, 장바구니에 담을 수 있습니다.

상품을 따로 검색하여 상세 페이지로 넘어갈 수 있습니다.

배포 링크

React Shop

기술 스택

React Vite Typescript recoil aixos CSS Module Eslint

프로젝트 주요 기능

1. 상품 모아보기

   • 메인 페이지에서 카테고리 별 상품 모아보기

     

2. 상품명으로 검색하기

   • 검색 키워드 자동 완성 및 검색

   • 검색 후 상세 페이지로 이동

     

3. 상품 상세 페이지

   • 장바구니에 담기

     

4. 장바구니

   • 상품 개수 변경

   • 모두 구매하기

     

기술 특장점

• React를 사용해 웹 페이지를 효율적으로 구현하고 관리했어요.
• Typescript를 사용해 코드에 맞는 타입을 지정해 버그를 방지했어요.
• Recoil을 사용해 쉽게 상품 정보를 불러왔어요.
• CSS Module를 사용해 className 중복을 막고 유지 보수에 용이했어요.