등기 거스름 돈 계산기 02

등기 거스름 돈 계산기를 만들면서 원래는 모바일에서도 보기 위해 아래로 정렬해서 만들었었다.

그런데 업무 중 휴대폰을 보는 것이 좋지 않다고 생각되어 pc에서 보기 좋기 변경하기로 했다.

변경 전

 

 

변경하면서 불필요한 부분들을 많이 줄이고 사무실 프로님들의 요구사항도 추가하기 위해 노력했다.

 

□ 변경한 부분

1. 등기 종류 순서 변경

  - 일반우편/등기/익일특급 → 익일특급/등기/일반우편

2. 하단에 표시 되면 합계와 거스름 돈 →  상단에 표시 총 합계, 거스름 돈, 총 건수

3. 첫 화면이 타이틀과 등기종류만 보였는데 익일특급 무게 입력하도록 변경

4. 규격 외 체크를 규격 체크로 변경

5. 무게 입력시 받는 값에 type(익일,등기,일반) 값 추가 + 무게 값 입력한 값이 아닌 금액에 맞는 값으로 보이도록 변경

const onSubmit = (e) => {
    e.preventDefault();
    // weight if
    if (isChecked === true && inputWeight <= 5) {
      const newWeight = {
        id: weightId.current,
        type: "익일",
        tNf: isChecked,
        weight: "규격 5",
        price: 3500,
        quantity: 1,
      };
      weightId.current += 1;
      clickWeightValue([...weightValue, newWeight]);
      console.log(newWeight);
      setInputWeight("");
    } 
    ...
    else if (inputWeight <= 50) {
      const newWeight = {
        id: weightId.current,
        type: "익일",
        tNf: isChecked,
        weight: 50,
        price: 3620,
        quantity: 1,
      };
      ...
}

6. 무게 입력 후 등기 종류/무게/금액/수량 순으로 나열 되도록 변경

변경 후

 

이렇게 변경을 했는데 아직 해결해야 할 부분들이 있다.

현재 무게를 입력하게 되면 같은 무게여도 여러 개의 리스트가 작성된다.

이렇게 하면 접수량이 많을 경우 하단으로 내려가는 경우가 발생해서

같은 무게가 이미 있는 경우에는 수량만 증가도록 하고자 한다.

 

어떻게 할 것인지 구글링도 해보고 고민도 했는데 장바구니에 물건 추가하는 방법으로 하면 될 것 같다.

리덕스(Redux)나 리코일(Recoil)을 통해서 상태관리를 하도록 하면 되지 않을까 생각이 든다. 

아직 리덕스(Redux)로 할지 리코일(Recoil)로 할지 정하지는 못했지만 어떤 것이 더 나을지 고민 후 학습을 통해 적용하고자 한다.

 

또 무게 입력 후 나열되는 리스트가 보기 좋지는 않다고 생각되어

상단에 어떤 내용이 들어가는지 메뉴를 만들고, 아래 내용들이 나오도록 만들 계획이다.

구분	종류	무게	금액	수량	비고
1	익일	250g	4,100	1

 

최대한 6월 내에 완성해서 7월엔 사용할 수 있도록 해야겠다.

화이팅..!

 

 

https://github.com/kimoony/change_calculator

GitHub - kimoony/change_calculator