시간 계산기 만들기 (2) 시간 누적 덧셈, HISTORY로 보여주기

지난 게시글에서 숫자 입력할 때 자동으로 시간 구분 (":") 해주는거랑 엔터키 입력으로 + 구현을 했다.

 

근데 내가 원하는 것은 근무 시간을 전부 더해야하기 때문에,

더한 것에 또 더하고 또 더하고 또 더하는 이런~ 계산기 같은 기능이 필요했다.

 

---

 

시간 누적해서 더하기

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

결과값에 (덧셈을 한 후) result 를 time1에 넣어준다.

그리고 원래 time2 의 초기값이 00:00 이었는데 이것도 빈 문자열로 바꾸어주었다.

00:00으로 했더니 입력이 바로 안되어서 불편했음.

 

이렇게 바꿔주었더니 바로바로 누적해서 더하기가 쉽게 가능해졌다.

 

 

 

---

 

두 자리만 입력했을 때 자동으로 :00 을 붙여 시간이 되게 하기

 

예를 들어 15만 입력하면, 얘는 형태가 **:**가 아니라서 시/분으로 나눠지지가 않아

결과값이 NaN:NaN이 나온다.

 

처음에는 엔터를 쳤을때, 해당 input 값의 길이가 2일때 뒤에 자동으로 :00을 붙이게 하려고 했다.

그래서 handleInputKeyPress함수를 계속 수정해봤는데 도무지 안돼서 ㅠㅠ

입력시 변수 자체를 수정했다.

 

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

    const toHours = Math.floor(minutes / 60);
    const adjHours = hours + toHours;
    const adjMinutes = minutes % 60;

    const result = `${adjHours.toString().padStart(2, "0")}:${adjMinutes
      .toString()
      .padStart(2, "0")}`;
    setState({
      time1: result,
      time2: "",
      result: "",
    });
  };

time1칸에 값을 입력했을 때 ":"가 있다면 (3글자 이상 쓰면 자동으로 등록되므로) 

기존대로 :을 기준으로 나누고, 아니라면 수동(  [state.time1, "00"]  )으로 넣는다.

 

 

 

 

 

---

 

화면에 처음 진입했을 때 자동으로 input으로

 

const inputRef = useRef<HTMLInputElement>(null);

..

useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
}, []);

이제 input ref 속성에 inputRef를 추가해주면 된다.

 

 

 

 

 

 

 

 

 

---

 

 

계산 기록 나열하기

이제 누적해서 더했는데, 잘못더했을 수도 있으니까

계산을 어떻게 했는지 볼 수 있는 history 창이 필요하겠다 싶었음!

 

 

const [history, setHistory] = useState<string[]>([]);

 

 

 setHistory([
      ...history,
      `${state.time1} + ${state.time2} = ${adjHours}시간 ${adjMinutes}분`,
	]);

그리고 이제 Add 함수가 실행될 때 history에 해당 정보들을 담아준다.

 

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

clear 버튼을 눌렀을 때 history 창도 비워주고,

 

<div className="history-container">
  <h3>HISTORY</h3>
  <ul>
    {history.map((calculation, index) => (
      <li key={index}>{calculation}</li>
    ))}
  </ul>
</div>

그리고 div에 넣어주고 css 좀 다듬어 주면 완성!

 

이거 이렇게 놓고 보니까, 밑에 값이 추가될때 스크롤이 자동으로 안 내려가는게 거슬렸다..

 

 

 

---

 

 

계산 기록 추가될 때마다 스크롤 아래로 내리기

 

const historyRef = useRef<HTMLDivElement>(null);
...

// handleAdd 함수에 추가
if (historyRef.current) {
      historyRef.current.scrollTop = historyRef.current.scrollHeight;
    }
    

...
	<div className="history-container" ref={historyRef}>

이제 계산식이 추가됨에 따라 항상 가장 하단에 화면이 위치하게 되었다