[moin-review] 2021-11-19

Facts

• progress-bar 버그 수정

Findings

딱히 없음

Feelings

신규 송금 과정에서는 현재 송금 진행상황을 progress bar 로 표시하는 UI 가 추가될 예정이었다.

문제는 나라마다, 초기 선택한 송금 방법마다 전체 송금단계가 달라지는 것이었다.

예를 들면 일본 같은 경우에는 송금 방법을 선택할 수 있지만 미국은 송금방법이 계좌송금으로 고정되있다.

이경우에는 일본송금의 경우 단계가 송금방법 선택 → 송금받는사람 입력 → edd 순으로 진행되고,

미국 송금의 경우 송금 받는 사람 입력 → edd 순으로 진행 된다.

progress bar 같은 경우 전체 단계 중 현재단계의 비율을 % 로 계산해야 하는데

국가마다, 특정 송금방법 선택시 마다 전체 단계를 변경시켜야 했다.

progress bar 가 헤더에 달려있어 송금 Form 의 상태를 관리하는 부모컴포넌트 하위에 header 를 넣을 수 는 없었기 때문에

최상위에서 상태를 관리하기 위해 redux 에서 송금단계의 상태를 관리하는 것으로 정했다.

원래는 송금보내는 국가 선택할 때 마다 redux 에 반영해야 action 을 기준으로 상태를 update 하게 되어 code 의 예측 가능성을 높이지만

송금 보내는 국가 선택, 송금 보내는 금액을 입력하는 부분이 너무 개판이어서

송금 form 에 들어왔을 때 국가 code 를 받아서 송금 진행 단계를 update 하는 것으로 했다.

어차피 redux 로 상태관리 해야할 게 생길 텐데 아얘 redux 로 전체 상태관리를 하는게 맞나 싶기도 하다가

이런 식으로 전역으로 필요하지 않은 상태를 redux 에 넣다보면 한도끝도 없이

redux 가 커지기 때문에 상태관리를 부분 부분 쪼갠 것은 옳은 결정 인 것 같다.

// useRemitForm.ts 

const onSelectMethod = (method: Method) => {
    dispatch({ type: UPDATE_METHOD_TYPE, payload: method })
    reduxDispatch(updateRemitStep(getSteps({ method, countryCode })))
  }

useEffect(() => {
    reduxDispatch(updateRemitStep(getSteps({ countryCode })))
  }, [])