jaehafe/applepresso

React 기본 hook을 사용해 만든 커피 판매 앱

1. 프로젝트 주제

• 커피 주문 앱
• 개발 기간
  • 3/6~ 3/29 (3주)
  • 개인 진행
• Github Repo
  • https://github.com/jaehafe/applepresso
• 배포 주소
  • https://applepresso.vercel.app/

2. 사용한 기술

• client
  • React
  • 비동기 관리: useEffect, useState 기본 hook을 활용해 custom hook 제작
  • 라우터: React Router v6.4
  • 상태 관리: Context API
  • CSS: Styled-Components
• backend
  • DB: Firebase

3. pages, components flow chart

4. 주요 구현 기능

• 카카오페이 mock 결제
• 카카오지도 매장 정보 위치 확인, 현재 위치 확인
• firebase 사용
  • 물건 구매, 메뉴, 매장 정보 불러오기
• calendar 필터링으로 주문내역 선택
• 장바구니
  • Context API, useReducer로 전역 상태 관리
• 결제 페이지
  • 주문매장, 장소선택, 포장선택, 픽업 예정시간, 주문 내역 등 state관리
• 메뉴 이름 검색
  • useDebounce 커스텀 훅 사용으로 api 사용 최소화
• 모달 창
  • createPortal 사용

5. 프로젝트 회고 및 문제 해결, 추가 기능 설명

https://adam-37.gitbook.io/joomadeung/projects/projects/react-hook

applepresso's Issues

[공통] 라우팅 설계

[카트 버튼] position 수정

[담기 페이지]

• 선택한 메뉴 삭제 시, '선택해제'버튼 '전체선택'버튼으로 돌아오기
• 선택한 메뉴가 없을 땐, 삭제하기 버튼 pointer-events 막기
• 총 가격, 수량 렌더링

[주변 매장 페이지] 자주가는 매장

• 주문내역이 있으면 주문한 매장을 조회해서 해당 매장 렌더링

[주문] 주문할 매장 미선택 시 예외처리

• 주문할 매장이 선택이 안됐으면 protected route 감싸기

[주문 매장 선택 페이지]

• 카카오 지도 api를 사용해서 주문 매장 선택

[홈] 오늘의 메뉴

• 전체 메뉴에서 랜덤으로 가져오기(중복 없이)

애플프레소 홈페이지 설계

마이페이지

• 마이페이지 레이아웃

[검색페이지]

• useDebounce 훅 이용

[Protected Route] 로그인이 필요한 Route 접근 설정

[상세 페이지]

[로그인/회원가입 페이지]

[로그인 페이지] 로그인이 된 상태라면 /main/home으로 바로 라우팅

[추천, 커피, 밀크티 라떼] 카테고리 페이지

[주문 확인 페이지] 퍼블리싱

[담기 페이지] 선택만 삭제 오류

• 선택한 메뉴만 삭제 오류

[간편주문 등록]

• 간편 주문 context provider 추가

[결제 확인 페이지] 카카오 페이 redirect

• 카카오페이 approval, success, fail redirect 페이지 js 완성
• 페이지 퍼블리싱

[CartContextProvider]

• 총 가격 렌더링 오류

[주문 확인 페이지] 기능 추가

• 결제 정보 컴포넌트

[메뉴 상세 페이지] 메뉴 수량 조절

useReducer, context API 사용

• 수량 + 담기
• 수량 - 담기

[홈 화면] /main

[담기 페이지] createPortal 소계

• 주문하기 버튼 클릭 시. createPortal Hook으로 소계 모달창 띄우기