이제 올바른 정보를 모달에 전달하려면
이 결과 속성을
다른 속성으로 바꿔야 합니다
이렇게 하면 이제 시간이 얼마나 남았는지 여기서 알 수 있고
남은 시간을 결과 모달(ResultModal) 쪽으로 전달하여
여기서도 사용할 수 있습니다
예를 들면 점수를 계산할 수 있습니다
따라서 여기에 속성과 remainingTime을 추가합니다
그렇게 하여 timeRemaining 상태를 값으로 가져옵니다
이제 결과 모달 내에서 우리는
remainingTime 속성을 구조 분해하여
이것을 점수 계산에 사용하거나
사용자가 패배했는지 확인할 수 있습니다
이를 위해 여기에 새롭게 계산된 값을 추가하여
상수에 저장하고
이 상수를 userLost(사용자패배)로 지정하겠습니다
이 상수가 True인 경우는 remainingTime이
0과 같거나 더 작을때 입니다
이 같은 경우 알 수 있는 것은
타이머가 만료되었고
시간 내에 멈추지 않았다는 것입니다
이제 userLost를 사용하여 여기에 패배 텍스트를
userlost가 True라는 조건일 때 사용 가능합니다
'당신이 졌습니다' 라는 텍스트가 포함된 h2는
userLost가 True일때 보여지게 됩니다
이제 remainingTime이 있으니 그것을
아래쪽에 출력할 수도 있습니다
여기서는 밀리초 단위로 표시되는것이
타이머 챌린지에서 사용되는
방식입니다
여기에는 초 단위가 필요합니다
그래서 1,000으로 나누어야 하며
보기 좋게 만들기 위하여
약간의 형식 조정도 해야할 것입니다
그래서 여기서 포맷된 남은 시간 (formattedRemainingTime)을
얻기 위해 remainingTime을 1,000으로 나누겠습니다
그 나눗셈의 결과에
자바에 내장된 방식인 toFixed를 불러와서
소수점 두 자리수 까지만 표시될 수 있도록 합니다
소수자리가 많아 너무 긴 숫자가
나오지 않도록 하기 위함입니다
이제 formattedRemainingTime 은
이 밑부분의 반환값이 되어야 합니다
더 이상 받는 내용이 없는
이 결과 속성은 없애겠습니다
이제 저장하고 새로고침해 보겠습니다
그대로 만료되게 두면 이 팝업창이 뜨는데
제가 원하던 모습은 아닙니다
그 이유는 여기 1초가 남아있다고 하고
패배 메시지가 보이지 않기 때문입니다
무엇이 문제일까요?
우리는 타이머 챌린지에서
타이머가 만료될 때에 맞추어
TimeRemaining이 초기 시간으로, 그러니까 목표시간 (targetTime)의
1,000배로 설정했었습니다
그래서 이 시점에 timeRemaining은
더 이상 음수가 아니고
그 대신에 초기 시간으로 돌아갑니다
우리가 해야 할 것은 여기서 시간을 재설정하는 것이 아니라
이 곳에 새로운 함수를 추가해야 합니다
handleReset으로 이름을 지어서
timeRemaining을 그 안에서 재설정하겠습니다
이제 handleReset 속성을 통해
결과 모달에 전달할 수 있습니다
onReset 속성을
handleReset에 행하게 하여
결과 모달 안에서 작동시키게 합니다
이 부분은 지난 강의에서 다룬 적이 있습니다
이제 여기서 해야 하는 작업은
onReset 속성을 구조 분해하는 것입니다
대화상자가 닫히면 활성화되는데
여기 있는 버튼을 클릭해서
이 폼이 제출되는 시점입니다
그래서 여기 onSubmit 속성을 추가할 수 있습니다
리액트에 내장되어있는 속성이며
양식 요소에 기본으로 지원되는 기능입니다
이 기능이 활성되었다는 것은 양식이 제출되었으며
버튼이 눌린 상태라는 것입니다
그리고 여기 값을 onReset으로 지정하겠습니다
그렇게 해서 이것을 저장하고 새로고침하여
시작하고 시간이 만료되도록 둔다면
이제 패배 메시지가 나오고, 0초가 남았다고 합니다
이 창을 닫으면 새로고침이 되어 새로 시작할 수 있습니다
이제야 제대로 작동합니다
하지만 시간 만료 이전에 끝났을 때
점수가 보여지도록 작업을 해 보겠습니다
지금으로선 졌다는 표시는 나오지 않고
남아있는 시간이 보여집니다
이제 여기서 추가하고 싶은 것은
성공했다는 메시지와 점수 입니다