ssori0421 / ecommerce-app

🛒 Next-eCommerce-app

1. Introduction 👩🏻‍🦰

Next.js로 구축해보는 eCommerce-app입니다. Coupang 애플리케이션 클론 코딩 및 CI/CD를 구축하였습니다.

회원가입 & 로그인	메인	상품 상세 & 장바구니

2. Deploy 💻

서비스 바로가기

3. 디렉토리 구조 📂

eCommerce-app
├─ src
│  ├─ app
│  │  ├─ (auth)
│  │  │  ├─ login
│  │  │  ├─ register
│  │  │  └─ reset
│  │  ├─ (checkout)
│  │  │  ├─ checkout
│  │  │  ├─ checkout-address
│  │  │  └─ checkout-success
│  │  ├─ (home)
│  │  ├─ (order)
│  │  │  ├─ order-details
│  │  │  │  └─ [id]
│  │  │  └─ order-history
│  │  ├─ admin
│  │  │  ├─ add-product
│  │  │  ├─ all-products
│  │  │  ├─ dashboard
│  │  │  ├─ edit-products
│  │  │  │  └─ [id]
│  │  │  ├─ order-details
│  │  │  │  └─ [id]
│  │  │  └─ orders
│  │  ├─ cart
│  │  ├─ contact
│  │  ├─ product-details
│  │  │  └─ [id]
│  │  └─ review-product
│  │     └─ [id]
│  ├─ assets
│  ├─ components
│  │  ├─ autoSigninCheckbox
│  │  ├─ button
│  │  ├─ changeOrderStatus
│  │  ├─ chart
│  │  ├─ checkbox
│  │  ├─ checkoutForm
│  │  ├─ checkoutSummary
│  │  ├─ divider
│  │  ├─ heading
│  │  ├─ icon
│  │  ├─ infoBox
│  │  ├─ input
│  │  ├─ loader
│  │  ├─ pagination
│  │  ├─ product
│  │  │  ├─ productFilter
│  │  │  ├─ productItem
│  │  │  ├─ productList
│  │  │  └─ productReviewItem
│  │  ├─ slider
│  │  ├─ toastProvider
│  │  └─ tooltip
│  ├─ firebase
│  ├─ hooks
│  ├─ layouts
│  │  ├─ footer
│  │  ├─ header
│  │  ├─ innerHeader
│  │  └─ navbar
│  ├─ redux
│  └─ utils

4. 구현 기능 👩🏻‍💻

✅ GIthub Actions를 기반으로 CI/CD 파이프라인 구축

• Github Actions를 사용해 main 브랜치에 push 발생시 코드의 지속 통합 및 배포가 이뤄지도록 함.
• Docker를 사용해서 애플리케이션 컨테이너화.
  • 멀티 스테이지 도커 빌드(빌드 스테이지 분리)를 활용하여 도커 이미지를 최적화시킴.
• AWS의 Elastic BeansTalk를 사용해 AWS의 EC2 인스턴스에 컨테이너를 배포.

✅ Redux Toolkit 라이브러리를 사용해 전역 상태 관리

• 유저 정보 및 장바구니 데이터 관리.
• 상품 검색 및 조건별/가격별 상품 필터링 기능 구현.
• 배송지 주소 관련 데이터 관리.

✅ 회원가입/로그인 페이지, 상품 생성 페이지 기능 개발

• Firebase를 사용해 유저 정보 및 상품 데이터를 저장하고 불러오도록 함.

✅ 상품 리스트 페이지 기능 개발

• 상품 검색 및 조건별 상품 필터링 기능 구현.
• Pagination 기능 구현.

✅ 상품 상세 페이지, 장바구니 페이지, 주소 입력 페이지 기능 개발

4. STACKS 📚

5. Git Convention 🖍️

태그	설명
feat	새로운 기능을 추가할 경우
chore	패키지 매니저 설정 등 여러가지 기능과 무관한 부분 들을 수정, 추가 하는 경우
error	버그를 고친경우
HOTFIX	치명적인 버그 수정, 운영중 빠른 수정이 필요한 경우
design	CSS 등 사용자 UI 디자인 변경
style	코드 포맷 변경, 세미콜론 누락 등 기능상의 코드 수정이 없는 경우
comment	주석 추가 및 변경
docs	문서를 수정한 경우
refactor	프로덕션 코드 리팩토링
rename	파일명을 수정하거나 옮기는 작업
remove	파일을 삭제하는 작업
test	Test코드 추가

6. 프로젝트 실행 방법

# 레포지토리 클론
git clone https://github.com/ssori0421/eCommerce-app.git

# 패키지 설치
yarn

# 실행
yarn build 후에 yarn start