목적

• 작성 중(Dirty) 상태에서 이탈을 방지하고, 의도된 이동/새로고침 시에는 경고 없이 진행하도록 제어
• 감지 대상: beforeunload(새로고침/창닫기), a[href] 클릭, 브라우저 뒤로가기(popstate), 키보드 새로고침(F5, Ctrl/Cmd+R)

API

import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";

const { bypassNextNavigation, bypassFor } = useUnsavedChangesGuard(isDirty: boolean);

• isDirty: 현재 페이지가 “작성 중”인지 여부
• bypassNextNavigation(): 다음 1회 내비게이션만 경고 없이 허용
• bypassFor(durationMs = 2000): 지정 시간(ms) 동안 경고 비활성화

공통 적용 가이드(다른 페이지에서도 동일)

1. 클라이언트 컴포넌트에서 사용

• 파일 상단에 "use client" 필요

2. Dirty 판단 만들기

const isDirty = useMemo(
  () => !!(form.title || form.body), // 또는 초기값과의 깊은 비교
  [form],
);

• react-hook-form: const { formState: { isDirty } } = useForm()

3. 훅 연결

const { bypassNextNavigation, bypassFor } = useUnsavedChangesGuard(isDirty);

4. 의도된 이동/리로드 전에 우회

• 한 번만 이동: bypassNextNavigation(); router.push(...)
• 하드 리로드/여러 작업: bypassFor(3000); window.location.reload()

5. 예외 링크(경고 없이 통과)

<a href="/help" data-ignore-unsaved="true">도움말</a>

동작/제한 사항