뒤로가기 딥링크 폴백을 useBackNavigation 훅으로 통합 #118

어떤 기능인가요?

뒤로가기 처리를 useBackNavigation(fallbackPath) 훅 하나로 모읍니다.

화면을 링크로 바로 열면(앱 푸시·딥링크·주소 직접 입력) 뒤에 갈 화면이 없어서 뒤로가기가 아무 일도 하지 않습니다. 지금은 화면마다 아래 5줄을 복붙해서 막고 있습니다.

const historyIndex = (window.history.state as { idx?: number } | null)?.idx;
if (historyIndex !== undefined && historyIndex > 0) {
  navigate(-1);
  return;
}
navigate("/", { replace: true });   // ← 이 경로만 화면마다 다름

이 블록이 5개 파일에 토씨 하나 다르지 않게 들어 있고, 마지막 줄의 갈 곳만 다릅니다.

그리고 설정 화면 3개(SettingsScreen·PhoneChangeScreen·WithdrawalScreen, #97)는 navigate(-1)만 있어서 지금 이 처리가 빠져 있습니다. 진입점이 홈 헤더뿐이라 아직 드러나지 않지만, 앱에서 설정을 딥링크로 열면 뒤로가기가 먹통입니다.

📝 작업 상세 내용

• useBackNavigation(fallbackPath) 훅 추가 — 뒤에 갈 화면이 있으면 navigate(-1), 없으면 fallbackPath로 replace
• 기존 5개 화면을 훅으로 교체 (동작 변화 없음)
• 설정 화면 3개에 훅 적용 — 딥링크로 열었을 때 뒤로가기가 동작하게 한다
• ScreenLayoutRoute가 전환 방향 판정에 쓰는 history.state.idx 접근과 한곳으로 모을 수 있는지 확인
• 각 화면의 fallbackPath가 맞는지 점검 (설정 3개는 /settings가 맞는지 포함)

📁 참고 자료

• 제안이 나온 리뷰: [Feat/#96] 설정 화면과 전화번호 변경·회원 탈퇴 화면 구현 #97 리뷰 코멘트 (SettingsScreen.tsx)
• docs/conventions/coding-style.md 라우팅 절 — 화면 전환 방향과 history.state.idx 사용

범위에서 뺀 것

• 뒤로가기 헤더 마크업(TopNavigationButton + IconChevronLeft) 공용화는 하지 않습니다. 15개 파일에 있긴 하지만 5줄짜리 JSX고, 화면마다 title·trailing 구성이 제각각이라(설정은 타이틀 있음, 탈퇴는 없음, 알림은 trailing에 설정 버튼) 훅으로 묶으면 prop이 늘어 오히려 읽기 어려워집니다. 중복의 핵심은 마크업이 아니라 위의 딥링크 폴백입니다.