❓ ESC키로 팝업은 닫히나 게임 시작 되지 않는 문제 발생 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

구분

• 날짜 : 2025.05.20
• 종류 : 버그
• 중요도 : 🟡

---

1. 문제 상황

게임 가이드 팝업을 띄운 후 ESC 키로 닫으면 팝업은 정상적으로 사라지지만 게임은 시작되지 않고 멈춘 상태로 유지됨

---

2. 원인

• ESC 키는 팝업을 닫는 로직만 실행되고, 게임을 시작하는 로직과 연결되어 있지 않음
• gameActive = true, score = 0, spawnObstacles() 등 초기화 함수가 따로 있어야 하는데 호출되지 않음
• ESC키 이벤트 리스너 확인

document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
 console.log('키 입력 됨');
closeGuidePopup();
}
});

• 게임 시작 함수 확인

function startGame(): void {
 console.log('실행');

gameActive = true;
score = 0;
spawnObstacles();
updateScore();
}

• startGame()이 ESC 누를 때 호출되지 않는 것을 발견함

---

3. 해결 과정

ESC키로 팝업 닫을 때 closeGuideAndStartGame()호출 추가

document.addEventListener('keydown', (e: KeyboardEvent) => {
  if (e.key === 'Escape' && !gameGuidePopup.classList.contains('hidden') && !guideClosed) {
    guideClosed = true;
    startGame();
  }
});

ESC 키를 눌렀을 때, 팝업을 닫는 동시에 게임도 시작되도록 로직을 수정함. guideClosed를 추가하여 중복 실행 방지 처리도 함께 적용함.

---

4. 보완할 점

• if (e.key === 'Escape') 같은 이벤트 처리에서

  단순 팝업 종료 외에도 **게임 상태(gameActive)**를 확인하고 조건 분기하는 습관을 들이기

• 팝업의 상태 체크는 gameGuidePopup.classList.contains('hidden') 같은 하드코딩보다 gameGuidePopupIsVisible()같은 헬퍼 함수를 분리하여 사용하면 가독성과 재사용성이 향상됨