토핑을 선택하여 장바구니에 추가하고 주문할 수 있는 그릭요거트트 주문앱입니다.
각 카테고리에서 각기 다른 종류의 그릭요거트 토핑을 선택 후 수량을 지정하여 장바구니에 추가할 수 있습니다. 장바구니 버튼을 누르면 모달이 뜨며 담은 재료의 상세 정보와 총액을 확일할 수 있습니다.
-
피그마로 와이어프레임을 구성했습니다.
-
와이어프레임과 동일한 UI를 구성하였습니다.
-
구조를 세분화하여 컴포넌트를 나눴습니다.
-
구현 과정을 담은 포스팅: [주문앱 1탄] UI 만들기
-
구현 결과:
-
토핑의 종류에 따라
그릭요거트
,그래놀라
,수제청&시럽
,시리얼
카테고리를 생성했습니다. -
구현 과정을 담은 포스팅: [주문앱 2탄] 카테고리 만들기
-
구현 결과:
-
Portal로 모달을 구현했습니다.
-
닫기 버튼과 모달 바깥쪽 클릭시 모달이 닫히는 기능을 추가했습니다.
-
구현 과정을 담은 포스팅: [주문앱 3탄] Portal로 모달 만들기
-
구현 결과:
-
토핑 수량 선택 후 담기 버튼을 누르면 장바구니에 재료가 담기는 기능을 구현했습니다.
-
구현 과정을 담은 포스팅: 담기 기능 만들기(1)
-
구현 결과:
-
카테고리 기능을 만들며 경험한 9가지의 시행착오와 이를 해결한 과정을 기록했습니다.
-
구현 과정을 담은 포스팅: [주문앱 5탄] 시행착오 모음(key, state)
-
구현 결과:
-
장바구니 안에서 수량 추가/감소 기능을 구현했습니다.
-
장바구니 안에서 재료 삭제 기능을 구현하였습니다.
-
담은 재료가 장바구니에 이미 있으면 정보를 누적해서 보여주는 기능을 구현했습니다.
-
구현 과정을 담은 포스팅: [주문앱 6탄] 담기 기능 만들기(2)
-
구현 결과:
- reducer를 사용하여 그릭요거트 주문앱을 리팩토링했습니다.
- 구현 과정을 담은 포스팅: [주문앱 7탄] 리팩토링하기(useReducer)
- context API를 사용하여 그릭요거트 주문앱을 리팩토링했습니다.
- 구현 과정을 담은 포스팅: [주문앱 8탄] 리팩토링하기(useContext)