fix: 페이지 이탈 시 미저장된 데이터 감지 로직

Author: yyoonngg

frontend/src/app/(sidebar)/dashboard/_constants/index.ts

@@ -31,6 +31,7 @@ export {
   EXPENSES_ERROR_MESSAGE,
   SAVE_ERROR_MESSAGE,
   SAVE_VALIDATION_ERROR_MESSAGE,
+  UNSAVED_CHANGE_WARNING_MESSAGE,
 } from "@/app/(sidebar)/dashboard/_constants/messages";
 
 export { AUTO_CATEGORIZE_DEBOUNCE_MS } from "@/app/(sidebar)/dashboard/_constants/expenseCategory";

frontend/src/app/(sidebar)/dashboard/_constants/messages.ts

@@ -1,3 +1,4 @@
 export const EXPENSES_ERROR_MESSAGE = "소비 내역을 불러오지 못했어요. 잠시 후 다시 시도해 주세요.";
 export const SAVE_ERROR_MESSAGE = "소비 내역을 저장하지 못했어요. 잠시 후 다시 시도해 주세요.";
 export const SAVE_VALIDATION_ERROR_MESSAGE = "날짜, 사용내역, 비용, 항목을 모두 입력해 주세요.";
+export const UNSAVED_CHANGE_WARNING_MESSAGE = "저장되지 않은 변경사항이 있습니다. 페이지를 떠나시겠습니까?";

frontend/src/app/(sidebar)/dashboard/_hooks/useExpenseTable.ts

@@ -8,6 +8,7 @@ import { useExpenseRowSave } from "@/app/(sidebar)/dashboard/_hooks/useExpenseRo
 import { useExpenseCellPopup } from "@/app/(sidebar)/dashboard/_hooks/useExpenseCellPopup";
 import { useExpenseTableColumns } from "@/app/(sidebar)/dashboard/_hooks/useExpenseTableColumns";
 import { useExpenseTableSelection } from "@/app/(sidebar)/dashboard/_hooks/useExpenseTableSelection";
+import { useUnsavedChangesWarning } from "@/app/(sidebar)/dashboard/_hooks/useUnsavedChangesWarning";
 import { isNewRow } from "@/app/(sidebar)/dashboard/_utils";
 import type {
   EditableExpenseRow,
@@ -52,6 +53,8 @@ export const useExpenseTable = ({
     costDelta,
   } = useExpenseRowsState(initialData, resetKey);
 
+  useUnsavedChangesWarning(hasUnsavedChanges);
+
   // 서버에서 정렬된 데이터를 받으므로 새 행(isNew)만 맨 아래 고정하고 나머지는 그대로 유지
   // 사용자가 새로 입력하는 행은 서버 정렬 대상이 아니므로, 정렬 결과에서 제외한다.
   const sortedRows = useMemo(() => {

frontend/src/app/(sidebar)/dashboard/_hooks/useUnsavedChangesWarning.ts

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect } from "react";
+import { UNSAVED_CHANGE_WARNING_MESSAGE } from "@/app/(sidebar)/dashboard/_constants/messages";
+
+/**
+ * 미저장 변경사항이 있을 때 페이지 이탈을 경고하는 훅
+ * - 브라우저 새로고침/탭 닫기: beforeunload
+ * - 클라이언트 라우팅(Link 클릭): anchor click 인터셉트
+ * - 브라우저 뒤로가기/앞으로가기: popstate 인터셉트
+ */
+export function useUnsavedChangesWarning(hasUnsavedChanges: boolean) {
+  // 브라우저 새로고침 / 탭 닫기
+  useEffect(() => {
+    if (!hasUnsavedChanges) return;
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [hasUnsavedChanges]);
+
+  // Next.js Link 클릭 (클라이언트 라우팅) 인터셉트
+  useEffect(() => {
+    if (!hasUnsavedChanges) return;
+
+    const handleClick = (e: MouseEvent) => {
+      const anchor = (e.target as HTMLElement).closest("a");
+      if (!anchor) return;
+
+      const href = anchor.getAttribute("href");
+      if (!href || href.startsWith("#")) return;
+
+      // 외부 링크는 beforeunload가 처리
+      if (anchor.target === "_blank" || anchor.origin !== window.location.origin) return;
+      
+      if (!window.confirm(UNSAVED_CHANGE_WARNING_MESSAGE)) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, [hasUnsavedChanges]);
+
+  // 브라우저 뒤로가기 / 앞으로가기
+  useEffect(() => {
+    if (!hasUnsavedChanges) return;
+
+    const handlePopState = () => {
+      if (!window.confirm(UNSAVED_CHANGE_WARNING_MESSAGE)) {
+        window.history.pushState(null, "", window.location.href);
+      }
+    };
+
+    window.history.pushState(null, "", window.location.href);
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [hasUnsavedChanges]);
+}