📜 저렴다방

평소 즐겨 쓰던 패스 오더 앱에서 착안했습니다.
패스오더는 매우 편리하고 직관적입니다.
사용하다 보니 앱이 어떤 방식으로 만들어지고 어떤 요소들이 필요한지 궁금해졌고
저는 웹으로 패스오더 시스템을 구현하는 프로젝트를 진행해 보기로 했습니다.

주문기능 구현
로그인을 통한 유저정보생성
주문을위한 상점정보 생성
유저/가맹점주 기능분리
주문한 내역을 한눈에보고 픽업여부를 알려주는 주문내역

배포 URL입니다.
기획 및 프로젝트에 목표입니다.

🗞️ 개요

• 로그인
  firebase Authentication Sign-in method의 기능을 사용해
  E-mail, Password 회원가입 기능과 google, facebook 소셜 로그인을 통해
  로그인 기능을 구현했습니다.
• Firbase
  Firebase Realtime Database 기능을 통해 상품과 스토어에 JSON API를 생성하고
  FireStore DataBase 기능으로 각 매장별로 주문 목록, 스탬프&쿠폰, 판매자, 구매자, 장바구니
  에 데이터를 관리해 주고 있습니다.
• 디자인
  Sass를 사용하여 변수 선언과 중첩을 사용해 스타일을 좀 더 쉽게 시도했습니다.
• 상태관리
  프로젝트에서 관리되는 데이터가 많지 않다고 판단돼 상태 관리 라이브러리는 따로 사용하지 않고
  필수적으로 관리해 줘야 할 데이터만 전역 상태로 분리해 최상위 컴포넌트에서 하위 컴포넌트로 전달해 주었습니다.
  

🔧 사용 기술

Front-end -

Back-end -

Library -

📌 구동화면

1. 로그인

• 로딩 화면이 생성된 후 로그인 페이지로 이동합니다.
• 로그인했을 경우 메인 홈 화면으로 연결됩니다.
• 로그인 안 했을 경우, 로그인 화면으로 연결됩니다.
• 홈 화면에서는 기본적인 메뉴들은 사이드바를 구현했습니다.

로그인 전	로그인 후 홈화면

2-1. 지역선택

• 홈 화면에서 주문을 클릭하면 지역 선택으로 연결됩니다.
• 클릭하면 해당 매장이 맞는지 확인 후 메뉴 페이지로 연결됩니다.

지역선택	클릭

2-2. 메뉴선택

• 지역을 누르면 메뉴 페이지로 오면서 해당 지역이 상단에 표기됩니다.
• 메뉴는 핫, 아이스 메뉴가 있으며 메뉴를 클릭할 시 메뉴에 세부정보가 표시됩니다.

핫메뉴	아이스메뉴

2-3. 메뉴디테일

• 메뉴 디테일로 이동하면 커피에 사이즈와 수량을 선택한 뒤 바로 결제 또는 장바구니에 추가할 수 있습니다.
• 장바구니가 비어있다면 장바구니가 비어있다고 표시되고 알림 창이 호출됩니다.

메뉴디테일	빈 장바구니

2-4. 결제하기

• 결제 페이지에서 선택한 상품에 정보를 보여줍니다.
• 요청사항을 입력하고 쿠폰이 있다면 쿠폰이 표시가 되고 없다면 쿠폰이 없다는 문구를 보여줍니다.
• 결제수단을 선택해 주고 적립 예정 스탬프와 할인된 총 가격을 보여주고 최종 확인 후 결제가 진행됩니다.

메뉴디테일	빈 장바구니	결제하기	결제알림

2-5. 주문내역

• 결제된 데이터를 받아와 유저에게 보여줍니다.
• 수령 시간은 기본값이 "준비 완료 후 수령 가능"이고 가맹 판매자 페이지에서 변경할 수 있습니다.
• 실시간 통신을 통해 화면이 rerender가 발생하지 않아도 실시간으로 바뀝니다.

픽업전 주문내역	빈 장바구니

3. 스탬프 & 쿠폰

• 홈 화면에 스탬프와 쿠폰이 몇 갠지 표기되어 유저가 정보를 좀 더 쉽게 파악할 수 있게 했습니다.
• 적립내역을 구현해 언제 어디서 스탬프가 적립됐는지 알 수 있도록 표기했습니다.
• 마이페이지를 통해 좀 더 많은 정보를 보여줬습니다.

적립내역	홈 표기	마이페이지

4. 가맹페이지

• 가맹점 페이지를 업체에 맞게 따로 구현하여 현재 들어온 주문을 종합적으로 볼 수 있습니다.
• 페이지에서 픽업 여부를 선택할 수 있고 선택한 데이터는 실시간 통신을 통해 유저에 주문 내역에 반영됩니다.
• 유저가 어떤 주문을 했는지 주문 상세보기를 통해 확인할 수 있습니다.

판매자페이지

픽업변경

상세보기

5. 404페이지

• 유효하지 않은 페이지를 검색할 시 출력되는 페이지입니다.

에러페이지

🔎 개발일정

• 기간: 2023.02.20 ~ 2023.04.06
  

  • 프로젝트 구상
  • 요구사항분석
  • reference 조사
  • 구현 순서 결정

• 폴더트리

pass-order
├─ .git
├─ .gitignore
├─ .vscode
│  └─ extensions.json
├─ jsconfig.json
├─ package.json
├─ public
│  └─ index.html
├─ README.md
└─ src
   ├─ assets
   │  ├─ coffee.png
   │  ├─ giphy.gif
   │  ├─ homeLogo.png
   │  ├─ img
   │  │  ├─ mainImg1.jpg
   │  │  ├─ mainImg2.jpg
   │  │  ├─ mainImg3.jpg
   │  │  └─ mainImg4.jpg
   │  ├─ logo.png
   │  └─ order
   │     └─ kakaopay.jpg
   ├─ components
   │  ├─ App.jsx
   │  ├─ Error
   │  │  └─ NotFound.jsx
   │  ├─ Home
   │  │  └─ Home.jsx
   │  ├─ Login
   │  │  ├─ LoginHome.jsx
   │  │  ├─ PwdSerch.jsx
   │  │  ├─ SignIn.jsx
   │  │  └─ SignUp.jsx
   │  ├─ Order
   │  │  ├─ Basket.jsx
   │  │  ├─ Menu.jsx
   │  │  ├─ MenuDetail.jsx
   │  │  ├─ OrderList.jsx
   │  │  ├─ OrderPlaces.jsx
   │  │  └─ Payment.jsx
   │  ├─ Router.jsx
   │  ├─ Seller
   │  │  ├─ Seller.jsx
   │  │  └─ SellerSidebar.jsx
   │  └─ Sidebar
   │     ├─ Location.jsx
   │     ├─ MenuInform.jsx
   │     ├─ MyInformation.jsx
   │     ├─ OrderHistory.jsx
   │     ├─ OrderItem.jsx
   │     └─ Sidebar.jsx
   ├─ container
   ├─ db
   │  ├─ localhost.webarchive
   │  └─ passorder-db.json
   ├─ fbase.js
   ├─ index.js
   └─ scss
      ├─ Error
      │  └─ Error.scss
      ├─ Home
      │  └─ Home.scss
      ├─ Login
      │  ├─ LoginContainer.scss
      │  └─ SignUp.scss
      ├─ normalize.scss
      ├─ Order
      │  ├─ Basket.scss
      │  ├─ Menu.scss
      │  ├─ OrderList.scss
      │  └─ Payment.scss
      ├─ reset.scss
      ├─ Seller
      │  └─ Seller.scss
      └─ Sidebar
         ├─ Location.scss
         ├─ MyInformation.scss
         └─ OrderHistory.scss