프로젝트 소개

OohYhatLee는 푸른 여름 바다를 컨셉으로 한 의류 쇼핑몰 웹 사이트입니다.
🏝️ 사이트 바로가기

핵심 기능

• 상품등록 : 어드민 사용자는 등록 페이지에서 신규 상품을 등록할 수 있습니다.
• 장바구니 : 로그인한 사용자는 장바구니에 있는 상품을 관리할 수 있습니다.
• 반응형 디자인 : 반응형 웹을 적용하여 모바일, 테블릿, 데스크탑에서 사용할 수 있습니다.

프로젝트 시작하기

1. Clone the repo

$ git clone https://github.com/337yj/shopping-mall-oohyhatlee.git

2. Install Yarn

$ yarn install

3. .env 파일을 만들고 Firebase 와 Cloudinary 환경변수를 입력합니다.

$ touch .env

# .env
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_DB_URL=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_CLOUDINARY_URL=
REACT_APP_CLOUDINARY_PRESET=

4. client build & run project

$ yarn build
$ yarn start

기술 스택

• React TypeScript Sass
• React-Query Context
• firebase Cloudinary
• ESLint Prettier
• AWS S3 Github Action

폴더 구조

📂src
 ├─ api # Firebase API, Cloudinary upload API 
 ├─ assets # 필요한 리소스들
 ├─ components # 컴포넌트
 │  │ 
 │  ├─ Common # 공통
 │  │  └─ # CartItem, CartStatus, PriceCard, Products, Button
 │  │ 
 │  └─ Layout # 레이아웃
 │     └─ # Header, Footer
 │ 
 ├─ context
 │  └─ AuthContext.tsx # 사용자 인증 컨텍스트
 │ 
 ├─ hooks 
 │  ├─ useCart.tsx # 장바구니 데이터 페칭,관리 커스텀 훅
 │  ├─ useProducts.tsx # 상품 데이터 페칭,관리 커스텀 훅
 │  └─ useScrollFadeIn.tsx # 스크롤 애니메이션 커스텀 훅
 │ 
 ├─ pages
 │  ├─ AllProducts # 상품 리스트 페이지
 │  ├─ Home # 메인 페이지
 │  ├─ MyCart # 상품카트 페이지
 │  ├─ NewProduct # 새상품 등록 페이지 (어드민)
 │  ├─ ProductDetail # 상품 상세 페이지
 │  └─ ProtectedRoute # 페이지 접근 제어
 │ 
 ├─ router
 └─ styles # reset, 전역 스타일, scss 변수
 │  ├─ constants # colors
 │  ├─ mixins # flexbox
 │  ├─ _base.scss
 │  ├─ _reset.scss 
 │  └─ global.scss 
 └─ index.tsx

데모 영상

어드민 사용자 로그인	로그인하지 않은 사용자
ㆍ어드민 사용자 로그인 시 헤더에 New메뉴 렌더링	ㆍ로그인하지 않은 사용자 장바구니 페이지 접근 제한

데스크탑 홈	모바일 홈
ㆍ데스크탑 뷰	ㆍ 모바일 뷰 ㆍ 메뉴 이동

상품 리스트	상품 디테일
ㆍ 상품 카테고리별 필터링 ㆍ 상품 검색 기능	ㆍ 특정 상품을 클릭하여 해당 상품의 상세 정보 확인 가능 ㆍ 상품 옵션 선택 및 장바구니에 추가 가능

장바구니	상품 등록
ㆍ 로그인하지 않은 사용자의 접근 시 메인 페이지로 이동 ㆍ 상품의 수량, 가격, 총 가격, 배송비 표시 ㆍ 사용자는 장바구니에서 상품 수정 및 삭제 가능	ㆍ 어드민 계정 사용자에게만 보이고 접근 가능 ㆍ 상품의 이미지, 제품명, 가격, 카테고리, 제품 설명, 옵션 정보 등록