축덕 퀴즈: 복구코드 추가 구현 + UI 개선 + UX 개선 기록

개요

이번 작업은 football-quiz 프로젝트에서

• 복구코드 재발급 기능 (TDD 기반)
• 게임 UI 개선 (popover 구조 전환)
• 반응형 및 번역(i18n) 누락 수정
• 결과창 UX 개선

을 한 번에 정리한 통합 개선 작업이다.

---

1. 복구코드 재발급 기능 구현 (TDD 기반)

📌 기능 요구사항

docs/feat/recovering_code.md 기준으로 다음 기능을 구현했다.

• PATCH /reset API 추가
• 복구코드 재발급 시 기존 기록 유지
• TDD 기반 개발 (RED → GREEN → REFACTORING)
• 프론트엔드 버튼 + UX 상태 구현

---

🔴 TDD - API (RED 단계)

다음 케이스를 기준으로 테스트 작성:

• 존재하지 않는 복구코드 재발급
• 존재하는 복구코드 재발급
• 기존 기록 유지 여부 검증

 

expect(mockPrismaService.ranking.updateMany).toHaveBeenCalledWith(...)

 

---

🟢 GREEN - API 구현

 

async resetCode(oldCode: string): Promise<string> {
  const newCode = this.generateCode()

  await this.prismaService.ranking.updateMany({
    where: { recoveringCode: hashCode(oldCode) },
    data: { recoveringCode: hashCode(newCode) }
  })

  return newCode
}

 

• 기존 기록 유지
• recoveringCode만 교체
• DB migration 없이 안전하게 코드만 변경

---

🟢 WEB TDD

• hover 상태 확인
• click → loading 상태 진입
• async 완료 후 loading 해제

 

data-hovered
data-loading

 

jsdom 환경에서는 pseudo-class(:hover) 테스트가 불가능하므로
state 기반 DOM attribute로 변경.

---

✔ 결과

• API 10/10 PASS
• WEB 2/2 PASS

---

2. 게임 UI 구조 변경 — Game Guide → Popover 전환

📌 요구사항

docs/ui/game_detail.md 기준 UI 구조 변경:

• 게임 방법 페이지 삭제
• 각 기능 옆 ? 아이콘 추가
• popover 방식으로 가이드 제공
• 위치별 컨텍스트 설명 유지

---

🧩 구조 변경

기존

• 별도 “게임 방법” 페이지 존재

변경

• 각 UI 요소에 inline help popover

일반 퀴즈 버튼 [?]
무한 퀴즈 버튼 [?]
복구코드 영역 [?]

 

---

🟢 TDD 기준

• ? 클릭 시 popover 노출
• 닫기 버튼으로 정상 종료

---

🐛 트러블슈팅

1. getByText 테스트 실패

→ 텍스트가 <span>으로 쪼개져 DOM 매칭 실패

✔ 해결:

 

<span>텍스트 분리 구조로 변경</span>

 

---

2. popover 위치 문제

→ fixed + 중앙 정렬 필요

---

3. UI 개선 / 반응형 / 번역(i18n) 누락 수정

📌 popover 레이아웃 개선

문제

• 데스크탑에서도 full width 사용

해결

 

sm:left-1/2 sm:w-1/2 sm:-translate-x-1/2

 

✔ 결과:

• 모바일: full width
• 데스크탑: 중앙 50% popup

---

📌 모바일 텍스트 정렬 버그

문제

부모 text-center가 popover에 상속됨

해결

 

text-left

 

✔ 핵심 포인트

fixed 요소라도 부모의 text-align은 그대로 상속된다

---

🌐 i18n 누락 수정

문제

다국어 전환 시 일부 텍스트가 한국어로 남음

예:

• 복구코드 안내 문구
• 랭킹 조건 설명
• 버튼 텍스트
• 기록 없음 메시지

---

🛠 수정 내용

• i18n key 19개 추가
• 10개 언어 전체 번역 적용
• RecoverCodeResetButton에도 useTranslation 적용 누락 수정

 

t('codeResetBtn')

 

---

✔ 결과

• 모든 UI 문자열 다국어 대응 완료
• tsc --noEmit 통과

---

4. 무한의 축덕 퀴즈 결과창 UX 개선

📌 요구사항

결과 화면에서 사용자의 다음 행동을 유도하기 위한 CTA 추가

---

🧩 추가 기능

결과창 하단에 버튼 2개 추가:

• 내 기록 보기
• 랭킹 보기

---

🎯 UX 목적

• 결과 확인 → 이탈 방지
• 자연스럽게 다음 행동 유도
• “게임 → 리텐션” 흐름 강화

---

🟢 동작

내 기록 보기 → /my-record
랭킹 보기 → /ranking

 

---

🎨 UI 특징

• hover / active 상태 포함
• 모바일: full width 버튼
• 데스크탑: 가로 정렬

---

✔ 결과

• 결과 화면 → 행동 전환율 개선 구조 완성
• 단순 결과창 → UX 허브 역할로 변경

---

🧾 전체 정리

이번 작업 핵심은 3가지다:

1. 안정성

• TDD 기반 복구코드 재발급

2. 구조 개선

• Game Guide → Popover 구조 전환

3. UX 개선

• 결과창 CTA 추가로 사용자 흐름 연결

---

🚀 결론

이번 작업으로 축덕 퀴즈는

“게임 → 설명 → 복구 → 기록 → 랭킹”

 

으로 자연스럽게 이어지는 구조가 완성됐다

 

🔗 직접 플레이해보기

이번 글에서 정리한 내용은 실제 서비스에 반영되어 있습니다.
아래 링크에서 확인할 수 있습니다.

 

https://football-quiz-web.vercel.app/

축덕 퀴즈