input 값에서는 ,(쉼표를 찍어주고) input 아래에서는 단위당 한글표기 구현.

1. 억, 만으로 나눈 후 몫이 1인경우 “만”을 제외
   • miss : 앞자리가 “1” 이 아닌 “2” 이상인 경우 몫이 1이 되지않음.
2. 변수 “i” 를 생성 후 for문을 통해 나눈 몫이 0보다 큰 경우 해당 단위와 ‘result’ 문자열과 결합.
   • miss : 100만 단위 아래의 값 들이 정상 출력되지 않는 현상 발생.
3. 100,000,500 의 경우 1억 0만 500원 으로 표기됨 ⇒ 1억 이상 & 만원 미만일 경우 “0만”을 삭제코드 추가.
4. 100,050,000 의 경우 1억 5만 0원 으로 표기됨 ⇒ 1억 이상 & 만원 이상일 경우 “0” 삭제 코드 추가.

//* ","로 포맷팅된 금액을 ","를 제거한 숫자로 변환하고, 억, 만, 원으로 포맷팅.
  const formattedAmount = useMemo(() => {
    const amountWithoutCommas = amount.replace(/,/g, "");

    if (amountWithoutCommas >= 100000000) {
      //* 1억 이상
      let number = Math.floor(amountWithoutCommas / 100000000);
      if (amountWithoutCommas % 100000000 === 0) {
        number = `${Math.floor(amountWithoutCommas / 100000000)}억원`;
      } else if (amountWithoutCommas % 10000 === 0) {
        number = `${Math.floor(amountWithoutCommas / 100000000)}억 ${Math.floor(
          (amountWithoutCommas % 100000000) / 10000
        )}만원`; //* 1억원 이상이고 1만원 이상인 친구들 처리
      } else if (amountWithoutCommas % 100000000 < 10000) {
        number = `${Math.floor(amountWithoutCommas / 100000000)}억 ${Math.floor(
          amountWithoutCommas % 10000
        )}원`; //* 1억 이상이고 1만원 미만인 친구들 처리
      } else {
        number = `${Math.floor(amountWithoutCommas / 100000000)}억 ${Math.floor(
          (amountWithoutCommas % 100000000) / 10000
        )}만 ${new Intl.NumberFormat("ko-KR").format(
          amountWithoutCommas % 10000
        )}원`;
      }
      return number;
    } else if (amountWithoutCommas >= 10000) {
      //* 1만 이상
      return amountWithoutCommas % 10000 === 0
        ? `${Math.floor(amountWithoutCommas / 10000)}만원`
        : `${Math.floor(amountWithoutCommas / 10000)}만 ${new Intl.NumberFormat(
            "ko-KR"
          ).format(amountWithoutCommas % 10000)}원`;
    } else {
      return `${new Intl.NumberFormat("ko-KR").format(amountWithoutCommas)}원`;
    }
  }, [amount]);

리펙토링 후

const handleInputChange = (event) => {
    //* 정규식으로 입력값에서 숫자만 추출
    const value = event.target.value.replace(/[^0-9]/g, "");

    if (value.length <= 10) {
      //* 10자리 이하인 경우만 amount 업데이트
      setAmount(value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","));
    } else {
      setAmount("1,000,000,000");
    }
    if (value.length === 10) {
      setAmount("1,000,000,000");
    }
  };

  //* ","로 포맷팅된 금액을 ","를 제거한 숫자로 변환하고, 억, 만, 원으로 포맷팅.
  const amountWithoutCommas = useMemo(() => amount.replace(/,/g, ""), [amount]);

  const formattedAmount = useMemo(() => {
    const amountNumber = parseInt(amountWithoutCommas);

    if (Number.isNaN(amountNumber)) {
      return `0원`;
    } else if (amountNumber < 100000) {
      return "100,000원 이상부터 비교 가능합니다.";
    } else if (amountNumber >= 100000000) {
      // 1억 이상
      const won = amountNumber % 10000;
      const million = Math.floor(amountNumber / 10000) % 10000;
      const billion = Math.floor(amountNumber / 100000000);

      if (billion === 0) {
        if (million === 0) {
          return `${new Intl.NumberFormat("ko-KR").format(won)}원`;
        } else if (won === 0) {
          return `${new Intl.NumberFormat("ko-KR").format(million)}만원`;
        } else {
          return `${new Intl.NumberFormat("ko-KR").format(
            million
          )}만 ${new Intl.NumberFormat("ko-KR").format(won)}원`;
        }
      } else {
        if (million === 0 && won === 0) {
          return `${new Intl.NumberFormat("ko-KR").format(billion)}억원`;
        } else if (million === 0) {
          return `${new Intl.NumberFormat("ko-KR").format(
            billion
          )}억 ${new Intl.NumberFormat("ko-KR").format(won)}원`;
        } else if (won === 0) {
          return `${new Intl.NumberFormat("ko-KR").format(
            billion
          )}억 ${new Intl.NumberFormat("ko-KR").format(million)}만원`;
        } else {
          return `${new Intl.NumberFormat("ko-KR").format(
            billion
          )}억 ${new Intl.NumberFormat("ko-KR").format(
            million
          )}만 ${new Intl.NumberFormat("ko-KR").format(won)}원`;
        }
      }
    } else if (amountNumber >= 10000) {
      // 1만 이상
      const won = amountNumber % 10000;
      const million = Math.floor(amountNumber / 10000);

      if (won === 0) {
        return `${new Intl.NumberFormat("ko-KR").format(million)}만원`;
      } else {
        return `${new Intl.NumberFormat("ko-KR").format(
          million
        )}만 ${new Intl.NumberFormat("ko-KR").format(won)}원`;
      }
    } else {
      return `${new Intl.NumberFormat("ko-KR").format(amountNumber)}원`;
    }
  }, [amountWithoutCommas]);

위 코드에서는 useState hook을 사용하여 amount 상태값을 관리합니다. handleBlur 함수에서는 amount 값이 존재하면 저장하는 작업을 수행합니다. handleChange 함수에서는 입력된 값에서 숫자만 추출하고, 10자리 이하인 경우에만 amount 값을 업데이트합니다.

replace 함수와 정규식을 사용하여 숫자를 세 자리마다 쉼표(,)로 구분하고, div 요소에서는 amount 값이 존재할 경우에만 원화와 함께 표시합니다. 마지막으로 input 요소에서 onBlur 이벤트와 onChange 이벤트를 처리하여 입력값을 업데이트하고, 저장할 수 있도록 구현했습니다.