fix: 오류 수정

src/features/tech-log/presentation/studio/components/question-fields.tsx

@@ -1,7 +1,20 @@
 import type { components } from "../../../contracts/studio/generated.ts";
 import { createLocalId } from "../../../domain/studio/local-id.ts";
+import { FieldNotice, type FieldIssue } from "./field-issues.tsx";
 import { OrderedTextList } from "./ordered-text-list.tsx";
 
+/** 이 화면이 자기 칸 아래에 보여 줄 수 있는 경로. */
+export const QUESTION_FIELD_PATHS = [
+  "/questionStatus",
+  "/facts",
+  "/assumptions",
+  "/unknowns",
+  "/constraints",
+  "/options",
+  "/nextValidation",
+  "/resolution",
+] as const;
+
 type CatalogEntry = components["schemas"]["CatalogEntry"];
 type QuestionInput = components["schemas"]["QuestionInput"];
 type QuestionOption = components["schemas"]["QuestionOption"];
@@ -10,7 +23,7 @@ function orderedOptions(options: QuestionOption[]): QuestionOption[] {
   return options.map((option, order) => ({ ...option, order }));
 }
 
-export function QuestionFields({ draft, evidence, onChange }: { draft: QuestionInput; evidence: CatalogEntry[]; onChange(draft: QuestionInput): void }) {
+export function QuestionFields({ draft, evidence, issues, onChange }: { draft: QuestionInput; evidence: CatalogEntry[]; issues: readonly FieldIssue[]; onChange(draft: QuestionInput): void }) {
   const update = (patch: Partial<QuestionInput>) => onChange({ ...draft, ...patch });
   const moveOption = (index: number, delta: -1 | 1) => {
     const target = index + delta;
@@ -26,12 +39,17 @@ export function QuestionFields({ draft, evidence, onChange }: { draft: QuestionI
         const value = event.currentTarget.value;
         if (value === "RESOLVED") update({ questionStatus: "RESOLVED", resolution: draft.resolution ?? { summary: "", evidenceTargetId: null, linkLabel: "" } });
         else update({ questionStatus: value === "OPEN" ? "OPEN" : null, resolution: null });
-      }}><option value="">아직 정하지 않음</option><option value="OPEN">OPEN</option><option value="RESOLVED">RESOLVED</option></select></label>
+      }}><option value="">아직 정하지 않음</option><option value="OPEN">OPEN</option><option value="RESOLVED">RESOLVED</option></select><FieldNotice issues={issues} path="/questionStatus" /></label>
       <OrderedTextList label="사실" fieldId="studio-field-facts" items={draft.facts} onChange={(facts) => update({ facts })} />
+      <FieldNotice issues={issues} path="/facts" />
       <OrderedTextList label="가정" fieldId="studio-field-assumptions" items={draft.assumptions} onChange={(assumptions) => update({ assumptions })} />
+      <FieldNotice issues={issues} path="/assumptions" />
       <OrderedTextList label="미지수" fieldId="studio-field-unknowns" items={draft.unknowns} onChange={(unknowns) => update({ unknowns })} />
+      <FieldNotice issues={issues} path="/unknowns" />
       <OrderedTextList label="제약" fieldId="studio-field-constraints" items={draft.constraints} onChange={(constraints) => update({ constraints })} />
+      <FieldNotice issues={issues} path="/constraints" />
       <fieldset id="studio-field-options" className="studio-ordered-list" tabIndex={-1}><legend>선택지</legend>
+        <FieldNotice issues={issues} path="/options" />
         {draft.options.length === 0 ? <p>아직 입력한 선택지가 없습니다.</p> : null}
         {draft.options.map((option, index) => <div className="studio-ordered-item" key={option.id}>
           <label><span>선택지 {index + 1} 제목</span><input value={option.title} onChange={(event) => update({ options: orderedOptions(draft.options.map((candidate, candidateIndex) => candidateIndex === index ? { ...candidate, title: event.currentTarget.value } : candidate)) })} /></label>
@@ -40,8 +58,9 @@ export function QuestionFields({ draft, evidence, onChange }: { draft: QuestionI
         </div>)}
         <button className="studio-add-item" type="button" disabled={draft.options.length >= 50} onClick={() => { if (draft.options.length < 50) update({ options: orderedOptions([...draft.options, { id: createLocalId("option"), title: "", description: "", order: draft.options.length }]) }); }}>선택지 추가</button>
       </fieldset>
-      <label className="studio-field studio-field--wide"><span>다음 검증</span><textarea value={draft.nextValidation} onChange={(event) => update({ nextValidation: event.currentTarget.value })} /></label>
+      <label className="studio-field studio-field--wide"><span>다음 검증</span><textarea value={draft.nextValidation} onChange={(event) => update({ nextValidation: event.currentTarget.value })} /><FieldNotice issues={issues} path="/nextValidation" /></label>
       {draft.questionStatus === "RESOLVED" && draft.resolution ? <fieldset className="studio-resolution-fields"><legend>해결 내용</legend>
+        <FieldNotice issues={issues} path="/resolution" />
         <label className="studio-field studio-field--wide"><span>해결 요약</span><textarea value={draft.resolution.summary} onChange={(event) => update({ resolution: { ...draft.resolution!, summary: event.currentTarget.value } })} /></label>
         <label className="studio-field"><span>해결 근거</span><select value={draft.resolution.evidenceTargetId ?? ""} onChange={(event) => update({ resolution: { ...draft.resolution!, evidenceTargetId: event.currentTarget.value || null } })}><option value="">근거 선택</option>{evidence.map((entry) => <option key={entry.id} value={entry.id}>{entry.label}</option>)}</select></label>
         <label className="studio-field"><span>근거 링크 문구</span><input value={draft.resolution.linkLabel} onChange={(event) => update({ resolution: { ...draft.resolution!, linkLabel: event.currentTarget.value } })} /></label>