선생님 관리
diff --git a/apps/admin/src/components/conceptGraph/AddActionRowModal.tsx b/apps/admin/src/components/conceptGraph/AddActionRowModal.tsx
new file mode 100644
index 000000000..5789f9193
--- /dev/null
+++ b/apps/admin/src/components/conceptGraph/AddActionRowModal.tsx
@@ -0,0 +1,299 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'react-toastify';
+import { Plus, Search, Sparkles, X } from 'lucide-react';
+import { Button } from '@components';
+import { getActionEdgeType, getNodeType, getSheetNode, putSheetActionEdgeCell } from '@apis';
+import { useInvalidate } from '@hooks';
+
+import NodeSearchSelect from './NodeSearchSelect';
+
+import type { components } from '@/types/api/schema';
+
+type ConceptNodeResp = components['schemas']['ConceptNodeResp'];
+
+interface Props {
+ onClose: () => void;
+ onSaved: () => void;
+}
+
+const ACTION_NODE_TYPE_CODE = 'Action';
+
+const formSchema = z.object({
+ actionNodeId: z.string().min(1, '액션 노드를 선택해주세요'),
+ roleId: z.string().min(1, 'role 을 선택해주세요'),
+});
+
+type FormValues = z.infer
;
+
+const extractErrorMessage = (error: unknown): string => {
+ const fallback = '요청에 실패했습니다';
+ if (!error || typeof error !== 'object') return fallback;
+ const responseData = (error as { response?: { data?: { message?: unknown } } }).response?.data
+ ?.message;
+ if (typeof responseData === 'string' && responseData.length > 0) return responseData;
+ const maybeMessage = (error as { message?: unknown }).message;
+ if (typeof maybeMessage === 'string' && maybeMessage.length > 0) return maybeMessage;
+ return fallback;
+};
+
+const formatNodeLabel = (node: ConceptNodeResp): string => {
+ const name = node.name ?? '';
+ const typeLabel = node.nodeType?.label;
+ return typeLabel ? `${name} (${typeLabel})` : name;
+};
+
+const AddActionRowModal = ({ onClose, onSaved }: Props) => {
+ const { invalidateConceptGraphActionEdges } = useInvalidate();
+
+ const { data: actionEdgeTypeData } = getActionEdgeType();
+ const roleOptions = useMemo(() => actionEdgeTypeData?.data ?? [], [actionEdgeTypeData]);
+
+ const { data: nodeTypeData } = getNodeType();
+ const actionNodeTypeId = useMemo(() => {
+ const match = nodeTypeData?.data.find((t) => t.code === ACTION_NODE_TYPE_CODE);
+ return match?.id;
+ }, [nodeTypeData]);
+
+ const putCellMutation = putSheetActionEdgeCell();
+
+ const [actionNodeCache, setActionNodeCache] = useState(undefined);
+ const [selectedNodes, setSelectedNodes] = useState([]);
+ const [query, setQuery] = useState('');
+ const [debouncedQuery, setDebouncedQuery] = useState('');
+
+ const {
+ register,
+ handleSubmit,
+ watch,
+ setValue,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ actionNodeId: '',
+ roleId: '',
+ },
+ });
+
+ const actionNodeId = watch('actionNodeId');
+ const actionValueNum = actionNodeId ? Number(actionNodeId) : undefined;
+
+ useEffect(() => {
+ const timer = setTimeout(() => setDebouncedQuery(query.trim()), 200);
+ return () => clearTimeout(timer);
+ }, [query]);
+
+ const sheetQuery = getSheetNode({
+ page: 0,
+ size: 50,
+ name: debouncedQuery.length > 0 ? debouncedQuery : undefined,
+ });
+
+ const candidates: ConceptNodeResp[] = sheetQuery.data?.data ?? [];
+
+ const filtered = useMemo(() => {
+ const selectedIds = new Set(selectedNodes.map((n) => n.id));
+ return candidates.filter((c) => c.id !== undefined && !selectedIds.has(c.id));
+ }, [candidates, selectedNodes]);
+
+ const handleAdd = (node: ConceptNodeResp) => {
+ if (node.id === undefined) return;
+ if (selectedNodes.some((n) => n.id === node.id)) return;
+ setSelectedNodes((prev) => [...prev, node]);
+ };
+
+ const handleRemove = (id: number | undefined) => {
+ if (id === undefined) return;
+ setSelectedNodes((prev) => prev.filter((n) => n.id !== id));
+ };
+
+ const onSubmit = async (values: FormValues) => {
+ const actionId = Number(values.actionNodeId);
+ const roleId = Number(values.roleId);
+ const conceptNodeIds = selectedNodes
+ .map((n) => n.id)
+ .filter((id): id is number => id !== undefined);
+
+ try {
+ await putCellMutation.mutateAsync({
+ params: {
+ query: { actionNodeId: actionId, roleId },
+ },
+ body: { conceptNodeIds },
+ });
+ await invalidateConceptGraphActionEdges();
+ toast.success('저장되었습니다');
+ onSaved();
+ onClose();
+ } catch (error) {
+ toast.error(extractErrorMessage(error));
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default AddActionRowModal;
diff --git a/apps/admin/src/components/conceptGraph/CellEditPanel.tsx b/apps/admin/src/components/conceptGraph/CellEditPanel.tsx
new file mode 100644
index 000000000..d6a661e4d
--- /dev/null
+++ b/apps/admin/src/components/conceptGraph/CellEditPanel.tsx
@@ -0,0 +1,295 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Plus, Search, X } from 'lucide-react';
+import { toast } from 'react-toastify';
+import { Button, Modal, TwoButtonModalTemplate } from '@components';
+import { getSheetNode, putSheetActionEdgeCell } from '@apis';
+import { useInvalidate } from '@hooks';
+
+import type { components } from '@/types/api/schema';
+
+type ConceptNodeResp = components['schemas']['ConceptNodeResp'];
+type ActionEdgeTypeCodeResp = components['schemas']['ActionEdgeTypeCodeResp'];
+
+interface CellEditPanelProps {
+ open: boolean;
+ actionNode: ConceptNodeResp;
+ role: ActionEdgeTypeCodeResp;
+ currentNodes: ConceptNodeResp[];
+ onClose: () => void;
+ onSaved: () => void;
+}
+
+const extractErrorMessage = (error: unknown): string => {
+ const fallback = '요청에 실패했습니다';
+ if (!error || typeof error !== 'object') return fallback;
+ const responseData = (error as { response?: { data?: { message?: unknown } } }).response?.data
+ ?.message;
+ if (typeof responseData === 'string' && responseData.length > 0) return responseData;
+ const maybeMessage = (error as { message?: unknown }).message;
+ if (typeof maybeMessage === 'string' && maybeMessage.length > 0) return maybeMessage;
+ return fallback;
+};
+
+const sameIdSet = (a: ConceptNodeResp[], b: ConceptNodeResp[]): boolean => {
+ if (a.length !== b.length) return false;
+ const idsA = new Set(a.map((n) => n.id));
+ for (const n of b) {
+ if (!idsA.has(n.id)) return false;
+ }
+ return true;
+};
+
+const formatNodeLabel = (node: ConceptNodeResp): string => {
+ const name = node.name ?? '';
+ const typeLabel = node.nodeType?.label;
+ return typeLabel ? `${name} (${typeLabel})` : name;
+};
+
+const CellEditPanel = ({
+ open,
+ actionNode,
+ role,
+ currentNodes,
+ onClose,
+ onSaved,
+}: CellEditPanelProps) => {
+ const { invalidateConceptGraphActionEdges } = useInvalidate();
+
+ const [selectedNodes, setSelectedNodes] = useState(currentNodes);
+ const [query, setQuery] = useState('');
+ const [debouncedQuery, setDebouncedQuery] = useState('');
+ const [confirmCloseOpen, setConfirmCloseOpen] = useState(false);
+
+ const putCellMutation = putSheetActionEdgeCell();
+
+ useEffect(() => {
+ if (open) {
+ setSelectedNodes(currentNodes);
+ setQuery('');
+ setDebouncedQuery('');
+ setConfirmCloseOpen(false);
+ }
+ }, [open, currentNodes]);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setDebouncedQuery(query.trim()), 200);
+ return () => clearTimeout(timer);
+ }, [query]);
+
+ const isDirty = useMemo(
+ () => !sameIdSet(selectedNodes, currentNodes),
+ [selectedNodes, currentNodes]
+ );
+
+ const sheetQuery = getSheetNode({
+ page: 0,
+ size: 50,
+ name: debouncedQuery.length > 0 ? debouncedQuery : undefined,
+ });
+
+ const candidates: ConceptNodeResp[] = sheetQuery.data?.data ?? [];
+
+ const filtered = useMemo(() => {
+ const selectedIds = new Set(selectedNodes.map((n) => n.id));
+ return candidates.filter((c) => c.id !== undefined && !selectedIds.has(c.id));
+ }, [candidates, selectedNodes]);
+
+ const requestClose = () => {
+ if (isDirty) {
+ setConfirmCloseOpen(true);
+ return;
+ }
+ onClose();
+ };
+
+ useEffect(() => {
+ if (!open) return;
+ const handler = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ requestClose();
+ }
+ };
+ window.addEventListener('keydown', handler);
+ return () => window.removeEventListener('keydown', handler);
+ }, [open, isDirty]);
+
+ const handleAdd = (node: ConceptNodeResp) => {
+ if (node.id === undefined) return;
+ if (selectedNodes.some((n) => n.id === node.id)) return;
+ setSelectedNodes((prev) => [...prev, node]);
+ };
+
+ const handleRemove = (id: number | undefined) => {
+ if (id === undefined) return;
+ setSelectedNodes((prev) => prev.filter((n) => n.id !== id));
+ };
+
+ const handleReset = () => {
+ setSelectedNodes(currentNodes);
+ };
+
+ const handleSave = async () => {
+ if (actionNode.id === undefined || role.id === undefined) return;
+ try {
+ await putCellMutation.mutateAsync({
+ params: {
+ query: { actionNodeId: actionNode.id, roleId: role.id },
+ },
+ body: {
+ conceptNodeIds: selectedNodes
+ .map((n) => n.id)
+ .filter((id): id is number => id !== undefined),
+ },
+ });
+ await invalidateConceptGraphActionEdges();
+ toast.success('저장되었습니다');
+ onSaved();
+ onClose();
+ } catch (error) {
+ toast.error(extractErrorMessage(error));
+ }
+ };
+
+ if (!open) return null;
+
+ return (
+ <>
+
+
+
+ setConfirmCloseOpen(false)}>
+ setConfirmCloseOpen(false)}
+ handleClickRightButton={() => {
+ setConfirmCloseOpen(false);
+ onClose();
+ }}
+ />
+
+
+ );
+};
+
+export default CellEditPanel;
diff --git a/apps/admin/src/components/conceptGraph/EditConceptEdgeModal.tsx b/apps/admin/src/components/conceptGraph/EditConceptEdgeModal.tsx
new file mode 100644
index 000000000..2f7268112
--- /dev/null
+++ b/apps/admin/src/components/conceptGraph/EditConceptEdgeModal.tsx
@@ -0,0 +1,210 @@
+import { Button } from '@components';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'react-toastify';
+import { GitBranch, X } from 'lucide-react';
+import { getEdgeType, postEdge, putEdge } from '@apis';
+import { useInvalidate } from '@hooks';
+
+import NodeSearchSelect from './NodeSearchSelect';
+
+import type { components } from '@/types/api/schema';
+
+type ConceptEdgeResp = components['schemas']['ConceptEdgeResp'];
+type ConceptNodeResp = components['schemas']['ConceptNodeResp'];
+
+interface Props {
+ target?: ConceptEdgeResp;
+ onClose: () => void;
+ onSaved: () => void;
+}
+
+const formSchema = z
+ .object({
+ fromNodeId: z.string().min(1, 'From 노드를 선택해주세요'),
+ edgeTypeId: z.string().min(1, '관계를 선택해주세요'),
+ toNodeId: z.string().min(1, 'To 노드를 선택해주세요'),
+ })
+ .refine((data) => data.fromNodeId !== data.toNodeId, {
+ message: 'From 노드와 To 노드는 달라야 합니다.',
+ path: ['toNodeId'],
+ });
+
+type FormValues = z.infer;
+
+const extractErrorMessage = (error: unknown): string => {
+ const fallback = '요청에 실패했습니다';
+ if (!error || typeof error !== 'object') return fallback;
+ const responseData = (error as { response?: { data?: { message?: unknown } } }).response?.data
+ ?.message;
+ if (typeof responseData === 'string' && responseData.length > 0) return responseData;
+ const maybeMessage = (error as { message?: unknown }).message;
+ if (typeof maybeMessage === 'string' && maybeMessage.length > 0) return maybeMessage;
+ return fallback;
+};
+
+const EditConceptEdgeModal = ({ target, onClose, onSaved }: Props) => {
+ const isEditMode = Boolean(target);
+ const { invalidateConceptGraphEdges } = useInvalidate();
+
+ const { data: edgeTypeData } = getEdgeType();
+ const edgeTypeOptions = useMemo(() => edgeTypeData?.data ?? [], [edgeTypeData]);
+
+ const postEdgeMutation = postEdge();
+ const putEdgeMutation = putEdge();
+
+ const [fromNodeCache, setFromNodeCache] = useState(target?.fromNode);
+ const [toNodeCache, setToNodeCache] = useState(target?.toNode);
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ watch,
+ setValue,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ fromNodeId: target?.fromNode?.id !== undefined ? String(target.fromNode.id) : '',
+ edgeTypeId: target?.edgeType?.id !== undefined ? String(target.edgeType.id) : '',
+ toNodeId: target?.toNode?.id !== undefined ? String(target.toNode.id) : '',
+ },
+ });
+
+ useEffect(() => {
+ reset({
+ fromNodeId: target?.fromNode?.id !== undefined ? String(target.fromNode.id) : '',
+ edgeTypeId: target?.edgeType?.id !== undefined ? String(target.edgeType.id) : '',
+ toNodeId: target?.toNode?.id !== undefined ? String(target.toNode.id) : '',
+ });
+ setFromNodeCache(target?.fromNode);
+ setToNodeCache(target?.toNode);
+ }, [target, reset]);
+
+ const fromNodeId = watch('fromNodeId');
+ const toNodeId = watch('toNodeId');
+
+ const fromValueNum = fromNodeId ? Number(fromNodeId) : undefined;
+ const toValueNum = toNodeId ? Number(toNodeId) : undefined;
+
+ const onSubmit = async (values: FormValues) => {
+ const body = {
+ fromNodeId: Number(values.fromNodeId),
+ edgeTypeId: Number(values.edgeTypeId),
+ toNodeId: Number(values.toNodeId),
+ };
+
+ try {
+ if (target?.id !== undefined) {
+ await putEdgeMutation.mutateAsync({
+ params: { path: { id: target.id } },
+ body,
+ });
+ } else {
+ await postEdgeMutation.mutateAsync({ body });
+ }
+ await invalidateConceptGraphEdges();
+ toast.success('저장되었습니다');
+ onSaved();
+ onClose();
+ } catch (error) {
+ toast.error(extractErrorMessage(error));
+ }
+ };
+
+ const title = isEditMode ? '엣지 수정' : '엣지 추가';
+
+ return (
+
+ );
+};
+
+export default EditConceptEdgeModal;
diff --git a/apps/admin/src/components/conceptGraph/EditConceptNodeModal.tsx b/apps/admin/src/components/conceptGraph/EditConceptNodeModal.tsx
new file mode 100644
index 000000000..3f7799b84
--- /dev/null
+++ b/apps/admin/src/components/conceptGraph/EditConceptNodeModal.tsx
@@ -0,0 +1,260 @@
+import { Button, Input } from '@components';
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'react-toastify';
+import { Network, X } from 'lucide-react';
+import { getNodeType, postNode, putNode } from '@apis';
+import { useInvalidate } from '@hooks';
+import { getEmptyContentString } from '@utils';
+
+import { EditorField } from '@/components/problem';
+import type { components } from '@/types/api/schema';
+
+type ConceptNodeResp = components['schemas']['ConceptNodeResp'];
+
+interface Props {
+ target?: ConceptNodeResp;
+ onClose: () => void;
+ onSaved: () => void;
+}
+
+const ACTION_NODE_TYPE_CODE = 'Action';
+
+const formSchema = z.object({
+ name: z.string().min(1, '이름을 입력해주세요').max(100, '100자 이하로 입력해주세요'),
+ nodeTypeId: z.string().min(1, '타입을 선택해주세요'),
+ description: z.string().optional(),
+ example: z.string().optional(),
+ pointingExample: z.string().optional(),
+});
+
+type FormValues = z.infer;
+
+const extractPayloadEditorString = (raw: unknown): string => {
+ if (typeof raw === 'string' && raw.length > 0) return raw;
+ if (raw && typeof raw === 'object') {
+ try {
+ return JSON.stringify(raw);
+ } catch {
+ return getEmptyContentString();
+ }
+ }
+ return getEmptyContentString();
+};
+
+const extractErrorMessage = (error: unknown): string => {
+ const fallback = '요청에 실패했습니다';
+ if (!error || typeof error !== 'object') return fallback;
+ const responseData = (error as { response?: { data?: { message?: unknown } } }).response?.data
+ ?.message;
+ if (typeof responseData === 'string' && responseData.length > 0) return responseData;
+ const maybeMessage = (error as { message?: unknown }).message;
+ if (typeof maybeMessage === 'string' && maybeMessage.length > 0) return maybeMessage;
+ return fallback;
+};
+
+const EditConceptNodeModal = ({ target, onClose, onSaved }: Props) => {
+ const isEditMode = Boolean(target);
+ const { invalidateConceptGraphNodes } = useInvalidate();
+
+ const { data: nodeTypeData } = getNodeType();
+ const nodeTypeOptions = useMemo(() => nodeTypeData?.data ?? [], [nodeTypeData]);
+
+ const postNodeMutation = postNode();
+ const putNodeMutation = putNode();
+
+ const defaultDescription = useMemo(() => {
+ return target?.description && target.description.length > 0
+ ? target.description
+ : getEmptyContentString();
+ }, [target]);
+
+ const defaultExample = useMemo(
+ () =>
+ extractPayloadEditorString((target?.payload as Record | undefined)?.example),
+ [target]
+ );
+ const defaultPointingExample = useMemo(
+ () =>
+ extractPayloadEditorString(
+ (target?.payload as Record | undefined)?.pointingExample
+ ),
+ [target]
+ );
+
+ const {
+ control,
+ register,
+ handleSubmit,
+ reset,
+ watch,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ name: target?.name ?? '',
+ nodeTypeId: target?.nodeType?.id !== undefined ? String(target.nodeType.id) : '',
+ description: defaultDescription,
+ example: defaultExample,
+ pointingExample: defaultPointingExample,
+ },
+ });
+
+ useEffect(() => {
+ reset({
+ name: target?.name ?? '',
+ nodeTypeId: target?.nodeType?.id !== undefined ? String(target.nodeType.id) : '',
+ description: defaultDescription,
+ example: defaultExample,
+ pointingExample: defaultPointingExample,
+ });
+ }, [target, reset, defaultDescription, defaultExample, defaultPointingExample]);
+
+ const selectedNodeTypeId = watch('nodeTypeId');
+ const isActionType = useMemo(() => {
+ if (!selectedNodeTypeId) return false;
+ const id = Number(selectedNodeTypeId);
+ return nodeTypeOptions.some((t) => t.id === id && t.code === ACTION_NODE_TYPE_CODE);
+ }, [selectedNodeTypeId, nodeTypeOptions]);
+
+ const onSubmit = async (values: FormValues) => {
+ const trimmedName = values.name.trim();
+ const rawDescription = values.description ?? '';
+ const description =
+ rawDescription.length > 0 && rawDescription !== getEmptyContentString()
+ ? rawDescription
+ : undefined;
+
+ let payload: { [key: string]: Record } | undefined;
+ if (isActionType) {
+ const example = values.example ?? '';
+ const pointingExample = values.pointingExample ?? '';
+ const actionPayload: Record = {};
+ if (example.length > 0 && example !== getEmptyContentString()) {
+ actionPayload.example = example;
+ }
+ if (pointingExample.length > 0 && pointingExample !== getEmptyContentString()) {
+ actionPayload.pointingExample = pointingExample;
+ }
+ payload =
+ Object.keys(actionPayload).length > 0
+ ? (actionPayload as unknown as { [key: string]: Record })
+ : undefined;
+ }
+
+ const body = {
+ name: trimmedName,
+ nodeTypeId: Number(values.nodeTypeId),
+ description,
+ payload,
+ };
+
+ try {
+ if (target?.id !== undefined) {
+ await putNodeMutation.mutateAsync({
+ params: { path: { id: target.id } },
+ body,
+ });
+ } else {
+ await postNodeMutation.mutateAsync({ body });
+ }
+ await invalidateConceptGraphNodes();
+ toast.success('저장되었습니다');
+ onSaved();
+ onClose();
+ } catch (error) {
+ toast.error(extractErrorMessage(error));
+ }
+ };
+
+ const title = isEditMode ? '노드 수정' : '노드 추가';
+
+ return (
+
+ );
+};
+
+export default EditConceptNodeModal;
diff --git a/apps/admin/src/components/conceptGraph/EditTypeCodeModal.tsx b/apps/admin/src/components/conceptGraph/EditTypeCodeModal.tsx
new file mode 100644
index 000000000..59d31e5cc
--- /dev/null
+++ b/apps/admin/src/components/conceptGraph/EditTypeCodeModal.tsx
@@ -0,0 +1,218 @@
+import { Button, Input } from '@components';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'react-toastify';
+import { Tag as TagIcon, X } from 'lucide-react';
+import {
+ postNodeType,
+ putNodeType,
+ postEdgeType,
+ putEdgeType,
+ postActionEdgeType,
+ putActionEdgeType,
+} from '@apis';
+import { useInvalidate } from '@hooks';
+
+import type { components } from '@/types/api/schema';
+
+type NodeTypeCodeResp = components['schemas']['NodeTypeCodeResp'];
+type EdgeTypeCodeResp = components['schemas']['EdgeTypeCodeResp'];
+type ActionEdgeTypeCodeResp = components['schemas']['ActionEdgeTypeCodeResp'];
+
+export type TypeCodeKind = 'node' | 'edge' | 'actionEdge';
+export type TypeCodeTarget = NodeTypeCodeResp | EdgeTypeCodeResp | ActionEdgeTypeCodeResp;
+
+interface Props {
+ kind: TypeCodeKind;
+ target?: TypeCodeTarget;
+ onClose: () => void;
+ onSaved: () => void;
+}
+
+const KIND_LABEL: Record = {
+ node: '노드 타입',
+ edge: '엣지 타입',
+ actionEdge: '액션 엣지 타입',
+};
+
+const formSchema = z.object({
+ code: z.string().min(1, '코드를 입력해주세요'),
+ label: z.string().min(1, '라벨을 입력해주세요'),
+ description: z.string().optional(),
+});
+
+type FormValues = z.infer;
+
+const extractErrorMessage = (error: unknown): string => {
+ const fallback = '요청에 실패했습니다';
+ if (!error || typeof error !== 'object') return fallback;
+ const maybeMessage = (error as { message?: unknown }).message;
+ if (typeof maybeMessage === 'string' && maybeMessage.length > 0) return maybeMessage;
+ const responseData = (error as { response?: { data?: { message?: unknown } } }).response?.data
+ ?.message;
+ if (typeof responseData === 'string' && responseData.length > 0) return responseData;
+ return fallback;
+};
+
+const EditTypeCodeModal = ({ kind, target, onClose, onSaved }: Props) => {
+ const isEditMode = Boolean(target);
+ const { invalidateConceptGraphTypes } = useInvalidate();
+
+ const postNodeTypeMutation = postNodeType();
+ const putNodeTypeMutation = putNodeType();
+ const postEdgeTypeMutation = postEdgeType();
+ const putEdgeTypeMutation = putEdgeType();
+ const postActionEdgeTypeMutation = postActionEdgeType();
+ const putActionEdgeTypeMutation = putActionEdgeType();
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ code: target?.code ?? '',
+ label: target?.label ?? '',
+ description: target?.description ?? '',
+ },
+ });
+
+ useEffect(() => {
+ reset({
+ code: target?.code ?? '',
+ label: target?.label ?? '',
+ description: target?.description ?? '',
+ });
+ }, [target, reset]);
+
+ const handleSuccess = async () => {
+ await invalidateConceptGraphTypes();
+ toast.success('저장되었습니다');
+ onSaved();
+ onClose();
+ };
+
+ const handleError = (error: unknown) => {
+ toast.error(extractErrorMessage(error));
+ };
+
+ const onSubmit = async (values: FormValues) => {
+ const body = {
+ code: values.code.trim(),
+ label: values.label.trim(),
+ description: values.description?.trim() ? values.description.trim() : undefined,
+ };
+
+ try {
+ if (kind === 'node') {
+ if (target?.id !== undefined) {
+ await putNodeTypeMutation.mutateAsync({
+ params: { path: { id: target.id } },
+ body,
+ });
+ } else {
+ await postNodeTypeMutation.mutateAsync({ body });
+ }
+ } else if (kind === 'edge') {
+ if (target?.id !== undefined) {
+ await putEdgeTypeMutation.mutateAsync({
+ params: { path: { id: target.id } },
+ body,
+ });
+ } else {
+ await postEdgeTypeMutation.mutateAsync({ body });
+ }
+ } else {
+ if (target?.id !== undefined) {
+ await putActionEdgeTypeMutation.mutateAsync({
+ params: { path: { id: target.id } },
+ body,
+ });
+ } else {
+ await postActionEdgeTypeMutation.mutateAsync({ body });
+ }
+ }
+ await handleSuccess();
+ } catch (error) {
+ handleError(error);
+ }
+ };
+
+ const title = `${KIND_LABEL[kind]} ${isEditMode ? '수정' : '새로 만들기'}`;
+
+ return (
+
+ );
+};
+
+export default EditTypeCodeModal;
diff --git a/apps/admin/src/components/conceptGraph/NodeSearchSelect.tsx b/apps/admin/src/components/conceptGraph/NodeSearchSelect.tsx
new file mode 100644
index 000000000..bfaa398ba
--- /dev/null
+++ b/apps/admin/src/components/conceptGraph/NodeSearchSelect.tsx
@@ -0,0 +1,208 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronDown, Search, X } from 'lucide-react';
+import { getSheetNode } from '@apis';
+
+import type { components } from '@/types/api/schema';
+
+type ConceptNodeResp = components['schemas']['ConceptNodeResp'];
+
+interface NodeSearchSelectProps {
+ value: number | undefined;
+ onChange: (id: number | undefined, node?: ConceptNodeResp) => void;
+ initialNode?: ConceptNodeResp;
+ placeholder?: string;
+ excludeIds?: number[];
+ hasError?: boolean;
+ nodeTypeId?: number;
+ disabled?: boolean;
+}
+
+const formatNodeLabel = (node: ConceptNodeResp): string => {
+ const name = node.name ?? '';
+ const typeLabel = node.nodeType?.label;
+ return typeLabel ? `${name} (${typeLabel})` : name;
+};
+
+const NodeSearchSelect = ({
+ value,
+ onChange,
+ initialNode,
+ placeholder = '노드 검색',
+ excludeIds,
+ hasError,
+ nodeTypeId,
+ disabled,
+}: NodeSearchSelectProps) => {
+ const [query, setQuery] = useState('');
+ const [debouncedQuery, setDebouncedQuery] = useState('');
+ const [isOpen, setIsOpen] = useState(false);
+ const [cachedNode, setCachedNode] = useState(initialNode);
+
+ const containerRef = useRef(null);
+ const searchInputRef = useRef(null);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setDebouncedQuery(query.trim()), 200);
+ return () => clearTimeout(timer);
+ }, [query]);
+
+ const sheetQuery = getSheetNode({
+ page: 0,
+ size: 50,
+ name: debouncedQuery.length > 0 ? debouncedQuery : undefined,
+ nodeTypeId,
+ });
+ const candidates: ConceptNodeResp[] = sheetQuery.data?.data ?? [];
+
+ useEffect(() => {
+ if (value === undefined) {
+ setCachedNode(undefined);
+ return;
+ }
+ if (cachedNode?.id === value) return;
+ if (initialNode?.id === value) {
+ setCachedNode(initialNode);
+ return;
+ }
+ const fromList = candidates.find((n) => n.id === value);
+ if (fromList) {
+ setCachedNode(fromList);
+ }
+ }, [value, initialNode, candidates, cachedNode]);
+
+ useEffect(() => {
+ if (!isOpen) return;
+ const handler = (e: MouseEvent) => {
+ if (!containerRef.current) return;
+ if (!containerRef.current.contains(e.target as Node)) {
+ setIsOpen(false);
+ }
+ };
+ window.addEventListener('mousedown', handler);
+ return () => window.removeEventListener('mousedown', handler);
+ }, [isOpen]);
+
+ useEffect(() => {
+ if (isOpen) {
+ const t = setTimeout(() => searchInputRef.current?.focus(), 0);
+ return () => clearTimeout(t);
+ }
+ }, [isOpen]);
+
+ const filtered = useMemo(() => {
+ if (!excludeIds || excludeIds.length === 0) return candidates;
+ return candidates.filter((c) => c.id === undefined || !excludeIds.includes(c.id));
+ }, [candidates, excludeIds]);
+
+ const selectedLabel = useMemo(() => {
+ if (value === undefined) return '';
+ if (cachedNode?.id === value) return formatNodeLabel(cachedNode);
+ if (initialNode?.id === value) return formatNodeLabel(initialNode);
+ const found = candidates.find((n) => n.id === value);
+ if (found) return formatNodeLabel(found);
+ return `(ID: ${value})`;
+ }, [value, cachedNode, initialNode, candidates]);
+
+ const handleSelect = (node: ConceptNodeResp) => {
+ if (node.id === undefined) return;
+ setCachedNode(node);
+ onChange(node.id, node);
+ setIsOpen(false);
+ setQuery('');
+ };
+
+ const handleClear = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setCachedNode(undefined);
+ onChange(undefined, undefined);
+ };
+
+ const triggerClassName = `flex h-12 w-full items-center justify-between gap-2 rounded-xl border bg-white px-4 text-sm transition-all duration-200 ${
+ hasError
+ ? 'border-red-300 focus:border-red-500'
+ : 'border-gray-200 hover:border-gray-300 focus:border-main'
+ } ${isOpen ? 'ring-main/20 ring-2' : ''} ${disabled ? 'cursor-not-allowed bg-gray-50 opacity-60' : ''}`;
+
+ return (
+
+
+
+ {isOpen && (
+
+
+
+
+ setQuery(e.target.value)}
+ placeholder='노드명 검색...'
+ className='w-full py-3 pr-4 pl-10 text-sm font-medium focus:ring-0 focus:outline-none'
+ />
+
+
+
+ {sheetQuery.isLoading ? (
+
불러오는 중...
+ ) : filtered.length === 0 ? (
+
+ 일치하는 노드가 없습니다.
+
+ ) : (
+ filtered.map((node) => {
+ const isSelected = node.id !== undefined && node.id === value;
+ return (
+
handleSelect(node)}
+ className={`mb-1 cursor-pointer rounded-xl px-4 py-3 text-sm font-medium transition-all duration-200 ${
+ isSelected ? 'bg-main text-white' : 'text-gray-700 hover:bg-gray-100'
+ }`}>
+
+ {node.name ?? ''}
+ {node.nodeType?.label && (
+
+ {node.nodeType.label}
+
+ )}
+
+
+ );
+ })
+ )}
+
+
+ )}
+
+
+ 페이지
+ {page + 1}
+ / {lastPage + 1}
+
+
+ {onSizeChange && (
+
+ )}
+
+
+
+
+
+
+ {fields.map((field) => (
+
+
+ {field.type === 'text' ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
+
+
+
+
+ {columns.map((column) => {
+ const isSorted = sort?.key === column.key;
+ return (
+ | handleHeaderClick(column)}>
+
+ {column.label}
+ {column.sortable && (
+
+ {isSorted ? (
+ sort?.direction === 'ASC' ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+ )}
+
+ |
+ );
+ })}
+ {actions && (
+
+ {''}
+ |
+ )}
+
+
+
+ {loading ? (
+ Array.from({ length: 5 }).map((_, idx) => (
+
+ {columns.map((column) => (
+ |
+
+ |
+ ))}
+ {actions && (
+
+
+ |
+ )}
+
+ ))
+ ) : rows.length === 0 ? (
+
+ |
+ {emptyMessage}
+ |
+
+ ) : (
+ rows.map((row, idx) => (
+ onRowClick(row) : undefined}
+ className={`transition-colors ${
+ onRowClick ? 'hover:bg-main/5 cursor-pointer' : 'hover:bg-gray-50'
+ }`}>
+ {columns.map((column) => (
+ |
+ {renderCell(column, row)}
+ |
+ ))}
+ {actions && (
+ e.stopPropagation()}>
+ {actions(row)}
+ |
+ )}
+
+ ))
+ )}
+
+
+
+
(null);
+ const [isDeletingRow, setIsDeletingRow] = useState(false);
+
+ const sheetQuery = getSheetActionEdge(searchOptions);
+ const sheetData = sheetQuery.data?.data;
+ const columns: ActionEdgeTypeCodeResp[] = sheetData?.columns ?? [];
+ const rows: Row[] = sheetData?.rows ?? [];
+ const lastPage = sheetQuery.data?.lastPage ?? 0;
+
+ const putCellMutation = putSheetActionEdgeCell();
+
+ const handleSearchChange = (next: Record) => {
+ const actionNodeName =
+ typeof next.actionNodeName === 'string' && next.actionNodeName.trim()
+ ? next.actionNodeName.trim()
+ : undefined;
+ setSearchOptions((prev) => ({
+ ...prev,
+ page: 0,
+ actionNodeName,
+ }));
+ };
+
+ const handleSearchReset = () => {
+ setSearchOptions((prev) => ({
+ page: 0,
+ size: prev.size,
+ direction: prev.direction,
+ }));
+ };
+
+ const toggleDirection = () => {
+ setSearchOptions((prev) => ({
+ ...prev,
+ direction: prev.direction === 'ASC' ? 'DESC' : 'ASC',
+ page: 0,
+ }));
+ };
+
+ const handlePageChange = (page: number) => {
+ setSearchOptions((prev) => ({ ...prev, page }));
+ };
+
+ const handleSizeChange = (size: number) => {
+ setSearchOptions((prev) => ({ ...prev, size, page: 0 }));
+ };
+
+ const openCellEdit = (
+ actionNode: ConceptNodeResp,
+ role: ActionEdgeTypeCodeResp,
+ currentNodes: ConceptNodeResp[]
+ ) => {
+ setEditingCell({ actionNode, role, currentNodes });
+ };
+ const closeCellEdit = () => setEditingCell(null);
+
+ const openDeleteRow = (row: Row) => setDeleteRowTarget(row);
+ const closeDeleteRow = () => {
+ if (isDeletingRow) return;
+ setDeleteRowTarget(null);
+ };
+
+ const handleConfirmDeleteRow = async () => {
+ if (!deleteRowTarget) return;
+ const actionNode = deleteRowTarget.actionNode;
+ if (!actionNode || actionNode.id === undefined) {
+ setDeleteRowTarget(null);
+ return;
+ }
+ setIsDeletingRow(true);
+ try {
+ await Promise.all(
+ columns
+ .filter((col) => col.id !== undefined)
+ .map((col) =>
+ putCellMutation.mutateAsync({
+ params: {
+ query: { actionNodeId: actionNode.id as number, roleId: col.id as number },
+ },
+ body: { conceptNodeIds: [] },
+ })
+ )
+ );
+ await invalidateConceptGraphActionEdges();
+ toast.success('삭제되었습니다');
+ setDeleteRowTarget(null);
+ } catch (error) {
+ toast.error(extractErrorMessage(error));
+ } finally {
+ setIsDeletingRow(false);
+ }
+ };
+
+ const filterFields: SearchFilterField[] = [
+ {
+ name: 'actionNodeName',
+ label: 'Action 노드',
+ type: 'text',
+ placeholder: '액션 노드명 검색',
+ },
+ ];
+
+ const filterValues: Record = {
+ actionNodeName: searchOptions.actionNodeName ?? '',
+ };
+
+ const direction = searchOptions.direction ?? 'ASC';
+
+ const isLoading = sheetQuery.isLoading;
+ const showEmpty = !isLoading && rows.length === 0;
+
+ const renderRow = (row: Row, idx: number) => {
+ const actionNode = row.actionNode;
+ const cells = row.cells ?? [];
+ const rowKey = actionNode?.id ?? idx;
+
+ return (
+
+ |
+
+ {formatActionNodeLabel(actionNode)}
+
+
+ |
+ {columns.map((col, colIdx) => {
+ const cell = cells[colIdx];
+ const cellRoleCode = cell?.roleCode;
+ const colCode = col.code;
+ if (cell && colCode !== undefined && cellRoleCode !== colCode) {
+ console.warn(
+ `[action-edge sheet] roleCode mismatch at row ${rowKey} col ${colIdx}: cell.roleCode=${cellRoleCode} columns.code=${colCode}`
+ );
+ return (
+
+ ⚠
+ |
+ );
+ }
+
+ const conceptNodes = cell?.conceptNodes ?? [];
+ const visible = conceptNodes.slice(0, MAX_VISIBLE_CHIPS);
+ const overflow = conceptNodes.length - visible.length;
+
+ if (!actionNode) return null;
+
+ const handleCellClick = () => {
+ openCellEdit(actionNode, col, conceptNodes);
+ };
+
+ return (
+
+ {conceptNodes.length === 0 ? (
+ -
+ ) : (
+
+ {visible.map((node) => (
+
+ {node.name ?? ''}
+
+ ))}
+ {overflow > 0 && (
+
+ +{overflow}
+
+ )}
+ |
+ );
+ })}
+
+ );
+ };
+
+ return (
+
+
+
+
+ setIsAddRowOpen(true)}>
+ 액션 노드 행 추가
+
+
+
+
+ {sheetQuery.isError && (
+
+ 데이터를 불러오지 못했습니다. 새로고침해주세요.
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ 액션 노드
+ |
+ {columns.map((col) => (
+
+ {col.label ?? col.code ?? ''}
+ |
+ ))}
+
+
+
+ {isLoading ? (
+ Array.from({ length: 5 }).map((_, idx) => (
+
+ |
+
+ |
+ {columns.length === 0 ? (
+
+
+ |
+ ) : (
+ columns.map((col, colIdx) => (
+
+
+ |
+ ))
+ )}
+
+ ))
+ ) : showEmpty ? (
+
+ |
+ 조건에 맞는 액션 그래프 행이 없습니다.
+ |
+
+ ) : (
+ rows.map((row, idx) => renderRow(row, idx))
+ )}
+
+
+
+
+
+
+
+
+ {editingCell && (
+
undefined}
+ />
+ )}
+
+ setIsAddRowOpen(false)}>
+ {isAddRowOpen && (
+ setIsAddRowOpen(false)} onSaved={() => undefined} />
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {sheetQuery.isError && (
+
+ 데이터를 불러오지 못했습니다. 새로고침해주세요.
+
+
+ )}
+
+
+
+
+ columns={columns}
+ rows={rows}
+ loading={sheetQuery.isLoading}
+ emptyMessage='조건에 맞는 엣지가 없습니다.'
+ sort={sortState}
+ onSortChange={handleSortChange}
+ rowKey={(row, idx) => row.id ?? idx}
+ actions={(row) => (
+ openEdit(row)} onDelete={() => openDelete(row)} />
+ )}
+ />
+
+
+
+
+
+ {editState && (
+ undefined}
+ />
+ )}
+
+
+
+
+
+
+ {example && (
+
+
+ 예시
+
+
+ {example}
+
+
+ )}
+ {pointingExample && (
+
+
+ 포인팅
+
+
+ {pointingExample}
+
+
+ )}
+
+
+
+
+
+
+ {sheetQuery.isError && (
+
+ 데이터를 불러오지 못했습니다. 새로고침해주세요.
+
+
+ )}
+
+
+
+
+ columns={columns}
+ rows={rows}
+ loading={sheetQuery.isLoading}
+ emptyMessage='조건에 맞는 노드가 없습니다.'
+ sort={sortState}
+ onSortChange={handleSortChange}
+ rowKey={(row, idx) => row.id ?? idx}
+ actions={(row) => (
+ openEdit(row)} onDelete={() => openDelete(row)} />
+ )}
+ />
+
+
+
+
+
+ {editState && (
+ undefined}
+ />
+ )}
+
+
+
+
+
+
+
+ {payloadPreview && (
+
+
+
+ Payload — {payloadPreview.name ?? ''}
+
+
+
+
+ {formatPayload(payloadPreview.payload)}
+
+
+
+
+
+
+
+
{title}
+ {caption &&
{caption}
}
+
+
+
+
+
+
+
+ openCreate('node')}
+ onEdit={(row) => openEdit('node', row)}
+ onDelete={(row) => openDelete('node', row)}
+ />
+ openCreate('edge')}
+ onEdit={(row) => openEdit('edge', row)}
+ onDelete={(row) => openDelete('edge', row)}
+ />
+ openCreate('actionEdge')}
+ onEdit={(row) => openEdit('actionEdge', row)}
+ onDelete={(row) => openDelete('actionEdge', row)}
+ />
+
+
+
+ {editState && (
+ undefined}
+ />
+ )}
+
+
+
+
+
+