JungKyuHyun/Shopping-Cart

React를 이용한 상품 목록 및 장바구니 페이지 구현 Side Project!

TypeScriptMIT

📖 Shopping-Cart Project

상품 목록 페이지에서 상품을 보고, 장바구니에 상품을 추가할 수 있으며 장바구니 페이지에서 그 목록을 볼 수 있다.
상품 목록 페이지에서는 4개의 상품씩 페이징 처리를 한다.
장바구니에는 최대 3개의 상품만 담을 수 있다.
장바구니에 담긴 상품은 브라우저를 새로고침(reload)해도 유지된다.
상품은 최소한 1개의 수량을 가지고 있으며, 그 이상으로 설정할 수 있다.
상품에는 쿠폰을 적용할 수 있는 상품과 없는 상품이 존재한다.
만약 쿠폰 적용이 가능한 상품이라면, 자동으로 해당 쿠폰을 적용한 화면을 보여준다.
자동으로 쿠폰을 적용했더라도, 소비자는 쿠폰을 선택할 수 있다.
정액 쿠폰과 정률 쿠폰의 할인액이 같을 경우, 정액 쿠폰으로 처리한다.
모바일 이용자를 고려하여 버튼, 페이지네이션 등을 전체 UI를 유지하는 선에서 오른쪽에 위치시킨다.
모달, 툴팁, 아이콘 등을 이용하여 UX를 향상 시킨다.

🕒 Project Period

2020.01.17 ~ 2020.01.23 (총 7일)

🔨 Installation

npm i

🔔 Usage

npm start

If you enter npm start or npm run start, your browser open http://localhost:3001/products.

🔎 Directory Structure

└── src
    ├── components
    ├── containers
    ├── models
    ├── pages
    ├── reducers
    ├── routes
    └── services

컴포넌트의 경우 Atomic Design을 간소화시켜 (components, containers / PascalCase)
models에는 entity model 정의
pages는 라우팅이 되는 가장 최상위 컴포넌트를 정의(kebab-case)
reducers는 reducer, action, selector 정의(camelCase)
routes는 라우팅 정의, 라우팅 관련 상수 정의
services는 데이터에 대한 비즈니스 로직 처리(camelCase), dummy data 위치

🐧 Preview

1-1. 상품 목록 페이지

1-2. 상품 목록 페이지 - 상품 장바구니에 넣기/빼기

2-1. 장바구니 페이지 - 상품이 없을 경우

2-2. 장바구니 페이지 - 상품이 있을 경우

2-3. 장바구니 페이지 - 상품 수량 수정

2-4. 장바구니 페이지 - 쿠폰 적용 불가 상품 선택(체크)시, 최종 결제 금액 변경 및 쿠폰 미적용(선택 불가)

2-5. 장바구니 페이지 - 쿠폰 적용 상품 선택(체크)시, 최종 결제 금액 변경 및 할인 높은 쿠폰 자동 적용

2-6. 장바구니 페이지 - 쿠폰 적용/미적용 상품 같이 선택(체크)시, 쿠폰은 적용 가능 상품에만 적용

🔍 Thchnical Skills

메인 라이브러리: React
메인 언어 및 문법: Typescript, RxJS, Javascript ES6+, JSX
상태 관리: redux, redux-observable
서버: webpack-dev-server
UI Library: Ant Design
기타: git, Babel, eslint, prettier, lodash, local storage

🙏 Contributing

Please PR.

🔱 Collaboraters

정규현(JungKyuHyun)

👀 See also

My Development Blog: https://code-masterjung.tistory.com

©️ License