@@ -409,9 +627,13 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number
) : null}
@@ -574,7 +796,7 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number
id="reply-draft"
aria-label="답장 초안"
value={draft}
- onChange={(e) => setDraft(e.target.value)}
+ onChange={(e) => handleDraftChange(e.target.value)}
placeholder="답장 초안을 작성하거나 판단 보조로 초안을 생성하세요..."
className="min-h-[150px] rounded-2xl border-purple-500/20 bg-background/70"
/>
@@ -590,7 +812,7 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number
{draft && (
+
setSourceDrawerOpen(false)}
+ onOpenOriginal={handleOpenOriginalSource}
+ />
);
}
diff --git a/frontend/src/components/NetworkGraph.test.tsx b/frontend/src/components/NetworkGraph.test.tsx
index f1f43c584..061e162e2 100644
--- a/frontend/src/components/NetworkGraph.test.tsx
+++ b/frontend/src/components/NetworkGraph.test.tsx
@@ -5,10 +5,23 @@ import { afterEach, describe, expect, it, vi } from "vitest";
const destroyMock = vi.fn();
const fitMock = vi.fn();
+const moveToMock = vi.fn();
+const offMock = vi.fn();
+const onMock = vi.fn();
+const selectEdgesMock = vi.fn();
+const selectNodesMock = vi.fn();
vi.mock("vis-network", () => ({
Network: vi.fn(function MockNetwork() {
- return { destroy: destroyMock, fit: fitMock };
+ return {
+ destroy: destroyMock,
+ fit: fitMock,
+ moveTo: moveToMock,
+ off: offMock,
+ on: onMock,
+ selectEdges: selectEdgesMock,
+ selectNodes: selectNodesMock,
+ };
}),
}));
@@ -190,6 +203,93 @@ describe("NetworkGraph", () => {
expect(mountedContainer.textContent).not.toContain("nodes and");
});
+ it("exposes accessible relationship detail and zoom controls for the graph", async () => {
+ const fetchMock = vi.fn(() =>
+ Promise.resolve(
+ jsonResponse({
+ nodes: [
+ { id: "sender-1", label: "김지현", title: "PM" },
+ { id: "recipient-1", label: "사용자", title: "Owner" },
+ { id: "calendar-1", label: "일정", title: "Schedule" },
+ ],
+ edges: [
+ { source: "sender-1", target: "recipient-1", title: "메일 2건" },
+ { source: "recipient-1", target: "calendar-1", title: "일정 후보 1건" },
+ ],
+ }),
+ ),
+ );
+ vi.stubGlobal("fetch", fetchMock);
+
+ await renderGraph();
+ await flushAsyncWork();
+
+ const mountedContainer = getMountedContainer();
+ const buttons = Array.from(mountedContainer.querySelectorAll("button"));
+ const relationshipButton = buttons.find((button) => button.textContent === "첫 관계 보기");
+ const zoomButton = buttons.find((button) => button.textContent === "그래프 확대");
+ const fitButton = buttons.find((button) => button.textContent === "전체 그래프 맞춤");
+
+ expect(relationshipButton).toBeInstanceOf(HTMLButtonElement);
+ expect(zoomButton).toBeInstanceOf(HTMLButtonElement);
+ expect(fitButton).toBeInstanceOf(HTMLButtonElement);
+
+ await act(async () => {
+ relationshipButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+ });
+
+ expect(selectEdgesMock).toHaveBeenCalledWith(["relationship-0-sender-1-recipient-1"]);
+ expect(fitMock).toHaveBeenCalledWith({
+ nodes: ["sender-1", "recipient-1"],
+ animation: false,
+ });
+ expect(mountedContainer.textContent).toContain("선택된 관계: 김지현 -> 사용자 (메일 2건)");
+ expect(mountedContainer.textContent).toContain("첫 관계를 선택했습니다.");
+
+ const relationshipSelect = mountedContainer.querySelector('select[aria-label="관계 선택"]');
+ expect(relationshipSelect).toBeInstanceOf(HTMLSelectElement);
+
+ await act(async () => {
+ if (relationshipSelect instanceof HTMLSelectElement) {
+ relationshipSelect.value = "relationship-1-recipient-1-calendar-1";
+ relationshipSelect.dispatchEvent(new Event("change", { bubbles: true }));
+ }
+ });
+
+ expect(selectEdgesMock).toHaveBeenCalledWith(["relationship-1-recipient-1-calendar-1"]);
+ expect(mountedContainer.textContent).toContain("선택된 관계: 사용자 -> 일정 (일정 후보 1건)");
+ expect(mountedContainer.textContent).toContain("선택한 관계를 열었습니다.");
+
+ const nodeSelect = mountedContainer.querySelector('select[aria-label="노드 선택"]');
+ expect(nodeSelect).toBeInstanceOf(HTMLSelectElement);
+
+ await act(async () => {
+ if (nodeSelect instanceof HTMLSelectElement) {
+ nodeSelect.value = "calendar-1";
+ nodeSelect.dispatchEvent(new Event("change", { bubbles: true }));
+ }
+ });
+
+ expect(selectNodesMock).toHaveBeenCalledWith(["calendar-1"]);
+ expect(fitMock).toHaveBeenLastCalledWith({ nodes: ["calendar-1"], animation: false });
+ expect(mountedContainer.textContent).toContain("선택된 노드: 일정");
+ expect(mountedContainer.textContent).toContain("선택한 노드를 열었습니다.");
+
+ await act(async () => {
+ zoomButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+ });
+
+ expect(moveToMock).toHaveBeenCalledWith({ scale: 1.15, animation: false });
+ expect(mountedContainer.textContent).toContain("그래프 확대 완료");
+
+ await act(async () => {
+ fitButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+ });
+
+ expect(fitMock).toHaveBeenLastCalledWith({ animation: false });
+ expect(mountedContainer.textContent).toContain("그래프 맞춤 완료");
+ });
+
it("normalizes backend source target edges before rendering the graph", async () => {
const fetchMock = vi.fn(() =>
Promise.resolve(
@@ -210,7 +310,12 @@ describe("NetworkGraph", () => {
expect(Network).toHaveBeenCalledTimes(1);
const networkData = vi.mocked(Network).mock.calls[0]?.[1];
const edges = Array.isArray(networkData?.edges) ? networkData.edges : [];
- expect(edges[0]).toMatchObject({ from: "sender-1", to: "recipient-1", weight: 2 });
+ expect(edges[0]).toMatchObject({
+ from: "sender-1",
+ id: "relationship-0-sender-1-recipient-1",
+ to: "recipient-1",
+ weight: 2,
+ });
expect(edges[0]).not.toHaveProperty("source");
expect(edges[0]).not.toHaveProperty("target");
});
diff --git a/frontend/src/components/NetworkGraph.tsx b/frontend/src/components/NetworkGraph.tsx
index 7a5750b13..ebe4424bd 100644
--- a/frontend/src/components/NetworkGraph.tsx
+++ b/frontend/src/components/NetworkGraph.tsx
@@ -10,6 +10,7 @@ interface Node {
}
interface Edge {
+ id?: number | string;
from: number | string;
to: number | string;
[key: string]: unknown;
@@ -33,6 +34,11 @@ interface NormalizedNetworkData {
edges: Edge[];
}
+interface GraphSelectionEvent {
+ nodes?: Array
;
+ edges?: Array;
+}
+
function textOnlyTooltip(value: unknown): HTMLElement {
const tooltip = document.createElement('div');
tooltip.textContent = value == null ? '' : String(value);
@@ -79,6 +85,15 @@ function isGraphId(value: unknown): value is number | string {
return typeof value === 'number' || typeof value === 'string';
}
+function graphIdEquals(left: unknown, right: unknown) {
+ return isGraphId(left) && isGraphId(right) && String(left) === String(right);
+}
+
+function stableEdgeId(edge: Edge, index: number) {
+ if (isGraphId(edge.id)) return edge.id;
+ return `relationship-${index}-${String(edge.from)}-${String(edge.to)}`;
+}
+
function normalizeEdge(edge: ApiEdge): Edge | null {
const from = edge.from ?? edge.source;
const to = edge.to ?? edge.target;
@@ -98,22 +113,46 @@ function normalizeEdge(edge: ApiEdge): Edge | null {
function sanitizeNetworkData(data: NetworkData): NormalizedNetworkData {
return {
nodes: data.nodes.map(sanitizeGraphItem),
- edges: data.edges.flatMap((edge) => {
+ edges: data.edges.flatMap((edge, index) => {
const normalized = normalizeEdge(edge);
- return normalized ? [sanitizeGraphItem(normalized)] : [];
+ return normalized ? [sanitizeGraphItem({ ...normalized, id: stableEdgeId(normalized, index) })] : [];
}),
};
}
+function titleText(value: unknown) {
+ if (typeof HTMLElement !== 'undefined' && value instanceof HTMLElement) {
+ return value.textContent?.trim() ?? '';
+ }
+ return value == null ? '' : String(value).trim();
+}
+
+function findNodeLabel(nodes: Node[], id: number | string) {
+ const node = nodes.find((candidate) => graphIdEquals(candidate.id, id));
+ return String(node?.label ?? id);
+}
+
+function describeEdge(edge: Edge, nodes: Node[]) {
+ const fromLabel = findNodeLabel(nodes, edge.from);
+ const toLabel = findNodeLabel(nodes, edge.to);
+ const title = titleText(edge.title);
+ return title ? `${fromLabel} -> ${toLabel} (${title})` : `${fromLabel} -> ${toLabel}`;
+}
+
import { apiClient } from '@/lib/api-client';
export default function NetworkGraph() {
const containerRef = useRef(null);
+ const networkRef = useRef(null);
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
+ const [selectedGraphDetail, setSelectedGraphDetail] = useState(null);
+ const [graphActionStatus, setGraphActionStatus] = useState('그래프 준비 완료');
+ const [relationshipOptionId, setRelationshipOptionId] = useState('');
+ const [nodeOptionId, setNodeOptionId] = useState('');
useEffect(() => {
apiClient.get('/api/network/graph')
@@ -140,11 +179,46 @@ export default function NetworkGraph() {
nodes: { shape: 'dot', size: 16 },
edges: { arrows: 'to' }
});
+ networkRef.current = network;
const fitGraph = () => {
- network.fit({ animation: false });
+ network.fit?.({ animation: false });
+ };
+
+ const selectEdge = (edgeId: number | string) => {
+ const edge = edges.find((candidate) => graphIdEquals(candidate.id, edgeId));
+ if (!edge) return;
+ setRelationshipOptionId(String(edge.id));
+ setNodeOptionId('');
+ setSelectedGraphDetail(`선택된 관계: ${describeEdge(edge, nodes)}`);
+ setGraphActionStatus('그래프에서 관계를 선택했습니다.');
+ };
+
+ const selectNode = (nodeId: number | string) => {
+ setRelationshipOptionId('');
+ setNodeOptionId(String(nodeId));
+ setSelectedGraphDetail(`선택된 노드: ${findNodeLabel(nodes, nodeId)}`);
+ setGraphActionStatus('그래프에서 노드를 선택했습니다.');
+ };
+
+ const handleEdgeSelection = (event: GraphSelectionEvent) => {
+ const edgeId = event.edges?.[0];
+ if (isGraphId(edgeId)) selectEdge(edgeId);
+ };
+
+ const handleNodeSelection = (event: GraphSelectionEvent) => {
+ const nodeId = event.nodes?.[0];
+ if (isGraphId(nodeId)) selectNode(nodeId);
};
+ const canListenForSelection =
+ typeof network.on === 'function' && typeof network.off === 'function';
+
+ if (canListenForSelection) {
+ network.on('selectEdge', handleEdgeSelection);
+ network.on('selectNode', handleNodeSelection);
+ }
+
let resizeTimer: ReturnType | null = null;
const resizeObserver = typeof ResizeObserver === 'undefined'
? null
@@ -162,6 +236,13 @@ export default function NetworkGraph() {
clearTimeout(resizeTimer);
}
resizeObserver?.disconnect();
+ if (canListenForSelection) {
+ network.off('selectEdge', handleEdgeSelection);
+ network.off('selectNode', handleNodeSelection);
+ }
+ if (networkRef.current === network) {
+ networkRef.current = null;
+ }
network.destroy();
};
}
@@ -174,6 +255,71 @@ export default function NetworkGraph() {
.slice(0, 5);
}, [nodes]);
+ const firstEdge = edges[0] ?? null;
+ const relationshipOptions = useMemo(() => {
+ return edges.slice(0, 5).map((edge, index) => ({
+ edge,
+ id: String(edge.id),
+ label: `관계 ${index + 1}: ${describeEdge(edge, nodes)}`,
+ }));
+ }, [edges, nodes]);
+
+ const nodeOptions = useMemo(() => {
+ return nodes.slice(0, 8).map((node) => ({
+ id: String(node.id),
+ label: `노드: ${String(node.label ?? node.id)}`,
+ node,
+ }));
+ }, [nodes]);
+
+ const selectRelationship = (edge: Edge, status: string) => {
+ setRelationshipOptionId(String(edge.id));
+ setNodeOptionId('');
+ setSelectedGraphDetail(`선택된 관계: ${describeEdge(edge, nodes)}`);
+ setGraphActionStatus(status);
+ if (isGraphId(edge.id)) {
+ networkRef.current?.selectEdges?.([edge.id]);
+ }
+ networkRef.current?.fit?.({ nodes: [edge.from, edge.to], animation: false });
+ };
+
+ const selectGraphNode = (node: Node, status: string) => {
+ if (!isGraphId(node.id)) return;
+ setRelationshipOptionId('');
+ setNodeOptionId(String(node.id));
+ setSelectedGraphDetail(`선택된 노드: ${findNodeLabel(nodes, node.id)}`);
+ setGraphActionStatus(status);
+ networkRef.current?.selectNodes?.([node.id]);
+ networkRef.current?.fit?.({ nodes: [node.id], animation: false });
+ };
+
+ const handleSelectFirstRelationship = () => {
+ if (!firstEdge) return;
+ selectRelationship(firstEdge, '첫 관계를 선택했습니다.');
+ };
+
+ const handleRelationshipOptionChange = (value: string) => {
+ const edge = edges.find((candidate) => String(candidate.id) === value);
+ if (!edge) return;
+ selectRelationship(edge, '선택한 관계를 열었습니다.');
+ };
+
+ const handleNodeOptionChange = (value: string) => {
+ const node = nodes.find((candidate) => String(candidate.id) === value);
+ if (!node) return;
+ selectGraphNode(node, '선택한 노드를 열었습니다.');
+ };
+
+ const handleZoomGraph = () => {
+ networkRef.current?.moveTo?.({ scale: 1.15, animation: false });
+ setGraphActionStatus('그래프 확대 완료');
+ };
+
+ const handleFitGraph = () => {
+ networkRef.current?.fit?.({ animation: false });
+ setGraphActionStatus('그래프 맞춤 완료');
+ };
+
if (loading) {
return 관계 맥락을 불러오는 중입니다...
;
}
@@ -214,6 +360,71 @@ export default function NetworkGraph() {
관련 노드: {nodeLabels.join(', ')}
+ = {
low: '낮음',
};
+const projectEvidenceSourceOptions = [
+ { value: 'webdav_folder', label: 'WebDAV 폴더', description: '고객 소유 저장소 경계 기준' },
+ { value: 'thread', label: '스레드 근거', description: '메일 스레드 의사결정 기준' },
+ { value: 'document', label: '문서 근거', description: '문서 저장소 승인 기록 기준' },
+] satisfies { value: ProjectEvidenceSource; label: string; description: string }[];
+
function safeText(value: string | null | undefined, fallback = '') {
return toSafeReactText(value, fallback).trim() || fallback;
}
@@ -583,6 +590,9 @@ export function ProjectsLayout() {
userId: null,
organizationId: null,
});
+ const [evidenceDraft, setEvidenceDraft] = useState('WebDAV 프로젝트 폴더를 작업 경계로 사용합니다.');
+ const [evidenceSource, setEvidenceSource] = useState
('webdav_folder');
+ const [evidenceSaveStatus, setEvidenceSaveStatus] = useState(null);
useEffect(() => {
let cancelled = false;
@@ -639,6 +649,8 @@ export function ProjectsLayout() {
const projectEvidenceLabel = getProjectEvidenceLabel(activeProject.evidence);
const projectBoundaryLabel = getProjectBoundaryLabel(activeProject);
const workspaceScopeLabel = getWorkspaceScopeLabel(projectScope);
+ const selectedEvidenceOption = projectEvidenceSourceOptions.find((option) => option.value === evidenceSource) ?? projectEvidenceSourceOptions[0];
+ const savedEvidenceNote = safeText(evidenceDraft, '근거 메모 없음');
const currentTraceability = traceability?.project_uid === activeSemanticCandidate?.project_uid ? traceability : null;
const automationBrief = useMemo(() => buildAutomationBrief(currentTraceability?.objects ?? []), [currentTraceability]);
const reportDraftLayer = useMemo(() => buildProjectReportDraftLayer(currentTraceability?.objects ?? []), [currentTraceability]);
@@ -704,6 +716,10 @@ export function ProjectsLayout() {
};
}, [selectedEvidenceKey, selectedEvidenceObjectUid, selectedEvidenceProjectUid]);
+ function saveProjectEvidence() {
+ setEvidenceSaveStatus(`프로젝트 근거가 저장되었습니다: ${selectedEvidenceOption.label}`);
+ }
+
async function handleConfirmCandidate() {
if (!activeSemanticCandidate || confirmSubmitting) return;
setConfirmSubmitting(true);
@@ -1361,6 +1377,57 @@ export function ProjectsLayout() {
+
+
+
+
근거 편집
+
판매 심사용 판단 근거와 연결 원본을 저장합니다.
+
+
{selectedEvidenceOption.label}
+
+ 
