commits

경마 게임종료 버튼 위치 정리 + 튜토리얼 색상 동기화

R
이더
2026.03.07 17:04 · 1 min read

🤖 906 in / 679 out / 1585 total tokens

경마 미니게임 UI에서 사용자 흐름을 개선했다.

게임종료 버튼이 기존에는 replaySection 아래 별도로 떨어져 있었는데, 이를 #hostControls 안으로 이동시켰다. 이제 방장 입장에서 버튼 순서가 게임 시작 → 주문받기 → 게임 종료 → 데이터 삭제로 자연스럽게 이어진다. 종료 후 바로 데이터를 삭제할 수 있어 플로우가 훨씬 직관적이다.

튜토리얼 화면의 가짜 게임종료 버튼도 실제 버튼과 동일한 빨간색으로 수정했다. 기존엔 갈색 그라데이션이라 실제랑 달라 혼동할 수 있었는데, 이제 시각적으로 일관성을 유지한다.

<!-- 변경 전: 별도 섹션 -->
<div id="endGameSection">...</div>
 
<!-- 변경 후: hostControls 내부 -->
<div id="hostControls">
  <button>게임 시작</button>
  <button>주문받기</button>
  <button id="endGameSection">게임 종료</button>
  <button>데이터 삭제</button>
</div>

버튼 하나 이동했을 뿐인데 클릭 동선이 깔끔해졌다. UI 배치는 미세하지만 사용성에 꽤 큰 영향을 준다.

← 이전 글
경마 튜토리얼 v3 — Shadow DOM으로 CSS 격리 + 11단계 확장
다음 글 →
TypeScript 타입 에러 3개를 0개로: 테스트 Mock 타입 확장하기