TAPIE 타자대결 웹 사이트
React Supabase
선린인터넷고 축제 '선린제'의 동아리마당에서, TAPIE의 체험 부스에서 운영된 타자대결 웹 사이트에요.
프로젝트 소개
선린인터넷고 축제 ‘선린제’의 동아리마당에서, 웹앱 개발 동아리 TAPIE의 체험 부스를 위해 제작한 타자대결 웹 사이트입니다. 동아리 이름을 활용한 ‘낱말 대결’과 학교 교가를 활용한 ‘장문 대결’ 두 가지 모드로 구성되어 있으며, 게임 종료 후에는 WPM(분당 타수)기준으로 랭킹이 기록됩니다. 행사 당일 부스를 방문한 학생들이 현장에서 직접 참여해 즐길 수 있었으며, 총 180명 이상의 사용자가 접속했습니다.
주요 기능
✦
낱말 대결 / 장문 대결 두 가지 모드
✦
WPM 기반 실시간 랭킹 시스템
✦
실시간 타이핑 정오 시각화
✦
Supabase 기반 랭킹 데이터 저장
개발 내용
01 React 기반으로 게임 전체 플로우(이름 입력 → 모드 선택 → 게임 → 랭킹)를 설계하고 개발했습니다.
02 커스텀 훅(useTimer, useTyping)으로 타이머와 타이핑 로직을 분리해 구조를 설계했습니다.
03 Supabase를 연동해 게임 결과를 저장하고 랭킹 페이지에서 실시간으로 불러오는 기능을 구현했습니다.
04 입력값과 목표 텍스트를 실시간 비교해 정오 여부를 시각적으로 피드백하는 UI를 개발했습니다.