TSK-014-01 Mobile map location and tourism sheet layout fix

[ClarusIubar]

Scope-ID

TSK-014-01-MOBILE-MAP-LOCATION-AND-SHEET-LAYOUT-FIX

Core Classification

• Core: TSK-014-00-MAP-UX-REGRESSION-FIX
• Parent Issue: TSK-014-00 Bug: 모바일 지도 위치 찾기와 KTO 시트 레이아웃 복구 #425
• Rationale: 모바일 지도 UX 회귀 중 내 위치 액션과 KTO 정보 시트 clipping을 하나의 실행 단위로 복구한다.
• Misroute blocked: KTO 데이터 import/admin 계약, 이벤트 CMS, 백엔드 API 변경과 섞지 않는다.

Branch

mobile-map-location-sheet-fix

문제

실사용 화면에서 다음 문제가 확인됐다.

• 내 위치 찾기 버튼이 기대대로 동작하지 않는다.
• KTO 관광정보 바텀시트가 이미지 이후 본문 영역을 충분히 보여주지 못하고 하단 탭 근처에서 내용이 잘린다.

구현 체크리스트

• 현재 내 위치 버튼 흐름과 geolocation hook 경계를 코드 기준으로 확인
• 위치 성공/실패/권한 거부를 public behavior 기준으로 테스트 추가
• KTO 정보 시트의 partial/full 높이와 내부 스크롤 구조를 테스트 추가
• 모바일 바텀 탭과 시트가 겹치지 않도록 CSS/layout 최소 수정
• KTO 정보 시트가 이미지, 요약, 소개, 위치, 출처, 링크까지 접근 가능하게 유지
• 완료 보고서 작성 및 PR/merge/CI 근거 기록

Architecture Boundary Gate

• Stable contract/data boundary: browser geolocation API, Naver map local contract, TourismPlaceItem presentation contract.
• Core behavior owner: map location action은 map/navigation hook 계층, KTO sheet layout은 TourismInfoSheet와 map sheet CSS.
• External dependency boundary: live GPS/Naver SDK는 테스트에서 직접 의존하지 않고 public UI state와 local mocks로 검증한다.
• Composition/orchestration boundary: AppMapStageView는 버튼/시트 조립만 담당하고, 위치 계산과 시트 렌더링 책임을 내부로 끌어오지 않는다.
• Validation seam: unit/component tests plus mobile E2E layout checks.
• Scope map: frontend map UX only. API path/response shape/DB/OAuth/backend import flow는 변경하지 않는다.
• Architecture risk: CSS로만 덮으면 다른 sheet 상태를 깨뜨릴 수 있으므로 partial/full state와 bottom tab overlap을 함께 검증한다.

Verification Contract

Required commands

• npm.cmd run check:numeric-literals
• npm.cmd run lint
• npm.cmd run typecheck
• npm.cmd run test:unit
• npm.cmd run test:integration
• npm.cmd run test:regression
• npm.cmd run test:e2e
• npm.cmd run build
• git diff --check
• UTF-8 strict read or commit hook

Source-of-truth readback

• PR URL
• main merge SHA
• main CI URL
• production-smoke URL
• CodeQL/Code Quality URL

Required evidence

• 내 위치 액션 회귀 테스트
• KTO 시트 레이아웃/내용 접근성 회귀 테스트
• 완료 보고서 reports/completion/TSK-014-01-mobile-map-location-sheet-fix.md

Fail-closed failure modes

• live GPS/Naver SDK 없이는 검증 불가능한 구조로 바뀌면 중단한다.
• API/DB/OAuth 변경이 필요하면 별도 이슈로 분리한다.
• 사용자-facing copy 대량 정리가 필요하면 별도 copy/encoding 이슈로 분리한다.

[ClarusIubar]

완료 근거

• Child Issue: TSK-014-01 Mobile map location and tourism sheet layout fix #426
• Parent Issue: TSK-014-00 Bug: 모바일 지도 위치 찾기와 KTO 시트 레이아웃 복구 #425
• PR: fix: restore mobile map location and tourism sheet layout #427
• Main merge SHA: 1991601439794f38bbc35a4cda9ae70e04a86466
• Branch: mobile-map-location-sheet-fix
• CI: https://github.com/STH-1-Class-One-Group/JamIssue/actions/runs/27459728533
• production-smoke: https://github.com/STH-1-Class-One-Group/JamIssue/actions/runs/27459728526
• CodeQL: https://github.com/STH-1-Class-One-Group/JamIssue/actions/runs/27459728242
• Code Quality: https://github.com/STH-1-Class-One-Group/JamIssue/actions/runs/27459728252

수정 요약

• watchPosition 콜백이 동기 실행될 때 watchId 초기화 전에 접근하던 결함을 제거했습니다.
• 지도 위치 확인 메시지가 NaverMapStatus까지 전달되도록 MapStageMapSurface props 연결을 복구했습니다.
• 위치 확인/오류 문구와 관광정보 토글/시트 관련 mojibake를 이번 UX 경로 범위에서 복구했습니다.
• KTO 관광정보 시트를 공통 MapBottomSheet wrapper로 조립하도록 바꿨습니다.
• KTO 정보 시트는 기본 full 상태로 열고, full 시트 content에 bottom nav offset padding을 추가해 이미지 이후 위치/출처/링크가 잘리지 않게 했습니다.

Architecture Boundary Gate

• Responsibility map: geolocation.ts는 브라우저 위치 API 변환/검증, NaverMapStatus는 위치 버튼/피드백, MapBottomSheet는 공통 지도 바텀시트 shell, TourismInfoSheet는 KTO read-only presentation을 담당합니다.
• Dependency direction: app coordinator -> map stage -> Naver map/status -> geolocation action 흐름을 유지했습니다. KTO 시트는 Worker/KTO API를 직접 호출하지 않습니다.
• Test seam: geolocation browser mock, map status UI render test, TourismInfoSheet shared shell/full state test를 추가했습니다.
• Scope map: frontend map UX만 변경했습니다. API path/response shape/DB schema/OAuth/Worker import flow는 변경하지 않았습니다.
• Architecture risk: bottom tab hide 정책은 전역 app-shell 설계 범위라 이번 버그에서는 content padding으로 접근성을 보강했습니다.

검증

• npm.cmd run typecheck 통과
• npm.cmd run test:unit -- geolocation naver-map-status tourism-info-sheet map-config 통과
• npm.cmd run check:numeric-literals 통과
• npm.cmd run lint 통과
• npm.cmd run test:integration 통과
• npm.cmd run test:regression 통과
• npm.cmd run test:e2e 통과
• npm.cmd run build 통과
• git diff --check 통과
• UTF-8 strict read 및 commit hook 통과