Nextjs Ecommerce App

React, Next.js, Typescript, Redux를 활용한 간단한 쇼핑몰 앱입니다.

미리 보기

웹 뷰

모바일 뷰

웹 사이트

👇 배포된 사이트는 하단의 링크에서 확인 가능합니다.

https://nextjs-ecommerce-golee.vercel.app/

사용 방법

# Repository 복제하기
$ git clone https://github.com/goleedev/nextjs-ecommerce

# Repository로 이동하기
$ cd nextjs-ecommerce

# Dependencies 설치하기
$ npm install

# App 실행하기
$ npm run dev

설계

Actions

addToCart: 장바구니에 아이템을 추가하는 액션으로, cart state를 변경시킨다.
incrementQuantity: 장바구니에 추가된 아이템 수량을 추가하는 액션으로, cart state를 변경시킨다.
decrementQuantity: 장바구니에 추가된 아이템 수량을 제거하는 액션으로, cart state를 변경시킨다.
removeFromCart: 장바구니에 아이템을 제거하는 액션으로, cart state를 변경시킨다.

기능

카테고리 별 리스트 및 이동
아이템 가격 순 필터링 기능
아이템 디테일 페이지
아이템 장바구니 추가 및 제거 기능
아이템 수량 (quantity) 조절 기능

카테고리 별 리스트 및 이동

네비게이션의 카테고리 명 클릭 시, 카테고리 별 데이터를 가져와서 리스트로 볼 수 있다.

카테고리 이동	이동 완료

아이템 가격 순 필터링 기능

아이템을 낮은 가격과 높은 가격 순으로 필터링 할 수 있다.

낮은 가격 순	높은 가격 순

아이템 디테일 페이지

아이템 클릭 시, 해당 아이템을 장바구니에 담을 수 있는 장바구니 버튼을 포함한 아이템 디테일 페이지로 넘어간다.

아이템 장바구니 추가 및 제거 기능

아이템을 장바구니에 추가 및 제거할 수 있다.

장바구니 추가	장바구니 제거

아이템 수량 (quantity) 조절 기능

장바구니에 이미 추가된 아이템에 대해 수량을 추가/제거할 수 있다.

폴더 구조

├── node_modules (.gitignore)
├── public
│ └── favicon.ico
├── assets
│ ├── icon
│ └── image
├── staet
│ ├── cart.slice.ts
│ └── store.ts
├── components
│ ├── CategoryCard.tsx
│ ├── Footer.tsx
│ ├── Header.tsx
│ ├── Navbar.tsx
│ └── ProductCard.tsx
├── styles
│ ├── CartPage.module.css
│ ├── CategoryCard.module.css
│ ├── Footer.module.css
│ ├── globals.css
│ ├── Header.module.css
│ ├── Home.module.css
│ ├── Navbar.module.css
│ ├── NotFoundPage.module.css
│ ├── Product.module.css
│ ├── ProductCard.module.css
│ └── ProductPage.module.css
├── pages
│ ├── api
| │ └── products
| | │ ├── data.json
| | │ ├── index.ts
| | │ └── [category].ts
│ ├── product
| │ └── [slug].tsx
| └── [category].ts
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── cart.tsx
│ ├── index.tsx
│ ├── sale.tsx
│ └── upcoming.tsx
├── types
│ ├── product-type.ts
│ └── products-type.ts
├── utils
│ └── filter.ts
├── .gitignore
├── tsconfig.json
├── package.json
├── package-lock.json (.gitignore)
└── README.md

사용 기술

ReactJS
TypeScript
Next.js
Redux

문제 해결

Link 태그 내에서 Image 컴포넌트 사용

문제상황: Next.js의 Link 태크 내에서 Image 컴포넌트를 사용할 때 렌더링 에러 발생함
해결 방법: Image property 중 width와 height 값을 주면서 에러 해결함 Getting error when using next/image within

Next.js Request & Response Data 타입

문제상황: 데이터를 받아올 때 response와 request의 타입을 명시하지 않아 에러가 발생함
각각 NextApiRequest, res: NextApiResponse 타입을 사용하여 에러 해결함 Request & Response Data

구현하지 못한 기능

소분류 카테고리 필터링

추가로 구현한 기능

아이템 수량(quantity) 컨트롤 기능

실제로 운영되는 사이트라면 필요한 기능

결제 기능
Auth 기능
아이템 Favorite 기능

goleedev/nextjs-ecommerce