deliveryAddressSlice(배송지)

배송지 정보를 포함하는 slice로서 데이터를 받아오고, reducer를 통해 데이터를 업데이트 합니다.

배송메모 선택 기능

950e13f6-e3ed-42be-ba9b-f05f4d7f8806.MOV

배송메모 옵션을 선택하게 되면, handleChangeMemo핸들러가 실행됩니다. 해당 핸들러에서 배송 메모리스트에 입력으로 들어온 메모와 일치하는 메모를 찾고, setDeliveryMemo를 디스패치합니다.

const handleChangeMemo = (e: React.ChangeEvent<HTMLSelectElement>) => {
  const selectedMemoMessage = e.target.value;
  const selectedOption = deliveryMemos.find(
    (memo) => memo.memo === selectedMemoMessage
  );

  if (selectedOption) {
    if (isTextareaOpen && textareaRef.current) {
      textareaRef.current.value = selectedOption.memo;
    }
    dispatch(setDeliveryMemo(selectedOption));
  } else {
    alert("존재하지 않는 배송 메모입니다.");
  }
};

//...
<select value={getSelectedMemoValue()} onChange={handleChangeMemo}>
  <option value={FALLBACK_MEMO} disabled>
    {FALLBACK_MEMO}
  </option>
  {deliveryMemos.map(({ memo }) => (
    <option key={memo} value={memo}>
      {memo}
    </option>
  ))}
</select>;

배송메모 작성 기능

678ece9e-43a8-47f5-b187-af1da3ef0667.MOV

배송메모를 직접 입력하는 경우, 기본적으로 textarea에 ref를 넘겨주어 비제어 컴포넌트로서 input 상태를 관리합니다. textarea에서 blur이벤트가 발생되면 textarea에 있는 value로 배송메모를 디스패치합니다.

const textareaRef = useRef<HTMLTextAreaElement>(null);
//...
const handleBlurUserInputMemo = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  const userInput = e.target.value;

  const memoInput = {
    memoSeq: 0,
    memo: userInput,
    template: false,
    reuseMemo,
  };

  dispatch(setDeliveryMemo(memoInput));
};

// ...
<textarea
  ref={textareaRef}
  defaultValue={selectedMemo.memo}
  onBlur={handleBlurUserInputMemo}
/>;