식재료 등록 방법 두가지와 고민한 점 (1)

1. 식재료 등록 방법 두가지 

 

냉장고 관리앱을 통해 식재료를 관리하기 위해서는 

두가지 방법으로 식재료를 등록할 수 있다. 

 

1. 영수증을 추가한 뒤 등록된 영수증에서 특정 food를 추가하기 위해 플러스버튼을 누름 

2. 직접 식재료 추가하기 버튼을 누름

 

 

2. 두가지 방법의 다른점 

두가지 다 path의 앞부분은 '/add/food'로 동일 하나, 

영수증에서 추가하기 버튼을 누르면 foodId란 query string이 존재한다. 

 

 

3. 구현한 이유 

 - 영수증 반 자동 등록으로 식자재 등록을 간편하게 

 

식재료를 추가하는데, 

보통 마트에서 구매한다고 하면 구매 품목이 매우 많을 것이다. 

그걸 집에 와서 냉장고에 넣는것도 힘든 마당에 

유통기한을 관리하기 위해 하나하나 입력할걸 생각하니 막막했다. 

그래서 마트에서 구매한다면 영수증을 받을 수 있으므로 

영수증을 분석해 등록하게 되면 그 이름과 사진, 카테고리, 구매처의 정보등을

음식 등록 화면에 자동으로 입력 받을 수 있다. 

 

- 내가 구매한 영수증 관리

언제 어디에서 무엇을 얼마에 구매했는지 관리 할 수 있다. 

식자재 관리는 구매부터 시작이다.

구매할 시점에 내가 언제 어디서 무엇을 구매했는지, 냉장고에 얼마나 있는지 확인할 수 있다면

간편할 것이라고 생각했다. 

 

4. 구현 상세 흐름 

1) 영수증을 추가하고 영수증에서 특정 food를 추가하기 위해 플러스 버튼을 클릭할 때 

이미 food는 food table에 생성된 상태이다. 

그러므로 foodId도 존재.

queryClient.setQueryData로 캐싱하였고, 해당 foodId를 쿼리 스트링에 넣어서 

/add/food페이지로 이동하였다. 

 

해당 query key에 데이터가 존재한다면 /add/food 페이지에서 자동으로 입력해 준다. 

 

const onClickAddFood = (index: number, foodId?: string) => {
    if (foodId) {
      queryClient.setQueryData(
        ['addFood', foodId],
        purchaseReceiptInfo[0][index],
      );
      router.push(`/add/food?foodId=${foodId}`);
    }
  };

 

 

아래는 구현화면 (다크모드) ('/receipt/:receiptId')

여기에서 등록버튼을 클릭하면 ('/add/food?foodId=1')으로 이동