이제 드디어 이 타이머들을 제어할 수 있습니다
시작하거나 중지할 수 있습니다
이제 타이머의 시간이 다 되었을 때 어떻게 보이는지
시간 내에 성공적으로 멈췄을 때 어떻게 보이는지 바꾸고 싶습니다
두 경우 모두, 팝업창을 띄워서
결과를 알려주고 싶기 때문입니다
거기에 점수도 표시해주면 좋을 것 같습니다
타이머 목표 시간에 가까울수록
높은 점수를 받는 것입니다
물론 타이머가 만료되지 않은 경우, 그러니까 패배하지 않은 경우입니다
그래서 이러한 팝업창을 띄우고 싶기 때문에
새로운 컴포넌트를 추가해서
이름은 ResultModal (결과모달)로 짓겠습니다
모달은 간단하게 말해서 화면 위에 뜨는
대화창 같은 것이라고 할 수 있습니다
그래서 바로 여기 컴포넌트 함수를 export 해줍니다
ResultModal 말입니다
그리고 여기에 내장 요소인 dialog를 반환해줍니다
내장 스타일과 내장된 기능들과 함께 제공됩니다
오버레이로 나타내고
더 예쁘고 편리하게 만들어 줍니다
그리고 그 요소에 h2 태그를 추가해
'졌습니다' 또는
점수를 쓰겠습니다
지금은 아무 점수도 없습니다
왜냐하면 지금은 그저 타이머가 만료되는지 아닌지에만 초점을 맞추고 있기 때문입니다
이건 곧 바꿀 것입니다
그러니 지금은 그냥 '졌습니다' 혹은
'이겼습니다'만 쓰겠습니다
그리고 물론 prop (속성)이 필요한데
바로 result 속성입니다
targetTime도 필요할 것 같습니다
그래야 그 정보에 관한 것을
이 대화창에 사용할 수 있을 것 같습니다
그리고 여기서 result를 출력합니다
즉, 이겼는지 졌는지에 대한 결과입니다
다시 말씀드리지만, 이 부분은 나중에 수정하겠습니다
지금은 일단 이걸 출력하고
그리고 밑에 p 요소에
'목표 시간은' 이라고 적고
그 다음 strong 요소에다가
targetTime을 적고
'초'를 적습니다
이런 식으로 말입니다
그리고 나중에는 이렇게 적을 것입니다
'당신은 'x'초를 남기고 타이머를 멈추었습니다'
그리고 그것도 strong 요소를 사용할 것입니다
하지만 그건 나중에 추가할 부분이니까
코드를 바꾸고 나서
시간이 얼마 남았는지 알 수 있을 때 수정하겠습니다
아무튼 그 밑에 form을 추가합니다
method는 dialog로 설정합니다
이건 네이티브 HTML에 내장되어 있는 것이며
최신 브라우저들의 지원을 받습니다
리액트에서만 가능한 게 아니기 때문에 이런 식으로 form을 추가하고
method는 dialogue로 설정하면
dialog 안에는 form을 제출하는 버튼이 있는데
그러니까, 이런 Close (닫기) 버튼이
대화창을 닫을 것입니다
자바스크립트나 그 무엇도 추가적으로 필요하지 않습니다
이제 이것이 저의 대화창 모달입니다
ResultModal이라는 클래스 이름을 부여하겠습니다
스타일링 목적입니다
이제 목표는 이 대화창을
게임이 끝났을 때 timerChallenge 내에서 띄우는 것입니다
그러니까 일단 우리가 패배한 상황을 시작해보겠습니다
즉, 타이머가 만료된 것입니다
이런 경우, 이 모달을 띄우고 싶습니다
이 jsx 코드 내에서
timerChallenge로부터 반환됩니다
그리고 이건 프래그먼트로 감싸서
이 섹션과 나란히
ResultModal을 출력할 수 있습니다
물론 그러기 위해서 ResultModal을
ResultModal.jsx 파일에서 import 해와야 합니다
import되었으면 여기에 출력할 수 있습니다
하지만 물론 이것은 조건적으로 출력되어야 합니다
만약 timerExpired (타이머 만료)가 true라면
ResultModal을 렌더링하고 싶고
targetTime은
이 컴포넌트의 targetTime으로 설정합니다
이 속성 (prop)에 받는 값을
ResultModal로 전달합니다
그리고 result는 'lost' (패배)로 설정해줍니다
이제 이 조건적 p 요소를 제거할 수 있습니다
이제 이 모달이 있기 때문입니다
하지만 눈치채셨을지도 모르지만, 그렇게 하면
도전을 시작하고 나서 멈추지 않아도
아무 일도 일어나지 않습니다
분명히 패배한 것인데 말입니다
그 이유는
이 내장 dialog 요소가
기본적으로 보이지 않기 때문입니다
하지만 이는 open 속성(prop)을 추가해 보이도록 할 수 있습니다
이 open 속성 (attribute)입니다
그렇게 하고 나서, 다시 시작한 다음 멈추지 않으면
이제 이 대화창이 뜹니다
그리고 'close' (닫기)를 눌러 닫을 수 있습니다
하지만 보시다시피, 이 대화창은 조금 보기 힘듭니다
왜냐하면 대화창이 열려도 배경이 흐려지지 않기 때문입니다
만약 흐려진다면 더 좋을 것 같습니다
그러면 또 다른 요소를 여기에 수동적으로
ResultModal에 추가해보겠습니다
이건 dialog 뒤에서 표시되는 것입니다
그리고 그걸로 배경을 흐리게 하겠습니다
대화창 뒤에서 말입니다
우리가 충분히 할 수 있는 것입니다
하지만 이 dialog 요소는 실질적으로
내장 backdrop 요소와 함께 딸려옵니다
이 dialog 뒷배경에 말입니다
하지만 안타깝게도 이 내장 backdrop은
dialog를 강제로 보이게 했을 땐 보이지 않습니다
이런 식으로 open을 true로 했을 경우 말입니다
대신, 이 대화창을
브라우저에 명령을 보내는 방식으로
이 내장 backdrop을 얻을 수 있습니다
그리고 다시 한 번 이런 경우는
참조의 도움을 받을 수 있는 사례입니다
지금은 그저 이 컴포넌트에서 dialog에
접근할 수 있기만 하면 됩니다
이 timerChallenge에서 말입니다
왜냐하면 결국 우리는
그 대화창을 게임이 끝났을 때 열고 싶기 때문입니다