순간 기억력 테스트 게임
숫자가 나타나고, 그 숫자를 순서대로 클릭하여 기억력을 테스트하는 게임입니다. 난이도가 점차 상승하며, 점수를 랭킹에 등록해 다른 사용자와 경쟁할 수 있습니다.
📌 개발 기간
- v1: 2024.02.21 ~ 2024.02.24
⚙️ 사용 기술
- React
- Next.js
- TypeScript
- Tailwind CSS
- Zustand
- GSAP
- Redis
- Vercel
🧩 기술적 도전
- 숫자 순서 판단 및 UI 피드백 구현: 사용자가 누른 숫자의 순서와 정답 배열을 비교하여 즉각적인 시각 피드백과 실패 처리 로직을 구현하는 데 집중했습니다.
- Zustand로 게임 상태 관리 최적화: 게임 흐름(시작/클리어/실패 상태, 점수, 레벨 등)을 전역 상태로 관리하면서도, 각 컴포넌트의 리렌더링 최소화를 고려했습니다.
- GSAP로 부드러운 애니메이션 효과 제공: 숫자 등장 및 사라짐 애니메이션을 GSAP 타임라인 기반으로 구성하여, 난이도 상승 시에도 자연스러운 인터랙션을 유지했습니다.
- Redis를 활용한 랭킹 저장 및 조회: 랭킹 등록 및 실시간 랭킹 조회를 Redis로 처리하여 속도와 간결함을 확보했습니다.
✨ 주요 기능
- 숫자를 순서대로 클릭하는 기억력 테스트 게임
- 레벨 상승에 따라 숫자 개수 증가 및 난이도 상승
- 점수 기록 및 랭킹 등록 기능
- 모바일/데스크탑 반응형 UI
- 랭킹 결과 공유 기능 (URL 복사)
📁 스키마 개요
- GameSession: 게임 세션 정보 (이름, 점수, 레벨, 시간)