/GreekZik2

🥗 커스텀 가능한 그릭요거트 주문앱

Primary LanguageJavaScript

그릭요거트 주문 앱

📜 프로젝트 소개

토핑을 선택하여 장바구니에 추가하고 주문할 수 있는 그릭요거트트 주문앱입니다.


🔗 배포 링크

https://greekzik.biyamn.dev


💡 주요 페이지 및 기능

각 카테고리에서 각기 다른 종류의 그릭요거트 토핑을 선택 후 수량을 지정하여 장바구니에 추가할 수 있습니다. 장바구니 버튼을 누르면 모달이 뜨며 담은 재료의 상세 정보와 총액을 확일할 수 있습니다.


💁‍♀️ 데모


📜 구현 과정과 결과

1. 와이어프레임

  • 피그마로 와이어프레임을 구성했습니다.

  • 와이어프레임과 동일한 UI를 구성하였습니다.

  • 구조를 세분화하여 컴포넌트를 나눴습니다.

  • 구현 과정을 담은 포스팅: [주문앱 1탄] UI 만들기

  • 구현 결과:


2. 카테고리 기능

  • 토핑의 종류에 따라 그릭요거트, 그래놀라, 수제청&시럽, 시리얼 카테고리를 생성했습니다.

  • 구현 과정을 담은 포스팅: [주문앱 2탄] 카테고리 만들기

  • 구현 결과:


3. 모달

  • Portal로 모달을 구현했습니다.

  • 닫기 버튼과 모달 바깥쪽 클릭시 모달이 닫히는 기능을 추가했습니다.

  • 구현 과정을 담은 포스팅: [주문앱 3탄] Portal로 모달 만들기

  • 구현 결과:


4. 장바구니 담기 기능

  • 토핑 수량 선택 후 담기 버튼을 누르면 장바구니에 재료가 담기는 기능을 구현했습니다.

  • 구현 과정을 담은 포스팅: 담기 기능 만들기(1)

  • 구현 결과:


5. 시행착오 기록


6. 장바구니 담기 기능 완성

  • 장바구니 안에서 수량 추가/감소 기능을 구현했습니다.

  • 장바구니 안에서 재료 삭제 기능을 구현하였습니다.

  • 담은 재료가 장바구니에 이미 있으면 정보를 누적해서 보여주는 기능을 구현했습니다.

  • 구현 과정을 담은 포스팅: [주문앱 6탄] 담기 기능 만들기(2)

  • 구현 결과:


7. 리팩토링(useReducer)


8. 리팩토링(useReducer)