feat: port TechLog Studio editors

2026-08-15 23:41:34 +09:00
parent 887f5e6eb1
commit 5933265975
16 changed files with 879 additions and 3 deletions
@@ -0,0 +1,51 @@
+import type { components } from "../../../contracts/studio/generated.ts";
+import { createLocalId } from "../../../domain/studio/local-id.ts";
+import { OrderedTextList } from "./ordered-text-list.tsx";
+
+type CatalogEntry = components["schemas"]["CatalogEntry"];
+type QuestionInput = components["schemas"]["QuestionInput"];
+type QuestionOption = components["schemas"]["QuestionOption"];
+
+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 }) {
+  const update = (patch: Partial<QuestionInput>) => onChange({ ...draft, ...patch });
+  const moveOption = (index: number, delta: -1 | 1) => {
+    const target = index + delta;
+    if (target < 0 || target >= draft.options.length) return;
+    const next = [...draft.options];
+    [next[index], next[target]] = [next[target]!, next[index]!];
+    update({ options: orderedOptions(next) });
+  };
+  return (
+    <section className="studio-editor-section" aria-labelledby="studio-question-fields-title">
+      <div className="studio-editor-section-heading"><p className="studio-eyebrow">QUESTION</p><h2 id="studio-question-fields-title">판단과 다음 검증</h2></div>
+      <label className="studio-field"><span>질문 상태</span><select value={draft.questionStatus ?? ""} onChange={(event) => {
+        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>
+      <OrderedTextList label="사실" fieldId="studio-field-facts" items={draft.facts} onChange={(facts) => update({ facts })} />
+      <OrderedTextList label="가정" fieldId="studio-field-assumptions" items={draft.assumptions} onChange={(assumptions) => update({ assumptions })} />
+      <OrderedTextList label="미지수" fieldId="studio-field-unknowns" items={draft.unknowns} onChange={(unknowns) => update({ unknowns })} />
+      <OrderedTextList label="제약" fieldId="studio-field-constraints" items={draft.constraints} onChange={(constraints) => update({ constraints })} />
+      <fieldset id="studio-field-options" className="studio-ordered-list" tabIndex={-1}><legend>선택지</legend>
+        {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>
+          <label><span>선택지 {index + 1} 설명</span><textarea value={option.description} onChange={(event) => update({ options: orderedOptions(draft.options.map((candidate, candidateIndex) => candidateIndex === index ? { ...candidate, description: event.currentTarget.value } : candidate)) })} /></label>
+          <div className="studio-item-actions"><button type="button" onClick={() => moveOption(index, -1)} disabled={index === 0}>위로</button><button type="button" onClick={() => moveOption(index, 1)} disabled={index === draft.options.length - 1}>아래로</button><button type="button" onClick={() => update({ options: orderedOptions(draft.options.filter((_, candidateIndex) => candidateIndex !== index)) })}>삭제</button></div>
+        </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>
+      {draft.questionStatus === "RESOLVED" && draft.resolution ? <fieldset className="studio-resolution-fields"><legend>해결 내용</legend>
+        <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>
+      </fieldset> : null}
+    </section>
+  );
+}