diff --git a/frontend/src/components/icons/GitHubMarkIcon.tsx b/frontend/src/components/icons/GitHubMarkIcon.tsx
new file mode 100644
index 00000000..0b109ade
--- /dev/null
+++ b/frontend/src/components/icons/GitHubMarkIcon.tsx
@@ -0,0 +1,20 @@
+/**
+ * GitHub マークアイコン。ログインボタン等で使う（色はボタン側で指定）。
+ */
+export function GitHubMarkIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
diff --git a/frontend/src/components/icons/MarkdownDownloadIcon.tsx b/frontend/src/components/icons/MarkdownDownloadIcon.tsx
new file mode 100644
index 00000000..1b0c4378
--- /dev/null
+++ b/frontend/src/components/icons/MarkdownDownloadIcon.tsx
@@ -0,0 +1,30 @@
+/**
+ * Markdown ダウンロード（出力）マーク。Markdown 公式マーク（枠 + 「M」+ 下向き矢印）。
+ * マーク自体が下向き矢印を含み「書き出し」を想起させる。色は currentColor を継承する。
+ */
+export function MarkdownDownloadIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
diff --git a/frontend/src/components/icons/PdfDownloadIcon.tsx b/frontend/src/components/icons/PdfDownloadIcon.tsx
new file mode 100644
index 00000000..1e360913
--- /dev/null
+++ b/frontend/src/components/icons/PdfDownloadIcon.tsx
@@ -0,0 +1,51 @@
+/**
+ * PDF ダウンロード（出力）マーク。書類 + 「PDF」+ 下向き矢印で「PDFを書き出す」を表す。
+ * 色はボタン側の currentColor を継承する。
+ */
+export function PdfDownloadIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
diff --git a/frontend/src/components/icons/SaveIcon.tsx b/frontend/src/components/icons/SaveIcon.tsx
new file mode 100644
index 00000000..ce58a7bb
--- /dev/null
+++ b/frontend/src/components/icons/SaveIcon.tsx
@@ -0,0 +1,19 @@
+/**
+ * 保存マーク（フロッピーディスク）。職務経歴書の保存 / 更新ボタンで使う。
+ * 色はボタン側の currentColor を継承する。
+ */
+export function SaveIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
diff --git a/frontend/src/constants/messages.ts b/frontend/src/constants/messages.ts
index 15e41317..14ff1b87 100644
--- a/frontend/src/constants/messages.ts
+++ b/frontend/src/constants/messages.ts
@@ -78,6 +78,31 @@ export const SUCCESS_MESSAGES = {
CAREER_PDF_DOWNLOADED: "職務経歴書PDFをダウンロードしました。",
} as const;
+/**
+ * 未ログインお試し入力からログインへ誘導する動線の文言。
+ * 職務経歴書を未ログインで入力 → 保存時にログインを促すモーダル / 匿名ヘッダーで使う。
+ */
+export const AUTH_PROMPT_MESSAGES = {
+ /** ログイン促進モーダルの見出し。 */
+ TITLE: "ログインして保存しましょう",
+ /** ログインで得られる価値の説明。 */
+ DESCRIPTION: "ログインすると職務経歴書を保存でき、PDF出力やいつでも編集ができます。",
+ /** 入力内容が失われない旨の安心メッセージ。 */
+ DRAFT_KEPT: "入力した内容は保持されます。",
+ /** GitHub ログインボタン（モーダル）。 */
+ GITHUB_LOGIN: "GitHubでログイン",
+ /** モーダルを閉じて入力に戻るボタン。 */
+ LATER: "あとで",
+ /** GitHub へリダイレクト中の表示。 */
+ REDIRECTING: "GitHub認証へリダイレクト中...",
+ /** 未認証サイドバーのフッターに置くログイン CTA（モーダルとの重複表記を避けて短縮形）。 */
+ SIDEBAR_LOGIN: "ログイン",
+ /** 未認証時に非活性な連携メニューへ付けるツールチップ。 */
+ LOGIN_REQUIRED_HINT: "ログインすると利用できます",
+ /** ログイン後、既存の職務経歴書がある場合にドラフトを復元したことを伝える。 */
+ DRAFT_RESTORED: "入力内容を復元しました。保存すると既存の職務経歴書を更新します。",
+} as const;
+
/** JSX に直書きされていた UI 文言（ErrorBoundary など） */
export const UI_MESSAGES = {
ERROR_BOUNDARY_TITLE: "予期しないエラーが発生しました",
@@ -87,6 +112,21 @@ export const UI_MESSAGES = {
"まだ連携データがありません。連携してアクティビティを可視化しましょう。",
SIDEBAR_COLLAPSE: "サイドバーを閉じる",
SIDEBAR_EXPAND: "サイドバーを開く",
+ // 未認証フッターの ▲ チェブロン（ダークモード / Issue報告 / 著作権メニュー）の aria-label
+ FOOTER_MENU: "メニュー",
+ // サイドバーのナビゲーション項目
+ NAV_CAREER: "職務経歴書",
+ NAV_GITHUB_LINK: "GitHub連携",
+ NAV_BLOG_LINK: "ブログ連携",
+ // GitHub連携サブパネル
+ GITHUB_LINK_OPTIONS: "GitHub連携オプション",
+ GITHUB_LINK_RUN: "連携実行",
+ GITHUB_INCLUDE_FORKS: "フォークしたリポジトリを含む",
+ // ユーザーメニュー（フッター）
+ DARK_MODE: "ダークモード",
+ LOGOUT: "ログアウト",
+ // 認証済みだがユーザー名が取得できない場合のフォールバック表示
+ MENU_FALLBACK: "Menu",
SOURCE_PANEL_COLLAPSE: "原本パネルを閉じる",
SOURCE_PANEL_EXPAND: "原本パネルを開く",
// 入力モーダルの × 閉じるボタン（aria-label）
@@ -105,6 +145,11 @@ export const UI_MESSAGES = {
REPORT_ISSUE: "GitHub Issueに報告",
OPENS_IN_NEW_TAB: "（新しいタブで開きます）",
COPYRIGHT: "© 2026 DevForge",
+ // 職務経歴書ヘッダーのアイコンボタン（aria-label / title 用）
+ RESUME_PREVIEW: "プレビュー",
+ RESUME_EXPORT_PDF: "PDF出力",
+ RESUME_EXPORT_MARKDOWN: "Markdown出力",
+ RESUME_DELETE_ALL: "データを削除",
// 職務経歴書フォームの項目削除アイコン（aria-label / title 用）
RESUME_DELETE_EXPERIENCE: "職務経歴を削除",
RESUME_DELETE_CLIENT: "取引先を削除",
diff --git a/frontend/src/hooks/career/useCareerDraftRestore.test.ts b/frontend/src/hooks/career/useCareerDraftRestore.test.ts
new file mode 100644
index 00000000..2f9bfbd5
--- /dev/null
+++ b/frontend/src/hooks/career/useCareerDraftRestore.test.ts
@@ -0,0 +1,109 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import { createInitialCareerForm } from "../../formMappers";
+import type { CareerFormState } from "../../payloadBuilders";
+import { loadCareerDraft, saveCareerDraft } from "../../utils/careerDraft";
+import { useCareerDraftRestore } from "./useCareerDraftRestore";
+
+/** テスト用ドラフト（氏名だけ埋めた最小フォーム） */
+function draftForm(): CareerFormState {
+ return { ...createInitialCareerForm(), full_name: "山田太郎" };
+}
+
+type Options = Parameters
[0];
+
+function setup(overrides: Partial) {
+ const setForm = vi.fn();
+ const save = vi.fn<(form?: CareerFormState) => Promise>().mockResolvedValue(true);
+ const notifyRestored = vi.fn();
+ const hook = renderHook((props: Options) => useCareerDraftRestore(props), {
+ initialProps: {
+ isAuthenticated: true,
+ loading: false,
+ documentId: null,
+ setForm,
+ save,
+ notifyRestored,
+ ...overrides,
+ },
+ });
+ return { setForm, save, notifyRestored, hook };
+}
+
+describe("useCareerDraftRestore", () => {
+ beforeEach(() => {
+ sessionStorage.clear();
+ vi.clearAllMocks();
+ });
+
+ it("ドラフトが無ければ何もしない", () => {
+ const { setForm, save, notifyRestored } = setup({});
+
+ expect(save).not.toHaveBeenCalled();
+ expect(setForm).not.toHaveBeenCalled();
+ expect(notifyRestored).not.toHaveBeenCalled();
+ });
+
+ it("新規ユーザー（documentId=null）はドラフトを自動保存し、成功時に退避を破棄する", async () => {
+ const draft = draftForm();
+ saveCareerDraft(draft);
+
+ const { save, setForm, notifyRestored } = setup({ documentId: null });
+
+ await waitFor(() => {
+ expect(save).toHaveBeenCalledWith(draft);
+ });
+ await waitFor(() => {
+ expect(loadCareerDraft()).toBeNull();
+ });
+ // 新規保存パスでは復元通知も setForm も不要
+ expect(notifyRestored).not.toHaveBeenCalled();
+ expect(setForm).not.toHaveBeenCalled();
+ });
+
+ it("既存ユーザー（documentId あり）はフォームへ復元し通知する（自動保存しない）", async () => {
+ const draft = draftForm();
+ saveCareerDraft(draft);
+
+ const { save, setForm, notifyRestored } = setup({ documentId: "existing-id" });
+
+ await waitFor(() => {
+ expect(setForm).toHaveBeenCalledWith(draft);
+ });
+ expect(notifyRestored).toHaveBeenCalledTimes(1);
+ expect(save).not.toHaveBeenCalled();
+ expect(loadCareerDraft()).toBeNull();
+ });
+
+ it("未ログインの間は何もしない", () => {
+ saveCareerDraft(draftForm());
+ const { save, setForm } = setup({ isAuthenticated: false });
+
+ expect(save).not.toHaveBeenCalled();
+ expect(setForm).not.toHaveBeenCalled();
+ // ドラフトは温存される（ログイン後に処理する）
+ expect(loadCareerDraft()).not.toBeNull();
+ });
+
+ it("ロード未確定（loading=true）の間は待機し、確定後に処理する", async () => {
+ const draft = draftForm();
+ saveCareerDraft(draft);
+
+ const { save, hook } = setup({ loading: true, documentId: null });
+ expect(save).not.toHaveBeenCalled();
+
+ hook.rerender({
+ isAuthenticated: true,
+ loading: false,
+ documentId: null,
+ setForm: vi.fn(),
+ save,
+ notifyRestored: vi.fn(),
+ });
+
+ await waitFor(() => {
+ expect(save).toHaveBeenCalledWith(draft);
+ });
+ });
+});
diff --git a/frontend/src/hooks/career/useCareerDraftRestore.ts b/frontend/src/hooks/career/useCareerDraftRestore.ts
new file mode 100644
index 00000000..3a591129
--- /dev/null
+++ b/frontend/src/hooks/career/useCareerDraftRestore.ts
@@ -0,0 +1,73 @@
+import { useEffect, useRef } from "react";
+import type { Dispatch, SetStateAction } from "react";
+
+import type { CareerFormState } from "../../payloadBuilders";
+import { clearCareerDraft, loadCareerDraft } from "../../utils/careerDraft";
+
+type UseCareerDraftRestoreOptions = {
+ /** 認証済みか。未ログイン（匿名入力中）は何もしない。 */
+ isAuthenticated: boolean;
+ /** useDocumentForm の loading。ロード確定（新規/既存判定）まで待つ。 */
+ loading: boolean;
+ /** ロード確定後の documentId。null=サーバに既存経歴書なし（新規ユーザー）。 */
+ documentId: string | null;
+ /** 退避ドラフトをフォームへ復元する（useDocumentForm.setForm）。 */
+ setForm: Dispatch>;
+ /** ドラフトを保存する（useDocumentForm.save）。成功で true。 */
+ save: (overrideForm?: CareerFormState) => Promise;
+ /** 既存経歴書ありでドラフトを復元したときの通知（情報トースト）。 */
+ notifyRestored: () => void;
+};
+
+/**
+ * 未ログインで入力 → ログイン往復してきたユーザーの退避ドラフトをフォームへ橋渡しするフック。
+ *
+ * `/career` で認証済みになった初回（ロード確定後）に一度だけ発火する:
+ * 1. 退避ドラフトが無ければ何もしない。
+ * 2. サーバに既存経歴書なし（documentId === null）→ ドラフトをそのまま新規保存し、成功時にトースト。
+ * 3. 既存経歴書あり → ドラフトをフォームへ復元（dirty 表示）し情報トースト。上書き保存はユーザー操作に委ねる。
+ *
+ * いずれもフォームへ反映 / 保存を試みた時点でドラフトは破棄する。再マウント時に古いドラフトを
+ * 復元し直して既存編集を踏み潰す事故を防ぐため、消費後の sessionStorage は残さない。
+ */
+export function useCareerDraftRestore({
+ isAuthenticated,
+ loading,
+ documentId,
+ setForm,
+ save,
+ notifyRestored,
+}: UseCareerDraftRestoreOptions): void {
+ // 一度処理したら再実行しない（同一マウント内での多重発火を防ぐ）。
+ const handledRef = useRef(false);
+
+ useEffect(() => {
+ if (handledRef.current) return;
+ // 未ログイン、またはロード未確定（新規/既存が決まっていない）うちは待機する。
+ if (!isAuthenticated || loading) return;
+
+ const draft = loadCareerDraft();
+ handledRef.current = true;
+ if (!draft) return;
+
+ if (documentId === null) {
+ // 新規ユーザー: 退避ドラフトをそのまま保存する。
+ void (async () => {
+ const ok = await save(draft);
+ if (ok) {
+ clearCareerDraft();
+ } else {
+ // 保存失敗（例: バリデーション 422）。データを失わないようフォームへ展開し、
+ // ユーザーが修正して再保存できるようにする。エラーはトーストで別途通知済み。
+ setForm(draft);
+ clearCareerDraft();
+ }
+ })();
+ } else {
+ // 既存経歴書あり: ドラフトをフォームへ復元し、更新はユーザー判断に委ねる。
+ setForm(draft);
+ clearCareerDraft();
+ notifyRestored();
+ }
+ }, [isAuthenticated, loading, documentId, setForm, save, notifyRestored]);
+}
diff --git a/frontend/src/hooks/useDocumentForm.test.ts b/frontend/src/hooks/useDocumentForm.test.ts
index 408a9023..026cfdc4 100644
--- a/frontend/src/hooks/useDocumentForm.test.ts
+++ b/frontend/src/hooks/useDocumentForm.test.ts
@@ -161,6 +161,62 @@ describe("useDocumentForm", () => {
expect(result.current.documentId).toBe("doc-cached");
});
+ /**
+ * skipLoad（匿名モード）では loadLatest を呼ばず、最初から loading=false で
+ * 空フォームを起動すること。未ログインのお試し入力で 401 を無駄打ちしない契約を守る。
+ */
+ it("skipLoad=true のとき loadLatest を呼ばず loading=false で起動する", () => {
+ const { result } = setup({ skipLoad: true });
+
+ expect(result.current.loading).toBe(false);
+ expect(mockLoadLatest).not.toHaveBeenCalled();
+ expect(result.current.form).toEqual({ title: "" });
+ expect(result.current.documentId).toBeNull();
+ });
+
+ /**
+ * save(overrideForm) は現在の form state ではなく渡したフォームを保存すること。
+ * ログイン後に退避ドラフトを state 反映を待たずに即保存するために使う。
+ */
+ it("save(overrideForm) は渡したフォームで保存し成功時 true を返す", async () => {
+ mockLoadLatest.mockRejectedValue(new Error("Not found"));
+ mockCreateDocument.mockResolvedValueOnce({ id: "new-id", title: "ドラフト" });
+
+ const { result } = setup();
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ let returned: boolean | undefined;
+ await act(async () => {
+ returned = await result.current.save({ title: "ドラフト" });
+ });
+
+ expect(returned).toBe(true);
+ expect(mockBuildPayload).toHaveBeenLastCalledWith({ title: "ドラフト" });
+ expect(mockCreateDocument).toHaveBeenCalledWith({ title: "ドラフト" });
+ expect(result.current.success).toBe("保存しました");
+ });
+
+ /** save() 失敗時は false を返すこと（呼び出し側がドラフト破棄を判断するため）。 */
+ it("save() 失敗時は false を返す", async () => {
+ mockLoadLatest.mockRejectedValue(new Error("Not found"));
+ mockCreateDocument.mockRejectedValueOnce(new Error("失敗"));
+
+ const { result } = setup();
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ let returned: boolean | undefined;
+ await act(async () => {
+ returned = await result.current.save();
+ });
+
+ expect(returned).toBe(false);
+ expect(result.current.error).toBe("失敗");
+ });
+
/** beforeSave でエラーがスローされた場合、API が呼ばれずエラーが表示されること */
it("beforeSave でエラーがスローされた場合 API が呼ばれずエラーがセットされる", async () => {
mockLoadLatest.mockRejectedValue(new Error("Not found"));
diff --git a/frontend/src/hooks/useDocumentForm.ts b/frontend/src/hooks/useDocumentForm.ts
index 80e45ab6..5e68f9e6 100644
--- a/frontend/src/hooks/useDocumentForm.ts
+++ b/frontend/src/hooks/useDocumentForm.ts
@@ -22,6 +22,11 @@ export type UseDocumentFormOptions Promise;
/** 指定するとページ遷移してもフォーム状態が Redux ストアに保持される */
cacheKey?: FormCacheKey;
+ /**
+ * true の間はマウント時の loadLatest を行わず、空フォームで起動する。
+ * 未ログインのお試し入力（匿名モード）で 401 を無駄打ちしないために使う。
+ */
+ skipLoad?: boolean;
};
export function useDocumentForm({
@@ -35,6 +40,7 @@ export function useDocumentForm) {
const dispatch = useAppDispatch();
const cached = useAppSelector((s) =>
@@ -56,7 +62,7 @@ export function useDocumentForm(
cached?.documentId ?? null,
);
- const [loading, setLoading] = useState(!cached);
+ const [loading, setLoading] = useState(!cached && !skipLoad);
const [saving, setSaving] = useState(false);
const [deleting, setDeleting] = useState(false);
const [error, setError] = useState(null);
@@ -129,8 +135,9 @@ export function useDocumentForm {
- // キャッシュが既にある場合は API ロードをスキップ
- if (cached) return;
+ // キャッシュが既にある場合・匿名モード（skipLoad）の場合は API ロードをスキップ。
+ // 匿名モードは空フォームで起動し、ログイン後の再マウントで初めてロードする。
+ if (cached || skipLoad) return;
let active = true;
setLoading(true);
@@ -162,21 +169,26 @@ export function useDocumentForm {
if (saving) return "保存中...";
return documentId ? "更新する" : "保存する";
}, [documentId, saving]);
- const save = async () => {
+ /**
+ * フォームを保存する。`overrideForm` を渡すと現在の form state ではなくそれを保存する
+ * （ログイン後に退避ドラフトを state 反映を待たず即保存するケースで使う）。
+ * 成功で true、失敗で false を返す（呼び出し側が成否に応じてドラフト破棄を判断できる）。
+ */
+ const save = async (overrideForm?: FormState): Promise => {
setSaving(true);
setError(null);
setSuccess(null);
try {
if (beforeSave) await beforeSave();
- const payload = buildPayload(form);
+ const payload = buildPayload(overrideForm ?? form);
const saved = documentId
? await updateDocument(documentId, payload)
: await createDocument(payload);
@@ -186,12 +198,14 @@ export function useDocumentForm;
+/**
+ * 職務経歴書ページ。
+ * `isAuthenticated=false`（未ログインのお試し入力）では保存時にログインを促す。
+ */
+export default function CareerPage({ isAuthenticated }: { isAuthenticated: boolean }) {
+ return ;
}
diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx
index 730eb797..6d30c773 100644
--- a/frontend/src/router/routes.tsx
+++ b/frontend/src/router/routes.tsx
@@ -1,7 +1,8 @@
import { Route, Routes, Navigate } from "react-router-dom";
import type { Theme } from "../hooks/useTheme";
-import { AuthenticatedLayout } from "../components/AuthenticatedLayout";
+import { SidebarLayout } from "../components/SidebarLayout";
+import { LoadingOverlay } from "../components/LoadingOverlay";
import { PrivateRoute, PublicRoute, type AuthUser } from "./guards";
import CareerPage from "../pages/CareerPage";
import GitHubLinkPage from "../pages/GitHubLinkPage";
@@ -20,6 +21,38 @@ type AppRoutesProps = {
onLoginSuccess: (user: { username: string; is_github_user: boolean }) => void;
};
+/**
+ * `/career` を認証有無の両対応にするディスパッチャ。
+ * - 認証判定中: LoadingOverlay（認証状態確定前のちらつきを防ぐ）
+ * - それ以外: 共通の SidebarLayout を描画。未認証時は連携メニューを非活性にし、
+ * フッターにログインボタンを出す（SidebarLayout が user の有無で出し分ける）。
+ */
+function CareerRoute({
+ user,
+ authLoading,
+ theme,
+ onToggleTheme,
+ onLogout,
+}: {
+ user: AuthUser | null;
+ authLoading: boolean;
+ theme: Theme;
+ onToggleTheme: () => void;
+ onLogout: () => void;
+}) {
+ if (authLoading) return ;
+ return (
+
+
+
+ );
+}
+
/**
* アプリケーション全体のルート定義。
* パスとページコンポーネントの対応を管理する。
@@ -40,11 +73,25 @@ export default function AppRoutes({
} />
- {/* 認証済みルート */}
+ {/* 職務経歴書: 認証有無の両対応（未ログインはお試し入力、保存時にログインを促す） */}
+
+ }
+ />
+
+ {/* 認証済み専用ルート（GitHub連携・ブログ連携） */}
}>
}
>
- } />
} />
} />
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e11b172e..7cb3efdf 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2,7 +2,7 @@
color-scheme: light;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
- /* Layout（サイドバー幅・モバイル上部バー高。AuthenticatedLayout とモーダルのオフセットで共用） */
+ /* Layout（サイドバー幅・モバイル上部バー高。SidebarLayout とモーダルのオフセットで共用） */
--sidebar-width: 220px;
--topbar-height: 48px;
diff --git a/frontend/src/utils/careerDraft.test.ts b/frontend/src/utils/careerDraft.test.ts
new file mode 100644
index 00000000..0697f89b
--- /dev/null
+++ b/frontend/src/utils/careerDraft.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import { createInitialCareerForm } from "../formMappers";
+import { clearCareerDraft, loadCareerDraft, saveCareerDraft } from "./careerDraft";
+
+describe("careerDraft", () => {
+ beforeEach(() => {
+ sessionStorage.clear();
+ vi.restoreAllMocks();
+ });
+
+ it("save → load で同じ内容を復元できる", () => {
+ const form = { ...createInitialCareerForm(), full_name: "山田太郎" };
+ saveCareerDraft(form);
+
+ expect(loadCareerDraft()).toEqual(form);
+ });
+
+ it("ドラフト未保存なら load は null を返す", () => {
+ expect(loadCareerDraft()).toBeNull();
+ });
+
+ it("clear すると load は null になる", () => {
+ saveCareerDraft({ ...createInitialCareerForm(), full_name: "削除対象" });
+ clearCareerDraft();
+
+ expect(loadCareerDraft()).toBeNull();
+ });
+
+ it("壊れた JSON は null を返し、退避領域を掃除する", () => {
+ sessionStorage.setItem("career_draft", "{壊れた");
+ // 警告ログは抑止する（テスト出力を汚さない）
+ vi.spyOn(console, "warn").mockImplementation(() => {});
+
+ expect(loadCareerDraft()).toBeNull();
+ expect(sessionStorage.getItem("career_draft")).toBeNull();
+ });
+
+ it("形が不正なドラフト（旧フォーマット等）は null を返し破棄する", () => {
+ // パースは成功するが CareerFormState の必須形（experiences 配列等）を満たさない。
+ sessionStorage.setItem("career_draft", JSON.stringify({ full_name: "山田太郎" }));
+ vi.spyOn(console, "warn").mockImplementation(() => {});
+
+ expect(loadCareerDraft()).toBeNull();
+ expect(sessionStorage.getItem("career_draft")).toBeNull();
+ });
+});
diff --git a/frontend/src/utils/careerDraft.ts b/frontend/src/utils/careerDraft.ts
new file mode 100644
index 00000000..a82c5982
--- /dev/null
+++ b/frontend/src/utils/careerDraft.ts
@@ -0,0 +1,68 @@
+import type { CareerFormState } from "../payloadBuilders";
+
+/**
+ * 未ログインで入力した職務経歴書ドラフトを OAuth 往復の間だけ退避するユーティリティ。
+ *
+ * ## なぜ sessionStorage か
+ * GitHub OAuth は `window.location.assign` で全画面遷移するため、入力中フォームを保持する
+ * Redux `formCache` は redux-persist の blacklist（PII 保護）対象で復元されない。
+ * sessionStorage は OAuth 往復（同一タブ内の全画面ロード）を生き残ることが既存の CSRF state
+ * 管理（GitHubCallbackPage）で実証済みのため、これに合わせてドラフトを橋渡しする。
+ *
+ * ## ライフサイクル
+ * - 保存ボタン押下時（未ログイン）に `saveCareerDraft` で退避し、ログイン促進モーダルを開く。
+ * - ログイン完了後に `loadCareerDraft` で読み出し、フォームへ復元したら `clearCareerDraft` で消す。
+ * - タブを閉じれば自然に消える（PII をディスクへ残さない）。
+ */
+const CAREER_DRAFT_KEY = "career_draft";
+
+/** ドラフトを sessionStorage へ退避する。直列化に失敗しても致命ではないのでログのみ。 */
+export function saveCareerDraft(form: CareerFormState): void {
+ try {
+ sessionStorage.setItem(CAREER_DRAFT_KEY, JSON.stringify(form));
+ } catch (error) {
+ console.warn("職務経歴書ドラフトの退避に失敗しました", error);
+ }
+}
+
+/**
+ * パース済みオブジェクトが CareerFormState の最低限の形を満たすかを検証する。
+ * 旧フォーマットや破損データを復元してフォーム描画時に落ちる（experiences.map 等）のを防ぐ軽量チェック。
+ */
+function isCareerDraft(value: unknown): value is CareerFormState {
+ if (typeof value !== "object" || value === null) return false;
+ const v = value as Record;
+ return (
+ typeof v.full_name === "string" &&
+ typeof v.career_summary === "string" &&
+ typeof v.self_pr === "string" &&
+ Array.isArray(v.experiences) &&
+ Array.isArray(v.qualifications)
+ );
+}
+
+/** 退避済みドラフトを読み出す。存在しない / 壊れている / 形が不正な場合は null（破棄する）。 */
+export function loadCareerDraft(): CareerFormState | null {
+ const raw = sessionStorage.getItem(CAREER_DRAFT_KEY);
+ if (!raw) return null;
+ let parsed: unknown;
+ try {
+ parsed = JSON.parse(raw);
+ } catch (error) {
+ console.warn("職務経歴書ドラフトの読み出しに失敗しました", error);
+ clearCareerDraft();
+ return null;
+ }
+ // パースは成功したが想定の形でない（旧フォーマット等）場合も破棄する。
+ if (!isCareerDraft(parsed)) {
+ console.warn("職務経歴書ドラフトの形式が不正なため破棄します");
+ clearCareerDraft();
+ return null;
+ }
+ return parsed;
+}
+
+/** 退避済みドラフトを破棄する。 */
+export function clearCareerDraft(): void {
+ sessionStorage.removeItem(CAREER_DRAFT_KEY);
+}