🦄Happy New Ear🦄

귀염뽀짝한 에어팟 케이스들은 다 여기있다!

에어팟 악세사리 쇼핑몰 Happy New Ear 입니다.

📺Demo Video

📚Wiki

✔️Develop Period : 2020.08.14 ~ 2020.08.20

✔️Developer

Developer	💻what did I do
🙂곽병선	카테고리 페이지 기능 구현 상세페이지 UX/UI 메인 페이지 기능 구현
🙂이연주	로그인/회원가입 기능 구현, 로그인/회원가입 UX/UI 데이터 베이스/라우터 연동
🙂조성원	장바구니 기능 구현 메인 페이지 기능 구현 메인 페이지 UX/UI
🙂하태린	상세페이지 기능 구현 슬라이더 기능 구현 장바구니 UX/UI

⚙️Install & Run

• install

  $ cd FE
  $ npm install

• Run

  $ npm start

🔨Tech Stack

🗃️Project Folder

📁config
📁node_modules
📁public
├── 📁data
├── 📁images
├── index.html
📁script
📁src
├── 📁components
├── 📁containers
├── 📁data
├── 📁pages
├── 📁store
├── App.js
├── index.js
└── Root.js

📌주요 기능

1. Sign Up / Sign In

• 고객은 구글 계정으로 로그인하여 서비스를 사용할 수 있습니다.
• 고객의 회원 가입 정보 입력 후 회원 정보 DB에 저장되어야 합니다

2. Page Router

• 고객은 특정 주소에 따라 특정 데이터에 직접 접근할 수 있습니다.
• 브라우저는 특정 주소에 따라 파일을 로드 하여 렌더링합니다.

3. Header

• 브라우저는 스크롤 이벤트와 관계 없이 헤더를 상단에 고정시킵니다.
• Posiotion : fixed, z-index 적용

4. Main Page

• 메인 페이지는 상품 기획시리즈를 슬라이딩하여 보여줍니다.
• 고객은 카테고리별 최신상품 4개씩 미리 볼 수 있습니다.
• 고객은 카테고리 이름을 클릭하여 카테고리별 상품을 볼 수 있습니다.
• 고객은 상품 이미지를 클릭하여 상품 상세 정보를 볼 수 있습니다.

5. Category Paage

• 카테고리 페이지는 카테고리에 따라 상품 목록과 인기 상품을 보여줍니다.

6. Detail Page

• 상세 페이지는 상품에 대한 판매가, 상품이름, 배송비, 수량, 최종 가격정보를 보여줍니다.

7. Cart Page

• 고객은 상품 선택 및 삭제에 따라 예상 주문금액을 알 수 있습니다.