시간 계산기 만들기 (1) Enter키로 시간 더하기 + 'onKeyPress' is deprecated.

근무시간 계산할 때 계산이 잘 맞나.. 확인할 때마다 시간 계산을 하는 사이트를 검색하는데

그게 내가 딱 필요한! 기능만 있지가 않아서 불편한 점이 있어 그냥 이정도는 만들어서 써보지 뭐.. 하고 시작하게 되었다.

 

 

  const [state, setState] = useState<TimeCalculatorState>({
    time1: "00:00",
    time2: "00:00",
    result: "",
  });

  const handleAdd = () => {
    const t1 = state.time1.split(":");
    const t2 = state.time2.split(":");
    const hours = parseInt(t1[0]) + parseInt(t2[0]);
    const minutes = parseInt(t1[1]) + parseInt(t2[1]);

    const toHours = Math.floor(minutes / 60);
    const adjustedHours = hours + toHours;
    const adjustedMinutes = minutes % 60;

    const result = `${adjustedHours
      .toString()
      .padStart(2, "0")}:${adjustedMinutes.toString().padStart(2, "0")}`;
    setState({ ...state, result });
  };

  const handleClear = () => {
    setState({
      ...state,
      time1: "00:00",
      time2: "00:00",
      result: "",
    });
  };

초기 함수는 이렇게 설정했다.

일단 초기 값을 useState로 설정했고, 타입도 따로 지정해줬다. (어차피 전부 string이라 여기 적진 않음)

그리고 더하는 함수로 input에 숫자를 받으면 : 를 기준으로 잘라 앞은 시(hours), 뒤는 분(minutes)으로 설정했다.

분을 더헀을 때 60으로 나눠서 몫이 생기면 그 값을 toHours에 담아 hours에 같이 더해주었다.

그래서 result에 해당 값을 넣었다. ( padStart 는 자바스크립트에 새로 추가된 기능 )

 

 

<div className="container">
  <div className="calculator">
    <input
      type="text"
      placeholder="00:00"
      value={state.time1}
      onChange={(e) => setState({ ...state, time1: e.target.value })}
    />
    <input
      type="text"
      placeholder="00:00"
      value={state.time2}
      onChange={(e) => setState({ ...state, time2: e.target.value })}
    />
    <button className="button" onClick={() => handleAdd()}>
      +
    </button>
    <button className="button" onClick={handleClear}>
      C
    </button>
    <input type="text" value={state.result} readOnly />
  </div>
</div>

위 함수들을 각각 html 부분에 추가해주었고, 아래가 해당 결과가 된다.

이제 시간이 잘 더해지긴 하는데, 좀 더 쓰기 편하게 하나씩 손봐야 한다.

아직은 더듬더듬 손으로 일일이 작성해야만 함.... 그럼 만드는 의미가 없기 때문에!

일단 엔터를 쳤을 때 결과값이 나왔으면 좋겠다.

 

---

Enter 키로 결과 계산하기

  const handleInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      handleAdd();
    }
  };

일단 Enter키를 누르면 더해지는 함수를 추가했다.

 

 <input
      type="text"
      placeholder="00:00"
      value={state.time1}
      onChange={(e) => setState({ ...state, time1: e.target.value })}
      onKeyPress={(e) => handleInputKeyPress(e)}
    />
<input
      type="text"
      placeholder="00:00"
      value={state.time2}
      onChange={(e) => setState({ ...state, time2: e.target.value })}
      onKeyPress={(e) => handleInputKeyPress(e)}
/>

그리고 onKeyPress 에 해당 함수를 실행하게 해놓았다.

엔터키를 누르면 handleAdd함수가 작동한다.

 

근데 'onKeyPress' is deprecated.' 하는 에러가 떠서 알아보니, 말그대로 deprecated 됐다는 말이있었다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event

Element: keypress event - Web APIs | MDN

그래서 코드를 onKeyDown으로 수정해주었다.

 

 

---

 

숫자 입력 시 자동으로 : (시/분 구분) 표시하기

 

input 창에 시간을 입력할 때, 지금 현재는 ":"를 알아서 표기해주어야 시간으로 인식하여 계산한다.

이거 너무너무 불편하니, 입력할 때 자동으로 : 추가해주는 기능을 추가해준다.

이때는  input에 입력된 숫자가 입력값에 따라 특정 패턴을 따라야하니 onChange를 이용한다.,

 

const formatInput = (input: string) => {
    if (input.length > 2) {
      input = input.slice(0, 2) + ':' + input.slice(2);
    }
    return input;
};

input의 길이가 2가 넘어가는 순간, 잘라서 :를 추가해준다.

(나중에 문자 입력시 처리가 안되는 것 까지 추가해줬다)

onChange={(e) => setState({ ...state, time2: formatInput(e.target.value) })}

onChange 함수에 해당 포맷을 감싸준다.