feat(frontend): 職務経歴書の入力モーダル改善（即時保存・自己PR/職務要約の専用入力UI）#310
Merged
Conversation
プロジェクトモーダル: - 保存ボタンを廃止し、入力のたびに formCache へ即時反映 - 新規プロジェクトは初回入力時に1度だけ追加し重複生成を防止 - キャンセルを × 閉じるボタンに変更、モーダル内の未保存マークを撤去 自己PR・職務要約: - フォーム本体はプレビュー+編集ボタンに集約し、入力は専用モーダルへ分離 - モーダル右に取り込みファイル参照、右下に文字数カウント（空白除外） - 必須未入力で保存時は該当モーダルを自動オープン 共通化・後始末: - モーダル外枠を ModalShell(components/ui) に抽出し ProjectModal と共有 - 文字数カウントを utils/text.ts に分離 - 未参照になった useProjectFormDirty を削除 https://claude.ai/code/session_01S8gCEfqCqjRjC9kuLogy2M
自己PR・職務要約の文字数カウントを生文字数ではなく描画後の表示テキストの 文字数にする。`**` などの記法・リンクURL・空白はカウント対象から外す。 - utils/markdown.ts に markdownToPlainText を追加（renderMarkdown の sanitize 済み HTML を DOMParser で解釈し textContent を抽出。live DOM へは挿入しない） - CharCount は countNonWhitespace(markdownToPlainText(value)) で算出 - markdownToPlainText のユニットテストを追加 https://claude.ai/code/session_01S8gCEfqCqjRjC9kuLogy2M
|
Warning Review limit reached
More reviews will be available in 18 minutes and 37 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (9)
📝 WalkthroughWalkthroughThis PR refactors resume form editing by introducing a reusable modal shell component and moving inline markdown field editing (career summary, self-PR) into dedicated modals with auto-focused, full-height textareas and character counts. ProjectModal is simultaneously refactored to auto-save changes and delegate modal layout responsibility to the new ModalShell. ChangesModal-based markdown field editing with auto-save project workflows
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
main の校正機能（proofread）取り込みに伴う CareerResumeForm.tsx の競合を解消。 changes の baseline フォールバックは main 側のロジック（createInitialCareerForm()）を採用。 入力モーダル関連の変更は維持。 https://claude.ai/code/session_01S8gCEfqCqjRjC9kuLogy2M
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (2)
frontend/src/components/forms/ProjectModal.test.tsx (1)
51-72: ⚡ Quick winConsider adding test coverage for the "no-op on untouched modal" guard.
The test verifies that
onSaveis called immediately when input changes, but doesn't verify the critical guard mentioned inProjectModal.tsx:150— that opening and immediately closing the modal without edits prevents erroneous commits, especially during StrictMode double-execution.🧪 Suggested additional test case
+ it("モーダルを開いて編集せず閉じた場合は onSave を呼ばない", () => { + const onSave = vi.fn(); + const { unmount } = render( + <ProjectModal + project={emptyProject} + onSave={onSave} + onClose={vi.fn()} + techStackNamesByCategory={new Map()} + />, + ); + // 何も編集せずアンマウント + unmount(); + // onSave は一度も呼ばれていないこと + expect(onSave).not.toHaveBeenCalled(); + });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/forms/ProjectModal.test.tsx` around lines 51 - 72, Add a test in ProjectModal.test.tsx that verifies the "no-op on untouched modal" guard: render <ProjectModal project={emptyProject} onSave={onSave} onClose={onClose} ... />, do not change any inputs, immediately close the modal (simulate user closing by clicking the modal's close/cancel button via screen.getByRole('button', { name: /閉じる|キャンセル/ }) or fallback to calling the provided onClose mock), and assert onSave was not called (also repeat the open->close sequence or render inside React.StrictMode to simulate double-execution). Target the ProjectModal component and the onSave/onClose mocks to locate where to add the assertion.frontend/src/components/forms/ProjectModal.tsx (1)
152-157: Autosave useEffect guard/deps: reference-equality and onSave exclusion are consistent
local === initialRef.currentis mount-scoped:useProjectModalForminitializeslocalonce viainitProject(project)(structuredClone) and every edit updateslocalwith a new object reference, so the guard prevents the initial save (including React StrictMode’s double-mount).- Excluding
onSavefrom theuseEffect([local])deps is safe in this setup: the effect only runs whenlocal’s reference changes, and uses theonSavecaptured in the same render that produced thatlocal(soonSave/handleProjectSaveidentity changes won’t cause re-saves by themselves).useProjectModalStatealso updatesmodalTarget.projIndexafter the initial append, matching the intended “append once, then update” behavior.- Optional: avoid the
eslint-disableby keepingonSavein auseRefand still triggering only on[local].🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/forms/ProjectModal.tsx` around lines 152 - 157, The autosave effect currently disables eslint for excluding onSave; instead create a stable ref for the callback (e.g., const onSaveRef = useRef(onSave)) and update onSaveRef.current = onSave in a small effect or useLayoutEffect, then in the autosave effect call onSaveRef.current(local) and remove the eslint-disable; this keeps the guard using local and initialRef.current intact and avoids depending on onSave while preserving the intended behavior in useProjectModalForm / ProjectModal.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/e2e/career-field-modal.spec.ts`:
- Around line 3-4: Replace the hard-coded UI literal ("9 文字") in the e2e test
assertions with the shared SSoT formatter introduced in this PR (use the
charCountLabel helper or UI_MESSAGES.charCountLabel(...) instead of a literal);
update both occurrences (around the import area and the later assertion at line
~64) to call the formatter with the numeric count so the test derives its
expected string from the single source of truth.
- Around line 83-85: The assertion after clicking the save/update button is too
broad (await expect(page.locator("textarea")).toBeVisible()) and may match
unrelated textareas; narrow it to the specific 職務要約 field by asserting the
modal/field element directly (e.g., replace the textarea locator with a targeted
locator such as page.getByLabel("職務要約") or page.getByRole("textbox", { name:
/職務要約/ })) so the check verifies that the 職務要約 field/modal opened after await
page.getByRole("button", { name: /更新する|保存する/ }).click().
In `@frontend/src/components/forms/CareerResumeForm.tsx`:
- Around line 224-233: Replace the hardcoded title literals in
CareerResumeForm's MarkdownFieldModal with SSoT constants: add FIELD_SELF_PR =
"自己PR" and FIELD_CAREER_SUMMARY = "職務要約" to the messages/constants export
(frontend/src/constants/messages.ts), then change the title expression in
CareerResumeForm (where MarkdownFieldModal is rendered based on editingField) to
use those constants (e.g., editingField === "self_pr" ? messages.FIELD_SELF_PR :
messages.FIELD_CAREER_SUMMARY), keeping the existing onChange/onClose/invalid
logic intact.
In `@frontend/src/components/forms/MarkdownFieldTrigger.module.css`:
- Around line 15-34: The .trigger rule currently uses all: unset which removes
native focus outlines, so add a keyboard-visible focus style by defining
.trigger:focus-visible (and ensure the element is focusable) to restore an
accessible outline/box-shadow/border-color on keyboard focus; update the
.trigger selector usage where the button element is rendered (the trigger
element/class) to include tabindex or ensure it's a <button>, then add a
.trigger:focus-visible rule that sets a visible outline or border-color (e.g.,
var(--accent)) and optional box-shadow to match hover styling.
In `@frontend/src/components/forms/MarkdownFieldTrigger.tsx`:
- Line 63: Add a new SSoT constant EDIT_LABEL = "編集" (as const) to
frontend/src/constants/messages.ts, then replace the string literal "を編集" in
MarkdownFieldTrigger.tsx (the aria-label construction using label + "を編集") to
use the messages constant (concatenate label and the EDIT_LABEL constant) so the
displayed suffix comes from the centralized messages file; reference the
constant name EDIT_LABEL and the component MarkdownFieldTrigger.tsx when making
the change.
- Line 69: Replace the hard-coded label "編集" in the MarkdownFieldTrigger
component (the span using className={styles.editLabel}) with a SSoT message
constant: add EDIT_LABEL: "編集" to the messages constants file if it doesn't
exist, import the messages constant into MarkdownFieldTrigger, and use that
constant instead of the literal so the span renders messages.
In `@frontend/src/components/ui/ModalShell.module.css`:
- Around line 44-57: The .closeButton rule removes native focus but doesn't add
a replacement focus indicator; add a visible, high-contrast keyboard focus style
(use .closeButton:focus-visible) that restores an outline or ring/box-shadow
(matching the button's border-radius) and does not rely on color-only changes so
keyboard users can see focus; ensure you target :focus-visible rather than
:focus to avoid showing the indicator on mouse clicks and keep existing hover
styles intact.
In `@frontend/src/components/ui/ModalShell.tsx`:
- Around line 54-66: The ModalShell component's modal container (styles.modal)
needs proper ARIA and keyboard support: add role="dialog" and aria-modal="true"
to the modal div, add a useEffect hook that listens for 'Escape' keydown and
calls onClose (remember to import useEffect and include onClose in deps), and
implement focus trapping when the modal is open (use a small library like
focus-trap-react or a custom hook to move focus into the modal on open and
prevent Tab from escaping, and restore focus on close).
---
Nitpick comments:
In `@frontend/src/components/forms/ProjectModal.test.tsx`:
- Around line 51-72: Add a test in ProjectModal.test.tsx that verifies the
"no-op on untouched modal" guard: render <ProjectModal project={emptyProject}
onSave={onSave} onClose={onClose} ... />, do not change any inputs, immediately
close the modal (simulate user closing by clicking the modal's close/cancel
button via screen.getByRole('button', { name: /閉じる|キャンセル/ }) or fallback to
calling the provided onClose mock), and assert onSave was not called (also
repeat the open->close sequence or render inside React.StrictMode to simulate
double-execution). Target the ProjectModal component and the onSave/onClose
mocks to locate where to add the assertion.
In `@frontend/src/components/forms/ProjectModal.tsx`:
- Around line 152-157: The autosave effect currently disables eslint for
excluding onSave; instead create a stable ref for the callback (e.g., const
onSaveRef = useRef(onSave)) and update onSaveRef.current = onSave in a small
effect or useLayoutEffect, then in the autosave effect call
onSaveRef.current(local) and remove the eslint-disable; this keeps the guard
using local and initialRef.current intact and avoids depending on onSave while
preserving the intended behavior in useProjectModalForm / ProjectModal.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: b163034d-8d26-468a-9783-8087ecaef598
📒 Files selected for processing (30)
.claude/rules/frontend/architecture.mdfrontend/e2e/career-dirty-indicator.spec.tsfrontend/e2e/career-field-modal.spec.tsfrontend/src/components/forms/CareerResumeForm.tsxfrontend/src/components/forms/MarkdownFieldModal.tsxfrontend/src/components/forms/MarkdownFieldTrigger.module.cssfrontend/src/components/forms/MarkdownFieldTrigger.tsxfrontend/src/components/forms/MarkdownTextarea.module.cssfrontend/src/components/forms/MarkdownTextarea.tsxfrontend/src/components/forms/ProjectModal.module.cssfrontend/src/components/forms/ProjectModal.test.tsxfrontend/src/components/forms/ProjectModal.tsxfrontend/src/components/forms/sections/CareerBasicInfoSection.tsxfrontend/src/components/forms/sections/CareerExperienceSection.tsxfrontend/src/components/forms/sections/CareerSelfPrSection.tsxfrontend/src/components/ui/CharCount.module.cssfrontend/src/components/ui/CharCount.tsxfrontend/src/components/ui/ModalShell.module.cssfrontend/src/components/ui/ModalShell.tsxfrontend/src/constants/messages.tsfrontend/src/hooks/career/useCareerExperienceMutators.test.tsfrontend/src/hooks/career/useCareerExperienceMutators.tsfrontend/src/hooks/career/useProjectFormDirty.test.tsfrontend/src/hooks/career/useProjectFormDirty.tsfrontend/src/hooks/career/useProjectModalState.test.tsfrontend/src/hooks/career/useProjectModalState.tsfrontend/src/utils/markdown.test.tsfrontend/src/utils/markdown.tsfrontend/src/utils/text.test.tsfrontend/src/utils/text.ts
💤 Files with no reviewable changes (2)
- frontend/src/hooks/career/useProjectFormDirty.test.ts
- frontend/src/hooks/career/useProjectFormDirty.ts
CodeRabbit のレビュー指摘のうち妥当なものを反映。 - ModalShell に role="dialog" / aria-modal / aria-labelledby と Escape での クローズを追加（ProjectModal・入力モーダル共通でキーボード操作性を改善） - ModalShell / MarkdownFieldTrigger のボタンに :focus-visible を追加し キーボードフォーカスを可視化（all:unset で消えたネイティブ outline の代替） - 自己PR / 職務要約 / 編集 ラベルを messages.ts の定数（FIELD_SELF_PR / FIELD_CAREER_SUMMARY / EDIT）へ集約し、各所のリテラルを置換 - e2e: 文字数アサートを charCountLabel(9) に、自動オープン確認をモーダル タイトル完全一致に変更（SSoT 化・対象限定） focus-trap（タブ移動の閉じ込め）は依存追加を伴うため本PRの範囲外とする。 https://claude.ai/code/session_01S8gCEfqCqjRjC9kuLogy2M
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
職務経歴書フォームの入力体験を 2 点改善します。「Redux 更新」はフォーム一時キャッシュ（
store/formCacheSlice）への即時反映を指し、サーバ永続化は従来どおりフォーム上部の保存ボタン経由です。変更内容
1. プロジェクト編集モーダル: 即時保存 + × 閉じる
useProjectModalState+getProjectCount追加）。useProjectFormDirtyを削除。2. 自己PR・職務要約の専用入力モーダル
MarkdownFieldTrigger）に集約。氏名はインライン維持。MarkdownFieldModal）: 左に大きな入力欄、右に取り込みファイル参照（ResumeSourceTracePanel再利用）、右下に文字数カウント。**・#・リンク URL 等は除外）。共通化 / その他
components/ui/ModalShellに抽出し、ProjectModal と新モーダルで共有（DRY）。MarkdownTextareaに高さ伸長用のfillオプションを追加（既定 off で既存挙動は不変）。messages.ts（MODAL_CLOSE/FIELD_NOT_ENTERED/charCountLabel）へ集約。テスト
eslintクリーン /vitest272 pass /tsc -b+vite build成功markdownToPlainTextのユニットテスト追加career-field-modal.spec.ts（モーダル入力・文字数・自動オープン）すべて green注意（要対応）
CareerResumeForm.tsxが競合します。マージ前に競合解消が必要です（別途対応可否を確認します）。https://claude.ai/code/session_01S8gCEfqCqjRjC9kuLogy2M
Generated by Claude Code
Summary by CodeRabbit
New Features
Tests