feat(career): 未保存時の離脱確認（× 閉じ/リロード）を追加

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[yusuke0610]

概要

ログイン済みユーザーが職務経歴書を未保存のまま × 閉じ / リロード した際に、ブラウザ標準の離脱確認ダイアログを出して編集内容の消失を防ぎます。

formCache は redux-persist の blacklist（PII 保護）のためリロードで消える設計です。そのためログイン済み未保存編集はリロード/× 閉じで失われるため、その経路をガードします。

変更内容

• useUnsavedChangesWarning フックを追加: when が true の間だけ beforeunload リスナを登録し、preventDefault() でブラウザ標準確認を発火する汎用フック。
• CareerResumeForm: 既存の dirty.any（useCareerDirty）を再利用し、useUnsavedChangesWarning(isAuthenticated && dirty.any) を追加。
• ユニットテスト 4 ケース（true 抑止 / false 非抑止 / アンマウント解除 / true→false 解除）。

仕様上の制約（設計判断）

ブラウザ仕様上 beforeunload ではカスタム UI・保存処理・文言上書きができないため、ブラウザ標準ダイアログのみ（保存する/保存しない の選択や保存後離脱は不可）。表示文言はブラウザ管理のため messages.ts 追加なし。

対象外（データ消失が起きない経路）

• 未ログインのお試し入力: sessionStorage に自動退避されリロードで復元されるため対象外（baseline=null で dirty.any も常に false）。
• アプリ内ページ遷移: Redux キャッシュで保持され遷移してもデータは残るため対象外（beforeunload も発火しない）。

検証

• make test-frontend … 293 pass
• make lint-frontend / make lint-frontend-messages … clean
• make build-frontend … 型エラーなし
• E2E: beforeunload ネイティブダイアログは Playwright で安定検証できないため新規 E2E は追加なし。

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a browser confirmation warning that appears when users attempt to leave the page with unsaved changes in the career resume form while authenticated.

• Tests

  • Added test suite covering unsaved changes warning behavior, including listener registration, cleanup, and edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b72b9154-b56b-405e-ab0f-80a119900be8

📥 Commits

Reviewing files that changed from the base of the PR and between d7cc462 and 31c72b2.

📒 Files selected for processing (3)

• frontend/src/components/forms/CareerResumeForm.tsx
• frontend/src/hooks/useUnsavedChangesWarning.test.ts
• frontend/src/hooks/useUnsavedChangesWarning.ts

---

📝 Walkthrough

Walkthrough

This PR adds an unsaved changes warning feature to the frontend. A new React hook conditionally registers a beforeunload event listener to display the browser's native "leave site" confirmation dialog when users attempt to navigate away or reload with unsaved form changes. The hook is tested and integrated into CareerResumeForm for authenticated users with pending edits.

Changes

Unsaved changes warning

Layer / File(s)	Summary
useUnsavedChangesWarning hook implementation frontend/src/hooks/useUnsavedChangesWarning.ts	A new hook that conditionally registers a beforeunload event listener. When enabled, it calls preventDefault() and sets event.returnValue to trigger the browser-native unload confirmation. The listener is cleaned up on unmount or when the when flag transitions to false.
Hook test coverage frontend/src/hooks/useUnsavedChangesWarning.test.ts	Vitest suite covering enabled behavior (listener prevents default), disabled behavior (no listener), unmount cleanup, and prop transition cleanup.
CareerResumeForm integration frontend/src/components/forms/CareerResumeForm.tsx	Imports and invokes useUnsavedChangesWarning with condition isAuthenticated && dirty.any to warn authenticated users before leaving or reloading when unsaved edits exist.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hook to guard the changes dear,
Before the browser leaves here,
The warning pops, the work is saved—
No more lost drafts, the form is brave!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main feature: adding an unsaved-changes warning when users attempt to close/reload while editing a career resume form. It accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/career-unsaved-changes-warning

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}