지도 컨트롤이 시트 없이 화면 중앙에 떠 있는 버그

[Binz-collab]

증상

시트가 화면에 없는데 새로고침·내 위치 버튼만 화면 중앙쯤에 떠 있다. 헤더와 검색 바는 보이고, 지도에는 직전에 선택했던 핀만 남아 있다.

제보 스크린샷

스크린샷에서 읽은 값 (481 × 1310px 뷰포트):

• 컨트롤 스택 아래끝이 화면 바닥에서 약 770px 위에 있다. 기본 자리는 70px 이다
• 같은 화면에 바텀시트는 없다. 검색 바는 비어 있고 헤더(로고·언어·프로필)가 보인다 → 검색 컨텍스트가 아니다
• 지도에는 선택 상태로 강조된 핀 하나(진주 롯데마트)만 남아 있다

재현 경로

1. 검색 오버레이에서 최근 검색어의 보관함 항목을 눌러 상세로 진입
2. 바텀시트를 full 로 올림
3. 올리자마자 빠르게 검색 바 오른쪽 X 를 눌러 검색 컨텍스트를 벗어남

타이밍 의존이라 항상 나오지는 않는다. 자동화된 클릭으로는 계측 전 8회 중 1회 잡혔고, 계측을 붙인 뒤로는 10회 넘게 재현되지 않았다.

진행 상황

확정하고 고친 것 — #194

(1) 시트 렌더 조건과 컨트롤 배치가 서로 다른 입력을 봤다.
isSearchOpen / isMapLoading / displayedLockerDetail 세 게이트가 시트만 지우고 sheetMode 는 그대로 두어, 시트가 없는데도 컨트롤이 계속 시트를 따라갔다. 수정 전/후 배포본에서 인라인 bottom 을 직접 읽어 확인했다.

상태	수정 전	수정 후
목록 시트 위에서 검색 오버레이 재진입	clamp(70px, 100dvh - 763px, …)	70px

(2) 바닥 위치를 모션 값과 정적 값으로 갈아끼웠다.
(1)을 고친 뒤에도 이 이슈의 경로에서 같은 화면이 한 번 잡혔다. 그때 인라인 스타일은 사라진 시트의 오프셋을 가리키는 clamp 문자열이었고, 창 크기를 바꿔 리렌더를 강제해도 갱신되지 않았다.

계측 빌드를 프리뷰에 올려 상태 전이를 직접 읽은 결과 React 상태는 정상이었다.

detail/full → shouldTrackSheet:true,  liveOffset:808 → bottom 469
X 클릭      → shouldTrackSheet:false, visibleSheetKind:null → 기본 자리
다음 렌더   → liveOffset 리셋

즉 상태는 "시트 없음" 인데 DOM 만 과거에 머물렀다. #194 에서 바닥 위치를 늘 같은 모션 값이 쥐게 바꿔(갈아끼우는 순간 자체를 없앰) 이 경로를 닫았다.

가설 정리

1. 안착 전 이탈로 isSheetSettled 가 false 로 굳음 → fix: 시트가 없는데 시트 윗변에 남던 지도 컨트롤 위치 #194 에서 시트가 사라질 때 true 로 되돌리도록 함께 처리
2. 단위 혼용 — 여전히 열려 있음. 밀어 올린 위치는 JS 픽셀값(sheetLiveOffset, innerHeight 기준)과 CSS 100dvh 를 한 식에서 섞는다. 시트가 떠 있는 동안 둘이 어긋나면(모바일 주소창 접힘 등) 위치가 밀릴 수 있다. 시트가 없을 때는 fix: 시트가 없는데 시트 윗변에 남던 지도 컨트롤 위치 #194 가 센티넬 값으로 무력화했지만, 시트가 있을 때는 그대로다
3. 상세 단계 고착 → 기각. openLockerDetailById 가 조회 전 항상 플레이스홀더를 넣으므로 조회 실패에도 selectedLockerDetail 이 non-null 이고, 상세 시트는 오류 UI 로 렌더된다 (아래 코멘트 참고)

남은 것

• fix: 시트가 없는데 시트 윗변에 남던 지도 컨트롤 위치 #194 는 원인을 특정한 것이 아니라 증상이 나올 수 있는 경로를 닫은 것이다. 레이스 자체를 재현으로 확정하지는 못했다
• 머지 후에도 재발하면 아래 스니펫으로 한 번에 갈린다

재발 시 진단

document.querySelector('[data-map-control-stack]').getAttribute('style')

• clamp(70px, 100dvh - <실제 오프셋>px, …) → 시트를 아직 따라가는 중. 가설 2 쪽
• clamp(70px, 100dvh - 999988px, …) 인데 눈으로 떠 보임 → 전혀 다른 원인(스크롤·뷰포트 계산). 999988 은 "시트 없음" 센티넬이라 정상값이다
• 시트가 떠 있는 상태라면 bottom - 시트 가시높이 가 12px 인지 본다

한 번의 재현으로 확정하는 계측 스니펫

콘솔에 붙여 두고 재현한 뒤 window.__probe 를 확인한다. 값이 바뀔 때만 기록한다.

window.__t0 = Date.now();
window.__probe = [];
const snap = () => {
  const el = document.querySelector("[data-map-control-stack]");
  const s = document.querySelector("[data-bottom-sheet-surface]");
  return {
    t: Date.now() - window.__t0,
    style: el ? el.getAttribute("style") : "(no-control)",
    bottom: el ? getComputedStyle(el).bottom : null,
    sheet: s ? Math.round(innerHeight - s.getBoundingClientRect().top) : null,
    hdr: !!document.querySelector("header"),
  };
};
const same = (a, b) => a && b && a.style === b.style && a.sheet === b.sheet && a.hdr === b.hdr;
setInterval(() => {
  const e = snap();
  const p = window.__probe;
  if (!same(p[p.length - 1], e)) p.push(e);
}, 50);

관련: #194

[Binz-collab]

가설 3(상세 단계 고착) 보강 — codex 리뷰 반영

#194 에서 뺀 가드 커밋에 대해 리뷰가 지적한 내용이다. 이 이슈의 가설 3 을 그대로 쓰면 안 된다는 근거가 된다.

openLockerDetailById 는 조회 전에 항상 createLockerDetailPlaceholder(lockerId) 를 selectedLockerDetail 에 넣는다. 그래서 조회가 실패하거나 삭제된 보관함이어도 selectedLockerDetail 은 non-null 이고,

• isRenderableSheetSession 이 참을 반환해 세션 정리(resetMapContext)까지 가지 않는다
• displayedLockerDetail 도 non-null 이라 상세 시트는 (오류 UI 로) 렌더된다

즉 "상세 단계인데 시트가 없다" 는 상태는 이 경로로는 만들어지지 않는다. 가설 3 을 살리려면 플레이스홀더가 없거나 제거되는 경로를 따로 찾아야 한다.

가드를 손볼 때 같이 정리할 것: 오류 상태를 렌더 가능성 판정에 반영하거나, 실패 시 플레이스홀더를 걷어내는 쪽.

[Binz-collab]

#194 머지됨 (828e769)

머지 전 프리뷰에서 이 이슈의 재현 경로를 그대로 밟아 측정했다. 전 구간 정상이다.

단계	컨트롤 bottom	시트 가시높이	인라인
홈	70px	없음	clamp(70px, 100dvh - 999988px, …)
최근검색어 → 상세 half	203px	191	clamp(70px, 100dvh - 1062px, …)
full 로 늘림	469px	457	clamp(70px, 100dvh - 796px, …)
full 직후 X 로 검색 이탈	70px	없음	clamp(70px, 100dvh - 999988px, …)

999988 은 "시트 없음" 센티넬이다. 시트가 없을 때 인라인이 이 값을 가리키면 정상이고, 실제 오프셋(예: 100dvh - 796px)이 남아 있으면 이 이슈의 증상이다.

이 이슈를 닫지 않는 이유

레이스를 재현으로 특정하지 못했다. #194 는 증상이 나올 수 있는 경로를 닫은 것이지 원인을 규명한 것이 아니다. 가설 2(시트가 떠 있는 동안의 JS 픽셀 ↔ CSS 100dvh 혼용)는 그대로 열려 있다.

재발하면 위 표의 인라인 값과 본문의 계측 스니펫으로 한 번에 갈린다. 일정 기간 재발이 없으면 그때 닫는 편이 좋겠다.

[Binz-collab]

#196 머지됨 (9895c07)

#194 의 후속 리뷰 지적 두 건을 반영했다. 둘 다 컨트롤이 엉뚱한 높이로 튀는 경로다.

• 시트 전환 중 이전 시트의 프레임: 목록·상세가 같은 처리를 공유해, 나가는 시트의 마지막 프레임이 새 시트가 자리 잡은 뒤 도착하면 반영됐다
• 같은 종류의 이전 인스턴스: 종류만 대조하면 다른 보관함·다른 목록으로 바뀐 경우를 못 거른다. 시트가 새로 마운트되는 기준(목록은 리마운트 키, 상세는 보관함 id)과 같은 식별자로 대조한다

머지 전 프리뷰 실측

단계	컨트롤 bottom	시트 가시높이
홈	70px	없음
검색 목록 시트	493px	481
오버레이 재진입	70px	없음
상세 A half	203px	191
상세 A full	469px	457
목록 복귀	493px	481
상세 B (직전 A 가 full 이었음)	203px	191
full 직후 X	70px	없음
최근검색어 → full → 즉시 X	70px	없음

상세 B 가 191+12 로 잡힌 것이 이번 수정이 겨냥한 지점이다. 예전이라면 A 의 full 오프셋이 남아 새 시트 위로 튈 수 있었다.

이 이슈는 계속 열어 둔다

원래 증상(full 직후 X)은 #194 이후 25회 넘게 시도했지만 재현되지 않았다. 다만 재현 확률이 8회 중 1회 수준이었으므로 무재현이 곧 해결의 증거는 아니다. 재발하면 본문의 판별법으로 바로 갈린다.