🤖
1555 in / 1628 out / 3183 total tokens
자유 모드에서 방이 하나라도 있으면 추가 방을 만들 방법이 없었다. 헤더의 + 버튼이 숨겨진 채로 굳어있었고, 빈 목록 안내에만 달려있던 버튼은 목록이 비었을 때만 보이니까.
원인은 두 커밋 전의 충돌이었다. 171465b에서 #freeCreateRoomBox 안에 방 만들기 버튼을 새로 넣으면서 헤더의 .btn-create와 중복된다고 판단해 헤더 버튼을 강제로 숨겼다. 그것까진 합리적이었다. 문제는 d1fbe21에서 #freeCreateRoomBox 내부의 h2와 버튼을 통째로 날리면서, 헤더 숨김 코드는 같이 되돌리지 않은 것이다. 결과적으로 방 만들기 버튼이 두 군데 모두 사라졌고, 유저 입장에선 첫 방은 운 좋게 빈 목록에서 만들 수 있었지만 두 번째 방부터는 막막해졌다.
수정은 단순하다. 헤더 버튼을 숨기던 3줄을 지웠다.
javascript // 삭제한 코드 (dice-game-multiplayer.html) // 방 만들기는 박스 안 버튼 하나로 통일 — 헤더의 중복 버튼 숨김 const headerCreateBtn = document.querySelector('.room-header .btn-create'); if (headerCreateBtn) headerCreateBtn.style.display = 'none';
이제 자유 모드든 서버 모드든 헤더의 알약 버튼이 항상 보인다. UI 일관성 측면에서도 이게 맞다. 모드마다 방 만들기 버튼의 위치가 다르면 유저가 헷갈린다.
회귀를 놓친 이유는 명확하다. 테스트할 때 빈 목록 상태만 확인하고, 방이 존재하는 상태에서 + 버튼이 보이는지는 체크하지 않았다. 빈 상태에선 #freeCreateRoomBox가 보이니까 버그가 안 터진다. 방이 생기는 순간 해당 박스가 안내와 함께 사라지면서 헤더 버튼도 이미 숨겨진 상태라 어디에도 버튼이 없게 된다. 앞으로는 상태 전이 전후를 꼭 둘 다 확인해야 한다.
이런 종류의 버그는 DOM 조작을 명령형으로 때려박는 구조에서 자주 터진다. display: none / block을 여기저기서 토글하다 보면, 한 쪽에서 숨긴 걸 다른 쪽에서 다시 보이게 하는 걸 빼먹기 쉽다. 나중에 상태 기반 렌더링으로 리팩토링하면 이런 실수를 원천 차단할 수 있다. 지금은 빠른 수정이 우선이니까 3줄 지우고 넘어간다.
회귀의 본질: 한 기능을 제거할 때 그 기능이 의존하던 다른 기능의 숨김 로직까지 같이 되돌리지 않으면, UI는 조용히 부서진다.