feat: add form and page platform

src/presentation/forms/use-dirty-navigation-guard.tsx

@@ -0,0 +1,54 @@
+import { useCallback } from "react";
+import { useBeforeUnload, useBlocker } from "react-router-dom";
+
+import { Button } from "../components/ui/button.jsx";
+import { Dialog } from "../components/ui/dialog.jsx";
+
+export function useDirtyNavigationGuard(when: boolean) {
+  const blocker = useBlocker(when);
+
+  useBeforeUnload(
+    useCallback(
+      (event) => {
+        if (!when) return;
+        event.preventDefault();
+        event.returnValue = "";
+      },
+      [when],
+    ),
+    { capture: true },
+  );
+
+  return Object.freeze({
+    blocked: blocker.state === "blocked",
+    stay() {
+      blocker.reset?.();
+    },
+    leave() {
+      blocker.proceed?.();
+    },
+  });
+}
+
+export function DirtyNavigationDialog(props: Readonly<{
+  guard: ReturnType<typeof useDirtyNavigationGuard>;
+}>) {
+  return (
+    <Dialog
+      open={props.guard.blocked}
+      onClose={props.guard.stay}
+      title="저장하지 않은 변경이 있습니다."
+      description="이 화면을 떠나면 입력한 내용이 사라집니다."
+      actions={
+        <>
+          <Button variant="secondary" onClick={props.guard.stay}>
+            계속 작성
+          </Button>
+          <Button variant="danger" onClick={props.guard.leave}>
+            변경 버리고 이동
+          </Button>
+        </>
+      }
+    />
+  );
+}