React와 TypeScript를 사용하여 간단한 초성 게임을 만들었습니다.
css는 tailwindcss를 사용했습니다.
초성을 분리하는 코드는 스크립터님의 네이버 블로그를 참고했습니다.
기능
1. 초성 바꾸기
- start 화면입니다. 초성 바꾸기 버튼을 눌러 게임을 할 초성을 변경할 수 있습니다. 하단의 start 버튼을 누르면 게임이 시작됩니다.
2. 단어 입력하기
2-1. 초성에 맞는 단어
- 폼에 초성에 맞는 단어를 입력합니다. 한 칸에는 한 글자만 입력 가능하며, enter를 눌렀을 때 적절한 단어일 경우 제출이 됩니다. 지금까지 제출한 단어는 하단의 리스트에서 볼 수 있습니다.
- 타이머는 한 단어 당 8초가 주어집니다. 단어를 제출하면 8초가 새로 세팅됩니다.
2-2. 중복된 단어
- 이미 제출한 단어를 또 제출했을 시 폼이 초기화 되며 하단에 '이미 입력된 단어입니다'라는 알림이 뜹니다.
2-3. 초성에 맞지 않는 단어
- 초성에 맞지 않는 단어를 입력했을 경우 Enter를 눌러도 제출되지 않습니다.
2-4. (추가) 제출 시간에 따라 등급 부여하기
- 단어를 제출하는 시간에 따라 등급을 부여합니다.
- 등급은 perfect, great, good, nice로 구성되어 있습니다.
- 단어를 제출했을 때 하단에 등급 알림이 떴다가 사라집니다.
3. 시간 초과 시 게임 종료
- 시간이 초과되면 게임이 자동으로 종료되며 end 페이지로 이동합니다. 지금까지 작성한 단어를 확인할 수 있으며 다시 시작하기 버튼을 눌러 start 페이지로 이동할 수 있습니다.
3-2) 게임 종료 페이지 개선 - 차트로 보여주기
- end 페이지에 파이 차트를 추가했습니다.
- chart.js를 사용했습니다.
- 등급 별로 항목들이 나누어지고, 파이 차트의 항목을 클릭했을 경우 해당 등급에 해당하는 단어들을 보여줍니다.
코드
- Mode라는 타입을 정의하니 start, game, end 세 가지의 경우를 편하게 나누어 쓸 수 있어 좋았습니다.
- JS에서는
const [start, setStart] = useState(false)처럼 boolean을 사용해 각각 정의하는 방식으로 코드를 짰었는데 코드 라인도 줄어들고 가독성도 좋아졌습니다.
- 컴포넌트의 Props도 타입으로 지정해두니 사용할 때 작성하지 않은 props가 있다면 오류를 띄워주는 것이 굉장히 편리했습니다. 마우스를 올리면 어떤 인자가 필요한지 이름도 알려줘서 파일을 이동할 필요가 없어졌습니다.
- context도 type을 사용해서 만들었습니다.
