+
+ {
+ const val = e.target.value || null;
+ setColumns((prev) =>
+ prev.map((c) =>
+ c.columnName === column.columnName
+ ? { ...c, categoryRef: val }
+ : c
+ )
+ );
+ }}
+ placeholder="테이블명.컬럼명"
+ className="h-8 text-xs"
+ />
+
+ )}
{/* 입력 타입이 'entity'인 경우 참조 테이블 선택 */}
{column.inputType === "entity" && (
<>
@@ -2029,12 +2085,12 @@ export default function TableManagementPage() {
aria-label={`${column.columnName} 인덱스 설정`}
/>
- {/* UQ 체크박스 */}
+ {/* UQ 체크박스 (앱 레벨 소프트 제약조건) */}
+ 다른 테이블의 카테고리 값 참조 시 입력 +
+
+
);
}
+
+// ========================================
+// 모달 사이즈 설정 패널
+// ========================================
+
+const SIZE_PRESET_ORDER: ModalSizePreset[] = ["sm", "md", "lg", "xl", "full"];
+
+const MODE_LABELS: { mode: GridMode; label: string; icon: typeof Smartphone; width: number }[] = [
+ { mode: "mobile_portrait", label: "모바일 세로", icon: Smartphone, width: 375 },
+ { mode: "mobile_landscape", label: "모바일 가로", icon: Smartphone, width: 667 },
+ { mode: "tablet_portrait", label: "태블릿 세로", icon: Tablet, width: 768 },
+ { mode: "tablet_landscape", label: "태블릿 가로", icon: Monitor, width: 1024 },
+];
+
+function ModalSizeSettingsPanel({
+ modal,
+ currentMode,
+ onUpdate,
+}: {
+ modal: PopModalDefinition;
+ currentMode: GridMode;
+ onUpdate: (updates: Partial
{/* 상단 툴바 (프리뷰 모드에서만) */}
{isPreviewMode && (
onUpdateModal?.(activeModal.id, updates)}
+ />
+ )}
+
{/* 캔버스 영역 */}
)}
@@ -969,3 +1047,278 @@ function HiddenItem({
@@ -261,7 +285,7 @@ function PopScreenViewPage() {
)}
{/* POP 화면 컨텐츠 */}
- = ({
) : (
-
+
+
) : (
= ({ className }) => {
{/* 모달 닫기 확인 다이얼로그 */}
-
+
화면을 닫으시겠습니까?
diff --git a/frontend/components/numbering-rule/NumberingRuleCard.tsx b/frontend/components/numbering-rule/NumberingRuleCard.tsx
index d1444d4e..e9731017 100644
--- a/frontend/components/numbering-rule/NumberingRuleCard.tsx
+++ b/frontend/components/numbering-rule/NumberingRuleCard.tsx
@@ -25,7 +25,7 @@ export const NumberingRuleCard: React.FC = ({
isPreview = false,
}) => {
return (
-
+
diff --git a/frontend/components/numbering-rule/NumberingRuleDesigner.tsx b/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
index 9320f00e..8b521fe0 100644
--- a/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
+++ b/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
@@ -62,9 +62,9 @@ export const NumberingRuleDesigner: React.FC = ({
const [editingLeftTitle, setEditingLeftTitle] = useState(false);
const [editingRightTitle, setEditingRightTitle] = useState(false);
- // 구분자 관련 상태
- const [separatorType, setSeparatorType] = useState("-");
- const [customSeparator, setCustomSeparator] = useState("");
+ // 구분자 관련 상태 (개별 파트 사이 구분자)
+ const [separatorTypes, setSeparatorTypes] = useState>({});
+ const [customSeparators, setCustomSeparators] = useState>({});
// 카테고리 조건 관련 상태 - 모든 카테고리를 테이블.컬럼 단위로 조회
interface CategoryOption {
@@ -192,48 +192,68 @@ export const NumberingRuleDesigner: React.FC = ({
}
}, [currentRule, onChange]);
- // currentRule이 변경될 때 구분자 상태 동기화
+ // currentRule이 변경될 때 파트별 구분자 상태 동기화
useEffect(() => {
- if (currentRule) {
- const sep = currentRule.separator ?? "-";
- // 빈 문자열이면 "none"
- if (sep === "") {
- setSeparatorType("none");
- setCustomSeparator("");
- return;
- }
- // 미리 정의된 구분자인지 확인 (none, custom 제외)
- const predefinedOption = SEPARATOR_OPTIONS.find(
- opt => opt.value !== "custom" && opt.value !== "none" && opt.displayValue === sep
- );
- if (predefinedOption) {
- setSeparatorType(predefinedOption.value);
- setCustomSeparator("");
- } else {
- // 직접 입력된 구분자
- setSeparatorType("custom");
- setCustomSeparator(sep);
- }
+ if (currentRule && currentRule.parts.length > 0) {
+ const newSepTypes: Record = {};
+ const newCustomSeps: Record = {};
+
+ currentRule.parts.forEach((part) => {
+ const sep = part.separatorAfter ?? currentRule.separator ?? "-";
+ if (sep === "") {
+ newSepTypes[part.order] = "none";
+ newCustomSeps[part.order] = "";
+ } else {
+ const predefinedOption = SEPARATOR_OPTIONS.find(
+ opt => opt.value !== "custom" && opt.value !== "none" && opt.displayValue === sep
+ );
+ if (predefinedOption) {
+ newSepTypes[part.order] = predefinedOption.value;
+ newCustomSeps[part.order] = "";
+ } else {
+ newSepTypes[part.order] = "custom";
+ newCustomSeps[part.order] = sep;
+ }
+ }
+ });
+
+ setSeparatorTypes(newSepTypes);
+ setCustomSeparators(newCustomSeps);
}
- }, [currentRule?.ruleId]); // ruleId가 변경될 때만 실행 (규칙 선택/생성 시)
+ }, [currentRule?.ruleId]);
- // 구분자 변경 핸들러
- const handleSeparatorChange = useCallback((type: SeparatorType) => {
- setSeparatorType(type);
+ // 개별 파트 구분자 변경 핸들러
+ const handlePartSeparatorChange = useCallback((partOrder: number, type: SeparatorType) => {
+ setSeparatorTypes(prev => ({ ...prev, [partOrder]: type }));
if (type !== "custom") {
const option = SEPARATOR_OPTIONS.find(opt => opt.value === type);
const newSeparator = option?.displayValue ?? "";
- setCurrentRule((prev) => prev ? { ...prev, separator: newSeparator } : null);
- setCustomSeparator("");
+ setCustomSeparators(prev => ({ ...prev, [partOrder]: "" }));
+ setCurrentRule((prev) => {
+ if (!prev) return null;
+ return {
+ ...prev,
+ parts: prev.parts.map((part) =>
+ part.order === partOrder ? { ...part, separatorAfter: newSeparator } : part
+ ),
+ };
+ });
}
}, []);
- // 직접 입력 구분자 변경 핸들러
- const handleCustomSeparatorChange = useCallback((value: string) => {
- // 최대 2자 제한
+ // 개별 파트 직접 입력 구분자 변경 핸들러
+ const handlePartCustomSeparatorChange = useCallback((partOrder: number, value: string) => {
const trimmedValue = value.slice(0, 2);
- setCustomSeparator(trimmedValue);
- setCurrentRule((prev) => prev ? { ...prev, separator: trimmedValue } : null);
+ setCustomSeparators(prev => ({ ...prev, [partOrder]: trimmedValue }));
+ setCurrentRule((prev) => {
+ if (!prev) return null;
+ return {
+ ...prev,
+ parts: prev.parts.map((part) =>
+ part.order === partOrder ? { ...part, separatorAfter: trimmedValue } : part
+ ),
+ };
+ });
}, []);
const handleAddPart = useCallback(() => {
@@ -250,6 +270,7 @@ export const NumberingRuleDesigner: React.FC = ({
partType: "text",
generationMethod: "auto",
autoConfig: { textValue: "CODE" },
+ separatorAfter: "-",
};
setCurrentRule((prev) => {
@@ -257,6 +278,10 @@ export const NumberingRuleDesigner: React.FC = ({
return { ...prev, parts: [...prev.parts, newPart] };
});
+ // 새 파트의 구분자 상태 초기화
+ setSeparatorTypes(prev => ({ ...prev, [newPart.order]: "-" }));
+ setCustomSeparators(prev => ({ ...prev, [newPart.order]: "" }));
+
toast.success(`규칙 ${newPart.order}가 추가되었습니다`);
}, [currentRule, maxRules]);
@@ -573,42 +598,6 @@ export const NumberingRuleDesigner: React.FC = ({
- {/* 두 번째 줄: 구분자 설정 */}
-
@@ -625,15 +614,48 @@ export const NumberingRuleDesigner: React.FC
{/* 현재 모드 표시 (일반 모드) */}
{!isPreviewMode && (
) : screenData ? (
+
@@ -270,7 +294,7 @@ function PopScreenViewPage() {
)}
);
})()}
diff --git a/frontend/components/common/ExcelUploadModal.tsx b/frontend/components/common/ExcelUploadModal.tsx
index 4797a34a..81b5ed61 100644
--- a/frontend/components/common/ExcelUploadModal.tsx
+++ b/frontend/components/common/ExcelUploadModal.tsx
@@ -942,17 +942,22 @@ export const ExcelUploadModal: React.FC = ({
continue;
}
- // 채번 적용: 각 행마다 채번 API 호출 (신규 등록 시에만, 자동 감지된 채번 규칙 사용)
+ // 채번 적용: 엑셀에 값이 없거나 빈 값이면 채번 규칙으로 자동 생성, 값이 있으면 그대로 사용
if (hasNumbering && numberingInfo && uploadMode === "insert" && !shouldUpdate) {
- try {
- const { apiClient } = await import("@/lib/api/client");
- const numberingResponse = await apiClient.post(`/numbering-rules/${numberingInfo.numberingRuleId}/allocate`);
- const generatedCode = numberingResponse.data?.data?.generatedCode || numberingResponse.data?.data?.code;
- if (numberingResponse.data?.success && generatedCode) {
- dataToSave[numberingInfo.columnName] = generatedCode;
+ const existingValue = dataToSave[numberingInfo.columnName];
+ const hasExcelValue = existingValue !== undefined && existingValue !== null && String(existingValue).trim() !== "";
+
+ if (!hasExcelValue) {
+ try {
+ const { apiClient } = await import("@/lib/api/client");
+ const numberingResponse = await apiClient.post(`/numbering-rules/${numberingInfo.numberingRuleId}/allocate`);
+ const generatedCode = numberingResponse.data?.data?.generatedCode || numberingResponse.data?.data?.code;
+ if (numberingResponse.data?.success && generatedCode) {
+ dataToSave[numberingInfo.columnName] = generatedCode;
+ }
+ } catch (numError) {
+ console.error("채번 오류:", numError);
}
- } catch (numError) {
- console.error("채번 오류:", numError);
}
}
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 4c4614c9..854b1159 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -25,6 +25,7 @@ import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
import { ActiveTabProvider } from "@/contexts/ActiveTabContext";
import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter";
import { ConditionalZone, LayerDefinition } from "@/types/screen-management";
+import { ScreenContextProvider } from "@/contexts/ScreenContext";
interface ScreenModalState {
isOpen: boolean;
@@ -178,10 +179,17 @@ export const ScreenModal: React.FC = ({ className }) => {
splitPanelParentData,
selectedData: eventSelectedData,
selectedIds,
- isCreateMode, // 🆕 복사 모드 플래그 (true면 editData가 있어도 originalData 설정 안 함)
- fieldMappings, // 🆕 필드 매핑 정보 (명시적 매핑이 있으면 모든 매핑된 필드 전달)
+ isCreateMode,
+ fieldMappings,
} = event.detail;
+ console.log("🟣 [ScreenModal] openScreenModal 이벤트 수신:", {
+ screenId,
+ splitPanelParentData: JSON.stringify(splitPanelParentData),
+ editData: !!editData,
+ isCreateMode,
+ });
+
// 🆕 모달 열린 시간 기록
modalOpenedAtRef.current = Date.now();
@@ -355,8 +363,10 @@ export const ScreenModal: React.FC = ({ className }) => {
}
if (Object.keys(parentData).length > 0) {
+ console.log("🔵 [ScreenModal] ADD모드 formData 설정:", JSON.stringify(parentData));
setFormData(parentData);
} else {
+ console.log("🔵 [ScreenModal] ADD모드 formData 비어있음");
setFormData({});
}
setOriginalData(null); // 신규 등록 모드
@@ -1016,6 +1026,10 @@ export const ScreenModal: React.FC = ({ className }) => {
= ({ className }) => {
formData={formData}
originalData={originalData} // 🆕 원본 데이터 전달 (UPDATE 판단용)
onFormDataChange={(fieldName, value) => {
- // 사용자가 실제로 데이터를 변경한 것으로 표시
formDataChangedRef.current = true;
setFormData((prev) => {
const newFormData = {
...prev,
[fieldName]: value,
};
+ console.log("🟡 [ScreenModal] onFormDataChange:", fieldName, "→", value, "| formData keys:", Object.keys(newFormData), "| process_code:", newFormData.process_code);
return newFormData;
});
}}
@@ -1245,6 +1259,7 @@ export const ScreenModal: React.FC = ({ className }) => {
화면 데이터가 없습니다.
@@ -1273,7 +1288,7 @@ export const ScreenModal: React.FC
-
-
-
-
- {separatorType === "custom" && (
-
-
- handleCustomSeparatorChange(e.target.value)}
- className="h-9"
- placeholder="최대 2자"
- maxLength={2}
- />
-
- )}
- - 규칙 사이에 들어갈 문자입니다 -
-규칙을 추가하여 코드를 구성하세요
+ = ({
return "규칙을 추가해주세요";
}
- const parts = config.parts
- .sort((a, b) => a.order - b.order)
- .map((part) => {
- if (part.generationMethod === "manual") {
- return part.manualConfig?.value || "XXX";
+ const sortedParts = config.parts.sort((a, b) => a.order - b.order);
+
+ const partValues = sortedParts.map((part) => {
+ if (part.generationMethod === "manual") {
+ return part.manualConfig?.value || "XXX";
+ }
+
+ const autoConfig = part.autoConfig || {};
+
+ switch (part.partType) {
+ case "sequence": {
+ const length = autoConfig.sequenceLength || 3;
+ const startFrom = autoConfig.startFrom || 1;
+ return String(startFrom).padStart(length, "0");
}
-
- const autoConfig = part.autoConfig || {};
-
- switch (part.partType) {
- // 1. 순번 (자동 증가)
- case "sequence": {
- const length = autoConfig.sequenceLength || 3;
- const startFrom = autoConfig.startFrom || 1;
- return String(startFrom).padStart(length, "0");
- }
-
- // 2. 숫자 (고정 자릿수)
- case "number": {
- const length = autoConfig.numberLength || 4;
- const value = autoConfig.numberValue || 0;
- return String(value).padStart(length, "0");
- }
-
- // 3. 날짜
- case "date": {
- const format = autoConfig.dateFormat || "YYYYMMDD";
-
- // 컬럼 기준 생성인 경우 placeholder 표시
- if (autoConfig.useColumnValue && autoConfig.sourceColumnName) {
- // 형식에 맞는 placeholder 반환
- switch (format) {
- case "YYYY": return "[YYYY]";
- case "YY": return "[YY]";
- case "YYYYMM": return "[YYYYMM]";
- case "YYMM": return "[YYMM]";
- case "YYYYMMDD": return "[YYYYMMDD]";
- case "YYMMDD": return "[YYMMDD]";
- default: return "[DATE]";
- }
- }
-
- // 현재 날짜 기준 생성
- const now = new Date();
- const year = now.getFullYear();
- const month = String(now.getMonth() + 1).padStart(2, "0");
- const day = String(now.getDate()).padStart(2, "0");
-
+ case "number": {
+ const length = autoConfig.numberLength || 4;
+ const value = autoConfig.numberValue || 0;
+ return String(value).padStart(length, "0");
+ }
+ case "date": {
+ const format = autoConfig.dateFormat || "YYYYMMDD";
+ if (autoConfig.useColumnValue && autoConfig.sourceColumnName) {
switch (format) {
- case "YYYY": return String(year);
- case "YY": return String(year).slice(-2);
- case "YYYYMM": return `${year}${month}`;
- case "YYMM": return `${String(year).slice(-2)}${month}`;
- case "YYYYMMDD": return `${year}${month}${day}`;
- case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
- default: return `${year}${month}${day}`;
+ case "YYYY": return "[YYYY]";
+ case "YY": return "[YY]";
+ case "YYYYMM": return "[YYYYMM]";
+ case "YYMM": return "[YYMM]";
+ case "YYYYMMDD": return "[YYYYMMDD]";
+ case "YYMMDD": return "[YYMMDD]";
+ default: return "[DATE]";
}
}
-
- // 4. 문자
- case "text":
- return autoConfig.textValue || "TEXT";
-
- default:
- return "XXX";
+ const now = new Date();
+ const year = now.getFullYear();
+ const month = String(now.getMonth() + 1).padStart(2, "0");
+ const day = String(now.getDate()).padStart(2, "0");
+ switch (format) {
+ case "YYYY": return String(year);
+ case "YY": return String(year).slice(-2);
+ case "YYYYMM": return `${year}${month}`;
+ case "YYMM": return `${String(year).slice(-2)}${month}`;
+ case "YYYYMMDD": return `${year}${month}${day}`;
+ case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
+ default: return `${year}${month}${day}`;
+ }
}
- });
+ case "text":
+ return autoConfig.textValue || "TEXT";
+ default:
+ return "XXX";
+ }
+ });
- return parts.join(config.separator || "");
+ // 파트별 개별 구분자로 결합
+ const globalSep = config.separator ?? "-";
+ let result = "";
+ partValues.forEach((val, idx) => {
+ result += val;
+ if (idx < partValues.length - 1) {
+ const sep = sortedParts[idx].separatorAfter ?? globalSep;
+ result += sep;
+ }
+ });
+ return result;
}, [config]);
if (compact) {
diff --git a/frontend/components/pop/designer/PopCanvas.tsx b/frontend/components/pop/designer/PopCanvas.tsx
index 7753a992..2edefb3a 100644
--- a/frontend/components/pop/designer/PopCanvas.tsx
+++ b/frontend/components/pop/designer/PopCanvas.tsx
@@ -13,8 +13,12 @@ import {
GAP_PRESETS,
GRID_BREAKPOINTS,
DEFAULT_COMPONENT_GRID_SIZE,
+ PopModalDefinition,
+ ModalSizePreset,
+ MODAL_SIZE_PRESETS,
+ resolveModalWidth,
} from "./types/pop-layout";
-import { ZoomIn, ZoomOut, Maximize2, Smartphone, Tablet, Lock, RotateCcw, AlertTriangle, EyeOff } from "lucide-react";
+import { ZoomIn, ZoomOut, Maximize2, Smartphone, Tablet, Lock, RotateCcw, AlertTriangle, EyeOff, Monitor, ChevronDown, ChevronUp } from "lucide-react";
import { useDrag } from "react-dnd";
import { Button } from "@/components/ui/button";
import {
@@ -112,6 +116,16 @@ interface PopCanvasProps {
onLockLayout?: () => void;
onResetOverride?: (mode: GridMode) => void;
onChangeGapPreset?: (preset: GapPreset) => void;
+ /** 컴포넌트가 자신의 rowSpan/colSpan 변경을 요청 (CardList 확장 등) */
+ onRequestResize?: (componentId: string, newRowSpan: number, newColSpan?: number) => void;
+ /** 대시보드 페이지 미리보기 인덱스 (-1이면 기본 모드) */
+ previewPageIndex?: number;
+ /** 현재 활성 캔버스 ID ("main" 또는 모달 ID) */
+ activeCanvasId?: string;
+ /** 캔버스 전환 콜백 */
+ onActiveCanvasChange?: (canvasId: string) => void;
+ /** 모달 정의 업데이트 콜백 */
+ onUpdateModal?: (modalId: string, updates: Partial) => void;
}
// ========================================
@@ -135,7 +149,43 @@ export default function PopCanvas({
onLockLayout,
onResetOverride,
onChangeGapPreset,
+ onRequestResize,
+ previewPageIndex,
+ activeCanvasId = "main",
+ onActiveCanvasChange,
+ onUpdateModal,
}: PopCanvasProps) {
+ // 모달 탭 데이터
+ const modalTabs = useMemo(() => {
+ const tabs: { id: string; label: string }[] = [{ id: "main", label: "메인화면" }];
+ if (layout.modals?.length) {
+ for (const modal of layout.modals) {
+ const numbering = modal.id.replace("modal-", "");
+ tabs.push({ id: modal.id, label: `모달화면 ${numbering}` });
+ }
+ }
+ return tabs;
+ }, [layout.modals]);
+
+ // activeCanvasId에 따라 렌더링할 layout 분기
+ const activeLayout = useMemo((): PopLayoutDataV5 => {
+ if (activeCanvasId === "main") return layout;
+ const modal = layout.modals?.find(m => m.id === activeCanvasId);
+ if (!modal) return layout; // fallback
+ return {
+ ...layout,
+ gridConfig: modal.gridConfig,
+ components: modal.components,
+ overrides: modal.overrides,
+ };
+ }, [layout, activeCanvasId]);
+
+ // 현재 활성 모달 정의 (모달 캔버스일 때만)
+ const activeModal = useMemo(() => {
+ if (activeCanvasId === "main") return null;
+ return layout.modals?.find(m => m.id === activeCanvasId) || null;
+ }, [layout.modals, activeCanvasId]);
+
// 줌 상태
const [canvasScale, setCanvasScale] = useState(0.8);
@@ -162,12 +212,12 @@ export default function PopCanvas({
const adjustedGap = Math.round(breakpoint.gap * gapMultiplier);
const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
- // 숨김 컴포넌트 ID 목록
- const hiddenComponentIds = layout.overrides?.[currentMode]?.hidden || [];
+ // 숨김 컴포넌트 ID 목록 (activeLayout 기반)
+ const hiddenComponentIds = activeLayout.overrides?.[currentMode]?.hidden || [];
// 동적 캔버스 높이 계산 (컴포넌트 배치 기반)
const dynamicCanvasHeight = useMemo(() => {
- const visibleComps = Object.values(layout.components).filter(
+ const visibleComps = Object.values(activeLayout.components).filter(
comp => !hiddenComponentIds.includes(comp.id)
);
@@ -186,7 +236,7 @@ export default function PopCanvas({
const height = totalRows * (breakpoint.rowHeight + adjustedGap) + adjustedPadding * 2;
return Math.max(MIN_CANVAS_HEIGHT, height);
- }, [layout.components, layout.overrides, currentMode, hiddenComponentIds, breakpoint.rowHeight, adjustedGap, adjustedPadding]);
+ }, [activeLayout.components, activeLayout.overrides, currentMode, hiddenComponentIds, breakpoint.rowHeight, adjustedGap, adjustedPadding]);
// 그리드 라벨 계산 (동적 행 수)
const gridLabels = useMemo(() => {
@@ -300,7 +350,7 @@ export default function PopCanvas({
};
// 현재 모드에서의 유효 위치들로 중첩 검사
- const effectivePositions = getAllEffectivePositions(layout, currentMode);
+ const effectivePositions = getAllEffectivePositions(activeLayout, currentMode);
const existingPositions = Array.from(effectivePositions.values());
const hasOverlap = existingPositions.some(pos =>
@@ -346,7 +396,7 @@ export default function PopCanvas({
const dragItem = item as DragItemMoveComponent & { fromHidden?: boolean };
// 현재 모드에서의 유효 위치들 가져오기
- const effectivePositions = getAllEffectivePositions(layout, currentMode);
+ const effectivePositions = getAllEffectivePositions(activeLayout, currentMode);
// 이동 중인 컴포넌트의 현재 유효 위치에서 colSpan/rowSpan 가져오기
// 검토 필요(ReviewPanel에서 클릭)나 숨김 컴포넌트는 effectivePositions에 없으므로 원본 사용
@@ -398,42 +448,42 @@ export default function PopCanvas({
canDrop: monitor.canDrop(),
}),
}),
- [onDropComponent, onMoveComponent, onUnhideComponent, breakpoint, layout, currentMode, canvasScale, customWidth, adjustedGap, adjustedPadding]
+ [onDropComponent, onMoveComponent, onUnhideComponent, breakpoint, layout, activeLayout, currentMode, canvasScale, customWidth, adjustedGap, adjustedPadding]
);
drop(canvasRef);
- // 빈 상태 체크
- const isEmpty = Object.keys(layout.components).length === 0;
+ // 빈 상태 체크 (activeLayout 기반)
+ const isEmpty = Object.keys(activeLayout.components).length === 0;
- // 숨김 처리된 컴포넌트 객체 목록 (hiddenComponentIds는 라인 166에서 정의됨)
+ // 숨김 처리된 컴포넌트 객체 목록
const hiddenComponents = useMemo(() => {
return hiddenComponentIds
- .map(id => layout.components[id])
+ .map(id => activeLayout.components[id])
.filter(Boolean);
- }, [hiddenComponentIds, layout.components]);
+ }, [hiddenComponentIds, activeLayout.components]);
// 표시되는 컴포넌트 목록 (숨김 제외)
const visibleComponents = useMemo(() => {
- return Object.values(layout.components).filter(
+ return Object.values(activeLayout.components).filter(
comp => !hiddenComponentIds.includes(comp.id)
);
- }, [layout.components, hiddenComponentIds]);
+ }, [activeLayout.components, hiddenComponentIds]);
// 검토 필요 컴포넌트 목록
const reviewComponents = useMemo(() => {
return visibleComponents.filter(comp => {
- const hasOverride = !!layout.overrides?.[currentMode]?.positions?.[comp.id];
+ const hasOverride = !!activeLayout.overrides?.[currentMode]?.positions?.[comp.id];
return needsReview(currentMode, hasOverride);
});
- }, [visibleComponents, layout.overrides, currentMode]);
+ }, [visibleComponents, activeLayout.overrides, currentMode]);
// 검토 패널 표시 여부 (12칸 모드가 아니고, 검토 필요 컴포넌트가 있을 때)
const showReviewPanel = currentMode !== "tablet_landscape" && reviewComponents.length > 0;
// 12칸 모드가 아닐 때만 패널 표시
// 숨김 패널: 숨김 컴포넌트가 있거나, 그리드에 컴포넌트가 있을 때 드롭 영역으로 표시
- const hasGridComponents = Object.keys(layout.components).length > 0;
+ const hasGridComponents = Object.keys(activeLayout.components).length > 0;
const showHiddenPanel = currentMode !== "tablet_landscape" && (hiddenComponents.length > 0 || hasGridComponents);
const showRightPanel = showReviewPanel || showHiddenPanel;
@@ -573,6 +623,32 @@ export default function PopCanvas({
+ {/* 모달 탭 바 (모달이 1개 이상 있을 때만 표시) */}
+ {modalTabs.length > 1 && (
+
{currentRule.parts.map((part, index) => (
- handleUpdatePart(part.order, updates)}
- onDelete={() => handleDeletePart(part.order)}
- isPreview={isPreview}
- />
+
+
))}
)}
diff --git a/frontend/components/numbering-rule/NumberingRulePreview.tsx b/frontend/components/numbering-rule/NumberingRulePreview.tsx
index a9179959..eff551a1 100644
--- a/frontend/components/numbering-rule/NumberingRulePreview.tsx
+++ b/frontend/components/numbering-rule/NumberingRulePreview.tsx
@@ -17,75 +17,71 @@ export const NumberingRulePreview: React.FC
+ handleUpdatePart(part.order, updates)}
+ onDelete={() => handleDeletePart(part.order)}
+ isPreview={isPreview}
+ />
+ {/* 카드 하단에 구분자 설정 (마지막 파트 제외) */}
+ {index < currentRule.parts.length - 1 && (
+
+
+ 뒤 구분자
+
+ {separatorTypes[part.order] === "custom" && (
+ handlePartCustomSeparatorChange(part.order, e.target.value)}
+ className="h-6 w-14 text-center text-[10px]"
+ placeholder="2자"
+ maxLength={2}
+ />
+ )}
+
+ )}
+
+ {modalTabs.map(tab => (
+
+ ))}
+
+ )}
+
+ {/* 모달 사이즈 설정 패널 (모달 캔버스 활성 시) */}
+ {activeModal && (
+
+ {/* 헤더 (항상 표시) */}
+
+
+ {/* 펼침 영역 */}
+ {isExpanded && (
+
+ );
+}
+
+// ========================================
+// 모달 사이즈 썸네일 미리보기 (캔버스 축소판 + 모달 오버레이)
+// ========================================
+
+function ModalThumbnailPreview({
+ sizeConfig,
+ currentMode,
+}: {
+ sizeConfig: { default: ModalSizePreset; modeOverrides?: Partial
+ {/* 기본 사이즈 선택 */}
+
+ )}
+
+ 모달 사이즈
+
+
+ {/* 모드별 개별 설정 토글 */}
+
+ {SIZE_PRESET_ORDER.map(preset => {
+ const info = MODAL_SIZE_PRESETS[preset];
+ return (
+
+ );
+ })}
+
+
+ 모드별 개별 사이즈
+
+
+
+ {/* 모드별 설정 */}
+ {usePerMode && (
+
+ {MODE_LABELS.map(({ mode, label, icon: Icon }) => {
+ const modePreset = sizeConfig.modeOverrides?.[mode] ?? sizeConfig.default;
+ return (
+
+ )}
+
+ {/* 캔버스 축소판 미리보기 */}
+
+
+ );
+ })}
+
+
+
+ {SIZE_PRESET_ORDER.map(preset => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/frontend/components/pop/designer/PopDesigner.tsx b/frontend/components/pop/designer/PopDesigner.tsx
index 8bcc8f3a..902eb9a9 100644
--- a/frontend/components/pop/designer/PopDesigner.tsx
+++ b/frontend/components/pop/designer/PopDesigner.tsx
@@ -28,11 +28,15 @@ import {
createEmptyPopLayoutV5,
isV5Layout,
addComponentToV5Layout,
+ createComponentDefinitionV5,
GRID_BREAKPOINTS,
+ PopModalDefinition,
+ PopDataConnection,
} from "./types/pop-layout";
import { getAllEffectivePositions } from "./utils/gridUtils";
import { screenApi } from "@/lib/api/screen";
import { ScreenDefinition } from "@/types/screen";
+import { PopDesignerContext } from "./PopDesignerContext";
// ========================================
// Props
@@ -51,6 +55,7 @@ export default function PopDesigner({
onBackToList,
onScreenUpdate,
}: PopDesignerProps) {
+
// ========================================
// 레이아웃 상태
// ========================================
@@ -69,13 +74,24 @@ export default function PopDesigner({
// 선택 상태
const [selectedComponentId, setSelectedComponentId] = useState
+ 미리보기
+
+
+
+
+
+ {/* 반투명 배경 오버레이 (모달이 열렸을 때의 딤 효과) */}
+
+
+ {/* 모달 영역 (가운데 정렬, FULL이면 전체 채움) */}
+
+
+
+
+ {/* 하단 수치 표시 */}
+
+ 모달
+
+
+ {isFull ? "FULL" : `${modalWidth}px`} / {modeWidth}px
+
+
{/* 헤더 */}
@@ -637,6 +881,11 @@ export default function PopDesigner({
onLockLayout={handleLockLayout}
onResetOverride={handleResetOverride}
onChangeGapPreset={handleChangeGapPreset}
+ onRequestResize={handleRequestResize}
+ previewPageIndex={previewPageIndex}
+ activeCanvasId={activeCanvasId}
+ onActiveCanvasChange={navigateToCanvas}
+ onUpdateModal={handleUpdateModal}
/>
@@ -652,10 +901,21 @@ export default function PopDesigner({
? (updates) => handleUpdateComponent(selectedComponentId, updates)
: undefined
}
+ allComponents={Object.values(layout.components)}
+ onSelectComponent={setSelectedComponentId}
+ selectedComponentId={selectedComponentId}
+ previewPageIndex={previewPageIndex}
+ onPreviewPage={setPreviewPageIndex}
+ connections={layout.dataFlow?.connections || []}
+ onAddConnection={handleAddConnection}
+ onUpdateConnection={handleUpdateConnection}
+ onRemoveConnection={handleRemoveConnection}
+ modals={layout.modals}
/>
+
+ )}
+
+
+ {allComponents.map((comp) => {
+ const label = comp.label
+ || COMPONENT_TYPE_LABELS[comp.type]
+ || comp.type;
+ const isActive = comp.id === selectedComponentId;
+ return (
+
+ );
+ })}
+
+
+
@@ -419,20 +522,4 @@ function VisibilityForm({ component, onUpdate }: VisibilityFormProps) {
);
}
-// ========================================
-// 데이터 바인딩 플레이스홀더
-// ========================================
-function DataBindingPlaceholder() {
- return (
- ) => void;
+ onUpdateConnection?: (connectionId: string, conn: Omit) => void;
+ onRemoveConnection?: (connectionId: string) => void;
+}
+
+// ========================================
+// ConnectionEditor
+// ========================================
+
+export default function ConnectionEditor({
+ component,
+ allComponents,
+ connections,
+ onAddConnection,
+ onUpdateConnection,
+ onRemoveConnection,
+}: ConnectionEditorProps) {
+ const registeredComp = PopComponentRegistry.getComponent(component.type);
+ const meta = registeredComp?.connectionMeta;
+
+ const outgoing = connections.filter(
+ (c) => c.sourceComponent === component.id
+ );
+ const incoming = connections.filter(
+ (c) => c.targetComponent === component.id
+ );
+
+ const hasSendable = meta?.sendable && meta.sendable.length > 0;
+ const hasReceivable = meta?.receivable && meta.receivable.length > 0;
+
+ if (!hasSendable && !hasReceivable) {
+ return (
+ ;
+ const cols: string[] = [];
+
+ if (Array.isArray(cfg.listColumns)) {
+ (cfg.listColumns as Array<{ columnName?: string }>).forEach((c) => {
+ if (c.columnName && !cols.includes(c.columnName)) cols.push(c.columnName);
+ });
+ }
+
+ if (Array.isArray(cfg.selectedColumns)) {
+ (cfg.selectedColumns as string[]).forEach((c) => {
+ if (!cols.includes(c)) cols.push(c);
+ });
+ }
+
+ return cols;
+}
+
+/** 대상 컴포넌트의 데이터소스 테이블명 추출 */
+function extractTableName(comp: PopComponentDefinitionV5 | undefined): string {
+ if (!comp?.config) return "";
+ const cfg = comp.config as Record;
+ const ds = cfg.dataSource as { tableName?: string } | undefined;
+ return ds?.tableName || "";
+}
+
+// ========================================
+// 보내기 섹션
+// ========================================
+
+interface SendSectionProps {
+ component: PopComponentDefinitionV5;
+ meta: ComponentConnectionMeta;
+ allComponents: PopComponentDefinitionV5[];
+ outgoing: PopDataConnection[];
+ onAddConnection?: (conn: Omit) => void;
+ onUpdateConnection?: (connectionId: string, conn: Omit) => void;
+ onRemoveConnection?: (connectionId: string) => void;
+}
+
+function SendSection({
+ component,
+ meta,
+ allComponents,
+ outgoing,
+ onAddConnection,
+ onUpdateConnection,
+ onRemoveConnection,
+}: SendSectionProps) {
+ const [editingId, setEditingId] = React.useState(null);
+
+ return (
+ ) => void;
+ onCancel?: () => void;
+ submitLabel: string;
+}
+
+function ConnectionForm({
+ component,
+ meta,
+ allComponents,
+ initial,
+ onSubmit,
+ onCancel,
+ submitLabel,
+}: ConnectionFormProps) {
+ const [selectedOutput, setSelectedOutput] = React.useState(
+ initial?.sourceOutput || meta.sendable[0]?.key || ""
+ );
+ const [selectedTargetId, setSelectedTargetId] = React.useState(
+ initial?.targetComponent || ""
+ );
+ const [selectedTargetInput, setSelectedTargetInput] = React.useState(
+ initial?.targetInput || ""
+ );
+ const [filterColumns, setFilterColumns] = React.useState(
+ initial?.filterConfig?.targetColumns ||
+ (initial?.filterConfig?.targetColumn ? [initial.filterConfig.targetColumn] : [])
+ );
+ const [filterMode, setFilterMode] = React.useState<
+ "equals" | "contains" | "starts_with" | "range"
+ >(initial?.filterConfig?.filterMode || "contains");
+
+ const targetCandidates = allComponents.filter((c) => {
+ if (c.id === component.id) return false;
+ const reg = PopComponentRegistry.getComponent(c.type);
+ return reg?.connectionMeta?.receivable && reg.connectionMeta.receivable.length > 0;
+ });
+
+ const targetComp = selectedTargetId
+ ? allComponents.find((c) => c.id === selectedTargetId)
+ : null;
+
+ const targetMeta = targetComp
+ ? PopComponentRegistry.getComponent(targetComp.type)?.connectionMeta
+ : null;
+
+ // 보내는 값 + 받는 컴포넌트가 결정되면 받는 방식 자동 매칭
+ React.useEffect(() => {
+ if (!selectedOutput || !targetMeta?.receivable?.length) return;
+ // 이미 선택된 값이 있으면 건드리지 않음
+ if (selectedTargetInput) return;
+
+ const receivables = targetMeta.receivable;
+ // 1) 같은 key가 있으면 자동 매칭
+ const exactMatch = receivables.find((r) => r.key === selectedOutput);
+ if (exactMatch) {
+ setSelectedTargetInput(exactMatch.key);
+ return;
+ }
+ // 2) receivable이 1개뿐이면 자동 선택
+ if (receivables.length === 1) {
+ setSelectedTargetInput(receivables[0].key);
+ }
+ }, [selectedOutput, targetMeta, selectedTargetInput]);
+
+ // 화면에 표시 중인 컬럼
+ const displayColumns = React.useMemo(
+ () => extractDisplayColumns(targetComp || undefined),
+ [targetComp]
+ );
+
+ // DB 테이블 전체 컬럼 (비동기 조회)
+ const tableName = React.useMemo(
+ () => extractTableName(targetComp || undefined),
+ [targetComp]
+ );
+ const [allDbColumns, setAllDbColumns] = React.useState([]);
+ const [dbColumnsLoading, setDbColumnsLoading] = React.useState(false);
+
+ React.useEffect(() => {
+ if (!tableName) {
+ setAllDbColumns([]);
+ return;
+ }
+ let cancelled = false;
+ setDbColumnsLoading(true);
+ getTableColumns(tableName).then((res) => {
+ if (cancelled) return;
+ if (res.success && res.data?.columns) {
+ setAllDbColumns(res.data.columns.map((c) => c.columnName));
+ } else {
+ setAllDbColumns([]);
+ }
+ setDbColumnsLoading(false);
+ });
+ return () => { cancelled = true; };
+ }, [tableName]);
+
+ // 표시 컬럼과 데이터 전용 컬럼 분리
+ const displaySet = React.useMemo(() => new Set(displayColumns), [displayColumns]);
+ const dataOnlyColumns = React.useMemo(
+ () => allDbColumns.filter((c) => !displaySet.has(c)),
+ [allDbColumns, displaySet]
+ );
+ const hasAnyColumns = displayColumns.length > 0 || dataOnlyColumns.length > 0;
+
+ const toggleColumn = (col: string) => {
+ setFilterColumns((prev) =>
+ prev.includes(col) ? prev.filter((c) => c !== col) : [...prev, col]
+ );
+ };
+
+ const handleSubmit = () => {
+ if (!selectedOutput || !selectedTargetId || !selectedTargetInput) return;
+
+ const isEvent = isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput);
+
+ onSubmit({
+ sourceComponent: component.id,
+ sourceField: "",
+ sourceOutput: selectedOutput,
+ targetComponent: selectedTargetId,
+ targetField: "",
+ targetInput: selectedTargetInput,
+ filterConfig:
+ !isEvent && filterColumns.length > 0
+ ? {
+ targetColumn: filterColumns[0],
+ targetColumns: filterColumns,
+ filterMode,
+ }
+ : undefined,
+ label: buildConnectionLabel(
+ component,
+ selectedOutput,
+ allComponents.find((c) => c.id === selectedTargetId),
+ selectedTargetInput,
+ filterColumns
+ ),
+ });
+
+ if (!initial) {
+ setSelectedTargetId("");
+ setSelectedTargetInput("");
+ setFilterColumns([]);
+ }
+ };
+
+ return (
+ = {
"pop-sample": "샘플",
+ "pop-text": "텍스트",
+ "pop-icon": "아이콘",
+ "pop-dashboard": "대시보드",
+ "pop-card-list": "카드 목록",
+ "pop-button": "버튼",
+ "pop-string-list": "리스트 목록",
+ "pop-search": "검색",
};
// ========================================
@@ -80,9 +93,12 @@ export default function PopRenderer({
onComponentMove,
onComponentResize,
onComponentResizeEnd,
+ onRequestResize,
overrideGap,
overridePadding,
className,
+ currentScreenId,
+ previewPageIndex,
}: PopRendererProps) {
const { gridConfig, components, overrides } = layout;
@@ -110,18 +126,27 @@ export default function PopRenderer({
return Math.max(10, maxRowEnd + 3);
}, [components, overrides, mode, hiddenIds]);
- // CSS Grid 스타일 (행 높이 강제 고정: 셀 크기 = 컴포넌트 크기의 기준)
+ // CSS Grid 스타일
+ // 디자인 모드: 행 높이 고정 (정밀한 레이아웃 편집)
+ // 뷰어 모드: minmax(rowHeight, auto) (컴포넌트가 컨텐츠에 맞게 확장 가능)
+ const rowTemplate = isDesignMode
+ ? `repeat(${dynamicRowCount}, ${breakpoint.rowHeight}px)`
+ : `repeat(${dynamicRowCount}, minmax(${breakpoint.rowHeight}px, auto))`;
+ const autoRowHeight = isDesignMode
+ ? `${breakpoint.rowHeight}px`
+ : `minmax(${breakpoint.rowHeight}px, auto)`;
+
const gridStyle = useMemo((): React.CSSProperties => ({
display: "grid",
gridTemplateColumns: `repeat(${breakpoint.columns}, 1fr)`,
- gridTemplateRows: `repeat(${dynamicRowCount}, ${breakpoint.rowHeight}px)`,
- gridAutoRows: `${breakpoint.rowHeight}px`,
+ gridTemplateRows: rowTemplate,
+ gridAutoRows: autoRowHeight,
gap: `${finalGap}px`,
padding: `${finalPadding}px`,
minHeight: "100%",
backgroundColor: "#ffffff",
position: "relative",
- }), [breakpoint, finalGap, finalPadding, dynamicRowCount]);
+ }), [breakpoint, finalGap, finalPadding, dynamicRowCount, rowTemplate, autoRowHeight]);
// 그리드 가이드 셀 생성 (동적 행 수)
const gridCells = useMemo(() => {
@@ -248,15 +273,17 @@ export default function PopRenderer({
onComponentMove={onComponentMove}
onComponentResize={onComponentResize}
onComponentResizeEnd={onComponentResizeEnd}
+ onRequestResize={onRequestResize}
+ previewPageIndex={previewPageIndex}
/>
);
}
- // 뷰어 모드: 드래그 없는 일반 렌더링
+ // 뷰어 모드: 드래그 없는 일반 렌더링 (overflow visible로 컨텐츠 확장 허용)
return (
) : (
{
+ const compType = c.componentType || c.overrides?.type;
+ if (compType !== "v2-repeater") return false;
+ const compConfig = c.componentConfig || c.overrides || {};
+ return !compConfig.useCustomTable;
+ });
+
+ if (hasRepeaterOnSameTable) {
+ // 동일 테이블 리피터: 마스터 저장 스킵, 리피터만 저장
+ // 리피터가 mainFormData를 각 행에 병합하여 N건 INSERT 처리
+ try {
+ window.dispatchEvent(
+ new CustomEvent("repeaterSave", {
+ detail: {
+ parentId: null,
+ masterRecordId: null,
+ mainFormData: formData,
+ tableName: screenInfo.tableName,
+ },
+ }),
+ );
+
+ toast.success("데이터가 성공적으로 저장되었습니다.");
+ } catch (error) {
+ toast.error("저장 중 오류가 발생했습니다.");
+ }
+ return;
+ }
+
try {
- // 🆕 리피터 데이터(배열)를 마스터 저장에서 제외 (V2Repeater가 별도로 저장)
+ // 리피터 데이터(배열)를 마스터 저장에서 제외 (V2Repeater가 별도로 저장)
// 단, 파일 업로드 컴포넌트의 파일 배열(objid 배열)은 포함
const masterFormData: Record = {};
@@ -591,11 +621,8 @@ export const InteractiveScreenViewerDynamic: React.FC {
if (!Array.isArray(value)) {
- // 배열이 아닌 값은 그대로 저장
masterFormData[key] = value;
} else if (mediaColumnNames.has(key)) {
- // v2-media 컴포넌트의 배열은 첫 번째 값만 저장 (단일 파일 컬럼 대응)
- // 또는 JSON 문자열로 변환하려면 JSON.stringify(value) 사용
masterFormData[key] = value.length > 0 ? value[0] : null;
console.log(`📷 미디어 데이터 저장: ${key}, objid: ${masterFormData[key]}`);
} else {
@@ -608,7 +635,6 @@ export const InteractiveScreenViewerDynamic: React.FC(null);
+ // 다른 레이어의 컴포넌트 메타 정보 캐시 (데이터 전달 타겟 선택용)
+ const [otherLayerComponents, setOtherLayerComponents] = useState([]);
+
// 🆕 activeLayerId 변경 시 해당 레이어의 Zone 찾기
useEffect(() => {
if (activeLayerId <= 1 || !selectedScreen?.screenId) {
@@ -578,6 +581,41 @@ export default function ScreenDesigner({
findZone();
}, [activeLayerId, selectedScreen?.screenId, zones]);
+ // 다른 레이어의 컴포넌트 메타 정보 로드 (데이터 전달 타겟 선택용)
+ useEffect(() => {
+ if (!selectedScreen?.screenId) return;
+ const loadOtherLayerComponents = async () => {
+ try {
+ const allLayers = await screenApi.getScreenLayers(selectedScreen.screenId);
+ const currentLayerId = activeLayerIdRef.current || 1;
+ const otherLayers = allLayers.filter((l: any) => l.layer_id !== currentLayerId && l.layer_id > 0);
+
+ const components: ComponentData[] = [];
+ for (const layerInfo of otherLayers) {
+ try {
+ const layerData = await screenApi.getLayerLayout(selectedScreen.screenId, layerInfo.layer_id);
+ const rawComps = layerData?.components;
+ if (rawComps && Array.isArray(rawComps)) {
+ for (const comp of rawComps) {
+ components.push({
+ ...comp,
+ _layerName: layerInfo.layer_name || `레이어 ${layerInfo.layer_id}`,
+ _layerId: String(layerInfo.layer_id),
+ } as any);
+ }
+ }
+ } catch {
+ // 개별 레이어 로드 실패 무시
+ }
+ }
+ setOtherLayerComponents(components);
+ } catch {
+ setOtherLayerComponents([]);
+ }
+ };
+ loadOtherLayerComponents();
+ }, [selectedScreen?.screenId, activeLayerId]);
+
// 캔버스에 렌더링할 컴포넌트 (DB 기반 레이어: 각 레이어별로 별도 로드되므로 전체 표시)
const visibleComponents = useMemo(() => {
return layout.components;
@@ -6516,8 +6554,8 @@ export default function ScreenDesigner({
updateComponentProperty(selectedComponent.id, "style", style);
}
}}
- allComponents={layout.components} // 🆕 플로우 위젯 감지용
- menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
+ allComponents={[...layout.components, ...otherLayerComponents]}
+ menuObjid={menuObjid}
/>
)}
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index ea2febb1..4919ec33 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -1,6 +1,6 @@
"use client";
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -92,13 +92,14 @@ export const ButtonConfigPanel: React.FC = ({
const [blockTablePopoverOpen, setBlockTablePopoverOpen] = useState>({}); // 블록별 테이블 Popover 열림 상태
const [blockColumnPopoverOpen, setBlockColumnPopoverOpen] = useState>({}); // 블록별 컬럼 Popover 열림 상태
- // 🆕 데이터 전달 필드 매핑용 상태
- const [mappingSourceColumns, setMappingSourceColumns] = useState>([]);
+ // 🆕 데이터 전달 필드 매핑용 상태 (멀티 테이블 매핑 지원)
+ const [mappingSourceColumnsMap, setMappingSourceColumnsMap] = useState>>({});
const [mappingTargetColumns, setMappingTargetColumns] = useState>([]);
- const [mappingSourcePopoverOpen, setMappingSourcePopoverOpen] = useState>({});
- const [mappingTargetPopoverOpen, setMappingTargetPopoverOpen] = useState>({});
- const [mappingSourceSearch, setMappingSourceSearch] = useState>({});
- const [mappingTargetSearch, setMappingTargetSearch] = useState>({});
+ const [mappingSourcePopoverOpen, setMappingSourcePopoverOpen] = useState>({});
+ const [mappingTargetPopoverOpen, setMappingTargetPopoverOpen] = useState>({});
+ const [mappingSourceSearch, setMappingSourceSearch] = useState>({});
+ const [mappingTargetSearch, setMappingTargetSearch] = useState>({});
+ const [activeMappingGroupIndex, setActiveMappingGroupIndex] = useState(0);
// 🆕 openModalWithData 전용 필드 매핑 상태
const [modalSourceColumns, setModalSourceColumns] = useState>([]);
@@ -295,57 +296,57 @@ export const ButtonConfigPanel: React.FC = ({
}
};
- // 🆕 데이터 전달 소스/타겟 테이블 컬럼 로드
- useEffect(() => {
- const sourceTable = config.action?.dataTransfer?.sourceTable;
- const targetTable = config.action?.dataTransfer?.targetTable;
+ // 멀티 테이블 매핑: 소스/타겟 테이블 컬럼 로드
+ const loadMappingColumns = useCallback(async (tableName: string): Promise> => {
+ try {
+ const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+ if (response.data.success) {
+ let columnData = response.data.data;
+ if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+ if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
- const loadColumns = async () => {
- if (sourceTable) {
- try {
- const response = await apiClient.get(`/table-management/tables/${sourceTable}/columns`);
- if (response.data.success) {
- let columnData = response.data.data;
- if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
- if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-
- if (Array.isArray(columnData)) {
- const columns = columnData.map((col: any) => ({
- name: col.name || col.columnName,
- label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
- }));
- setMappingSourceColumns(columns);
- }
- }
- } catch (error) {
- console.error("소스 테이블 컬럼 로드 실패:", error);
+ if (Array.isArray(columnData)) {
+ return columnData.map((col: any) => ({
+ name: col.name || col.columnName,
+ label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
+ }));
}
}
+ } catch (error) {
+ console.error(`테이블 ${tableName} 컬럼 로드 실패:`, error);
+ }
+ return [];
+ }, []);
- if (targetTable) {
- try {
- const response = await apiClient.get(`/table-management/tables/${targetTable}/columns`);
- if (response.data.success) {
- let columnData = response.data.data;
- if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
- if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+ useEffect(() => {
+ const multiTableMappings: Array<{ sourceTable: string }> = config.action?.dataTransfer?.multiTableMappings || [];
+ const legacySourceTable = config.action?.dataTransfer?.sourceTable;
+ const targetTable = config.action?.dataTransfer?.targetTable;
- if (Array.isArray(columnData)) {
- const columns = columnData.map((col: any) => ({
- name: col.name || col.columnName,
- label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
- }));
- setMappingTargetColumns(columns);
- }
- }
- } catch (error) {
- console.error("타겟 테이블 컬럼 로드 실패:", error);
+ const loadAll = async () => {
+ const sourceTableNames = multiTableMappings.map((m) => m.sourceTable).filter(Boolean);
+ if (legacySourceTable && !sourceTableNames.includes(legacySourceTable)) {
+ sourceTableNames.push(legacySourceTable);
+ }
+
+ const newMap: Record> = {};
+ for (const tbl of sourceTableNames) {
+ if (!mappingSourceColumnsMap[tbl]) {
+ newMap[tbl] = await loadMappingColumns(tbl);
}
}
+ if (Object.keys(newMap).length > 0) {
+ setMappingSourceColumnsMap((prev) => ({ ...prev, ...newMap }));
+ }
+
+ if (targetTable && mappingTargetColumns.length === 0) {
+ const cols = await loadMappingColumns(targetTable);
+ setMappingTargetColumns(cols);
+ }
};
- loadColumns();
- }, [config.action?.dataTransfer?.sourceTable, config.action?.dataTransfer?.targetTable]);
+ loadAll();
+ }, [config.action?.dataTransfer?.multiTableMappings, config.action?.dataTransfer?.sourceTable, config.action?.dataTransfer?.targetTable, loadMappingColumns]);
// 🆕 modal 액션: 대상 화면 테이블 조회 및 필드 매핑 로드
useEffect(() => {
@@ -2966,11 +2967,17 @@ export const ButtonConfigPanel: React.FC = ({
- {/* 데이터 제공 가능한 컴포넌트 필터링 */}
+ {/* 자동 탐색 옵션 (레이어별 테이블이 다를 때 유용) */}
+
+
+ {/* 데이터 제공 가능한 컴포넌트 필터링 (모든 레이어 포함) */}
{allComponents
.filter((comp: any) => {
const type = comp.componentType || comp.type || "";
- // 데이터를 제공할 수 있는 컴포넌트 타입들
return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
type.includes(t),
);
@@ -2978,11 +2985,17 @@ export const ButtonConfigPanel: React.FC = ({
.map((comp: any) => {
const compType = comp.componentType || comp.type || "unknown";
const compLabel = comp.label || comp.componentConfig?.title || comp.id;
+ const layerName = comp._layerName;
return (
);
@@ -2999,7 +3012,9 @@ export const ButtonConfigPanel: React.FC = ({
)}
-
- {/* 필드 매핑 규칙 */}
+ {/* 멀티 테이블 필드 매핑 */}
-
- );
-}
diff --git a/frontend/components/pop/designer/panels/ComponentPalette.tsx b/frontend/components/pop/designer/panels/ComponentPalette.tsx
index 05db0aab..42b1ee06 100644
--- a/frontend/components/pop/designer/panels/ComponentPalette.tsx
+++ b/frontend/components/pop/designer/panels/ComponentPalette.tsx
@@ -3,7 +3,7 @@
import { useDrag } from "react-dnd";
import { cn } from "@/lib/utils";
import { PopComponentType } from "../types/pop-layout";
-import { Square, FileText } from "lucide-react";
+import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search } from "lucide-react";
import { DND_ITEM_TYPES } from "../constants";
// 컴포넌트 정의
@@ -27,6 +27,42 @@ const PALETTE_ITEMS: PaletteItem[] = [
icon: FileText,
description: "텍스트, 시간, 이미지 표시",
},
+ {
+ type: "pop-icon",
+ label: "아이콘",
+ icon: MousePointer,
+ description: "네비게이션 아이콘 (화면 이동, URL, 뒤로가기)",
+ },
+ {
+ type: "pop-dashboard",
+ label: "대시보드",
+ icon: BarChart3,
+ description: "KPI, 차트, 게이지, 통계 집계",
+ },
+ {
+ type: "pop-card-list",
+ label: "카드 목록",
+ icon: LayoutGrid,
+ description: "테이블 데이터를 카드 형태로 표시",
+ },
+ {
+ type: "pop-button",
+ label: "버튼",
+ icon: MousePointerClick,
+ description: "액션 버튼 (저장/삭제/API/모달)",
+ },
+ {
+ type: "pop-string-list",
+ label: "리스트 목록",
+ icon: List,
+ description: "테이블 데이터를 리스트/카드로 표시",
+ },
+ {
+ type: "pop-search",
+ label: "검색",
+ icon: Search,
+ description: "조건 입력 (텍스트/날짜/선택/모달)",
+ },
];
// 드래그 가능한 컴포넌트 아이템
diff --git a/frontend/components/pop/designer/panels/ConnectionEditor.tsx b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
new file mode 100644
index 00000000..725b4f3f
--- /dev/null
+++ b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
@@ -0,0 +1,655 @@
+"use client";
+
+import React from "react";
+import { ArrowRight, Link2, Unlink2, Plus, Trash2, Pencil, X, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ PopComponentDefinitionV5,
+ PopDataConnection,
+} from "../types/pop-layout";
+import {
+ PopComponentRegistry,
+ type ComponentConnectionMeta,
+} from "@/lib/registry/PopComponentRegistry";
+import { getTableColumns } from "@/lib/api/tableManagement";
+
+// ========================================
+// Props
+// ========================================
+
+interface ConnectionEditorProps {
+ component: PopComponentDefinitionV5;
+ allComponents: PopComponentDefinitionV5[];
+ connections: PopDataConnection[];
+ onAddConnection?: (conn: Omit
-
- 데이터 바인딩
-- Phase 4에서 구현 예정 -
-
+
+ );
+ }
+
+ return (
+
+
+ 연결 없음
++ 이 컴포넌트는 다른 컴포넌트와 연결할 수 없습니다 +
+
+ {hasSendable && (
+
+ );
+}
+
+// ========================================
+// 대상 컴포넌트에서 정보 추출
+// ========================================
+
+/** 화면에 표시 중인 컬럼만 추출 */
+function extractDisplayColumns(comp: PopComponentDefinitionV5 | undefined): string[] {
+ if (!comp?.config) return [];
+ const cfg = comp.config as Record
+
+
+ {/* 기존 연결 목록 */}
+ {outgoing.map((conn) => (
+ onAddConnection?.(data)}
+ submitLabel="연결 추가"
+ />
+
+ );
+}
+
+// ========================================
+// 연결 폼 (추가/수정 공용)
+// ========================================
+
+interface ConnectionFormProps {
+ component: PopComponentDefinitionV5;
+ meta: ComponentConnectionMeta;
+ allComponents: PopComponentDefinitionV5[];
+ initial?: PopDataConnection;
+ onSubmit: (data: Omit
+ {editingId === conn.id ? (
+ {
+ onUpdateConnection?.(conn.id, data);
+ setEditingId(null);
+ }}
+ onCancel={() => setEditingId(null)}
+ submitLabel="수정"
+ />
+ ) : (
+
+ ))}
+
+ {/* 새 연결 추가 */}
+
+
+ {conn.label || `${conn.sourceOutput} -> ${conn.targetInput}`}
+
+
+ {onRemoveConnection && (
+
+ )}
+
+ )}
+
+ {onCancel && (
+
+ );
+}
+
+// ========================================
+// 받기 섹션 (읽기 전용)
+// ========================================
+
+interface ReceiveSectionProps {
+ component: PopComponentDefinitionV5;
+ meta: ComponentConnectionMeta;
+ allComponents: PopComponentDefinitionV5[];
+ incoming: PopDataConnection[];
+}
+
+function ReceiveSection({
+ component,
+ meta,
+ allComponents,
+ incoming,
+}: ReceiveSectionProps) {
+ return (
+
+
+ )}
+ {!onCancel && (
+ 연결 수정
+ +새 연결 추가
+ )} + + {/* 보내는 값 */} +
+ 보내는 값
+
+
+
+ {/* 받는 컴포넌트 */}
+
+ 받는 컴포넌트
+
+
+
+ {/* 받는 방식 */}
+ {targetMeta && (
+
+ 받는 방식
+
+
+ )}
+
+ {/* 필터 설정: event 타입 연결이면 숨김 */}
+ {selectedTargetInput && !isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput) && (
+
+
+ )}
+
+ {/* 제출 버튼 */}
+
+ 필터할 컬럼
+ + {dbColumnsLoading ? ( +
+
+ ) : hasAnyColumns ? (
+
+ {/* 표시 컬럼 그룹 */}
+ {displayColumns.length > 0 && (
+
+ ) : (
+ setFilterColumns(e.target.value ? [e.target.value] : [])}
+ placeholder="컬럼명 입력"
+ className="h-7 text-xs"
+ />
+ )}
+
+ {filterColumns.length > 0 && (
+
+
+ )}
+
+ {/* 데이터 전용 컬럼 그룹 */}
+ {dataOnlyColumns.length > 0 && (
+ 화면 표시 컬럼
+ {displayColumns.map((col) => ( +
+ toggleColumn(col)}
+ />
+
+
+ ))}
+
+ {displayColumns.length > 0 && (
+
+ )}
+
+ )}
+ 데이터 전용 컬럼
+ {dataOnlyColumns.map((col) => ( +
+ toggleColumn(col)}
+ />
+
+
+ ))}
+ + {filterColumns.length}개 컬럼 중 하나라도 일치하면 표시 +
+ )} + + {/* 필터 방식 */} +
+
+ 필터 방식
+ +
+
+
+
+ );
+}
+
+// ========================================
+// 유틸
+// ========================================
+
+function isEventTypeConnection(
+ sourceMeta: ComponentConnectionMeta | undefined,
+ outputKey: string,
+ targetMeta: ComponentConnectionMeta | null | undefined,
+ inputKey: string,
+): boolean {
+ const sourceItem = sourceMeta?.sendable?.find((s) => s.key === outputKey);
+ const targetItem = targetMeta?.receivable?.find((r) => r.key === inputKey);
+ return sourceItem?.type === "event" || targetItem?.type === "event";
+}
+
+function buildConnectionLabel(
+ source: PopComponentDefinitionV5,
+ _outputKey: string,
+ target: PopComponentDefinitionV5 | undefined,
+ _inputKey: string,
+ columns?: string[]
+): string {
+ const srcLabel = source.label || source.id;
+ const tgtLabel = target?.label || target?.id || "?";
+ const colInfo = columns && columns.length > 0
+ ? ` [${columns.join(", ")}]`
+ : "";
+ return `${srcLabel} -> ${tgtLabel}${colInfo}`;
+}
diff --git a/frontend/components/pop/designer/renderers/PopRenderer.tsx b/frontend/components/pop/designer/renderers/PopRenderer.tsx
index b0299813..88100d27 100644
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@@ -48,12 +48,18 @@ interface PopRendererProps {
onComponentResize?: (componentId: string, newPosition: PopGridPosition) => void;
/** 컴포넌트 크기 조정 완료 (히스토리 저장용) */
onComponentResizeEnd?: (componentId: string) => void;
+ /** 컴포넌트가 자신의 rowSpan/colSpan 변경을 요청 (CardList 확장 등) */
+ onRequestResize?: (componentId: string, newRowSpan: number, newColSpan?: number) => void;
/** Gap 오버라이드 (Gap 프리셋 적용된 값) */
overrideGap?: number;
/** Padding 오버라이드 (Gap 프리셋 적용된 값) */
overridePadding?: number;
/** 추가 className */
className?: string;
+ /** 현재 편집 중인 화면 ID (아이콘 네비게이션용) */
+ currentScreenId?: number;
+ /** 대시보드 페이지 미리보기 인덱스 */
+ previewPageIndex?: number;
}
// ========================================
@@ -62,6 +68,13 @@ interface PopRendererProps {
const COMPONENT_TYPE_LABELS: Record
+ {meta.receivable.map((r) => (
+
+
+ {incoming.length > 0 ? (
+
+ {r.label}
+ {r.description && (
+
+ ))}
+ + {r.description} +
+ )} +
+
+ ) : (
+ 연결된 소스
+ {incoming.map((conn) => { + const sourceComp = allComponents.find( + (c) => c.id === conn.sourceComponent + ); + return ( +
+
+ );
+ })}
+ + 아직 연결된 소스가 없습니다. 보내는 컴포넌트에서 연결을 설정하세요. +
+ )} +
+
+ );
+ }
+
+ // 미등록: preview 컴포넌트 또는 기본 플레이스홀더
return (
-
- {/* 헤더 */}
-
) : screenData ? (
+
-
- {component.label || typeLabel}
+
);
}
- // 실제 모드: 컴포넌트 렌더링
- return renderActualComponent(component);
+ // 실제 모드: 컴포넌트 렌더링 (뷰어 모드에서도 리사이즈 지원)
+ return renderActualComponent(component, effectivePosition, onRequestResize, screenId);
}
// ========================================
// 실제 컴포넌트 렌더링 (뷰어 모드)
// ========================================
-function renderActualComponent(component: PopComponentDefinitionV5): React.ReactNode {
- const typeLabel = COMPONENT_TYPE_LABELS[component.type];
-
- // 샘플 박스 렌더링
+function renderActualComponent(
+ component: PopComponentDefinitionV5,
+ effectivePosition?: PopGridPosition,
+ onRequestResize?: (componentId: string, newRowSpan: number, newColSpan?: number) => void,
+ screenId?: string,
+): React.ReactNode {
+ // 레지스트리에서 등록된 실제 컴포넌트 조회
+ const registeredComp = PopComponentRegistry.getComponent(component.type);
+ const ActualComp = registeredComp?.component;
+
+ if (ActualComp) {
+ return (
+
+ {PreviewComponent ? (
+
-
- {/* 내용: 등록된 preview 컴포넌트 또는 기본 플레이스홀더 */}
-
- {PreviewComponent ? (
-
-
- {/* 위치 정보 표시 (유효 위치 사용) */}
-
- {effectivePosition.col},{effectivePosition.row}
- ({effectivePosition.colSpan}×{effectivePosition.rowSpan})
-
+ )}
+
+ );
+ }
+
+ // 미등록 컴포넌트: 플레이스홀더 (fallback)
+ const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
return (
{component.label || typeLabel}
diff --git a/frontend/components/pop/designer/types/pop-layout.ts b/frontend/components/pop/designer/types/pop-layout.ts
index 1a8335ec..15e70c65 100644
--- a/frontend/components/pop/designer/types/pop-layout.ts
+++ b/frontend/components/pop/designer/types/pop-layout.ts
@@ -9,7 +9,7 @@
/**
* POP 컴포넌트 타입
*/
-export type PopComponentType = "pop-sample" | "pop-text"; // 테스트용 샘플 박스, 텍스트 컴포넌트
+export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-button" | "pop-string-list" | "pop-search";
/**
* 데이터 흐름 정의
@@ -25,6 +25,16 @@ export interface PopDataConnection {
targetComponent: string;
targetField: string;
transformType?: "direct" | "calculate" | "lookup";
+
+ // v2: 연결 시스템 전용
+ sourceOutput?: string;
+ targetInput?: string;
+ filterConfig?: {
+ targetColumn: string;
+ targetColumns?: string[];
+ filterMode: "equals" | "contains" | "starts_with" | "range";
+ };
+ label?: string;
}
/**
@@ -208,6 +218,9 @@ export interface PopLayoutDataV5 {
mobile_landscape?: PopModeOverrideV5;
tablet_portrait?: PopModeOverrideV5;
};
+
+ // 모달 캔버스 목록 (버튼의 "모달 열기" 액션으로 생성)
+ modals?: PopModalDefinition[];
}
/**
@@ -342,6 +355,12 @@ export const isV5Layout = (layout: any): layout is PopLayoutDataV5 => {
export const DEFAULT_COMPONENT_GRID_SIZE: Record = {
"pop-sample": { colSpan: 2, rowSpan: 1 },
"pop-text": { colSpan: 3, rowSpan: 1 },
+ "pop-icon": { colSpan: 1, rowSpan: 2 },
+ "pop-dashboard": { colSpan: 6, rowSpan: 3 },
+ "pop-card-list": { colSpan: 4, rowSpan: 3 },
+ "pop-button": { colSpan: 2, rowSpan: 1 },
+ "pop-string-list": { colSpan: 4, rowSpan: 3 },
+ "pop-search": { colSpan: 4, rowSpan: 2 },
};
/**
@@ -380,6 +399,95 @@ export const addComponentToV5Layout = (
return newLayout;
};
+// ========================================
+// 모달 캔버스 정의
+// ========================================
+
+// ========================================
+// 모달 사이즈 시스템
+// ========================================
+
+/** 모달 사이즈 프리셋 */
+export type ModalSizePreset = "sm" | "md" | "lg" | "xl" | "full";
+
+/** 모달 사이즈 프리셋별 픽셀 값 */
+export const MODAL_SIZE_PRESETS: Record = {
+ sm: { width: 400, label: "Small (400px)" },
+ md: { width: 600, label: "Medium (600px)" },
+ lg: { width: 800, label: "Large (800px)" },
+ xl: { width: 1000, label: "XLarge (1000px)" },
+ full: { width: 9999, label: "Full (화면 꽉 참)" },
+};
+
+/** 모달 사이즈 설정 (모드별 독립 설정 가능) */
+export interface ModalSizeConfig {
+ /** 기본 사이즈 (모든 모드 공통, 기본값: "md") */
+ default: ModalSizePreset;
+ /** 모드별 오버라이드 (미설정 시 default 사용) */
+ modeOverrides?: {
+ mobile_portrait?: ModalSizePreset;
+ mobile_landscape?: ModalSizePreset;
+ tablet_portrait?: ModalSizePreset;
+ tablet_landscape?: ModalSizePreset;
+ };
+}
+
+/**
+ * 주어진 모드에서 모달의 실제 픽셀 너비를 계산
+ * - 뷰포트보다 모달이 크면 자동으로 뷰포트에 맞춤 (full 승격)
+ */
+export function resolveModalWidth(
+ sizeConfig: ModalSizeConfig | undefined,
+ mode: GridMode,
+ viewportWidth: number,
+): number {
+ const preset = sizeConfig?.modeOverrides?.[mode] ?? sizeConfig?.default ?? "md";
+ const presetEntry = MODAL_SIZE_PRESETS[preset] ?? MODAL_SIZE_PRESETS.md;
+ const presetWidth = presetEntry.width;
+ // full이면 뷰포트 전체, 아니면 프리셋과 뷰포트 중 작은 값
+ if (preset === "full") return viewportWidth;
+ return Math.min(presetWidth, viewportWidth);
+}
+
+/**
+ * 모달 캔버스 정의
+ *
+ * 버튼의 "모달 열기" 액션이 참조하는 모달 화면.
+ * 메인 캔버스와 동일한 그리드 시스템을 사용.
+ * 중첩 모달: parentId로 부모-자식 관계 표현.
+ */
+export interface PopModalDefinition {
+ /** 모달 고유 ID (예: "modal-1", "modal-1-1") */
+ id: string;
+ /** 부모 모달 ID (최상위 모달은 undefined) */
+ parentId?: string;
+ /** 모달 제목 (다이얼로그 헤더에 표시) */
+ title: string;
+ /** 이 모달을 연 버튼의 컴포넌트 ID */
+ sourceButtonId: string;
+ /** 모달 내부 그리드 설정 */
+ gridConfig: PopGridConfig;
+ /** 모달 내부 컴포넌트 */
+ components: Record;
+ /** 모드별 오버라이드 */
+ overrides?: {
+ mobile_portrait?: PopModeOverrideV5;
+ mobile_landscape?: PopModeOverrideV5;
+ tablet_portrait?: PopModeOverrideV5;
+ };
+ /** 모달 프레임 설정 (닫기 방식) */
+ frameConfig?: {
+ /** 닫기(X) 버튼 표시 여부 (기본 true) */
+ showCloseButton?: boolean;
+ /** 오버레이 클릭으로 닫기 (기본 true) */
+ closeOnOverlay?: boolean;
+ /** ESC 키로 닫기 (기본 true) */
+ closeOnEsc?: boolean;
+ };
+ /** 모달 사이즈 설정 (미설정 시 md 기본) */
+ sizeConfig?: ModalSizeConfig;
+}
+
// ========================================
// 레거시 타입 별칭 (하위 호환 - 추후 제거)
// ========================================
diff --git a/frontend/components/pop/viewer/PopViewerWithModals.tsx b/frontend/components/pop/viewer/PopViewerWithModals.tsx
new file mode 100644
index 00000000..8d6e4227
--- /dev/null
+++ b/frontend/components/pop/viewer/PopViewerWithModals.tsx
@@ -0,0 +1,203 @@
+/**
+ * PopViewerWithModals - 뷰어 모드에서 모달 렌더링 래퍼
+ *
+ * PopRenderer를 감싸서:
+ * 1. __pop_modal_open__ 이벤트 구독 → Dialog 열기
+ * 2. __pop_modal_close__ 이벤트 구독 → Dialog 닫기
+ * 3. 모달 스택 관리 (중첩 모달 지원)
+ *
+ * 모달 내부는 또 다른 PopRenderer로 렌더링 (독립 그리드).
+ */
+
+"use client";
+
+import { useState, useCallback, useEffect, useMemo } from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import PopRenderer from "../designer/renderers/PopRenderer";
+import type { PopLayoutDataV5, PopModalDefinition, GridMode } from "../designer/types/pop-layout";
+import { detectGridMode, resolveModalWidth } from "../designer/types/pop-layout";
+import { usePopEvent } from "@/hooks/pop/usePopEvent";
+import { useConnectionResolver } from "@/hooks/pop/useConnectionResolver";
+
+// ========================================
+// 타입
+// ========================================
+
+interface PopViewerWithModalsProps {
+ /** 전체 레이아웃 (모달 정의 포함) */
+ layout: PopLayoutDataV5;
+ /** 뷰포트 너비 */
+ viewportWidth: number;
+ /** 화면 ID (이벤트 버스용) */
+ screenId: string;
+ /** 현재 그리드 모드 (PopRenderer 전달용) */
+ currentMode?: GridMode;
+ /** Gap 오버라이드 */
+ overrideGap?: number;
+ /** Padding 오버라이드 */
+ overridePadding?: number;
+}
+
+/** 열린 모달 상태 */
+interface OpenModal {
+ definition: PopModalDefinition;
+ returnTo?: string;
+}
+
+// ========================================
+// 메인 컴포넌트
+// ========================================
+
+export default function PopViewerWithModals({
+ layout,
+ viewportWidth,
+ screenId,
+ currentMode,
+ overrideGap,
+ overridePadding,
+}: PopViewerWithModalsProps) {
+ const [modalStack, setModalStack] = useState([]);
+ const { subscribe, publish } = usePopEvent(screenId);
+
+ // 연결 해석기: layout에 정의된 connections를 이벤트 라우팅으로 변환
+ const stableConnections = useMemo(
+ () => layout.dataFlow?.connections ?? [],
+ [layout.dataFlow?.connections]
+ );
+ useConnectionResolver({
+ screenId,
+ connections: stableConnections,
+ });
+
+ // 모달 열기/닫기 이벤트 구독
+ useEffect(() => {
+ const unsubOpen = subscribe("__pop_modal_open__", (payload: unknown) => {
+ const data = payload as {
+ modalId?: string;
+ title?: string;
+ mode?: string;
+ returnTo?: string;
+ };
+
+ if (data?.modalId) {
+ const modalDef = layout.modals?.find(m => m.id === data.modalId);
+ if (modalDef) {
+ setModalStack(prev => [...prev, {
+ definition: modalDef,
+ returnTo: data.returnTo,
+ }]);
+ }
+ }
+ });
+
+ const unsubClose = subscribe("__pop_modal_close__", (payload: unknown) => {
+ const data = payload as { selectedRow?: Record } | undefined;
+
+ setModalStack(prev => {
+ if (prev.length === 0) return prev;
+ const topModal = prev[prev.length - 1];
+
+ // 결과 데이터가 있고, 반환 대상이 지정된 경우 결과 이벤트 발행
+ if (data?.selectedRow && topModal.returnTo) {
+ publish("__pop_modal_result__", {
+ selectedRow: data.selectedRow,
+ returnTo: topModal.returnTo,
+ });
+ }
+
+ return prev.slice(0, -1);
+ });
+ });
+
+ return () => {
+ unsubOpen();
+ unsubClose();
+ };
+ }, [subscribe, publish, layout.modals]);
+
+ // 최상위 모달만 닫기 (X 버튼, overlay 클릭, ESC)
+ const handleCloseTopModal = useCallback(() => {
+ setModalStack(prev => prev.slice(0, -1));
+ }, []);
+
+ return (
+ <>
+ {/* 메인 화면 렌더링 */}
+ = ({ className }) => {
if (response.success) {
const masterRecordId = response.data?.id || formData.id;
- // 🆕 리피터 데이터 저장 이벤트 발생 (V2Repeater 컴포넌트가 리스닝)
- window.dispatchEvent(
- new CustomEvent("repeaterSave", {
- detail: {
- parentId: masterRecordId,
- masterRecordId,
- mainFormData: formData,
- tableName: screenData.screenInfo.tableName,
- },
- }),
- );
- console.log("📋 [EditModal] repeaterSave 이벤트 발생:", { masterRecordId, tableName: screenData.screenInfo.tableName });
-
toast.success("데이터가 생성되었습니다.");
// 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
@@ -1233,14 +1221,48 @@ export const EditModal: React.FC = ({ className }) => {
toast.warning("저장은 완료되었으나 연결된 제어 실행 중 오류가 발생했습니다.");
}
+ // V2Repeater 디테일 데이터 저장 (모달 닫기 전에 실행)
+ try {
+ const repeaterSavePromise = new Promise((resolve) => {
+ const fallbackTimeout = setTimeout(resolve, 5000);
+ const handler = () => {
+ clearTimeout(fallbackTimeout);
+ window.removeEventListener("repeaterSaveComplete", handler);
+ resolve();
+ };
+ window.addEventListener("repeaterSaveComplete", handler);
+ });
+
+ console.log("🟢 [EditModal] INSERT 후 repeaterSave 이벤트 발행:", {
+ parentId: masterRecordId,
+ tableName: screenData.screenInfo.tableName,
+ });
+
+ window.dispatchEvent(
+ new CustomEvent("repeaterSave", {
+ detail: {
+ parentId: masterRecordId,
+ tableName: screenData.screenInfo.tableName,
+ mainFormData: formData,
+ masterRecordId,
+ },
+ }),
+ );
+
+ await repeaterSavePromise;
+ console.log("✅ [EditModal] INSERT 후 repeaterSave 완료");
+ } catch (repeaterError) {
+ console.error("❌ [EditModal] repeaterSave 오류:", repeaterError);
+ }
+
handleClose();
} else {
throw new Error(response.message || "생성에 실패했습니다.");
}
} else {
// UPDATE 모드 - PUT (전체 업데이트)
- // originalData 비교 없이 formData 전체를 보냄
- const recordId = formData.id;
+ // VIEW에서 온 데이터의 경우 master_id를 우선 사용 (마스터-디테일 구조)
+ const recordId = formData.master_id || formData.id;
if (!recordId) {
console.error("[EditModal] UPDATE 실패: formData에 id가 없습니다.", {
@@ -1293,15 +1315,6 @@ export const EditModal: React.FC = ({ className }) => {
if (response.success) {
toast.success("데이터가 수정되었습니다.");
- // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
- if (modalState.onSave) {
- try {
- modalState.onSave();
- } catch (callbackError) {
- console.error("onSave 콜백 에러:", callbackError);
- }
- }
-
// 🆕 저장 후 제어로직 실행 (버튼의 After 타이밍 제어)
// 우선순위: 모달 내부 저장 버튼 설정(saveButtonConfig) > 수정 버튼에서 전달받은 설정(buttonConfig)
try {
@@ -1338,6 +1351,44 @@ export const EditModal: React.FC = ({ className }) => {
toast.warning("저장은 완료되었으나 연결된 제어 실행 중 오류가 발생했습니다.");
}
+ // V2Repeater 디테일 데이터 저장 (모달 닫기 전에 실행)
+ try {
+ const repeaterSavePromise = new Promise((resolve) => {
+ const fallbackTimeout = setTimeout(resolve, 5000);
+ const handler = () => {
+ clearTimeout(fallbackTimeout);
+ window.removeEventListener("repeaterSaveComplete", handler);
+ resolve();
+ };
+ window.addEventListener("repeaterSaveComplete", handler);
+ });
+
+ console.log("🟢 [EditModal] UPDATE 후 repeaterSave 이벤트 발행:", {
+ parentId: recordId,
+ tableName: screenData.screenInfo.tableName,
+ });
+
+ window.dispatchEvent(
+ new CustomEvent("repeaterSave", {
+ detail: {
+ parentId: recordId,
+ tableName: screenData.screenInfo.tableName,
+ mainFormData: formData,
+ masterRecordId: recordId,
+ },
+ }),
+ );
+
+ await repeaterSavePromise;
+ console.log("✅ [EditModal] UPDATE 후 repeaterSave 완료");
+ } catch (repeaterError) {
+ console.error("❌ [EditModal] repeaterSave 오류:", repeaterError);
+ }
+
+ // 리피터 저장 완료 후 메인 테이블 새로고침
+ if (modalState.onSave) {
+ try { modalState.onSave(); } catch {}
+ }
handleClose();
} else {
throw new Error(response.message || "수정에 실패했습니다.");
@@ -1404,12 +1455,16 @@ export const EditModal: React.FC = ({ className }) => {
{
const baseHeight = (screenDimensions?.height || 600) + 30;
if (activeConditionalComponents.length > 0) {
@@ -1565,6 +1620,7 @@ export const EditModal: React.FC = ({ className }) => {
);
})}
+ 화면 데이터가 없습니다.
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx index 30fc5539..a35c5ed2 100644 --- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx +++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx @@ -571,8 +571,38 @@ export const InteractiveScreenViewerDynamic: React.FC
+ 자동 탐색 (현재 활성 테이블)
+ (auto)
+
+
{compLabel}
({compType})
+ {layerName && (
+
+ {layerName}
+
+ )}
테이블, 반복 필드 그룹 등 데이터를 제공하는 컴포넌트
++ 레이어별로 다른 테이블이 있을 경우 "자동 탐색"을 선택하면 현재 활성화된 레이어의 테이블을 자동으로 사용합니다 +
@@ -3037,33 +3052,47 @@ export const ButtonConfigPanel: React.FC = ({
- {
- const currentSources = config.action?.dataTransfer?.additionalSources || [];
- const newSources = [...currentSources];
- if (newSources.length === 0) {
- newSources.push({ componentId: "", fieldName: e.target.value });
- } else {
- newSources[0] = { ...newSources[0], fieldName: e.target.value };
- }
- onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
- }}
- className="h-8 text-xs"
- />
-
+
+
+
+
+
+
+ 컬럼을 찾을 수 없습니다.
+
+ {
+ const currentSources = config.action?.dataTransfer?.additionalSources || [];
+ const newSources = [...currentSources];
+ if (newSources.length === 0) {
+ newSources.push({ componentId: "", fieldName: "" });
+ } else {
+ newSources[0] = { ...newSources[0], fieldName: "" };
+ }
+ onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+ }}
+ className="text-xs"
+ >
+
+ {(mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns).map((col) => (
+ {
+ const currentSources = config.action?.dataTransfer?.additionalSources || [];
+ const newSources = [...currentSources];
+ if (newSources.length === 0) {
+ newSources.push({ componentId: "", fieldName: col.name });
+ } else {
+ newSources[0] = { ...newSources[0], fieldName: col.name };
+ }
+ onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+ }}
+ className="text-xs"
+ >
+
+ ))}
+
+
+
+
+
+
타겟 테이블에 저장될 필드명
+추가 데이터가 저장될 타겟 테이블 컬럼
- {/* 소스/타겟 테이블 선택 */}
- = ({
+ id,
+ value,
+ onChange,
+ placeholder,
+ disabled = false,
+ readOnly = false,
+ includeTime = false,
+}) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [currentMonth, setCurrentMonth] = useState(new Date());
+ const [viewMode, setViewMode] = useState<"calendar" | "year" | "month">("calendar");
+ const [yearRangeStart, setYearRangeStart] = useState(() => Math.floor(new Date().getFullYear() / 12) * 12);
+ const [timeValue, setTimeValue] = useState("00:00");
+ const [isTyping, setIsTyping] = useState(false);
+ const [typingValue, setTypingValue] = useState("");
+
+ const parseDate = (val: string): Date | undefined => {
+ if (!val) return undefined;
+ try {
+ const date = new Date(val);
+ if (isNaN(date.getTime())) return undefined;
+ return date;
+ } catch {
+ return undefined;
+ }
+ };
+
+ const selectedDate = parseDate(value);
+
+ useEffect(() => {
+ if (isOpen) {
+ setViewMode("calendar");
+ if (selectedDate) {
+ setCurrentMonth(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1));
+ setYearRangeStart(Math.floor(selectedDate.getFullYear() / 12) * 12);
+ if (includeTime) {
+ const hours = String(selectedDate.getHours()).padStart(2, "0");
+ const minutes = String(selectedDate.getMinutes()).padStart(2, "0");
+ setTimeValue(`${hours}:${minutes}`);
+ }
+ } else {
+ setCurrentMonth(new Date());
+ setYearRangeStart(Math.floor(new Date().getFullYear() / 12) * 12);
+ setTimeValue("00:00");
+ }
+ } else {
+ setIsTyping(false);
+ setTypingValue("");
+ }
+ }, [isOpen]);
+
+ const formatDisplayValue = (): string => {
+ if (!selectedDate) return "";
+ if (includeTime) return format(selectedDate, "yyyy-MM-dd HH:mm", { locale: ko });
+ return format(selectedDate, "yyyy-MM-dd", { locale: ko });
+ };
+
+ const buildDateStr = (date: Date, time?: string) => {
+ const y = date.getFullYear();
+ const m = String(date.getMonth() + 1).padStart(2, "0");
+ const d = String(date.getDate()).padStart(2, "0");
+ if (includeTime) return `${y}-${m}-${d}T${time || timeValue}`;
+ return `${y}-${m}-${d}`;
+ };
+
+ const handleDateClick = (date: Date) => {
+ onChange(buildDateStr(date));
+ if (!includeTime) setIsOpen(false);
+ };
+
+ const handleTimeChange = (newTime: string) => {
+ setTimeValue(newTime);
+ if (selectedDate) onChange(buildDateStr(selectedDate, newTime));
+ };
+
+ const handleSetToday = () => {
+ const today = new Date();
+ if (includeTime) {
+ const t = `${String(today.getHours()).padStart(2, "0")}:${String(today.getMinutes()).padStart(2, "0")}`;
+ onChange(buildDateStr(today, t));
+ } else {
+ onChange(buildDateStr(today));
+ }
+ setIsOpen(false);
+ };
+
+ const handleClear = () => {
+ onChange("");
+ setIsTyping(false);
+ setIsOpen(false);
+ };
+
+ const handleTriggerInput = (raw: string) => {
+ setIsTyping(true);
+ setTypingValue(raw);
+ if (!isOpen) setIsOpen(true);
+ const digitsOnly = raw.replace(/\D/g, "");
+ if (digitsOnly.length === 8) {
+ const y = parseInt(digitsOnly.slice(0, 4), 10);
+ const m = parseInt(digitsOnly.slice(4, 6), 10) - 1;
+ const d = parseInt(digitsOnly.slice(6, 8), 10);
+ const date = new Date(y, m, d);
+ if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d && y >= 1900 && y <= 2100) {
+ onChange(buildDateStr(date));
+ setCurrentMonth(new Date(y, m, 1));
+ if (!includeTime) setTimeout(() => { setIsTyping(false); setIsOpen(false); }, 400);
+ else setIsTyping(false);
+ }
+ }
+ };
+
+ const monthStart = startOfMonth(currentMonth);
+ const monthEnd = endOfMonth(currentMonth);
+ const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
+ const dayOfWeek = monthStart.getDay();
+ const paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+ const allDays = [...Array(paddingDays).fill(null), ...days];
+
+ return (
+ { if (!open) { setIsOpen(false); setIsTyping(false); } }}>
+
+
+ e.preventDefault()}>
+
+
+ );
+};
diff --git a/frontend/components/screen/filters/InlineCellDatePicker.tsx b/frontend/components/screen/filters/InlineCellDatePicker.tsx
new file mode 100644
index 00000000..f47546b4
--- /dev/null
+++ b/frontend/components/screen/filters/InlineCellDatePicker.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+ format,
+ addMonths,
+ subMonths,
+ startOfMonth,
+ endOfMonth,
+ eachDayOfInterval,
+ isSameMonth,
+ isSameDay,
+ isToday,
+} from "date-fns";
+import { ko } from "date-fns/locale";
+import { cn } from "@/lib/utils";
+
+interface InlineCellDatePickerProps {
+ value: string;
+ onChange: (value: string) => void;
+ onSave: () => void;
+ onKeyDown: (e: React.KeyboardEvent) => void;
+ inputRef?: React.RefObject;
+}
+
+export const InlineCellDatePicker: React.FC = ({
+ value,
+ onChange,
+ onSave,
+ onKeyDown,
+ inputRef,
+}) => {
+ const [isOpen, setIsOpen] = useState(true);
+ const [currentMonth, setCurrentMonth] = useState(new Date());
+ const [viewMode, setViewMode] = useState<"calendar" | "year" | "month">("calendar");
+ const [yearRangeStart, setYearRangeStart] = useState(() => Math.floor(new Date().getFullYear() / 12) * 12);
+ const localInputRef = useRef(null);
+ const actualInputRef = inputRef || localInputRef;
+
+ const parseDate = (val: string): Date | undefined => {
+ if (!val) return undefined;
+ try {
+ const date = new Date(val);
+ if (isNaN(date.getTime())) return undefined;
+ return date;
+ } catch {
+ return undefined;
+ }
+ };
+
+ const selectedDate = parseDate(value);
+
+ useEffect(() => {
+ if (selectedDate) {
+ setCurrentMonth(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1));
+ }
+ }, []);
+
+ const handleDateClick = (date: Date) => {
+ const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+ onChange(dateStr);
+ setIsOpen(false);
+ setTimeout(() => onSave(), 50);
+ };
+
+ const handleSetToday = () => {
+ const today = new Date();
+ const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+ onChange(dateStr);
+ setIsOpen(false);
+ setTimeout(() => onSave(), 50);
+ };
+
+ const handleClear = () => {
+ onChange("");
+ setIsOpen(false);
+ setTimeout(() => onSave(), 50);
+ };
+
+ const handleInputChange = (raw: string) => {
+ onChange(raw);
+ const digitsOnly = raw.replace(/\D/g, "");
+ if (digitsOnly.length === 8) {
+ const y = parseInt(digitsOnly.slice(0, 4), 10);
+ const m = parseInt(digitsOnly.slice(4, 6), 10) - 1;
+ const d = parseInt(digitsOnly.slice(6, 8), 10);
+ const date = new Date(y, m, d);
+ if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d && y >= 1900 && y <= 2100) {
+ const dateStr = `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+ onChange(dateStr);
+ setIsOpen(false);
+ setTimeout(() => onSave(), 50);
+ }
+ }
+ };
+
+ const handlePopoverClose = (open: boolean) => {
+ if (!open) {
+ setIsOpen(false);
+ onSave();
+ }
+ };
+
+ const monthStart = startOfMonth(currentMonth);
+ const monthEnd = endOfMonth(currentMonth);
+ const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
+
+ const startDate = new Date(monthStart);
+ const dayOfWeek = startDate.getDay();
+ const paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+ const allDays = [...Array(paddingDays).fill(null), ...days];
+
+ return (
+
+
+ handleInputChange(e.target.value)}
+ onKeyDown={onKeyDown}
+ onClick={() => setIsOpen(true)}
+ placeholder="YYYYMMDD"
+ className="border-primary bg-background h-full w-full border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
+ />
+
+ e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}>
+
+
+ );
+};
diff --git a/frontend/components/screen/filters/ModernDatePicker.tsx b/frontend/components/screen/filters/ModernDatePicker.tsx
index 54fdcfed..79f16a41 100644
--- a/frontend/components/screen/filters/ModernDatePicker.tsx
+++ b/frontend/components/screen/filters/ModernDatePicker.tsx
@@ -34,6 +34,8 @@ export const ModernDatePicker: React.FC = ({ label, value
const [isOpen, setIsOpen] = useState(false);
const [currentMonth, setCurrentMonth] = useState(new Date());
const [selectingType, setSelectingType] = useState<"from" | "to">("from");
+ const [viewMode, setViewMode] = useState<"calendar" | "year" | "month">("calendar");
+ const [yearRangeStart, setYearRangeStart] = useState(() => Math.floor(new Date().getFullYear() / 12) * 12);
// 로컬 임시 상태 (확인 버튼 누르기 전까지 임시 저장)
const [tempValue, setTempValue] = useState(value || {});
@@ -43,6 +45,7 @@ export const ModernDatePicker: React.FC = ({ label, value
if (isOpen) {
setTempValue(value || {});
setSelectingType("from");
+ setViewMode("calendar");
}
}, [isOpen, value]);
@@ -234,60 +237,150 @@ export const ModernDatePicker: React.FC = ({ label, value
- {/* 월 네비게이션 */}
-
-
) : (
= ({
1. 소스 컴포넌트에서 데이터를 선택합니다
- 2. 필드 매핑 규칙을 설정합니다 (예: 품번 → 품목코드) + 2. 소스 테이블별로 필드 매핑 규칙을 설정합니다
- 3. 이 버튼을 클릭하면 매핑된 데이터가 타겟으로 전달됩니다 + 3. 이 버튼을 클릭하면 소스 테이블을 자동 감지하여 매핑된 데이터가 타겟으로 전달됩니다
diff --git a/frontend/components/screen/filters/FormDatePicker.tsx b/frontend/components/screen/filters/FormDatePicker.tsx
new file mode 100644
index 00000000..5ab5a1ff
--- /dev/null
+++ b/frontend/components/screen/filters/FormDatePicker.tsx
@@ -0,0 +1,344 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
+import {
+ format,
+ addMonths,
+ subMonths,
+ startOfMonth,
+ endOfMonth,
+ eachDayOfInterval,
+ isSameMonth,
+ isSameDay,
+ isToday,
+} from "date-fns";
+import { ko } from "date-fns/locale";
+import { cn } from "@/lib/utils";
+
+interface FormDatePickerProps {
+ id?: string;
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ disabled?: boolean;
+ readOnly?: boolean;
+ includeTime?: boolean;
+}
+
+export const FormDatePicker: React.FC
-
-
-
-
-
-
-
-
- 테이블을 찾을 수 없습니다
-
- {availableTables.map((table) => (
- {
- onUpdateProperty("componentConfig.action.dataTransfer.sourceTable", table.name);
- }}
- className="text-xs"
- >
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 테이블을 찾을 수 없습니다
-
- {availableTables.map((table) => (
- {
- onUpdateProperty("componentConfig.action.dataTransfer.targetTable", table.name);
- }}
- className="text-xs"
- >
-
- ))}
-
-
-
-
-
-
+ {/* 타겟 테이블 (공통) */}
+
+
+
+
+
+
+
+
+
+ 테이블을 찾을 수 없습니다
+
+ {availableTables.map((table) => (
+ {
+ onUpdateProperty("componentConfig.action.dataTransfer.targetTable", table.name);
+ }}
+ className="text-xs"
+ >
+
+ ))}
+
+
+
+
+
- {/* 필드 매핑 규칙 */}
+ {/* 소스 테이블 매핑 그룹 */}
-
+
- 소스 필드를 타겟 필드에 매핑합니다. 비워두면 같은 이름의 필드로 자동 매핑됩니다. + 여러 소스 테이블에서 데이터를 전달할 때, 각 테이블별로 매핑 규칙을 설정합니다. 런타임에 소스 테이블을 자동 감지합니다.
- {!config.action?.dataTransfer?.sourceTable || !config.action?.dataTransfer?.targetTable ? ( + {!config.action?.dataTransfer?.targetTable ? (
-
- ) : (config.action?.dataTransfer?.mappingRules || []).length === 0 ? (
+ ) : !(config.action?.dataTransfer?.multiTableMappings || []).length ? (
먼저 소스 테이블과 타겟 테이블을 선택하세요.
+먼저 타겟 테이블을 선택하세요.
- 매핑 규칙이 없습니다. 같은 이름의 필드로 자동 매핑됩니다. + 매핑 그룹이 없습니다. 소스 테이블을 추가하세요.
- {(config.action?.dataTransfer?.mappingRules || []).map((rule: any, index: number) => (
-
@@ -3567,9 +3712,9 @@ export const ButtonConfigPanel: React.FC
- {/* 소스 필드 선택 (Combobox) */}
-
)}
- setMappingSourcePopoverOpen((prev) => ({ ...prev, [index]: open }))}
+ {/* 소스 테이블 탭 */}
+
- ))}
+ {/* 활성 그룹 편집 영역 */}
+ {(() => {
+ const multiMappings = config.action?.dataTransfer?.multiTableMappings || [];
+ const activeGroup = multiMappings[activeMappingGroupIndex];
+ if (!activeGroup) return null;
+
+ const activeSourceTable = activeGroup.sourceTable || "";
+ const activeSourceColumns = mappingSourceColumnsMap[activeSourceTable] || [];
+ const activeRules: any[] = activeGroup.mappingRules || [];
+
+ const updateGroupField = (field: string, value: any) => {
+ const mappings = [...multiMappings];
+ mappings[activeMappingGroupIndex] = { ...mappings[activeMappingGroupIndex], [field]: value };
+ onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", mappings);
+ };
+
+ return (
+
+ {(config.action?.dataTransfer?.multiTableMappings || []).map((group: any, gIdx: number) => (
+
-
-
+
-
- →
-
- {/* 타겟 필드 선택 (Combobox) */}
-
- setMappingTargetPopoverOpen((prev) => ({ ...prev, [index]: open }))}
+ {group.sourceTable
+ ? availableTables.find((t) => t.name === group.sourceTable)?.label || group.sourceTable
+ : `그룹 ${gIdx + 1}`}
+ {group.mappingRules?.length > 0 && (
+
+ {group.mappingRules.length}
+
+ )}
+
+
+
+ ))}
+
+ {/* 소스 테이블 선택 */}
+
+ );
+ })()}
+
+
+
+
+
+
+
+
+ 테이블을 찾을 수 없습니다
+
+ {availableTables.map((table) => (
+ {
+ updateGroupField("sourceTable", table.name);
+ if (!mappingSourceColumnsMap[table.name]) {
+ const cols = await loadMappingColumns(table.name);
+ setMappingSourceColumnsMap((prev) => ({ ...prev, [table.name]: cols }));
+ }
+ }}
+ className="text-xs"
+ >
+
+ ))}
+
+
+
+
+
+
+
+ {/* 매핑 규칙 목록 */}
+
+
+
+
+
+
+
+ {!activeSourceTable ? (
+ 소스 테이블을 먼저 선택하세요.
+ ) : activeRules.length === 0 ? ( +매핑 없음 (동일 필드명 자동 매핑)
+ ) : ( + activeRules.map((rule: any, rIdx: number) => { + const popoverKeyS = `${activeMappingGroupIndex}-${rIdx}-s`; + const popoverKeyT = `${activeMappingGroupIndex}-${rIdx}-t`; + return ( +
+
+ );
+ })
+ )}
+
+
+ setMappingSourcePopoverOpen((prev) => ({ ...prev, [popoverKeyS]: open }))
+ }
+ >
+
+
+
+
+
+
+ 컬럼 없음
+
+ {activeSourceColumns.map((col) => (
+ {
+ const newRules = [...activeRules];
+ newRules[rIdx] = { ...newRules[rIdx], sourceField: col.name };
+ updateGroupField("mappingRules", newRules);
+ setMappingSourcePopoverOpen((prev) => ({ ...prev, [popoverKeyS]: false }));
+ }}
+ className="text-xs"
+ >
+
+ ))}
+
+
+
+
+
+
+
+ →
+
+
+
+ setMappingTargetPopoverOpen((prev) => ({ ...prev, [popoverKeyT]: open }))
+ }
+ >
+
+
+
+
+
+
+ 컬럼 없음
+
+ {mappingTargetColumns.map((col) => (
+ {
+ const newRules = [...activeRules];
+ newRules[rIdx] = { ...newRules[rIdx], targetField: col.name };
+ updateGroupField("mappingRules", newRules);
+ setMappingTargetPopoverOpen((prev) => ({ ...prev, [popoverKeyT]: false }));
+ }}
+ className="text-xs"
+ >
+
+ ))}
+
+
+
+
+
+
+
+
+ 1. 소스 컴포넌트에서 데이터를 선택합니다
- 2. 필드 매핑 규칙을 설정합니다 (예: 품번 → 품목코드) + 2. 소스 테이블별로 필드 매핑 규칙을 설정합니다
- 3. 이 버튼을 클릭하면 매핑된 데이터가 타겟으로 전달됩니다 + 3. 이 버튼을 클릭하면 소스 테이블을 자동 감지하여 매핑된 데이터가 타겟으로 전달됩니다
{ if (!disabled && !readOnly) setIsOpen(true); }}
+ >
+ {
+ e.stopPropagation();
+ handleClear();
+ }}
+ />
+ )}
+
+
+
+
+
+
+
+
+ {viewMode === "year" ? (
+ <>
+
+
+
+ {yearRangeStart} - {yearRangeStart + 11}
+
+
+ {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => (
+
+ ))}
+
+
+ ) : viewMode === "month" ? (
+ <>
+
+
+
+
+
+
+ {Array.from({ length: 12 }, (_, i) => i).map((month) => (
+
+ ))}
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+ {["월", "화", "수", "목", "금", "토", "일"].map((day) => (
+
+
+
+ {day}
+
+ ))}
+
+ {allDays.map((date, index) => {
+ if (!date) return ;
+
+ const isCurrentMonth = isSameMonth(date, currentMonth);
+ const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
+ const isTodayDate = isToday(date);
+
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ {includeTime && viewMode === "calendar" && (
+
+ 시간:
+ handleTimeChange(e.target.value)}
+ className="border-input h-8 rounded-md border px-2 text-xs"
+ />
+
+ )}
+
+
+
+
+
+
+
+ {viewMode === "year" ? (
+ <>
+
+
+
+
+ {yearRangeStart} - {yearRangeStart + 11}
+
+
+
+ {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => (
+
+ ))}
+
+
+ ) : viewMode === "month" ? (
+ <>
+
+
+
+
+
+
+ {Array.from({ length: 12 }, (_, i) => i).map((month) => (
+
+ ))}
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+ {["월", "화", "수", "목", "금", "토", "일"].map((day) => (
+
+
+
+ {day}
+
+ ))}
+
+ {allDays.map((date, index) => {
+ if (!date) return ;
+
+ const isCurrentMonth = isSameMonth(date, currentMonth);
+ const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
+ const isTodayDate = isToday(date);
+
+ return (
+
+ );
+ })}
+
+
+ )}
+
-
-
-
- {/* 요일 헤더 */}
- {format(currentMonth, "yyyy년 MM월", { locale: ko })}
-
-
- {["월", "화", "수", "목", "금", "토", "일"].map((day) => (
-
-
- {/* 날짜 그리드 */}
-
- {day}
-
- ))}
-
- {allDays.map((date, index) => {
- if (!date) {
- return ;
- }
-
- const isCurrentMonth = isSameMonth(date, currentMonth);
- const isSelected = isRangeStart(date) || isRangeEnd(date);
- const isInRangeDate = isInRange(date);
- const isTodayDate = isToday(date);
-
- return (
-
+
+ {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => (
+
+ ))}
+
+
+ ) : viewMode === "month" ? (
+ <>
+ {/* 월 선택 뷰 */}
+
+
+
+
+
+
+ {Array.from({ length: 12 }, (_, i) => i).map((month) => (
+
+ ))}
+
+
+ ) : (
+ <>
+ {/* 월 네비게이션 */}
+
+
+
+
+
+
+ {/* 요일 헤더 */}
+
+ {["월", "화", "수", "목", "금", "토", "일"].map((day) => (
+
+
+ {/* 날짜 그리드 */}
+
+ {day}
+
+ ))}
+
+ {allDays.map((date, index) => {
+ if (!date) {
+ return ;
+ }
+
+ const isCurrentMonth = isSameMonth(date, currentMonth);
+ const isSelected = isRangeStart(date) || isRangeEnd(date);
+ const isInRangeDate = isInRange(date);
+ const isTodayDate = isToday(date);
+
+ return (
+
+ );
+ })}
+
+
+ )}
{/* 선택된 범위 표시 */}
{(tempValue.from || tempValue.to) && (
diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index cbec1242..90e44c8e 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -237,6 +237,8 @@ export const V2PropertiesPanel: React.FC
+ = ({
/**
* ImageDisplay 래퍼 컴포넌트
- * 추가적인 로직이나 상태 관리가 필요한 경우 사용
*/
export const ImageDisplayWrapper: React.FC = (props) => {
return ) => void;
+ onChange?: (config: Partial) => void;
+ onConfigChange?: (config: Partial) => void;
}
/**
* ImageDisplay 설정 패널
- * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
*/
export const ImageDisplayConfigPanel: React.FC = ({
config,
onChange,
+ onConfigChange,
}) => {
const handleChange = (key: keyof ImageDisplayConfig, value: any) => {
- onChange({ [key]: value });
+ const update = { ...config, [key]: value };
+ onChange?.(update);
+ onConfigChange?.(update);
};
return (
{selectedColumns.map((colName, index) => {
const col = table?.columns.find(
(c) => c.columnName === colName
diff --git a/frontend/components/screen/table-options/TableSettingsModal.tsx b/frontend/components/screen/table-options/TableSettingsModal.tsx
index ef07e017..4f9325cb 100644
--- a/frontend/components/screen/table-options/TableSettingsModal.tsx
+++ b/frontend/components/screen/table-options/TableSettingsModal.tsx
@@ -557,7 +557,7 @@ export const TableSettingsModal: React.FC = ({ isOpen, onClose, onFilters
전체 해제
-
+ ) => {
+ const updated = [...filters];
+ updated[index] = { ...updated[index], ...patch };
+
+ // valueType 변경 시 관련 필드 초기화
+ if (patch.valueType) {
+ if (patch.valueType === "static") {
+ updated[index].fieldRef = undefined;
+ updated[index].userField = undefined;
+ } else if (patch.valueType === "field") {
+ updated[index].value = undefined;
+ updated[index].userField = undefined;
+ } else if (patch.valueType === "user") {
+ updated[index].value = undefined;
+ updated[index].fieldRef = undefined;
+ }
+ }
+
+ // isNull/isNotNull 연산자는 값 불필요
+ if (patch.operator === "isNull" || patch.operator === "isNotNull") {
+ updated[index].value = undefined;
+ updated[index].fieldRef = undefined;
+ updated[index].userField = undefined;
+ updated[index].valueType = "static";
+ }
+
+ onFiltersChange(updated);
+ };
+
+ const removeFilter = (index: number) => {
+ onFiltersChange(filters.filter((_, i) => i !== index));
+ };
+
+ const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";
+
+ return (
+ ;
onChange: (config: Record) => void;
- /** 컬럼의 inputType (entity 타입인 경우에만 엔티티 소스 표시) */
+ /** 컬럼의 inputType (entity/category 타입 확인용) */
inputType?: string;
+ /** 현재 테이블명 (카테고리 값 조회용) */
+ tableName?: string;
+ /** 현재 컬럼명 (카테고리 값 조회용) */
+ columnName?: string;
}
-export const V2SelectConfigPanel: React.FC = ({ config, onChange, inputType }) => {
- // 엔티티 타입인지 확인
+export const V2SelectConfigPanel: React.FC = ({
+ config,
+ onChange,
+ inputType,
+ tableName,
+ columnName,
+}) => {
const isEntityType = inputType === "entity";
- // 엔티티 테이블의 컬럼 목록
+ const isCategoryType = inputType === "category";
+
const [entityColumns, setEntityColumns] = useState([]);
const [loadingColumns, setLoadingColumns] = useState(false);
- // 설정 업데이트 핸들러
+ // 카테고리 값 목록
+ const [categoryValues, setCategoryValues] = useState([]);
+ const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
+
+ // 필터용 컬럼 목록 (옵션 데이터 소스 테이블의 컬럼)
+ const [filterColumns, setFilterColumns] = useState([]);
+ const [loadingFilterColumns, setLoadingFilterColumns] = useState(false);
+
const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value });
};
+ // 필터 대상 테이블 결정
+ const filterTargetTable = useMemo(() => {
+ const src = config.source || "static";
+ if (src === "entity") return config.entityTable;
+ if (src === "db") return config.table;
+ if (src === "distinct" || src === "select") return tableName;
+ return null;
+ }, [config.source, config.entityTable, config.table, tableName]);
+
+ // 필터 대상 테이블의 컬럼 로드
+ useEffect(() => {
+ if (!filterTargetTable) {
+ setFilterColumns([]);
+ return;
+ }
+
+ const loadFilterColumns = async () => {
+ setLoadingFilterColumns(true);
+ try {
+ const response = await apiClient.get(`/table-management/tables/${filterTargetTable}/columns?size=500`);
+ const data = response.data.data || response.data;
+ const columns = data.columns || data || [];
+ setFilterColumns(
+ columns.map((col: any) => ({
+ columnName: col.columnName || col.column_name || col.name,
+ columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
+ }))
+ );
+ } catch {
+ setFilterColumns([]);
+ } finally {
+ setLoadingFilterColumns(false);
+ }
+ };
+
+ loadFilterColumns();
+ }, [filterTargetTable]);
+
+ // 카테고리 타입이면 source를 자동으로 category로 설정
+ useEffect(() => {
+ if (isCategoryType && config.source !== "category") {
+ onChange({ ...config, source: "category" });
+ }
+ }, [isCategoryType]);
+
+ // 카테고리 값 로드
+ const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
+ if (!catTable || !catColumn) {
+ setCategoryValues([]);
+ return;
+ }
+
+ setLoadingCategoryValues(true);
+ try {
+ const response = await apiClient.get(`/table-categories/${catTable}/${catColumn}/values`);
+ const data = response.data;
+ if (data.success && data.data) {
+ const flattenTree = (items: any[], depth: number = 0): CategoryValueOption[] => {
+ const result: CategoryValueOption[] = [];
+ for (const item of items) {
+ result.push({
+ valueCode: item.valueCode,
+ valueLabel: depth > 0 ? `${" ".repeat(depth)}${item.valueLabel}` : item.valueLabel,
+ });
+ if (item.children && item.children.length > 0) {
+ result.push(...flattenTree(item.children, depth + 1));
+ }
+ }
+ return result;
+ };
+ setCategoryValues(flattenTree(data.data));
+ }
+ } catch (error) {
+ console.error("카테고리 값 조회 실패:", error);
+ setCategoryValues([]);
+ } finally {
+ setLoadingCategoryValues(false);
+ }
+ }, []);
+
+ // 카테고리 소스일 때 값 로드
+ useEffect(() => {
+ if (config.source === "category") {
+ const catTable = config.categoryTable || tableName;
+ const catColumn = config.categoryColumn || columnName;
+ if (catTable && catColumn) {
+ loadCategoryValues(catTable, catColumn);
+ }
+ }
+ }, [config.source, config.categoryTable, config.categoryColumn, tableName, columnName, loadCategoryValues]);
+
// 엔티티 테이블 변경 시 컬럼 목록 조회
- const loadEntityColumns = useCallback(async (tableName: string) => {
- if (!tableName) {
+ const loadEntityColumns = useCallback(async (tblName: string) => {
+ if (!tblName) {
setEntityColumns([]);
return;
}
setLoadingColumns(true);
try {
- const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=500`);
+ const response = await apiClient.get(`/table-management/tables/${tblName}/columns?size=500`);
const data = response.data.data || response.data;
const columns = data.columns || data || [];
const columnOptions: ColumnOption[] = columns.map((col: any) => {
const name = col.columnName || col.column_name || col.name;
- // displayName 우선 사용
const label = col.displayName || col.display_name || col.columnLabel || col.column_label || name;
return {
@@ -72,7 +417,6 @@ export const V2SelectConfigPanel: React.FC = ({ config
}
}, []);
- // 엔티티 테이블이 변경되면 컬럼 목록 로드
useEffect(() => {
if (config.source === "entity" && config.entityTable) {
loadEntityColumns(config.entityTable);
@@ -98,6 +442,9 @@ export const V2SelectConfigPanel: React.FC = ({ config
updateConfig("options", newOptions);
};
+ // 현재 source 결정 (카테고리 타입이면 강제 category)
+ const effectiveSource = isCategoryType ? "category" : config.source || "static";
+
return (
@@ -161,7 +191,6 @@ export const ImageDisplayComponent: React.FC
{selectedGroupColumns.map((colName, index) => {
const col = table?.columns.find((c) => c.columnName === colName);
if (!col) return null;
diff --git a/frontend/components/screen/widgets/types/DateWidget.tsx b/frontend/components/screen/widgets/types/DateWidget.tsx
index edb78df9..3b0f47e2 100644
--- a/frontend/components/screen/widgets/types/DateWidget.tsx
+++ b/frontend/components/screen/widgets/types/DateWidget.tsx
@@ -1,7 +1,22 @@
"use client";
-import React from "react";
-import { Input } from "@/components/ui/input";
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
+import {
+ format,
+ addMonths,
+ subMonths,
+ startOfMonth,
+ endOfMonth,
+ eachDayOfInterval,
+ isSameMonth,
+ isSameDay,
+ isToday,
+} from "date-fns";
+import { ko } from "date-fns/locale";
+import { cn } from "@/lib/utils";
import { WebTypeComponentProps } from "@/lib/registry/types";
import { WidgetComponent, DateTypeConfig } from "@/types/screen";
@@ -10,99 +25,341 @@ export const DateWidget: React.FC = ({ component, value,
const { placeholder, required, style } = widget;
const config = widget.webTypeConfig as DateTypeConfig | undefined;
- // 사용자가 테두리를 설정했는지 확인
const hasCustomBorder = style && (style.borderWidth || style.borderStyle || style.borderColor || style.border);
const borderClass = hasCustomBorder ? "!border-0" : "";
- // 날짜 포맷팅 함수
- const formatDateValue = (val: string) => {
- if (!val) return "";
+ const isDatetime = widget.widgetType === "datetime";
+ const [isOpen, setIsOpen] = useState(false);
+ const [currentMonth, setCurrentMonth] = useState(new Date());
+ const [viewMode, setViewMode] = useState<"calendar" | "year" | "month">("calendar");
+ const [yearRangeStart, setYearRangeStart] = useState(() => Math.floor(new Date().getFullYear() / 12) * 12);
+ const [timeValue, setTimeValue] = useState("00:00");
+ const [isTyping, setIsTyping] = useState(false);
+ const [typingValue, setTypingValue] = useState("");
+
+ const parseDate = (val: string | undefined): Date | undefined => {
+ if (!val) return undefined;
try {
const date = new Date(val);
- if (isNaN(date.getTime())) return val;
-
- if (widget.widgetType === "datetime") {
- return date.toISOString().slice(0, 16); // YYYY-MM-DDTHH:mm
- } else {
- return date.toISOString().slice(0, 10); // YYYY-MM-DD
- }
+ if (isNaN(date.getTime())) return undefined;
+ return date;
} catch {
- return val;
+ return undefined;
}
};
- // 날짜 유효성 검증
- const validateDate = (dateStr: string): boolean => {
- if (!dateStr) return true;
-
- const date = new Date(dateStr);
- if (isNaN(date.getTime())) return false;
-
- // 최소/최대 날짜 검증
- if (config?.minDate) {
- const minDate = new Date(config.minDate);
- if (date < minDate) return false;
- }
-
- if (config?.maxDate) {
- const maxDate = new Date(config.maxDate);
- if (date > maxDate) return false;
- }
-
- return true;
- };
-
- // 입력값 처리
- const handleChange = (e: React.ChangeEvent) => {
- const inputValue = e.target.value;
-
- if (validateDate(inputValue)) {
- onChange?.(inputValue);
- }
- };
-
- // 웹타입에 따른 input type 결정
- const getInputType = () => {
- switch (widget.widgetType) {
- case "datetime":
- return "datetime-local";
- case "date":
- default:
- return "date";
- }
- };
-
- // 기본값 설정 (현재 날짜/시간)
- const getDefaultValue = () => {
+ const getDefaultValue = (): string => {
if (config?.defaultValue === "current") {
const now = new Date();
- if (widget.widgetType === "datetime") {
- return now.toISOString().slice(0, 16);
- } else {
- return now.toISOString().slice(0, 10);
- }
+ if (isDatetime) return now.toISOString().slice(0, 16);
+ return now.toISOString().slice(0, 10);
}
return "";
};
const finalValue = value || getDefaultValue();
+ const selectedDate = parseDate(finalValue);
+
+ useEffect(() => {
+ if (isOpen) {
+ setViewMode("calendar");
+ if (selectedDate) {
+ setCurrentMonth(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1));
+ if (isDatetime) {
+ const hours = String(selectedDate.getHours()).padStart(2, "0");
+ const minutes = String(selectedDate.getMinutes()).padStart(2, "0");
+ setTimeValue(`${hours}:${minutes}`);
+ }
+ } else {
+ setCurrentMonth(new Date());
+ setTimeValue("00:00");
+ }
+ } else {
+ setIsTyping(false);
+ setTypingValue("");
+ }
+ }, [isOpen]);
+
+ const formatDisplayValue = (): string => {
+ if (!selectedDate) return "";
+ if (isDatetime) return format(selectedDate, "yyyy-MM-dd HH:mm", { locale: ko });
+ return format(selectedDate, "yyyy-MM-dd", { locale: ko });
+ };
+
+ const handleDateClick = (date: Date) => {
+ let dateStr: string;
+ if (isDatetime) {
+ const [hours, minutes] = timeValue.split(":").map(Number);
+ const dt = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours || 0, minutes || 0);
+ dateStr = `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, "0")}-${String(dt.getDate()).padStart(2, "0")}T${timeValue}`;
+ } else {
+ dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+ }
+ onChange?.(dateStr);
+ if (!isDatetime) {
+ setIsOpen(false);
+ }
+ };
+
+ const handleTimeChange = (newTime: string) => {
+ setTimeValue(newTime);
+ if (selectedDate) {
+ const dateStr = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, "0")}-${String(selectedDate.getDate()).padStart(2, "0")}T${newTime}`;
+ onChange?.(dateStr);
+ }
+ };
+
+ const handleClear = () => {
+ onChange?.("");
+ setIsTyping(false);
+ setIsOpen(false);
+ };
+
+ const handleTriggerInput = (raw: string) => {
+ setIsTyping(true);
+ setTypingValue(raw);
+ if (!isOpen) setIsOpen(true);
+ const digitsOnly = raw.replace(/\D/g, "");
+ if (digitsOnly.length === 8) {
+ const y = parseInt(digitsOnly.slice(0, 4), 10);
+ const m = parseInt(digitsOnly.slice(4, 6), 10) - 1;
+ const d = parseInt(digitsOnly.slice(6, 8), 10);
+ const date = new Date(y, m, d);
+ if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d && y >= 1900 && y <= 2100) {
+ let dateStr: string;
+ if (isDatetime) {
+ dateStr = `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}T${timeValue}`;
+ } else {
+ dateStr = `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+ }
+ onChange?.(dateStr);
+ setCurrentMonth(new Date(y, m, 1));
+ if (!isDatetime) setTimeout(() => { setIsTyping(false); setIsOpen(false); }, 400);
+ else setIsTyping(false);
+ }
+ }
+ };
+
+ const handleSetToday = () => {
+ const today = new Date();
+ if (isDatetime) {
+ const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}T${String(today.getHours()).padStart(2, "0")}:${String(today.getMinutes()).padStart(2, "0")}`;
+ onChange?.(dateStr);
+ } else {
+ const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+ onChange?.(dateStr);
+ }
+ setIsOpen(false);
+ };
+
+ const monthStart = startOfMonth(currentMonth);
+ const monthEnd = endOfMonth(currentMonth);
+ const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
+
+ const startDate = new Date(monthStart);
+ const dayOfWeek = startDate.getDay();
+ const paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+ const allDays = [...Array(paddingDays).fill(null), ...days];
return (
-
+ { if (!v) { setIsOpen(false); setIsTyping(false); } }}>
+
+
+ e.preventDefault()}>
+
+
);
};
DateWidget.displayName = "DateWidget";
-
-
diff --git a/frontend/components/table-category/CategoryColumnList.tsx b/frontend/components/table-category/CategoryColumnList.tsx
index 3be70840..872e7d57 100644
--- a/frontend/components/table-category/CategoryColumnList.tsx
+++ b/frontend/components/table-category/CategoryColumnList.tsx
@@ -3,7 +3,7 @@
import React, { useState, useEffect, useMemo } from "react";
import { apiClient } from "@/lib/api/client";
import { getCategoryValues } from "@/lib/api/tableCategoryValue";
-import { FolderTree, Loader2, Search, X } from "lucide-react";
+import { ChevronRight, FolderTree, Loader2, Search, X } from "lucide-react";
import { Input } from "@/components/ui/input";
interface CategoryColumn {
@@ -30,6 +30,7 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
const [columns, setColumns] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
+ const [expandedGroups, setExpandedGroups] = useState>(new Set());
// 검색어로 필터링된 컬럼 목록
const filteredColumns = useMemo(() => {
@@ -49,6 +50,44 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
});
}, [columns, searchQuery]);
+ // 테이블별로 그룹화된 컬럼 목록
+ const groupedColumns = useMemo(() => {
+ const groups: { tableName: string; tableLabel: string; columns: CategoryColumn[] }[] = [];
+ const groupMap = new Map();
+
+ for (const col of filteredColumns) {
+ const key = col.tableName;
+ if (!groupMap.has(key)) {
+ groupMap.set(key, []);
+ }
+ groupMap.get(key)!.push(col);
+ }
+
+ for (const [tblName, cols] of groupMap) {
+ groups.push({
+ tableName: tblName,
+ tableLabel: cols[0]?.tableLabel || tblName,
+ columns: cols,
+ });
+ }
+
+ return groups;
+ }, [filteredColumns]);
+
+ // 선택된 컬럼이 있는 그룹을 자동 펼침
+ useEffect(() => {
+ if (!selectedColumn) return;
+ const tableName = selectedColumn.split(".")[0];
+ if (tableName) {
+ setExpandedGroups((prev) => {
+ if (prev.has(tableName)) return prev;
+ const next = new Set(prev);
+ next.add(tableName);
+ return next;
+ });
+ }
+ }, [selectedColumn]);
+
useEffect(() => {
// 메뉴 종속 없이 항상 회사 기준으로 카테고리 컬럼 조회
loadCategoryColumnsByMenu();
@@ -72,9 +111,10 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
allColumns = response.data;
}
- // category 타입 컬럼만 필터링
+ // category 타입 중 자체 카테고리만 필터링 (참조 컬럼 제외)
const categoryColumns = allColumns.filter(
- (col: any) => col.inputType === "category" || col.input_type === "category"
+ (col: any) => (col.inputType === "category" || col.input_type === "category")
+ && !col.categoryRef && !col.category_ref
);
console.log("✅ 카테고리 컬럼 필터링 완료:", {
@@ -278,35 +318,114 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect,
)}
- { if (!readonly) setIsOpen(true); }}
+ >
+ {
+ e.stopPropagation();
+ handleClear();
+ }}
+ />
+ )}
+
+
+
+
+
+
+
+
+ {viewMode === "year" ? (
+ <>
+
+
+
+
+ {yearRangeStart} - {yearRangeStart + 11}
+
+
+
+ {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => (
+
+ ))}
+
+
+ ) : viewMode === "month" ? (
+ <>
+
+
+
+
+
+
+ {Array.from({ length: 12 }, (_, i) => i).map((month) => (
+
+ ))}
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+ {["월", "화", "수", "목", "금", "토", "일"].map((day) => (
+
+
+
+ {day}
+
+ ))}
+
+ {allDays.map((date, index) => {
+ if (!date) return ;
+
+ const isCurrentMonth = isSameMonth(date, currentMonth);
+ const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
+ const isTodayDate = isToday(date);
+
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ {/* datetime 타입: 시간 입력 */}
+ {isDatetime && viewMode === "calendar" && (
+
+ 시간:
+ handleTimeChange(e.target.value)}
+ className="border-input h-8 rounded-md border px-2 text-xs"
+ />
+
+ )}
+
+
+
diff --git a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
index f808ecf1..66ebb369 100644
--- a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
@@ -5,56 +5,401 @@
* 통합 선택 컴포넌트의 세부 설정을 관리합니다.
*/
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
-import { Plus, Trash2, Loader2 } from "lucide-react";
+import { Plus, Trash2, Loader2, Filter } from "lucide-react";
import { apiClient } from "@/lib/api/client";
+import type { V2SelectFilter } from "@/types/v2-components";
interface ColumnOption {
columnName: string;
columnLabel: string;
}
+interface CategoryValueOption {
+ valueCode: string;
+ valueLabel: string;
+}
+
+const OPERATOR_OPTIONS = [
+ { value: "=", label: "같음 (=)" },
+ { value: "!=", label: "다름 (!=)" },
+ { value: ">", label: "초과 (>)" },
+ { value: "<", label: "미만 (<)" },
+ { value: ">=", label: "이상 (>=)" },
+ { value: "<=", label: "이하 (<=)" },
+ { value: "in", label: "포함 (IN)" },
+ { value: "notIn", label: "미포함 (NOT IN)" },
+ { value: "like", label: "유사 (LIKE)" },
+ { value: "isNull", label: "NULL" },
+ { value: "isNotNull", label: "NOT NULL" },
+] as const;
+
+const VALUE_TYPE_OPTIONS = [
+ { value: "static", label: "고정값" },
+ { value: "field", label: "폼 필드 참조" },
+ { value: "user", label: "로그인 사용자" },
+] as const;
+
+const USER_FIELD_OPTIONS = [
+ { value: "companyCode", label: "회사코드" },
+ { value: "userId", label: "사용자ID" },
+ { value: "deptCode", label: "부서코드" },
+ { value: "userName", label: "사용자명" },
+] as const;
+
+/**
+ * 필터 조건 설정 서브 컴포넌트
+ */
+const FilterConditionsSection: React.FC<{
+ filters: V2SelectFilter[];
+ columns: ColumnOption[];
+ loadingColumns: boolean;
+ targetTable: string;
+ onFiltersChange: (filters: V2SelectFilter[]) => void;
+}> = ({ filters, columns, loadingColumns, targetTable, onFiltersChange }) => {
+
+ const addFilter = () => {
+ onFiltersChange([
+ ...filters,
+ { column: "", operator: "=", valueType: "static", value: "" },
+ ]);
+ };
+
+ const updateFilter = (index: number, patch: Partial
{filteredColumns.length === 0 && searchQuery ? (
)}
'{searchQuery}'에 대한 검색 결과가 없습니다
) : null}
- {filteredColumns.map((column) => {
- const uniqueKey = `${column.tableName}.${column.columnName}`;
- const isSelected = selectedColumn === uniqueKey; // 테이블명.컬럼명으로 비교
- return (
- onColumnSelect(uniqueKey, column.columnLabel || column.columnName, column.tableName)}
- className={`cursor-pointer rounded-lg border px-4 py-2 transition-all ${
- isSelected ? "border-primary bg-primary/10 shadow-sm" : "hover:bg-muted/50"
- }`}
- >
-
- {
- if (minDateObj && date < minDateObj) return true;
- if (maxDateObj && date > maxDateObj) return true;
- return false;
- }}
- />
- (
const labelColumn = config.labelColumn;
const apiEndpoint = config.apiEndpoint;
const staticOptions = config.options;
+ const configFilters = config.filters;
// 계층 코드 연쇄 선택 관련
const hierarchical = config.hierarchical;
@@ -662,6 +663,54 @@ export const V2Select = forwardRef(
// FormContext에서 부모 필드 값 가져오기 (Context가 없으면 null)
const formContext = useContext(V2FormContext);
+
+ /**
+ * 필터 조건을 API 전달용 JSON으로 변환
+ * field/user 타입은 런타임 값으로 치환
+ */
+ const resolvedFiltersJson = useMemo(() => {
+ if (!configFilters || configFilters.length === 0) return undefined;
+
+ const resolved: Array<{ column: string; operator: string; value: unknown }> = [];
+
+ for (const f of configFilters) {
+ const vt = f.valueType || "static";
+
+ // isNull/isNotNull은 값 불필요
+ if (f.operator === "isNull" || f.operator === "isNotNull") {
+ resolved.push({ column: f.column, operator: f.operator, value: null });
+ continue;
+ }
+
+ let resolvedValue: unknown = f.value;
+
+ if (vt === "field" && f.fieldRef) {
+ // 다른 폼 필드 참조
+ if (formContext) {
+ resolvedValue = formContext.getValue(f.fieldRef);
+ } else {
+ const fd = (props as any).formData;
+ resolvedValue = fd?.[f.fieldRef];
+ }
+ // 참조 필드 값이 비어있으면 이 필터 건너뜀
+ if (resolvedValue === undefined || resolvedValue === null || resolvedValue === "") continue;
+ } else if (vt === "user" && f.userField) {
+ // 로그인 사용자 정보 참조 (props에서 가져옴)
+ const userMap: Record = {
+ companyCode: (props as any).companyCode,
+ userId: (props as any).userId,
+ deptCode: (props as any).deptCode,
+ userName: (props as any).userName,
+ };
+ resolvedValue = userMap[f.userField];
+ if (!resolvedValue) continue;
+ }
+
+ resolved.push({ column: f.column, operator: f.operator, value: resolvedValue });
+ }
+
+ return resolved.length > 0 ? JSON.stringify(resolved) : undefined;
+ }, [configFilters, formContext, props]);
// 부모 필드의 값 계산
const parentValue = useMemo(() => {
@@ -684,6 +733,13 @@ export const V2Select = forwardRef(
}
}, [parentValue, hierarchical, source]);
+ // 필터 조건이 변경되면 옵션 다시 로드
+ useEffect(() => {
+ if (resolvedFiltersJson !== undefined) {
+ setOptionsLoaded(false);
+ }
+ }, [resolvedFiltersJson]);
+
useEffect(() => {
// 이미 로드된 경우 스킵 (static 제외, 계층 구조 제외)
if (optionsLoaded && source !== "static") {
@@ -731,11 +787,13 @@ export const V2Select = forwardRef(
}
} else if (source === "db" && table) {
// DB 테이블에서 로드
+ const dbParams: Record = {
+ value: valueColumn || "id",
+ label: labelColumn || "name",
+ };
+ if (resolvedFiltersJson) dbParams.filters = resolvedFiltersJson;
const response = await apiClient.get(`/entity/${table}/options`, {
- params: {
- value: valueColumn || "id",
- label: labelColumn || "name",
- },
+ params: dbParams,
});
const data = response.data;
if (data.success && data.data) {
@@ -745,8 +803,10 @@ export const V2Select = forwardRef(
// 엔티티(참조 테이블)에서 로드
const valueCol = entityValueColumn || "id";
const labelCol = entityLabelColumn || "name";
+ const entityParams: Record = { value: valueCol, label: labelCol };
+ if (resolvedFiltersJson) entityParams.filters = resolvedFiltersJson;
const response = await apiClient.get(`/entity/${entityTable}/options`, {
- params: { value: valueCol, label: labelCol },
+ params: entityParams,
});
const data = response.data;
if (data.success && data.data) {
@@ -790,11 +850,13 @@ export const V2Select = forwardRef(
}
} else if (source === "select" || source === "distinct") {
// 해당 테이블의 해당 컬럼에서 DISTINCT 값 조회
- // tableName, columnName은 props에서 가져옴
- // 🆕 columnName이 컴포넌트 ID 형식(comp_xxx)이면 유효하지 않으므로 건너뜀
const isValidColumnName = columnName && !columnName.startsWith("comp_");
if (tableName && isValidColumnName) {
- const response = await apiClient.get(`/entity/${tableName}/distinct/${columnName}`);
+ const distinctParams: Record = {};
+ if (resolvedFiltersJson) distinctParams.filters = resolvedFiltersJson;
+ const response = await apiClient.get(`/entity/${tableName}/distinct/${columnName}`, {
+ params: distinctParams,
+ });
const data = response.data;
if (data.success && data.data) {
fetchedOptions = data.data.map((item: { value: string; label: string }) => ({
@@ -818,7 +880,7 @@ export const V2Select = forwardRef(
};
loadOptions();
- }, [source, entityTable, entityValueColumn, entityLabelColumn, codeGroup, table, valueColumn, labelColumn, apiEndpoint, staticOptions, optionsLoaded, hierarchical, parentValue]);
+ }, [source, entityTable, entityValueColumn, entityLabelColumn, codeGroup, table, valueColumn, labelColumn, apiEndpoint, staticOptions, optionsLoaded, hierarchical, parentValue, resolvedFiltersJson]);
// 레거시 평문값 → 카테고리 코드 자동 정규화 (한글 텍스트로 저장된 데이터 대응)
const resolvedValue = useMemo(() => {
diff --git a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
index 71eef64c..1f89ae12 100644
--- a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
@@ -177,6 +177,7 @@ export const V2RepeaterConfigPanel: React.FC = ({
{ value: "numbering", label: "채번 규칙" },
{ value: "fromMainForm", label: "메인 폼에서 복사" },
{ value: "fixed", label: "고정값" },
+ { value: "parentSequence", label: "부모채번+순번 (예: WO-001-01)" },
];
// 🆕 대상 메뉴 목록 로드 (사용자 메뉴의 레벨 2)
@@ -1213,13 +1214,21 @@ export const V2RepeaterConfigPanel: React.FC = ({
updateColumnProp(col.key, "editable", !!checked)}
- title="편집 가능"
- />
+
)}
)}
+
+ {/* 부모채번+순번 설정 */}
+ {col.autoFill?.type === "parentSequence" && (
+
- 2100) return null;
+ return date;
+}
+
/**
* 단일 날짜 선택 컴포넌트
*/
const SingleDatePicker = forwardRef<
- HTMLButtonElement,
+ HTMLDivElement,
{
value?: string;
onChange?: (value: string) => void;
@@ -83,80 +95,227 @@ const SingleDatePicker = forwardRef<
ref,
) => {
const [open, setOpen] = useState(false);
+ const [currentMonth, setCurrentMonth] = useState(new Date());
+ const [viewMode, setViewMode] = useState<"calendar" | "year" | "month">("calendar");
+ const [yearRangeStart, setYearRangeStart] = useState(() => Math.floor(new Date().getFullYear() / 12) * 12);
+ const [isTyping, setIsTyping] = useState(false);
+ const [typingValue, setTypingValue] = useState("");
+ const inputRef = React.useRef(null);
const date = useMemo(() => parseDate(value, dateFormat), [value, dateFormat]);
- const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
- const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
- // 표시할 날짜 텍스트 계산 (ISO 형식이면 포맷팅, 아니면 그대로)
const displayText = useMemo(() => {
if (!value) return "";
- // Date 객체로 변환 후 포맷팅
- if (date && isValid(date)) {
- return formatDate(date, dateFormat);
- }
+ if (date && isValid(date)) return formatDate(date, dateFormat);
return value;
}, [value, date, dateFormat]);
- const handleSelect = useCallback(
- (selectedDate: Date | undefined) => {
- if (selectedDate) {
- onChange?.(formatDate(selectedDate, dateFormat));
- setOpen(false);
+ useEffect(() => {
+ if (open) {
+ setViewMode("calendar");
+ if (date && isValid(date)) {
+ setCurrentMonth(new Date(date.getFullYear(), date.getMonth(), 1));
+ setYearRangeStart(Math.floor(date.getFullYear() / 12) * 12);
+ } else {
+ setCurrentMonth(new Date());
+ setYearRangeStart(Math.floor(new Date().getFullYear() / 12) * 12);
}
- },
- [dateFormat, onChange],
- );
+ } else {
+ setIsTyping(false);
+ setTypingValue("");
+ }
+ }, [open]);
+
+ const handleDateClick = useCallback((clickedDate: Date) => {
+ onChange?.(formatDate(clickedDate, dateFormat));
+ setIsTyping(false);
+ setOpen(false);
+ }, [dateFormat, onChange]);
const handleToday = useCallback(() => {
onChange?.(formatDate(new Date(), dateFormat));
+ setIsTyping(false);
setOpen(false);
}, [dateFormat, onChange]);
const handleClear = useCallback(() => {
onChange?.("");
+ setIsTyping(false);
setOpen(false);
}, [onChange]);
+ const handleTriggerInput = useCallback((raw: string) => {
+ setIsTyping(true);
+ setTypingValue(raw);
+ if (!open) setOpen(true);
+ const digitsOnly = raw.replace(/\D/g, "");
+ if (digitsOnly.length === 8) {
+ const parsed = parseManualDateInput(digitsOnly);
+ if (parsed) {
+ onChange?.(formatDate(parsed, dateFormat));
+ setCurrentMonth(new Date(parsed.getFullYear(), parsed.getMonth(), 1));
+ setTimeout(() => { setIsTyping(false); setOpen(false); }, 400);
+ }
+ }
+ }, [dateFormat, onChange, open]);
+
+ const mStart = startOfMonth(currentMonth);
+ const mEnd = endOfMonth(currentMonth);
+ const days = eachDayOfInterval({ start: mStart, end: mEnd });
+ const dow = mStart.getDay();
+ const padding = dow === 0 ? 6 : dow - 1;
+ const allDays = [...Array(padding).fill(null), ...days];
+
return (
-
+ { if (!v) { setOpen(false); setIsTyping(false); } }}>
-
+
-
-
-
- {column.valueCount !== undefined ? `${column.valueCount}개` : "..."}
-
+ {groupedColumns.map((group) => {
+ const isExpanded = expandedGroups.has(group.tableName);
+ const totalValues = group.columns.reduce((sum, c) => sum + (c.valueCount ?? 0), 0);
+ const hasSelectedInGroup = group.columns.some(
+ (c) => selectedColumn === `${c.tableName}.${c.columnName}`,
+ );
+
+ // 그룹이 1개뿐이면 드롭다운 없이 바로 표시
+ if (groupedColumns.length <= 1) {
+ return (
+ {column.columnLabel || column.columnName}
-{column.tableLabel || column.tableName}
-
+ {group.columns.map((column) => {
+ const uniqueKey = `${column.tableName}.${column.columnName}`;
+ const isSelected = selectedColumn === uniqueKey;
+ return (
+
+ );
+ }
+
+ return (
+ onColumnSelect(uniqueKey, column.columnLabel || column.columnName, column.tableName)}
+ className={`cursor-pointer rounded-lg border px-4 py-2 transition-all ${
+ isSelected ? "border-primary bg-primary/10 shadow-sm" : "hover:bg-muted/50"
+ }`}
+ >
+
+ );
+ })}
+
+
+
+
+ {column.valueCount !== undefined ? `${column.valueCount}개` : "..."}
+
+ {column.columnLabel || column.columnName}
+{column.tableLabel || column.tableName}
+
+ {/* 드롭다운 헤더 */}
+
+
+ {/* 펼쳐진 컬럼 목록 */}
+ {isExpanded && (
+
);
})}
diff --git a/frontend/components/ui/alert-dialog.tsx b/frontend/components/ui/alert-dialog.tsx
index 3c7a9239..2da0647f 100644
--- a/frontend/components/ui/alert-dialog.tsx
+++ b/frontend/components/ui/alert-dialog.tsx
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
+ {group.columns.map((column) => {
+ const uniqueKey = `${column.tableName}.${column.columnName}`;
+ const isSelected = selectedColumn === uniqueKey;
+ return (
+
+ )}
onColumnSelect(uniqueKey, column.columnLabel || column.columnName, column.tableName)}
+ className={`cursor-pointer rounded-md px-3 py-1.5 transition-all ${
+ isSelected ? "bg-primary/10 font-semibold text-primary" : "hover:bg-muted/50"
+ }`}
+ >
+
+ );
+ })}
+
+
+
- {showToday && (
-
diff --git a/frontend/components/v2/V2Select.tsx b/frontend/components/v2/V2Select.tsx
index a7769227..e7dbfd86 100644
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -23,7 +23,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";
-import { V2SelectProps, SelectOption } from "@/types/v2-components";
+import { V2SelectProps, SelectOption, V2SelectFilter } from "@/types/v2-components";
import { Check, ChevronsUpDown, X, ArrowLeftRight } from "lucide-react";
import { apiClient } from "@/lib/api/client";
import V2FormContext from "./V2FormContext";
@@ -655,6 +655,7 @@ export const V2Select = forwardRef
+
+ )}
+
+ updateColumnProp(col.key, "autoFill", {
+ ...col.autoFill,
+ parentField: e.target.value,
+ })}
+ placeholder="work_order_no"
+ className="h-6 text-xs"
+ />
+
+ 메인 폼에서 가져올 부모 채번 필드
+
+
+
+
+ updateColumnProp(col.key, "autoFill", {
+ ...col.autoFill,
+ separator: e.target.value,
+ })}
+ placeholder="-"
+ className="h-6 text-xs"
+ />
+
+
+
+ updateColumnProp(col.key, "autoFill", {
+ ...col.autoFill,
+ sequenceLength: parseInt(e.target.value) || 2,
+ })}
+ className="h-6 text-xs"
+ />
+
+ + 예시: WO-20260223-005{col.autoFill?.separator ?? "-"}{String(1).padStart(col.autoFill?.sequenceLength ?? 2, "0")} +
+
+
+ );
+};
+
interface V2SelectConfigPanelProps {
config: Record
+
+
+
+
+
+ + {targetTable} 테이블에서 옵션을 불러올 때 적용할 조건 +
+ + {loadingColumns && ( +
+
+ )}
+
+ {filters.length === 0 && (
+ + 필터 조건이 없습니다 +
+ )} + +
+ {filters.map((filter, index) => (
+
+
+ {/* 행 1: 컬럼 + 연산자 + 삭제 */}
+
+ ))}
+
+ {/* 컬럼 선택 */}
+
+
+ {/* 연산자 선택 */}
+
+
+ {/* 삭제 버튼 */}
+
+
+
+ {/* 행 2: 값 유형 + 값 입력 (isNull/isNotNull 제외) */}
+ {needsValue(filter.operator) && (
+
+ {/* 값 유형 */}
+
+
+ {/* 값 입력 영역 */}
+ {(filter.valueType || "static") === "static" && (
+ updateFilter(index, { value: e.target.value })}
+ placeholder={filter.operator === "in" || filter.operator === "notIn" ? "값1, 값2, ..." : "값 입력"}
+ className="h-7 flex-1 text-[11px]"
+ />
+ )}
+
+ {filter.valueType === "field" && (
+ updateFilter(index, { fieldRef: e.target.value })}
+ placeholder="참조할 필드명 (columnName)"
+ className="h-7 flex-1 text-[11px]"
+ />
+ )}
+
+ {filter.valueType === "user" && (
+
+ )}
+
+ )}
+
{/* 선택 모드 */}
@@ -125,21 +472,102 @@ export const V2SelectConfigPanel: React.FC = ({ config
{/* 데이터 소스 */}
;
updateFormData: (fieldName: string, value: any) => void;
@@ -33,6 +44,11 @@ interface ScreenContextValue {
// 모든 컴포넌트 조회
getAllDataProviders: () => Map;
getAllDataReceivers: () => Map;
+
+ // 대기 중인 데이터 전달 (레이어 내부 컴포넌트 미마운트 대응)
+ addPendingTransfer: (transfer: PendingTransfer) => void;
+ getPendingTransfer: (componentId: string) => PendingTransfer | undefined;
+ clearPendingTransfer: (componentId: string) => void;
}
const ScreenContext = createContext(null);
@@ -57,11 +73,10 @@ export function ScreenContextProvider({
}: ScreenContextProviderProps) {
const dataProvidersRef = useRef>(new Map());
const dataReceiversRef = useRef>(new Map());
+ const pendingTransfersRef = useRef>(new Map());
- // 🆕 폼 데이터 상태 (RepeaterFieldGroup 등 컴포넌트 데이터 저장)
const [formData, setFormData] = useState>({});
- // 🆕 폼 데이터 업데이트 함수
const updateFormData = useCallback((fieldName: string, value: any) => {
setFormData((prev) => {
const updated = { ...prev, [fieldName]: value };
@@ -87,6 +102,25 @@ export function ScreenContextProvider({
const registerDataReceiver = useCallback((componentId: string, receiver: DataReceivable) => {
dataReceiversRef.current.set(componentId, receiver);
logger.debug("데이터 수신자 등록", { componentId, componentType: receiver.componentType });
+
+ // 대기 중인 데이터 전달이 있으면 즉시 수신 처리
+ const pending = pendingTransfersRef.current.get(componentId);
+ if (pending) {
+ logger.info("대기 중인 데이터 전달 자동 수신", {
+ componentId,
+ dataCount: pending.data.length,
+ waitedMs: Date.now() - pending.timestamp,
+ });
+ receiver
+ .receiveData(pending.data, pending.config)
+ .then(() => {
+ pendingTransfersRef.current.delete(componentId);
+ logger.info("대기 데이터 전달 완료", { componentId });
+ })
+ .catch((err) => {
+ logger.error("대기 데이터 전달 실패", { componentId, error: err });
+ });
+ }
}, []);
const unregisterDataReceiver = useCallback((componentId: string) => {
@@ -110,7 +144,24 @@ export function ScreenContextProvider({
return new Map(dataReceiversRef.current);
}, []);
- // 🆕 useMemo로 value 객체 메모이제이션 (무한 루프 방지)
+ const addPendingTransfer = useCallback((transfer: PendingTransfer) => {
+ pendingTransfersRef.current.set(transfer.targetComponentId, transfer);
+ logger.info("데이터 전달 대기열 추가", {
+ targetComponentId: transfer.targetComponentId,
+ dataCount: transfer.data.length,
+ targetLayerId: transfer.targetLayerId,
+ });
+ }, []);
+
+ const getPendingTransfer = useCallback((componentId: string) => {
+ return pendingTransfersRef.current.get(componentId);
+ }, []);
+
+ const clearPendingTransfer = useCallback((componentId: string) => {
+ pendingTransfersRef.current.delete(componentId);
+ logger.debug("대기 데이터 전달 클리어", { componentId });
+ }, []);
+
const value = React.useMemo(
() => ({
screenId,
@@ -127,6 +178,9 @@ export function ScreenContextProvider({
getDataReceiver,
getAllDataProviders,
getAllDataReceivers,
+ addPendingTransfer,
+ getPendingTransfer,
+ clearPendingTransfer,
}),
[
screenId,
@@ -143,6 +197,9 @@ export function ScreenContextProvider({
getDataReceiver,
getAllDataProviders,
getAllDataReceivers,
+ addPendingTransfer,
+ getPendingTransfer,
+ clearPendingTransfer,
],
);
diff --git a/frontend/hooks/pop/executePopAction.ts b/frontend/hooks/pop/executePopAction.ts
new file mode 100644
index 00000000..5800125f
--- /dev/null
+++ b/frontend/hooks/pop/executePopAction.ts
@@ -0,0 +1,199 @@
+/**
+ * executePopAction - POP 액션 실행 순수 함수
+ *
+ * pop-button, pop-string-list 등 여러 컴포넌트에서 재사용 가능한
+ * 액션 실행 코어 로직. React 훅에 의존하지 않음.
+ *
+ * 사용처:
+ * - usePopAction 훅 (pop-button용 래퍼)
+ * - pop-string-list 카드 버튼 (직접 호출)
+ * - 향후 pop-table 행 액션 등
+ */
+
+import type { ButtonMainAction } from "@/lib/registry/pop-components/pop-button";
+import { apiClient } from "@/lib/api/client";
+import { dataApi } from "@/lib/api/data";
+
+// ========================================
+// 타입 정의
+// ========================================
+
+/** 액션 실행 결과 */
+export interface ActionResult {
+ success: boolean;
+ data?: unknown;
+ error?: string;
+}
+
+/** 이벤트 발행 함수 시그니처 (usePopEvent의 publish와 동일) */
+type PublishFn = (eventName: string, payload?: unknown) => void;
+
+/** executePopAction 옵션 */
+interface ExecuteOptions {
+ /** 필드 매핑 (소스 컬럼명 → 타겟 컬럼명) */
+ fieldMapping?: Record;
+ /** 화면 ID (이벤트 발행 시 사용) */
+ screenId?: string;
+ /** 이벤트 발행 함수 (순수 함수이므로 외부에서 주입) */
+ publish?: PublishFn;
+}
+
+// ========================================
+// 내부 헬퍼
+// ========================================
+
+/**
+ * 필드 매핑 적용
+ * 소스 데이터의 컬럼명을 타겟 테이블 컬럼명으로 변환
+ */
+function applyFieldMapping(
+ rowData: Record,
+ mapping?: Record
+): Record {
+ if (!mapping || Object.keys(mapping).length === 0) {
+ return { ...rowData };
+ }
+
+ const result: Record = {};
+ for (const [sourceKey, value] of Object.entries(rowData)) {
+ // 매핑이 있으면 타겟 키로 변환, 없으면 원본 키 유지
+ const targetKey = mapping[sourceKey] || sourceKey;
+ result[targetKey] = value;
+ }
+ return result;
+}
+
+/**
+ * rowData에서 PK 추출
+ * id > pk 순서로 시도, 없으면 rowData 전체를 복합키로 사용
+ */
+function extractPrimaryKey(
+ rowData: Record
+): string | number | Record {
+ if (rowData.id != null) return rowData.id as string | number;
+ if (rowData.pk != null) return rowData.pk as string | number;
+ // 복합키: rowData 전체를 Record로 전달 (dataApi.deleteRecord가 object 지원)
+ return rowData as Record;
+}
+
+// ========================================
+// 메인 함수
+// ========================================
+
+/**
+ * POP 액션 실행 (순수 함수)
+ *
+ * @param action - 버튼 메인 액션 설정
+ * @param rowData - 대상 행 데이터 (리스트 컴포넌트에서 전달)
+ * @param options - 필드 매핑, screenId, publish 함수
+ * @returns 실행 결과
+ */
+export async function executePopAction(
+ action: ButtonMainAction,
+ rowData?: Record,
+ options?: ExecuteOptions
+): Promise {
+ const { fieldMapping, publish } = options || {};
+
+ try {
+ switch (action.type) {
+ // ── 저장 ──
+ case "save": {
+ if (!action.targetTable) {
+ return { success: false, error: "저장 대상 테이블이 설정되지 않았습니다." };
+ }
+ const data = rowData
+ ? applyFieldMapping(rowData, fieldMapping)
+ : {};
+ const result = await dataApi.createRecord(action.targetTable, data);
+ return { success: !!result?.success, data: result?.data, error: result?.message };
+ }
+
+ // ── 삭제 ──
+ case "delete": {
+ if (!action.targetTable) {
+ return { success: false, error: "삭제 대상 테이블이 설정되지 않았습니다." };
+ }
+ if (!rowData) {
+ return { success: false, error: "삭제할 데이터가 없습니다." };
+ }
+ const mappedData = applyFieldMapping(rowData, fieldMapping);
+ const pk = extractPrimaryKey(mappedData);
+ const result = await dataApi.deleteRecord(action.targetTable, pk);
+ return { success: !!result?.success, error: result?.message };
+ }
+
+ // ── API 호출 ──
+ case "api": {
+ if (!action.apiEndpoint) {
+ return { success: false, error: "API 엔드포인트가 설정되지 않았습니다." };
+ }
+ const body = rowData
+ ? applyFieldMapping(rowData, fieldMapping)
+ : undefined;
+ const method = (action.apiMethod || "POST").toUpperCase();
+
+ let response;
+ switch (method) {
+ case "GET":
+ response = await apiClient.get(action.apiEndpoint, { params: body });
+ break;
+ case "POST":
+ response = await apiClient.post(action.apiEndpoint, body);
+ break;
+ case "PUT":
+ response = await apiClient.put(action.apiEndpoint, body);
+ break;
+ case "DELETE":
+ response = await apiClient.delete(action.apiEndpoint, { data: body });
+ break;
+ default:
+ response = await apiClient.post(action.apiEndpoint, body);
+ }
+
+ const resData = response?.data;
+ return {
+ success: resData?.success !== false,
+ data: resData?.data ?? resData,
+ };
+ }
+
+ // ── 모달 열기 ──
+ case "modal": {
+ if (!publish) {
+ return { success: false, error: "이벤트 발행 함수가 제공되지 않았습니다." };
+ }
+ publish("__pop_modal_open__", {
+ modalId: action.modalScreenId,
+ title: action.modalTitle,
+ mode: action.modalMode,
+ items: action.modalItems,
+ rowData,
+ });
+ return { success: true };
+ }
+
+ // ── 이벤트 발행 ──
+ case "event": {
+ if (!publish) {
+ return { success: false, error: "이벤트 발행 함수가 제공되지 않았습니다." };
+ }
+ if (!action.eventName) {
+ return { success: false, error: "이벤트 이름이 설정되지 않았습니다." };
+ }
+ publish(action.eventName, {
+ ...(action.eventPayload || {}),
+ row: rowData,
+ });
+ return { success: true };
+ }
+
+ default:
+ return { success: false, error: `알 수 없는 액션 타입: ${action.type}` };
+ }
+ } catch (err: unknown) {
+ const message =
+ err instanceof Error ? err.message : "알 수 없는 오류가 발생했습니다.";
+ return { success: false, error: message };
+ }
+}
diff --git a/frontend/hooks/pop/index.ts b/frontend/hooks/pop/index.ts
new file mode 100644
index 00000000..7ae7e953
--- /dev/null
+++ b/frontend/hooks/pop/index.ts
@@ -0,0 +1,30 @@
+/**
+ * POP 공통 훅 배럴 파일
+ *
+ * 사용법: import { usePopEvent, useDataSource } from "@/hooks/pop";
+ */
+
+// 이벤트 통신 훅
+export { usePopEvent, cleanupScreen } from "./usePopEvent";
+
+// 데이터 CRUD 훅
+export { useDataSource } from "./useDataSource";
+export type { MutationResult, DataSourceResult } from "./useDataSource";
+
+// 액션 실행 순수 함수
+export { executePopAction } from "./executePopAction";
+export type { ActionResult } from "./executePopAction";
+
+// 액션 실행 React 훅
+export { usePopAction } from "./usePopAction";
+export type { PendingConfirmState } from "./usePopAction";
+
+// 연결 해석기
+export { useConnectionResolver } from "./useConnectionResolver";
+
+// 장바구니 동기화 훅
+export { useCartSync } from "./useCartSync";
+export type { UseCartSyncReturn } from "./useCartSync";
+
+// SQL 빌더 유틸 (고급 사용 시)
+export { buildAggregationSQL, validateDataSourceConfig } from "./popSqlBuilder";
diff --git a/frontend/hooks/pop/popSqlBuilder.ts b/frontend/hooks/pop/popSqlBuilder.ts
new file mode 100644
index 00000000..bd9fd599
--- /dev/null
+++ b/frontend/hooks/pop/popSqlBuilder.ts
@@ -0,0 +1,195 @@
+/**
+ * POP 공통 SQL 빌더
+ *
+ * DataSourceConfig를 SQL 문자열로 변환하는 순수 유틸리티.
+ * 원본: pop-dashboard/utils/dataFetcher.ts에서 추출 (로직 동일).
+ *
+ * 대시보드(dataFetcher.ts)는 기존 코드를 그대로 유지하고,
+ * 새 컴포넌트(useDataSource 등)는 이 파일을 사용한다.
+ * 향후 대시보드 교체 시 dataFetcher.ts가 이 파일을 import하도록 변경 예정.
+ *
+ * 보안:
+ * - escapeSQL: SQL 인젝션 방지 (문자열 이스케이프)
+ * - sanitizeIdentifier: 테이블명/컬럼명에서 위험 문자 제거
+ */
+
+import type { DataSourceConfig, DataSourceFilter } from "@/lib/registry/pop-components/types";
+
+// ===== SQL 값 이스케이프 =====
+
+/** SQL 문자열 값 이스케이프 (SQL 인젝션 방지) */
+function escapeSQL(value: unknown): string {
+ if (value === null || value === undefined) return "NULL";
+ if (typeof value === "number") return String(value);
+ if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+ // 문자열: 작은따옴표 이스케이프
+ const str = String(value).replace(/'/g, "''");
+ return `'${str}'`;
+}
+
+// ===== 식별자 검증 (테이블명, 컬럼명) =====
+
+/** SQL 식별자(테이블명, 컬럼명)에서 위험한 문자 제거 */
+function sanitizeIdentifier(name: string): string {
+ // 알파벳, 숫자, 언더스코어, 점(스키마.테이블)만 허용
+ return name.replace(/[^a-zA-Z0-9_.]/g, "");
+}
+
+// ===== 설정 완료 여부 검증 =====
+
+/**
+ * DataSourceConfig의 필수값이 모두 채워졌는지 검증
+ * 설정 중간 상태(테이블 미선택, 컬럼 미선택 등)에서는
+ * SQL을 생성하지 않도록 사전 차단
+ *
+ * @returns null이면 유효, 문자열이면 미완료 사유
+ */
+export function validateDataSourceConfig(config: DataSourceConfig): string | null {
+ // 테이블명 필수
+ if (!config.tableName || !config.tableName.trim()) {
+ return "테이블이 선택되지 않았습니다";
+ }
+
+ // 집계 함수가 설정되었으면 대상 컬럼도 필수
+ // (단, COUNT는 컬럼 없이도 COUNT(*)로 처리 가능)
+ if (config.aggregation) {
+ const aggType = config.aggregation.type?.toLowerCase();
+ const aggCol = config.aggregation.column?.trim();
+ if (aggType !== "count" && !aggCol) {
+ return `${config.aggregation.type.toUpperCase()} 집계에 대상 컬럼이 필요합니다`;
+ }
+ }
+
+ // 조인이 있으면 조인 조건 필수
+ if (config.joins?.length) {
+ for (const join of config.joins) {
+ if (!join.targetTable?.trim()) {
+ return "조인 대상 테이블이 선택되지 않았습니다";
+ }
+ if (!join.on.sourceColumn?.trim() || !join.on.targetColumn?.trim()) {
+ return "조인 조건 컬럼이 설정되지 않았습니다";
+ }
+ }
+ }
+
+ return null;
+}
+
+// ===== 필터 조건 SQL 생성 =====
+
+/** DataSourceFilter 배열을 WHERE 절 조건문으로 변환 */
+function buildWhereClause(filters: DataSourceFilter[]): string {
+ // 컬럼명이 빈 필터는 무시 (설정 중간 상태 방어)
+ const validFilters = filters.filter((f) => f.column?.trim());
+ if (!validFilters.length) return "";
+
+ const conditions = validFilters.map((f) => {
+ const col = sanitizeIdentifier(f.column);
+
+ switch (f.operator) {
+ case "between": {
+ const arr = Array.isArray(f.value) ? f.value : [f.value, f.value];
+ return `${col} BETWEEN ${escapeSQL(arr[0])} AND ${escapeSQL(arr[1])}`;
+ }
+ case "in": {
+ const arr = Array.isArray(f.value) ? f.value : [f.value];
+ const vals = arr.map(escapeSQL).join(", ");
+ return `${col} IN (${vals})`;
+ }
+ case "like":
+ return `${col} LIKE ${escapeSQL(f.value)}`;
+ default:
+ return `${col} ${f.operator} ${escapeSQL(f.value)}`;
+ }
+ });
+
+ return `WHERE ${conditions.join(" AND ")}`;
+}
+
+// ===== 집계 SQL 빌더 =====
+
+/**
+ * DataSourceConfig를 SELECT SQL로 변환
+ *
+ * @param config - 데이터 소스 설정
+ * @returns SQL 문자열
+ */
+export function buildAggregationSQL(config: DataSourceConfig): string {
+ const tableName = sanitizeIdentifier(config.tableName);
+
+ // SELECT 절
+ let selectClause: string;
+ if (config.aggregation) {
+ const aggType = config.aggregation.type.toUpperCase();
+ const aggCol = config.aggregation.column?.trim()
+ ? sanitizeIdentifier(config.aggregation.column)
+ : "";
+
+ // COUNT는 컬럼 없으면 COUNT(*), 나머지는 컬럼 필수
+ if (!aggCol) {
+ selectClause = aggType === "COUNT"
+ ? "COUNT(*) as value"
+ : `${aggType}(${tableName}.*) as value`;
+ } else {
+ selectClause = `${aggType}(${aggCol}) as value`;
+ }
+
+ // GROUP BY가 있으면 해당 컬럼도 SELECT에 포함
+ if (config.aggregation.groupBy?.length) {
+ const groupCols = config.aggregation.groupBy.map(sanitizeIdentifier).join(", ");
+ selectClause = `${groupCols}, ${selectClause}`;
+ }
+ } else {
+ selectClause = "*";
+ }
+
+ // FROM 절 (조인 포함 - 조건이 완전한 조인만 적용)
+ let fromClause = tableName;
+ if (config.joins?.length) {
+ for (const join of config.joins) {
+ // 조인 설정이 불완전하면 건너뜀 (설정 중간 상태 방어)
+ if (!join.targetTable?.trim() || !join.on.sourceColumn?.trim() || !join.on.targetColumn?.trim()) {
+ continue;
+ }
+ const joinTable = sanitizeIdentifier(join.targetTable);
+ const joinType = join.joinType.toUpperCase();
+ const srcCol = sanitizeIdentifier(join.on.sourceColumn);
+ const tgtCol = sanitizeIdentifier(join.on.targetColumn);
+ fromClause += ` ${joinType} JOIN ${joinTable} ON ${tableName}.${srcCol} = ${joinTable}.${tgtCol}`;
+ }
+ }
+
+ // WHERE 절
+ const whereClause = config.filters?.length
+ ? buildWhereClause(config.filters)
+ : "";
+
+ // GROUP BY 절
+ let groupByClause = "";
+ if (config.aggregation?.groupBy?.length) {
+ groupByClause = `GROUP BY ${config.aggregation.groupBy.map(sanitizeIdentifier).join(", ")}`;
+ }
+
+ // ORDER BY 절
+ let orderByClause = "";
+ if (config.sort?.length) {
+ const sortCols = config.sort
+ .map((s) => `${sanitizeIdentifier(s.column)} ${s.direction.toUpperCase()}`)
+ .join(", ");
+ orderByClause = `ORDER BY ${sortCols}`;
+ }
+
+ // LIMIT 절
+ const limitClause = config.limit ? `LIMIT ${Math.max(1, Math.floor(config.limit))}` : "";
+
+ return [
+ `SELECT ${selectClause}`,
+ `FROM ${fromClause}`,
+ whereClause,
+ groupByClause,
+ orderByClause,
+ limitClause,
+ ]
+ .filter(Boolean)
+ .join(" ");
+}
diff --git a/frontend/hooks/pop/useCartSync.ts b/frontend/hooks/pop/useCartSync.ts
new file mode 100644
index 00000000..e3b76ed5
--- /dev/null
+++ b/frontend/hooks/pop/useCartSync.ts
@@ -0,0 +1,338 @@
+/**
+ * useCartSync - 장바구니 DB 동기화 훅
+ *
+ * DB(cart_items 테이블) <-> 로컬 상태를 동기화하고 변경사항(dirty)을 감지한다.
+ *
+ * 동작 방식:
+ * 1. 마운트 시 DB에서 해당 screen_id + user_id의 장바구니를 로드
+ * 2. addItem/removeItem/updateItem은 로컬 상태만 변경 (DB 미반영, dirty 상태)
+ * 3. saveToDb 호출 시 로컬 상태를 DB에 일괄 반영 (추가/수정/삭제)
+ * 4. isDirty = 로컬 상태와 DB 마지막 로드 상태의 차이 존재 여부
+ *
+ * 사용 예시:
+ * ```typescript
+ * const cart = useCartSync("SCR-001", "item_info");
+ *
+ * // 품목 추가 (로컬만, DB 미반영)
+ * cart.addItem({ row, quantity: 10 }, "D1710008");
+ *
+ * // DB 저장 (pop-icon 확인 모달에서 호출)
+ * await cart.saveToDb();
+ * ```
+ */
+
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { dataApi } from "@/lib/api/data";
+import type {
+ CartItem,
+ CartItemWithId,
+ CartSyncStatus,
+ CartItemStatus,
+} from "@/lib/registry/pop-components/types";
+
+// ===== 반환 타입 =====
+
+export interface UseCartSyncReturn {
+ cartItems: CartItemWithId[];
+ savedItems: CartItemWithId[];
+ syncStatus: CartSyncStatus;
+ cartCount: number;
+ isDirty: boolean;
+ loading: boolean;
+
+ addItem: (item: CartItem, rowKey: string) => void;
+ removeItem: (rowKey: string) => void;
+ updateItemQuantity: (rowKey: string, quantity: number, packageUnit?: string, packageEntries?: CartItem["packageEntries"]) => void;
+ isItemInCart: (rowKey: string) => boolean;
+ getCartItem: (rowKey: string) => CartItemWithId | undefined;
+
+ saveToDb: (selectedColumns?: string[]) => Promise;
+ loadFromDb: () => Promise;
+ resetToSaved: () => void;
+}
+
+// ===== DB 행 -> CartItemWithId 변환 =====
+
+function dbRowToCartItem(dbRow: Record): CartItemWithId {
+ let rowData: Record = {};
+ try {
+ const raw = dbRow.row_data;
+ if (typeof raw === "string" && raw.trim()) {
+ rowData = JSON.parse(raw);
+ } else if (typeof raw === "object" && raw !== null) {
+ rowData = raw as Record;
+ }
+ } catch {
+ rowData = {};
+ }
+
+ let packageEntries: CartItem["packageEntries"] | undefined;
+ try {
+ const raw = dbRow.package_entries;
+ if (typeof raw === "string" && raw.trim()) {
+ packageEntries = JSON.parse(raw);
+ } else if (Array.isArray(raw)) {
+ packageEntries = raw;
+ }
+ } catch {
+ packageEntries = undefined;
+ }
+
+ return {
+ row: rowData,
+ quantity: Number(dbRow.quantity) || 0,
+ packageUnit: (dbRow.package_unit as string) || undefined,
+ packageEntries,
+ cartId: (dbRow.id as string) || undefined,
+ sourceTable: (dbRow.source_table as string) || "",
+ rowKey: (dbRow.row_key as string) || "",
+ status: ((dbRow.status as string) || "in_cart") as CartItemStatus,
+ _origin: "db",
+ memo: (dbRow.memo as string) || undefined,
+ };
+}
+
+// ===== CartItemWithId -> DB 저장용 레코드 변환 =====
+
+function cartItemToDbRecord(
+ item: CartItemWithId,
+ screenId: string,
+ cartType: string = "pop",
+ selectedColumns?: string[],
+): Record {
+ // selectedColumns가 있으면 해당 컬럼만 추출, 없으면 전체 저장
+ const rowData =
+ selectedColumns && selectedColumns.length > 0
+ ? Object.fromEntries(
+ Object.entries(item.row).filter(([k]) => selectedColumns.includes(k)),
+ )
+ : item.row;
+
+ return {
+ cart_type: cartType,
+ screen_id: screenId,
+ source_table: item.sourceTable,
+ row_key: item.rowKey,
+ row_data: JSON.stringify(rowData),
+ quantity: String(item.quantity),
+ unit: "",
+ package_unit: item.packageUnit || "",
+ package_entries: item.packageEntries ? JSON.stringify(item.packageEntries) : "",
+ status: item.status,
+ memo: item.memo || "",
+ };
+}
+
+// ===== dirty check: 두 배열의 내용이 동일한지 비교 =====
+
+function areItemsEqual(a: CartItemWithId[], b: CartItemWithId[]): boolean {
+ if (a.length !== b.length) return false;
+
+ const serialize = (items: CartItemWithId[]) =>
+ items
+ .map((item) => `${item.rowKey}:${item.quantity}:${item.packageUnit || ""}:${item.status}`)
+ .sort()
+ .join("|");
+
+ return serialize(a) === serialize(b);
+}
+
+// ===== 훅 본체 =====
+
+export function useCartSync(
+ screenId: string,
+ sourceTable: string,
+ cartType?: string,
+): UseCartSyncReturn {
+ const [cartItems, setCartItems] = useState([]);
+ const [savedItems, setSavedItems] = useState([]);
+ const [syncStatus, setSyncStatus] = useState("clean");
+ const [loading, setLoading] = useState(false);
+
+ const screenIdRef = useRef(screenId);
+ const sourceTableRef = useRef(sourceTable);
+ const cartTypeRef = useRef(cartType || "pop");
+ screenIdRef.current = screenId;
+ sourceTableRef.current = sourceTable;
+ cartTypeRef.current = cartType || "pop";
+
+ // ----- DB에서 장바구니 로드 -----
+ const loadFromDb = useCallback(async () => {
+ if (!screenId) return;
+ setLoading(true);
+ try {
+ const result = await dataApi.getTableData("cart_items", {
+ size: 500,
+ filters: {
+ screen_id: screenId,
+ cart_type: cartTypeRef.current,
+ status: "in_cart",
+ },
+ });
+
+ const items = (result.data || []).map(dbRowToCartItem);
+ setSavedItems(items);
+ setCartItems(items);
+ setSyncStatus("clean");
+ } catch (err) {
+ console.error("[useCartSync] DB 로드 실패:", err);
+ } finally {
+ setLoading(false);
+ }
+ }, [screenId]);
+
+ // 마운트 시 자동 로드
+ useEffect(() => {
+ loadFromDb();
+ }, [loadFromDb]);
+
+ // ----- dirty 상태 계산 -----
+ const isDirty = !areItemsEqual(cartItems, savedItems);
+
+ // isDirty 변경 시 syncStatus 자동 갱신
+ useEffect(() => {
+ if (syncStatus !== "saving") {
+ setSyncStatus(isDirty ? "dirty" : "clean");
+ }
+ }, [isDirty, syncStatus]);
+
+ // ----- 로컬 조작 (DB 미반영) -----
+
+ const addItem = useCallback(
+ (item: CartItem, rowKey: string) => {
+ setCartItems((prev) => {
+ const exists = prev.find((i) => i.rowKey === rowKey);
+ if (exists) {
+ return prev.map((i) =>
+ i.rowKey === rowKey
+ ? { ...i, quantity: item.quantity, packageUnit: item.packageUnit, packageEntries: item.packageEntries, row: item.row }
+ : i,
+ );
+ }
+ const newItem: CartItemWithId = {
+ ...item,
+ cartId: undefined,
+ sourceTable: sourceTableRef.current,
+ rowKey,
+ status: "in_cart",
+ _origin: "local",
+ };
+ return [...prev, newItem];
+ });
+ },
+ [],
+ );
+
+ const removeItem = useCallback((rowKey: string) => {
+ setCartItems((prev) => prev.filter((i) => i.rowKey !== rowKey));
+ }, []);
+
+ const updateItemQuantity = useCallback(
+ (rowKey: string, quantity: number, packageUnit?: string, packageEntries?: CartItem["packageEntries"]) => {
+ setCartItems((prev) =>
+ prev.map((i) =>
+ i.rowKey === rowKey
+ ? {
+ ...i,
+ quantity,
+ ...(packageUnit !== undefined && { packageUnit }),
+ ...(packageEntries !== undefined && { packageEntries }),
+ }
+ : i,
+ ),
+ );
+ },
+ [],
+ );
+
+ const isItemInCart = useCallback(
+ (rowKey: string) => cartItems.some((i) => i.rowKey === rowKey),
+ [cartItems],
+ );
+
+ const getCartItem = useCallback(
+ (rowKey: string) => cartItems.find((i) => i.rowKey === rowKey),
+ [cartItems],
+ );
+
+ // ----- DB 저장 (일괄) -----
+ const saveToDb = useCallback(async (selectedColumns?: string[]): Promise => {
+ setSyncStatus("saving");
+ try {
+ const currentScreenId = screenIdRef.current;
+
+ // 삭제 대상: savedItems에 있지만 cartItems에 없는 것
+ const cartRowKeys = new Set(cartItems.map((i) => i.rowKey));
+ const toDelete = savedItems.filter((s) => s.cartId && !cartRowKeys.has(s.rowKey));
+
+ // 추가 대상: cartItems에 있지만 cartId가 없는 것 (로컬에서 추가됨)
+ const toCreate = cartItems.filter((c) => !c.cartId);
+
+ // 수정 대상: 양쪽 다 존재하고 cartId 있으면서 내용이 다른 것
+ const savedMap = new Map(savedItems.map((s) => [s.rowKey, s]));
+ const toUpdate = cartItems.filter((c) => {
+ if (!c.cartId) return false;
+ const saved = savedMap.get(c.rowKey);
+ if (!saved) return false;
+ return (
+ c.quantity !== saved.quantity ||
+ c.packageUnit !== saved.packageUnit ||
+ c.status !== saved.status
+ );
+ });
+
+ const promises: Promise[] = [];
+
+ for (const item of toDelete) {
+ promises.push(dataApi.deleteRecord("cart_items", item.cartId!));
+ }
+
+ const currentCartType = cartTypeRef.current;
+
+ for (const item of toCreate) {
+ const record = cartItemToDbRecord(item, currentScreenId, currentCartType, selectedColumns);
+ promises.push(dataApi.createRecord("cart_items", record));
+ }
+
+ for (const item of toUpdate) {
+ const record = cartItemToDbRecord(item, currentScreenId, currentCartType, selectedColumns);
+ promises.push(dataApi.updateRecord("cart_items", item.cartId!, record));
+ }
+
+ await Promise.all(promises);
+
+ // 저장 후 DB에서 다시 로드하여 cartId 등을 최신화
+ await loadFromDb();
+ return true;
+ } catch (err) {
+ console.error("[useCartSync] DB 저장 실패:", err);
+ setSyncStatus("dirty");
+ return false;
+ }
+ }, [cartItems, savedItems, loadFromDb]);
+
+ // ----- 로컬 변경 취소 -----
+ const resetToSaved = useCallback(() => {
+ setCartItems(savedItems);
+ setSyncStatus("clean");
+ }, [savedItems]);
+
+ return {
+ cartItems,
+ savedItems,
+ syncStatus,
+ cartCount: cartItems.length,
+ isDirty,
+ loading,
+ addItem,
+ removeItem,
+ updateItemQuantity,
+ isItemInCart,
+ getCartItem,
+ saveToDb,
+ loadFromDb,
+ resetToSaved,
+ };
+}
diff --git a/frontend/hooks/pop/useConnectionResolver.ts b/frontend/hooks/pop/useConnectionResolver.ts
new file mode 100644
index 00000000..3c20acc2
--- /dev/null
+++ b/frontend/hooks/pop/useConnectionResolver.ts
@@ -0,0 +1,70 @@
+/**
+ * useConnectionResolver - 런타임 컴포넌트 연결 해석기
+ *
+ * PopViewerWithModals에서 사용.
+ * layout.dataFlow.connections를 읽고, 소스 컴포넌트의 __comp_output__ 이벤트를
+ * 타겟 컴포넌트의 __comp_input__ 이벤트로 자동 변환/중계한다.
+ *
+ * 이벤트 규칙:
+ * 소스: __comp_output__${sourceComponentId}__${outputKey}
+ * 타겟: __comp_input__${targetComponentId}__${inputKey}
+ */
+
+import { useEffect, useRef } from "react";
+import { usePopEvent } from "./usePopEvent";
+import type { PopDataConnection } from "@/components/pop/designer/types/pop-layout";
+
+interface UseConnectionResolverOptions {
+ screenId: string;
+ connections: PopDataConnection[];
+}
+
+export function useConnectionResolver({
+ screenId,
+ connections,
+}: UseConnectionResolverOptions): void {
+ const { publish, subscribe } = usePopEvent(screenId);
+
+ // 연결 목록을 ref로 저장하여 콜백 안정성 확보
+ const connectionsRef = useRef(connections);
+ connectionsRef.current = connections;
+
+ useEffect(() => {
+ if (!connections || connections.length === 0) return;
+
+ const unsubscribers: (() => void)[] = [];
+
+ // 소스별로 그룹핑하여 구독 생성
+ const sourceGroups = new Map();
+ for (const conn of connections) {
+ const sourceEvent = `__comp_output__${conn.sourceComponent}__${conn.sourceOutput || conn.sourceField}`;
+ const existing = sourceGroups.get(sourceEvent) || [];
+ existing.push(conn);
+ sourceGroups.set(sourceEvent, existing);
+ }
+
+ for (const [sourceEvent, conns] of sourceGroups) {
+ const unsub = subscribe(sourceEvent, (payload: unknown) => {
+ for (const conn of conns) {
+ const targetEvent = `__comp_input__${conn.targetComponent}__${conn.targetInput || conn.targetField}`;
+
+ // 항상 통일된 구조로 감싸서 전달: { value, filterConfig?, _connectionId }
+ const enrichedPayload = {
+ value: payload,
+ filterConfig: conn.filterConfig,
+ _connectionId: conn.id,
+ };
+
+ publish(targetEvent, enrichedPayload);
+ }
+ });
+ unsubscribers.push(unsub);
+ }
+
+ return () => {
+ for (const unsub of unsubscribers) {
+ unsub();
+ }
+ };
+ }, [screenId, connections, subscribe, publish]);
+}
diff --git a/frontend/hooks/pop/useDataSource.ts b/frontend/hooks/pop/useDataSource.ts
new file mode 100644
index 00000000..23bd9f93
--- /dev/null
+++ b/frontend/hooks/pop/useDataSource.ts
@@ -0,0 +1,383 @@
+/**
+ * useDataSource - POP 컴포넌트용 데이터 CRUD 통합 훅
+ *
+ * DataSourceConfig를 받아서 자동으로 적절한 API를 선택하여 데이터를 조회/생성/수정/삭제한다.
+ *
+ * 조회 분기:
+ * - aggregation 또는 joins가 있으면 → SQL 빌더 + executeQuery (대시보드와 동일)
+ * - 그 외 → dataApi.getTableData (단순 테이블 조회)
+ *
+ * CRUD:
+ * - save: dataApi.createRecord
+ * - update: dataApi.updateRecord
+ * - remove: dataApi.deleteRecord
+ *
+ * 사용 패턴:
+ * ```typescript
+ * // 집계 조회 (대시보드용)
+ * const { data, loading } = useDataSource({
+ * tableName: "sales_order",
+ * aggregation: { type: "sum", column: "amount", groupBy: ["category"] },
+ * refreshInterval: 30,
+ * });
+ *
+ * // 단순 목록 조회 (테이블용)
+ * const { data, refetch } = useDataSource({
+ * tableName: "purchase_order",
+ * sort: [{ column: "created_at", direction: "desc" }],
+ * limit: 20,
+ * });
+ *
+ * // 저장/삭제 (버튼용)
+ * const { save, remove } = useDataSource({ tableName: "inbound_record" });
+ * await save({ supplier_id: "SUP-001", quantity: 50 });
+ * ```
+ */
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { dashboardApi } from "@/lib/api/dashboard";
+import { dataApi } from "@/lib/api/data";
+import type { DataSourceConfig, DataSourceFilter } from "@/lib/registry/pop-components/types";
+import { validateDataSourceConfig, buildAggregationSQL } from "./popSqlBuilder";
+
+// ===== 타입 정의 =====
+
+/** 조회 결과 */
+export interface DataSourceResult {
+ /** 데이터 행 배열 */
+ rows: Record[];
+ /** 단일 집계 값 (aggregation 시) 또는 전체 행 수 */
+ value: number;
+ /** 전체 행 수 (페이징용) */
+ total: number;
+}
+
+/** CRUD 작업 결과 */
+export interface MutationResult {
+ success: boolean;
+ data?: unknown;
+ error?: string;
+}
+
+/** refetch 시 전달할 오버라이드 필터 */
+interface OverrideOptions {
+ filters?: Record;
+}
+
+// ===== 내부: 집계/조인 조회 =====
+
+/**
+ * 집계 또는 조인이 포함된 DataSourceConfig를 SQL로 변환하여 실행
+ * dataFetcher.ts의 fetchAggregatedData와 동일한 로직
+ */
+async function fetchWithSqlBuilder(
+ config: DataSourceConfig
+): Promise {
+ const sql = buildAggregationSQL(config);
+
+ // API 호출: apiClient(axios) 우선, dashboardApi(fetch) 폴백
+ let queryResult: { columns: string[]; rows: Record[] };
+ try {
+ // 1차: apiClient (axios 기반, 인증/세션 안정적)
+ const response = await apiClient.post("/dashboards/execute-query", { query: sql });
+ if (response.data?.success && response.data?.data) {
+ queryResult = response.data.data;
+ } else {
+ throw new Error(response.data?.message || "쿼리 실행 실패");
+ }
+ } catch {
+ // 2차: dashboardApi (fetch 기반, 폴백)
+ queryResult = await dashboardApi.executeQuery(sql);
+ }
+
+ if (queryResult.rows.length === 0) {
+ return { rows: [], value: 0, total: 0 };
+ }
+
+ // PostgreSQL bigint/numeric는 JS에서 문자열로 반환됨 → 숫자 변환
+ const processedRows = queryResult.rows.map((row) => {
+ const converted: Record = { ...row };
+ for (const key of Object.keys(converted)) {
+ const val = converted[key];
+ if (typeof val === "string" && val !== "" && !isNaN(Number(val))) {
+ converted[key] = Number(val);
+ }
+ }
+ return converted;
+ });
+
+ // 첫 번째 행의 value 컬럼 추출
+ const firstRow = processedRows[0];
+ const numericValue = parseFloat(
+ String(firstRow.value ?? firstRow[queryResult.columns[0]] ?? 0)
+ );
+
+ return {
+ rows: processedRows,
+ value: Number.isFinite(numericValue) ? numericValue : 0,
+ total: processedRows.length,
+ };
+}
+
+// ===== 내부: 단순 테이블 조회 =====
+
+/**
+ * aggregation/joins 없는 단순 테이블 조회
+ * dataApi.getTableData 래핑
+ */
+async function fetchSimpleTable(
+ config: DataSourceConfig,
+ overrideFilters?: Record
+): Promise {
+ // config.filters를 Record 형태로 변환
+ const baseFilters: Record = {};
+ if (config.filters?.length) {
+ for (const f of config.filters) {
+ if (f.column?.trim()) {
+ baseFilters[f.column] = f.value;
+ }
+ }
+ }
+
+ // overrideFilters가 있으면 병합 (같은 키는 override가 덮어씀)
+ const mergedFilters = overrideFilters
+ ? { ...baseFilters, ...overrideFilters }
+ : baseFilters;
+
+ const tableResult = await dataApi.getTableData(config.tableName, {
+ page: 1,
+ size: config.limit ?? 100,
+ sortBy: config.sort?.[0]?.column,
+ sortOrder: config.sort?.[0]?.direction,
+ filters: Object.keys(mergedFilters).length > 0 ? mergedFilters : undefined,
+ });
+
+ return {
+ rows: tableResult.data,
+ value: tableResult.total ?? tableResult.data.length,
+ total: tableResult.total ?? tableResult.data.length,
+ };
+}
+
+// ===== 내부: overrideFilters를 DataSourceFilter 배열에 병합 =====
+
+/**
+ * 기존 config에 overrideFilters를 병합한 새 config 생성
+ * 같은 column이 있으면 override 값으로 대체
+ */
+function mergeFilters(
+ config: DataSourceConfig,
+ overrideFilters?: Record
+): DataSourceConfig {
+ if (!overrideFilters || Object.keys(overrideFilters).length === 0) {
+ return config;
+ }
+
+ // 기존 filters에서 override 대상이 아닌 것만 유지
+ const overrideColumns = new Set(Object.keys(overrideFilters));
+ const existingFilters: DataSourceFilter[] = (config.filters ?? []).filter(
+ (f) => !overrideColumns.has(f.column)
+ );
+
+ // override를 DataSourceFilter로 변환하여 추가
+ const newFilters: DataSourceFilter[] = Object.entries(overrideFilters).map(
+ ([column, value]) => ({
+ column,
+ operator: "=" as const,
+ value,
+ })
+ );
+
+ return {
+ ...config,
+ filters: [...existingFilters, ...newFilters],
+ };
+}
+
+// ===== 메인 훅 =====
+
+/**
+ * POP 컴포넌트용 데이터 CRUD 통합 훅
+ *
+ * @param config - DataSourceConfig (tableName 필수)
+ * @returns data, loading, error, refetch, save, update, remove
+ */
+export function useDataSource(config: DataSourceConfig) {
+ const [data, setData] = useState({
+ rows: [],
+ value: 0,
+ total: 0,
+ });
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ // config를 ref로 저장 (콜백 안정성)
+ const configRef = useRef(config);
+ configRef.current = config;
+
+ // 자동 새로고침 타이머
+ const refreshTimerRef = useRef | null>(null);
+
+ // ===== 조회 (READ) =====
+
+ const refetch = useCallback(
+ async (options?: OverrideOptions): Promise => {
+ const currentConfig = configRef.current;
+
+ // 테이블명 없으면 조회하지 않음
+ if (!currentConfig.tableName?.trim()) {
+ return;
+ }
+
+ setLoading(true);
+ setError(null);
+
+ try {
+ const hasAggregation = !!currentConfig.aggregation;
+ const hasJoins = !!(currentConfig.joins && currentConfig.joins.length > 0);
+
+ let result: DataSourceResult;
+
+ if (hasAggregation || hasJoins) {
+ // 집계/조인 → SQL 빌더 경로
+ // 설정 완료 여부 검증
+ const merged = mergeFilters(currentConfig, options?.filters);
+ const validationError = validateDataSourceConfig(merged);
+ if (validationError) {
+ setError(validationError);
+ setLoading(false);
+ return;
+ }
+ result = await fetchWithSqlBuilder(merged);
+ } else {
+ // 단순 조회 → dataApi 경로
+ result = await fetchSimpleTable(currentConfig, options?.filters);
+ }
+
+ setData(result);
+ } catch (err: unknown) {
+ const message = err instanceof Error ? err.message : "데이터 조회 실패";
+ setError(message);
+ } finally {
+ setLoading(false);
+ }
+ },
+ [] // configRef 사용으로 의존성 불필요
+ );
+
+ // ===== 생성 (CREATE) =====
+
+ const save = useCallback(
+ async (record: Record): Promise => {
+ const tableName = configRef.current.tableName;
+ if (!tableName?.trim()) {
+ return { success: false, error: "테이블이 설정되지 않았습니다" };
+ }
+
+ try {
+ const result = await dataApi.createRecord(tableName, record);
+ return {
+ success: result.success ?? true,
+ data: result.data,
+ error: result.message,
+ };
+ } catch (err: unknown) {
+ const message = err instanceof Error ? err.message : "레코드 생성 실패";
+ return { success: false, error: message };
+ }
+ },
+ []
+ );
+
+ // ===== 수정 (UPDATE) =====
+
+ const update = useCallback(
+ async (
+ id: string | number,
+ record: Record
+ ): Promise => {
+ const tableName = configRef.current.tableName;
+ if (!tableName?.trim()) {
+ return { success: false, error: "테이블이 설정되지 않았습니다" };
+ }
+
+ try {
+ const result = await dataApi.updateRecord(tableName, id, record);
+ return {
+ success: result.success ?? true,
+ data: result.data,
+ error: result.message,
+ };
+ } catch (err: unknown) {
+ const message = err instanceof Error ? err.message : "레코드 수정 실패";
+ return { success: false, error: message };
+ }
+ },
+ []
+ );
+
+ // ===== 삭제 (DELETE) =====
+
+ const remove = useCallback(
+ async (
+ id: string | number | Record
+ ): Promise => {
+ const tableName = configRef.current.tableName;
+ if (!tableName?.trim()) {
+ return { success: false, error: "테이블이 설정되지 않았습니다" };
+ }
+
+ try {
+ const result = await dataApi.deleteRecord(tableName, id);
+ return {
+ success: result.success ?? true,
+ data: result.data,
+ error: result.message,
+ };
+ } catch (err: unknown) {
+ const message = err instanceof Error ? err.message : "레코드 삭제 실패";
+ return { success: false, error: message };
+ }
+ },
+ []
+ );
+
+ // ===== 자동 조회 + 새로고침 =====
+
+ // config.tableName 또는 refreshInterval이 변경되면 재조회
+ const tableName = config.tableName;
+ const refreshInterval = config.refreshInterval;
+
+ useEffect(() => {
+ // 테이블명 있으면 초기 조회
+ if (tableName?.trim()) {
+ refetch();
+ }
+
+ // refreshInterval 설정 시 자동 새로고침
+ if (refreshInterval && refreshInterval > 0) {
+ const sec = Math.max(5, refreshInterval); // 최소 5초
+ refreshTimerRef.current = setInterval(() => {
+ refetch();
+ }, sec * 1000);
+ }
+
+ return () => {
+ if (refreshTimerRef.current) {
+ clearInterval(refreshTimerRef.current);
+ refreshTimerRef.current = null;
+ }
+ };
+ }, [tableName, refreshInterval, refetch]);
+
+ return {
+ data,
+ loading,
+ error,
+ refetch,
+ save,
+ update,
+ remove,
+ } as const;
+}
diff --git a/frontend/hooks/pop/usePopAction.ts b/frontend/hooks/pop/usePopAction.ts
new file mode 100644
index 00000000..267beb4e
--- /dev/null
+++ b/frontend/hooks/pop/usePopAction.ts
@@ -0,0 +1,218 @@
+/**
+ * usePopAction - POP 액션 실행 React 훅
+ *
+ * executePopAction (순수 함수)를 래핑하여 React UI 관심사를 처리:
+ * - 로딩 상태 (isLoading)
+ * - 확인 다이얼로그 (pendingConfirm)
+ * - 토스트 알림
+ * - 후속 액션 체이닝 (followUpActions)
+ *
+ * 사용처:
+ * - PopButtonComponent (메인 버튼)
+ *
+ * pop-string-list 등 리스트 컴포넌트는 executePopAction을 직접 호출하여
+ * 훅 인스턴스 폭발 문제를 회피함.
+ */
+
+import { useState, useCallback, useRef } from "react";
+import type {
+ ButtonMainAction,
+ FollowUpAction,
+ ConfirmConfig,
+} from "@/lib/registry/pop-components/pop-button";
+import { usePopEvent } from "./usePopEvent";
+import { executePopAction } from "./executePopAction";
+import type { ActionResult } from "./executePopAction";
+import { toast } from "sonner";
+
+// ========================================
+// 타입 정의
+// ========================================
+
+/** 확인 대기 중인 액션 상태 */
+export interface PendingConfirmState {
+ action: ButtonMainAction;
+ rowData?: Record;
+ fieldMapping?: Record;
+ confirm: ConfirmConfig;
+ followUpActions?: FollowUpAction[];
+}
+
+/** execute 호출 시 옵션 */
+interface ExecuteActionOptions {
+ /** 대상 행 데이터 */
+ rowData?: Record;
+ /** 필드 매핑 */
+ fieldMapping?: Record;
+ /** 확인 다이얼로그 설정 */
+ confirm?: ConfirmConfig;
+ /** 후속 액션 */
+ followUpActions?: FollowUpAction[];
+}
+
+// ========================================
+// 상수
+// ========================================
+
+/** 액션 성공 시 토스트 메시지 */
+const ACTION_SUCCESS_MESSAGES: Record = {
+ save: "저장되었습니다.",
+ delete: "삭제되었습니다.",
+ api: "요청이 완료되었습니다.",
+ modal: "",
+ event: "",
+};
+
+// ========================================
+// 메인 훅
+// ========================================
+
+/**
+ * POP 액션 실행 훅
+ *
+ * @param screenId - 화면 ID (이벤트 버스 연결용)
+ * @returns execute, isLoading, pendingConfirm, confirmExecute, cancelConfirm
+ */
+export function usePopAction(screenId: string) {
+ const [isLoading, setIsLoading] = useState(false);
+ const [pendingConfirm, setPendingConfirm] = useState(null);
+
+ const { publish } = usePopEvent(screenId);
+
+ // publish 안정성 보장 (콜백 내에서 최신 참조 사용)
+ const publishRef = useRef(publish);
+ publishRef.current = publish;
+
+ /**
+ * 실제 실행 (확인 다이얼로그 이후 or 확인 불필요 시)
+ */
+ const runAction = useCallback(
+ async (
+ action: ButtonMainAction,
+ rowData?: Record,
+ fieldMapping?: Record,
+ followUpActions?: FollowUpAction[]
+ ): Promise => {
+ setIsLoading(true);
+
+ try {
+ const result = await executePopAction(action, rowData, {
+ fieldMapping,
+ screenId,
+ publish: publishRef.current,
+ });
+
+ // 결과에 따른 토스트
+ if (result.success) {
+ const msg = ACTION_SUCCESS_MESSAGES[action.type];
+ if (msg) toast.success(msg);
+ } else {
+ toast.error(result.error || "작업에 실패했습니다.");
+ }
+
+ // 성공 시 후속 액션 실행
+ if (result.success && followUpActions?.length) {
+ await executeFollowUpActions(followUpActions);
+ }
+
+ return result;
+ } finally {
+ setIsLoading(false);
+ }
+ },
+ [screenId]
+ );
+
+ /**
+ * 후속 액션 실행
+ */
+ const executeFollowUpActions = useCallback(
+ async (actions: FollowUpAction[]) => {
+ for (const followUp of actions) {
+ switch (followUp.type) {
+ case "event":
+ if (followUp.eventName) {
+ publishRef.current(followUp.eventName, followUp.eventPayload);
+ }
+ break;
+
+ case "refresh":
+ // 새로고침 이벤트 발행 (구독하는 컴포넌트가 refetch)
+ publishRef.current("__pop_refresh__");
+ break;
+
+ case "navigate":
+ if (followUp.targetScreenId) {
+ publishRef.current("__pop_navigate__", {
+ screenId: followUp.targetScreenId,
+ params: followUp.params,
+ });
+ }
+ break;
+
+ case "close-modal":
+ publishRef.current("__pop_modal_close__");
+ break;
+ }
+ }
+ },
+ []
+ );
+
+ /**
+ * 외부에서 호출하는 실행 함수
+ * confirm이 활성화되어 있으면 pendingConfirm에 저장하고 대기.
+ * 비활성화이면 즉시 실행.
+ */
+ const execute = useCallback(
+ async (
+ action: ButtonMainAction,
+ options?: ExecuteActionOptions
+ ): Promise => {
+ const { rowData, fieldMapping, confirm, followUpActions } = options || {};
+
+ // 확인 다이얼로그 필요 시 대기
+ if (confirm?.enabled) {
+ setPendingConfirm({
+ action,
+ rowData,
+ fieldMapping,
+ confirm,
+ followUpActions,
+ });
+ return { success: true }; // 대기 상태이므로 일단 success
+ }
+
+ // 즉시 실행
+ return runAction(action, rowData, fieldMapping, followUpActions);
+ },
+ [runAction]
+ );
+
+ /**
+ * 확인 다이얼로그에서 "확인" 클릭 시
+ */
+ const confirmExecute = useCallback(async () => {
+ if (!pendingConfirm) return;
+
+ const { action, rowData, fieldMapping, followUpActions } = pendingConfirm;
+ setPendingConfirm(null);
+
+ await runAction(action, rowData, fieldMapping, followUpActions);
+ }, [pendingConfirm, runAction]);
+
+ /**
+ * 확인 다이얼로그에서 "취소" 클릭 시
+ */
+ const cancelConfirm = useCallback(() => {
+ setPendingConfirm(null);
+ }, []);
+
+ return {
+ execute,
+ isLoading,
+ pendingConfirm,
+ confirmExecute,
+ cancelConfirm,
+ } as const;
+}
diff --git a/frontend/hooks/pop/usePopEvent.ts b/frontend/hooks/pop/usePopEvent.ts
new file mode 100644
index 00000000..c600d838
--- /dev/null
+++ b/frontend/hooks/pop/usePopEvent.ts
@@ -0,0 +1,190 @@
+/**
+ * usePopEvent - POP 컴포넌트 간 이벤트 통신 훅
+ *
+ * 같은 화면(screenId) 안에서만 동작하는 이벤트 버스.
+ * 다른 screenId 간에는 완전히 격리됨.
+ *
+ * 주요 기능:
+ * - publish/subscribe: 일회성 이벤트 (거래처 선택됨, 저장 완료 등)
+ * - getSharedData/setSharedData: 지속성 상태 (버튼 클릭 시 다른 컴포넌트 값 수집용)
+ *
+ * 사용 패턴:
+ * ```typescript
+ * const { publish, subscribe, getSharedData, setSharedData } = usePopEvent("S001");
+ *
+ * // 이벤트 구독 (반드시 useEffect 안에서, cleanup 필수)
+ * useEffect(() => {
+ * const unsub = subscribe("supplier-selected", (payload) => {
+ * console.log(payload.supplierId);
+ * });
+ * return unsub;
+ * }, []);
+ *
+ * // 이벤트 발행
+ * publish("supplier-selected", { supplierId: "SUP-001" });
+ *
+ * // 공유 데이터 저장/조회
+ * setSharedData("selectedSupplier", { id: "SUP-001" });
+ * const supplier = getSharedData("selectedSupplier");
+ * ```
+ */
+
+import { useCallback, useRef } from "react";
+
+// ===== 타입 정의 =====
+
+/** 이벤트 콜백 함수 타입 */
+type EventCallback = (payload: unknown) => void;
+
+/** 화면별 이벤트 리스너 맵: eventName -> Set */
+type ListenerMap = Map>;
+
+/** 화면별 공유 데이터 맵: key -> value */
+type SharedDataMap = Map;
+
+// ===== 전역 저장소 (React 외부, 모듈 스코프) =====
+// SSR 환경에서 서버/클라이언트 간 공유 방지
+
+/** screenId별 이벤트 리스너 저장소 */
+const screenBuses: Map =
+ typeof window !== "undefined" ? new Map() : new Map();
+
+/** screenId별 공유 데이터 저장소 */
+const sharedDataStore: Map =
+ typeof window !== "undefined" ? new Map() : new Map();
+
+// ===== 내부 헬퍼 =====
+
+/** 해당 screenId의 리스너 맵 가져오기 (없으면 생성) */
+function getListenerMap(screenId: string): ListenerMap {
+ let map = screenBuses.get(screenId);
+ if (!map) {
+ map = new Map();
+ screenBuses.set(screenId, map);
+ }
+ return map;
+}
+
+/** 해당 screenId의 공유 데이터 맵 가져오기 (없으면 생성) */
+function getSharedMap(screenId: string): SharedDataMap {
+ let map = sharedDataStore.get(screenId);
+ if (!map) {
+ map = new Map();
+ sharedDataStore.set(screenId, map);
+ }
+ return map;
+}
+
+// ===== 외부 API: 화면 정리 =====
+
+/**
+ * 화면 언마운트 시 해당 screenId의 모든 리스너 + 공유 데이터 정리
+ * 메모리 누수 방지용. 뷰어 또는 PopRenderer에서 화면 전환 시 호출.
+ */
+export function cleanupScreen(screenId: string): void {
+ screenBuses.delete(screenId);
+ sharedDataStore.delete(screenId);
+}
+
+// ===== 메인 훅 =====
+
+/**
+ * POP 컴포넌트 간 이벤트 통신 훅
+ *
+ * @param screenId - 화면 ID (같은 screenId 안에서만 통신)
+ * @returns publish, subscribe, getSharedData, setSharedData
+ */
+export function usePopEvent(screenId: string) {
+ // screenId를 ref로 저장 (콜백 안정성)
+ const screenIdRef = useRef(screenId);
+ screenIdRef.current = screenId;
+
+ /**
+ * 이벤트 발행
+ * 해당 screenId + eventName에 등록된 모든 콜백에 payload 전달
+ */
+ const publish = useCallback(
+ (eventName: string, payload?: unknown): void => {
+ const listeners = getListenerMap(screenIdRef.current);
+ const callbacks = listeners.get(eventName);
+ if (!callbacks || callbacks.size === 0) return;
+
+ // Set을 배열로 복사 후 순회 (순회 중 unsubscribe 안전)
+ const callbackArray = Array.from(callbacks);
+ for (const cb of callbackArray) {
+ try {
+ cb(payload);
+ } catch (err) {
+ // 개별 콜백 에러가 다른 콜백 실행을 막지 않음
+ console.error(
+ `[usePopEvent] 콜백 에러 (screen: ${screenIdRef.current}, event: ${eventName}):`,
+ err
+ );
+ }
+ }
+ },
+ []
+ );
+
+ /**
+ * 이벤트 구독
+ *
+ * 주의: 반드시 useEffect 안에서 호출하고, 반환값(unsubscribe)을 cleanup에서 호출할 것.
+ *
+ * @returns unsubscribe 함수
+ */
+ const subscribe = useCallback(
+ (eventName: string, callback: EventCallback): (() => void) => {
+ const listeners = getListenerMap(screenIdRef.current);
+
+ let callbacks = listeners.get(eventName);
+ if (!callbacks) {
+ callbacks = new Set();
+ listeners.set(eventName, callbacks);
+ }
+ callbacks.add(callback);
+
+ // unsubscribe 함수 반환
+ const capturedScreenId = screenIdRef.current;
+ return () => {
+ const map = screenBuses.get(capturedScreenId);
+ if (!map) return;
+ const cbs = map.get(eventName);
+ if (!cbs) return;
+ cbs.delete(callback);
+ // 빈 Set 정리
+ if (cbs.size === 0) {
+ map.delete(eventName);
+ }
+ };
+ },
+ []
+ );
+
+ /**
+ * 공유 데이터 조회
+ * 다른 컴포넌트가 setSharedData로 저장한 값을 가져옴
+ */
+ const getSharedData = useCallback(
+ (key: string): T | undefined => {
+ const shared = sharedDataStore.get(screenIdRef.current);
+ if (!shared) return undefined;
+ return shared.get(key) as T | undefined;
+ },
+ []
+ );
+
+ /**
+ * 공유 데이터 저장
+ * 같은 screenId의 다른 컴포넌트가 getSharedData로 읽을 수 있음
+ */
+ const setSharedData = useCallback(
+ (key: string, value: unknown): void => {
+ const shared = getSharedMap(screenIdRef.current);
+ shared.set(key, value);
+ },
+ []
+ );
+
+ return { publish, subscribe, getSharedData, setSharedData } as const;
+}
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index e79d9f83..72af2a34 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -545,7 +545,8 @@ export const DynamicComponentRenderer: React.FC =
let currentValue;
if (componentType === "modal-repeater-table" ||
componentType === "repeat-screen-modal" ||
- componentType === "selected-items-detail-input") {
+ componentType === "selected-items-detail-input" ||
+ componentType === "v2-repeater") {
// EditModal/ScreenModal에서 전달된 groupedData가 있으면 우선 사용
currentValue = props.groupedData || formData?.[fieldName] || [];
} else {
diff --git a/frontend/lib/registry/PopComponentRegistry.ts b/frontend/lib/registry/PopComponentRegistry.ts
index 31f9a4e1..0d7df5ec 100644
--- a/frontend/lib/registry/PopComponentRegistry.ts
+++ b/frontend/lib/registry/PopComponentRegistry.ts
@@ -2,6 +2,24 @@
import React from "react";
+/**
+ * 연결 메타 항목: 컴포넌트가 보내거나 받을 수 있는 데이터 슬롯
+ */
+export interface ConnectionMetaItem {
+ key: string;
+ label: string;
+ type: "filter_value" | "selected_row" | "action_trigger" | "data_refresh" | string;
+ description?: string;
+}
+
+/**
+ * 컴포넌트 연결 메타데이터: 디자이너가 연결 가능한 입출력 정의
+ */
+export interface ComponentConnectionMeta {
+ sendable: ConnectionMetaItem[];
+ receivable: ConnectionMetaItem[];
+}
+
/**
* POP 컴포넌트 정의 인터페이스
*/
@@ -15,6 +33,7 @@ export interface PopComponentDefinition {
configPanel?: React.ComponentType;
preview?: React.ComponentType<{ config?: any }>; // 디자이너 미리보기용
defaultProps?: Record;
+ connectionMeta?: ComponentConnectionMeta;
// POP 전용 속성
touchOptimized?: boolean;
minTouchArea?: number;
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 173a67ad..f753a240 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -1328,9 +1328,9 @@ export const ButtonPrimaryComponent: React.FC = ({
)}
- {/* 확인 다이얼로그 - EditModal보다 위에 표시하도록 z-index 최상위로 설정 */}
+ {/* 확인 다이얼로그 */}
-
+
{getConfirmTitle()}
{getConfirmMessage()}
diff --git a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
index 13a7ac4f..2f35c799 100644
--- a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
+++ b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
@@ -24,29 +24,33 @@ export const ImageDisplayComponent: React.FC = ({
style,
...props
}) => {
- // 컴포넌트 설정
const componentConfig = {
...config,
...component.config,
} as ImageDisplayConfig;
- // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
+ const objectFit = componentConfig.objectFit || "contain";
+ const altText = componentConfig.altText || "이미지";
+ const borderRadius = componentConfig.borderRadius ?? 8;
+ const showBorder = componentConfig.showBorder ?? true;
+ const backgroundColor = componentConfig.backgroundColor || "#f9fafb";
+ const placeholder = componentConfig.placeholder || "이미지 없음";
+
+ const imageSrc = component.value || componentConfig.imageUrl || "";
+
const componentStyle: React.CSSProperties = {
width: "100%",
height: "100%",
...component.style,
...style,
- // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
width: "100%",
};
- // 디자인 모드 스타일
if (isDesignMode) {
componentStyle.border = "1px dashed #cbd5e1";
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
}
- // 이벤트 핸들러
const handleClick = (e: React.MouseEvent) => {
e.stopPropagation();
onClick?.();
@@ -88,7 +92,9 @@ export const ImageDisplayComponent: React.FC = ({
}}
>
{component.label}
- {component.required && *}
+ {(component.required || componentConfig.required) && (
+ *
+ )}
)}
@@ -96,43 +102,53 @@ export const ImageDisplayComponent: React.FC = ({
style={{
width: "100%",
height: "100%",
- border: "1px solid #d1d5db",
- borderRadius: "8px",
+ border: showBorder ? "1px solid #d1d5db" : "none",
+ borderRadius: `${borderRadius}px`,
overflow: "hidden",
display: "flex",
alignItems: "center",
justifyContent: "center",
- backgroundColor: "#f9fafb",
+ backgroundColor,
transition: "all 0.2s ease-in-out",
- boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+ boxShadow: showBorder ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : "none",
+ opacity: componentConfig.disabled ? 0.5 : 1,
+ cursor: componentConfig.disabled ? "not-allowed" : "default",
}}
onMouseEnter={(e) => {
- e.currentTarget.style.borderColor = "#f97316";
- e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
+ if (!componentConfig.disabled) {
+ if (showBorder) {
+ e.currentTarget.style.borderColor = "#f97316";
+ }
+ e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
+ }
}}
onMouseLeave={(e) => {
- e.currentTarget.style.borderColor = "#d1d5db";
- e.currentTarget.style.boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+ if (showBorder) {
+ e.currentTarget.style.borderColor = "#d1d5db";
+ }
+ e.currentTarget.style.boxShadow = showBorder
+ ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+ : "none";
}}
onClick={handleClick}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
>
- {component.value || componentConfig.imageUrl ? (
+ {imageSrc ? (
{
(e.target as HTMLImageElement).style.display = "none";
if (e.target?.parentElement) {
e.target.parentElement.innerHTML = `
= ({
fontSize: "14px",
}}
>
-
)}
-
+ {isCategoryType ? (
+
+ {/* 카테고리 설정 */}
+ {effectiveSource === "category" && (
+
+ 카테고리 (자동 설정)
+
+ ) : (
+
+ )}
+
+ )}
+
{/* 정적 옵션 관리 */}
- {(config.source || "static") === "static" && (
+ {effectiveSource === "static" && (
+
+
+
+ {/* 카테고리 값 로딩 중 */}
+ {loadingCategoryValues && (
+
+
+
+
+
+
+ 테이블
+{config.categoryTable || tableName || "-"}
+
+
+ 컬럼
+{config.categoryColumn || columnName || "-"}
+
+
+ )}
+
+ {/* 카테고리 값 목록 표시 */}
+ {categoryValues.length > 0 && (
+
+
+
+ )}
+
+ {/* 기본값 설정 */}
+ {categoryValues.length > 0 && (
+
+ {categoryValues.map((cv) => (
+
+
+ {cv.valueCode}
+ {cv.valueLabel}
+
+ ))}
+
+
+
+
+ )}
+
+ {/* 카테고리 값 없음 안내 */}
+ {!loadingCategoryValues && categoryValues.length === 0 && (
+ 화면 로드 시 자동 선택될 카테고리 값
++ 카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요. +
+ )} +
@@ -199,8 +627,8 @@ export const V2SelectConfigPanel: React.FC = ({ config
)}
- {/* 공통 코드 설정 - 테이블 타입 관리에서 설정되므로 정보만 표시 */}
- {config.source === "code" && (
+ {/* 공통 코드 설정 */}
+ {effectiveSource === "code" && (
{config.codeGroup ? (
@@ -212,7 +640,7 @@ export const V2SelectConfigPanel: React.FC = ({ config
)}
{/* 엔티티(참조 테이블) 설정 */}
- {config.source === "entity" && (
+ {effectiveSource === "entity" && (
= ({ config
)}
- {/* 컬럼 선택 - 테이블이 설정되어 있고 컬럼 목록이 있는 경우 Select로 표시 */}
- {/* 컬럼이 없는 경우 안내 */}
{config.entityTable && !loadingColumns && entityColumns.length === 0 && (
)}
@@ -368,6 +793,20 @@ export const V2SelectConfigPanel: React.FC = ({ config
/>
)}
+
+ {/* 데이터 필터 조건 - static 소스 외 모든 소스에서 사용 */}
+ {effectiveSource !== "static" && filterTargetTable && (
+ <>
+ updateConfig("filters", filters)}
+ />
+
+ )}
);
};
diff --git a/frontend/contexts/ScreenContext.tsx b/frontend/contexts/ScreenContext.tsx
index 5e9bb2f1..8a57f9cb 100644
--- a/frontend/contexts/ScreenContext.tsx
+++ b/frontend/contexts/ScreenContext.tsx
@@ -6,17 +6,28 @@
"use client";
import React, { createContext, useContext, useCallback, useRef, useState } from "react";
-import type { DataProvidable, DataReceivable } from "@/types/data-transfer";
+import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
import { logger } from "@/lib/utils/logger";
import type { SplitPanelPosition } from "@/contexts/SplitPanelContext";
+/**
+ * 대기 중인 데이터 전달 항목
+ * 타겟 컴포넌트가 아직 마운트되지 않은 경우 (조건부 레이어 등) 버퍼에 저장
+ */
+export interface PendingTransfer {
+ targetComponentId: string;
+ data: any[];
+ config: DataReceiverConfig;
+ timestamp: number;
+ targetLayerId?: string;
+}
+
interface ScreenContextValue {
screenId?: number;
tableName?: string;
- menuObjid?: number; // 메뉴 OBJID (카테고리 값 조회 시 필요)
- splitPanelPosition?: SplitPanelPosition; // 🆕 분할 패널 위치 (left/right)
+ menuObjid?: number;
+ splitPanelPosition?: SplitPanelPosition;
- // 🆕 폼 데이터 (RepeaterFieldGroup 등 컴포넌트 데이터 저장)
formData: Record
@@ -228,7 +656,6 @@ export const V2SelectConfigPanel: React.FC = ({ config
- {/* 컬럼 로딩 중 표시 */}
{loadingColumns && (
@@ -296,18 +722,17 @@ export const V2SelectConfigPanel: React.FC = ({ config
테이블 컬럼을 조회할 수 없습니다. 테이블 타입 관리에서 참조 테이블을 설정해주세요.
)} - {/* 자동 채움 안내 */} {config.entityTable && entityColumns.length > 0 && (- 같은 폼에 참조 테이블({config.entityTable})의 컬럼이 배치되어 있으면, 엔티티 선택 시 해당 필드가 자동으로 채워집니다. + 같은 폼에 참조 테이블({config.entityTable})의 컬럼이 배치되어 있으면, 엔티티 선택 시 해당 필드가 자동으로 + 채워집니다.
-
`;
@@ -150,8 +166,22 @@ export const ImageDisplayComponent: React.FC🖼️
+
이미지 로드 실패
🖼️
- 이미지 없음
+
+ {placeholder}
-
- image-display 설정
+
이미지 표시 설정
+
+ {/* 이미지 URL */}
+
+
+ handleChange("imageUrl", e.target.value)}
+ placeholder="https://..."
+ className="h-8 text-xs"
+ />
+
- {/* file 관련 설정 */}
+ {/* 대체 텍스트 */}
+ 데이터 바인딩 값이 없을 때 표시할 기본 이미지 +
-
+
+ handleChange("altText", e.target.value)}
+ placeholder="이미지 설명"
+ className="h-8 text-xs"
+ />
+
+
+ {/* 이미지 맞춤 */}
+
+
+
+
+
+ {/* 테두리 둥글기 */}
+
+
+ handleChange("borderRadius", parseInt(e.target.value) || 0)}
+ className="h-8 text-xs"
+ />
+
+
+ {/* 배경 색상 */}
+
+
+
+
+ {/* 플레이스홀더 */}
+
+ handleChange("backgroundColor", e.target.value)}
+ className="h-8 w-8 cursor-pointer rounded border"
+ />
+ handleChange("backgroundColor", e.target.value)}
+ className="h-8 flex-1 text-xs"
+ />
+
+
+
handleChange("placeholder", e.target.value)}
+ placeholder="이미지 없음"
+ className="h-8 text-xs"
/>
- {/* 공통 설정 */}
-
-
+ {/* 테두리 표시 */}
+
handleChange("disabled", checked)}
+ id="showBorder"
+ checked={config.showBorder ?? true}
+ onCheckedChange={(checked) => handleChange("showBorder", checked)}
/>
+
- ((acc, col, idx) => {
+ if (col.editable && !col.calculated) acc.push(idx);
+ return acc;
+ }, []),
+ [visibleColumns],
+ );
+
+ // 방향키로 리피터 셀 간 이동
+ const handleArrowNavigation = useCallback(
+ (e: React.KeyboardEvent) => {
+ const key = e.key;
+ if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key)) return;
+
+ const target = e.target as HTMLElement;
+ const cell = target.closest("[data-repeater-row]") as HTMLElement | null;
+ if (!cell) return;
+
+ const row = Number(cell.dataset.repeaterRow);
+ const col = Number(cell.dataset.repeaterCol);
+ if (isNaN(row) || isNaN(col)) return;
+
+ // 텍스트 입력 중 좌/우 방향키는 커서 이동에 사용하므로 무시
+ if ((key === "ArrowLeft" || key === "ArrowRight") && target.tagName === "INPUT") {
+ const input = target as HTMLInputElement;
+ const len = input.value?.length ?? 0;
+ const pos = input.selectionStart ?? 0;
+ // 커서가 끝에 있을 때만 오른쪽 이동, 처음에 있을 때만 왼쪽 이동
+ if (key === "ArrowRight" && pos < len) return;
+ if (key === "ArrowLeft" && pos > 0) return;
+ }
+
+ let nextRow = row;
+ let nextColPos = editableColIndices.indexOf(col);
+
+ switch (key) {
+ case "ArrowUp":
+ nextRow = Math.max(0, row - 1);
+ break;
+ case "ArrowDown":
+ nextRow = Math.min(data.length - 1, row + 1);
+ break;
+ case "ArrowLeft":
+ nextColPos = Math.max(0, nextColPos - 1);
+ break;
+ case "ArrowRight":
+ nextColPos = Math.min(editableColIndices.length - 1, nextColPos + 1);
+ break;
+ }
+
+ const nextCol = editableColIndices[nextColPos];
+ if (nextRow === row && nextCol === col) return;
+
+ e.preventDefault();
+
+ const selector = `[data-repeater-row="${nextRow}"][data-repeater-col="${nextCol}"]`;
+ const nextCell = containerRef.current?.querySelector(selector) as HTMLElement | null;
+ if (!nextCell) return;
+
+ const focusable = nextCell.querySelector(
+ 'input:not([disabled]), select:not([disabled]), [role="combobox"]:not([disabled]), button:not([disabled])',
+ );
+ if (focusable) {
+ focusable.focus();
+ if (focusable.tagName === "INPUT") {
+ (focusable as HTMLInputElement).select();
+ }
+ }
+ },
+ [editableColIndices, data.length],
+ );
+
// DnD 센서 설정
const sensors = useSensors(
useSensor(PointerSensor, {
@@ -480,15 +553,20 @@ export function RepeaterTable({
const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.field === column.field;
const value = row[column.field];
- // 🆕 카테고리 라벨 변환 함수
+ // 카테고리 라벨 변환 함수
const getCategoryDisplayValue = (val: any): string => {
if (!val || typeof val !== "string") return val || "-";
- // 카테고리 컬럼이 아니면 그대로 반환
- const fieldName = column.field.replace(/^_display_/, ""); // _display_ 접두사 제거
- if (!categoryColumns.includes(fieldName)) return val;
+ const fieldName = column.field.replace(/^_display_/, "");
+ const isCategoryColumn = categoryColumns.includes(fieldName);
- // 쉼표로 구분된 다중 값 처리
+ // categoryLabelMap에 직접 매핑이 있으면 바로 변환 (접두사 무관)
+ if (categoryLabelMap[val]) return categoryLabelMap[val];
+
+ // 카테고리 컬럼이 아니면 원래 값 반환
+ if (!isCategoryColumn) return val;
+
+ // 콤마 구분된 다중 값 처리
const codes = val
.split(",")
.map((c: string) => c.trim())
@@ -643,7 +721,7 @@ export function RepeaterTable({
return (
-
-
- handleChange("required", checked)}
- />
-
-
-
-
+ {/* 읽기 전용 */}
+
handleChange("readonly", checked)}
/>
+
+
+
+ {/* 필수 입력 */}
+
);
diff --git a/frontend/lib/registry/components/image-display/config.ts b/frontend/lib/registry/components/image-display/config.ts
index 268382f0..bae67e14 100644
--- a/frontend/lib/registry/components/image-display/config.ts
+++ b/frontend/lib/registry/components/image-display/config.ts
@@ -6,9 +6,14 @@ import { ImageDisplayConfig } from "./types";
* ImageDisplay 컴포넌트 기본 설정
*/
export const ImageDisplayDefaultConfig: ImageDisplayConfig = {
- placeholder: "입력하세요",
-
- // 공통 기본값
+ imageUrl: "",
+ altText: "이미지",
+ objectFit: "contain",
+ borderRadius: 8,
+ showBorder: true,
+ backgroundColor: "#f9fafb",
+ placeholder: "이미지 없음",
+
disabled: false,
required: false,
readonly: false,
@@ -18,23 +23,31 @@ export const ImageDisplayDefaultConfig: ImageDisplayConfig = {
/**
* ImageDisplay 컴포넌트 설정 스키마
- * 유효성 검사 및 타입 체크에 사용
*/
export const ImageDisplayConfigSchema = {
- placeholder: { type: "string", default: "" },
-
- // 공통 스키마
+ imageUrl: { type: "string", default: "" },
+ altText: { type: "string", default: "이미지" },
+ objectFit: {
+ type: "enum",
+ values: ["contain", "cover", "fill", "none", "scale-down"],
+ default: "contain",
+ },
+ borderRadius: { type: "number", default: 8 },
+ showBorder: { type: "boolean", default: true },
+ backgroundColor: { type: "string", default: "#f9fafb" },
+ placeholder: { type: "string", default: "이미지 없음" },
+
disabled: { type: "boolean", default: false },
required: { type: "boolean", default: false },
readonly: { type: "boolean", default: false },
- variant: {
- type: "enum",
- values: ["default", "outlined", "filled"],
- default: "default"
+ variant: {
+ type: "enum",
+ values: ["default", "outlined", "filled"],
+ default: "default",
},
- size: {
- type: "enum",
- values: ["sm", "md", "lg"],
- default: "md"
+ size: {
+ type: "enum",
+ values: ["sm", "md", "lg"],
+ default: "md",
},
};
diff --git a/frontend/lib/registry/components/image-display/index.ts b/frontend/lib/registry/components/image-display/index.ts
index ddb38f95..ffa5712a 100644
--- a/frontend/lib/registry/components/image-display/index.ts
+++ b/frontend/lib/registry/components/image-display/index.ts
@@ -21,7 +21,13 @@ export const ImageDisplayDefinition = createComponentDefinition({
webType: "file",
component: ImageDisplayWrapper,
defaultConfig: {
- placeholder: "입력하세요",
+ imageUrl: "",
+ altText: "이미지",
+ objectFit: "contain",
+ borderRadius: 8,
+ showBorder: true,
+ backgroundColor: "#f9fafb",
+ placeholder: "이미지 없음",
},
defaultSize: { width: 200, height: 200 },
configPanel: ImageDisplayConfigPanel,
diff --git a/frontend/lib/registry/components/image-display/types.ts b/frontend/lib/registry/components/image-display/types.ts
index f2b6971d..e882ebe4 100644
--- a/frontend/lib/registry/components/image-display/types.ts
+++ b/frontend/lib/registry/components/image-display/types.ts
@@ -6,20 +6,24 @@ import { ComponentConfig } from "@/types/component";
* ImageDisplay 컴포넌트 설정 타입
*/
export interface ImageDisplayConfig extends ComponentConfig {
- // file 관련 설정
+ // 이미지 관련 설정
+ imageUrl?: string;
+ altText?: string;
+ objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+ borderRadius?: number;
+ showBorder?: boolean;
+ backgroundColor?: string;
placeholder?: string;
-
+
// 공통 설정
disabled?: boolean;
required?: boolean;
readonly?: boolean;
- placeholder?: string;
- helperText?: string;
-
+
// 스타일 관련
variant?: "default" | "outlined" | "filled";
size?: "sm" | "md" | "lg";
-
+
// 이벤트 관련
onChange?: (value: any) => void;
onFocus?: () => void;
@@ -37,7 +41,7 @@ export interface ImageDisplayProps {
config?: ImageDisplayConfig;
className?: string;
style?: React.CSSProperties;
-
+
// 이벤트 핸들러
onChange?: (value: any) => void;
onFocus?: () => void;
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 3cf92664..a490f8b0 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -112,6 +112,8 @@ import "./v2-input/V2InputRenderer"; // V2 통합 입력 컴포넌트
import "./v2-select/V2SelectRenderer"; // V2 통합 선택 컴포넌트
import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
import "./v2-file-upload/V2FileUploadRenderer"; // V2 파일 업로드 컴포넌트
+import "./v2-process-work-standard/ProcessWorkStandardRenderer"; // 공정 작업기준
+import "./v2-item-routing/ItemRoutingRenderer"; // 품목별 라우팅
import "./v2-split-line/SplitLineRenderer"; // V2 캔버스 분할선
import "./v2-bom-tree/BomTreeRenderer"; // BOM 트리 뷰
import "./v2-bom-item-editor/BomItemEditorRenderer"; // BOM 하위품목 편집기
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
index 78969fd0..d57ae60b 100644
--- a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -162,6 +162,79 @@ export function RepeaterTable({
// 초기 균등 분배 실행 여부 (마운트 시 한 번만 실행)
const initializedRef = useRef(false);
+ // 편집 가능한 컬럼 인덱스 목록 (방향키 네비게이션용)
+ const editableColIndices = useMemo(
+ () => visibleColumns.reduce
+ handleChange("required", checked)}
+ />
+
+
{renderCell(row, col, rowIndex)}
diff --git a/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx b/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx
index 63e1cbb9..57fe91d7 100644
--- a/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx
+++ b/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx
@@ -40,6 +40,7 @@ const RepeaterFieldGroupComponent: React.FC
|
return (
{/* 요약 정보 */}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index d0f9d5aa..aee70dd2 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -781,6 +781,7 @@ export const TableListComponent: React.FC
+
{values.map((val, idx) => {
const categoryData = mapping?.[val];
const displayLabel = categoryData?.label || val;
@@ -4316,7 +4330,7 @@ export const TableListComponent: React.FC
- {/* 확인 다이얼로그 - EditModal보다 위에 표시하도록 z-index 최상위로 설정 */}
+ {/* 확인 다이얼로그 */}
)}
+
+ {selectedBomId && (
+
);
}
diff --git a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
index 5516a4bf..c00c1b1f 100644
--- a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
@@ -724,17 +724,28 @@ export const ButtonPrimaryComponent: React.FC
- {/* 파일 업로드 영역 - 높이 축소 */}
- {!isDesignMode && (
+ {/* 파일 업로드 영역 - readonly/disabled이면 숨김 */}
+ {!isDesignMode && !config.readonly && !config.disabled && (
@@ -487,8 +486,8 @@ export const FileManagerModal: React.FC {
- if (!config.disabled && !isDesignMode) {
- fileInputRef.current?.click();
- }
+ fileInputRef.current?.click();
}}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
@@ -267,7 +265,6 @@ export const FileManagerModal: React.FC
- {/* 좌측: 이미지 미리보기 (확대/축소 가능) */}
- }
+ {/* 좌측: 이미지 미리보기 (확대/축소 가능) - showPreview가 false면 숨김 */}
+ {(config.showPreview !== false) && }
- {/* 우측: 파일 목록 (고정 너비) */}
-
{/* 확대/축소 컨트롤 */}
{selectedFile && previewImageUrl && (
+
@@ -369,10 +366,10 @@ export const FileManagerModal: React.FC
)}
-
+ {/* 우측: 파일 목록 - showFileList가 false면 숨김, showPreview가 false면 전체 너비 */}
+ {(config.showFileList !== false) &&
+ 업로드된 파일@@ -404,7 +401,7 @@ export const FileManagerModal: React.FC- {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()} + {config.showFileSize !== false && <>{formatFileSize(file.fileSize)} • }{file.fileExt.toUpperCase()}
@@ -434,19 +431,21 @@ export const FileManagerModal: React.FC
)}
+
+ );
+ }
+
+ return (
+
+
+ + 품목별 라우팅 관리 + ++ 품목 선택 - 라우팅 버전 - 공정 순서 + +
+
+ );
+}
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingConfigPanel.tsx b/frontend/lib/registry/components/v2-item-routing/ItemRoutingConfigPanel.tsx
new file mode 100644
index 00000000..f6fefd2e
--- /dev/null
+++ b/frontend/lib/registry/components/v2-item-routing/ItemRoutingConfigPanel.tsx
@@ -0,0 +1,780 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Plus, Trash2, Check, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { ItemRoutingConfig, ProcessColumnDef } from "./types";
+import { defaultConfig } from "./config";
+
+interface TableInfo {
+ tableName: string;
+ displayName?: string;
+}
+
+interface ColumnInfo {
+ columnName: string;
+ displayName?: string;
+ dataType?: string;
+}
+
+interface ScreenInfo {
+ screenId: number;
+ screenName: string;
+ screenCode: string;
+}
+
+// 테이블 셀렉터 Combobox
+function TableSelector({
+ value,
+ onChange,
+ tables,
+ loading,
+}: {
+ value: string;
+ onChange: (v: string) => void;
+ tables: TableInfo[];
+ loading: boolean;
+}) {
+ const [open, setOpen] = useState(false);
+ const selected = tables.find((t) => t.tableName === value);
+
+ return (
+
+ {/* 좌측 패널: 품목 목록 */}
+
+
+ {/* 삭제 확인 다이얼로그 */}
+
+
+
+ {/* 우측 패널: 버전 + 공정 */}
+
+
+
+ {/* 검색 */}
+ + {config.leftPanelTitle || "품목 목록"} ++
+ setSearchText(e.target.value)}
+ onKeyDown={handleSearchKeyDown}
+ placeholder="품목명/품번 검색"
+ className="h-8 text-xs"
+ />
+
+
+
+ {/* 품목 리스트 */}
+
+ {items.length === 0 ? (
+
+
+
+ ) : (
+ + {loading ? "로딩 중..." : "품목이 없습니다"} + +
+ {items.map((item) => {
+ const itemCode =
+ item[config.dataSource.itemCodeColumn] || item.item_code || item.item_number;
+ const itemName =
+ item[config.dataSource.itemNameColumn] || item.item_name;
+ const isSelected = selectedItemCode === itemCode;
+
+ return (
+
+ );
+ })}
+
+ )}
+
+ {selectedItemCode ? (
+ <>
+ {/* 헤더: 선택된 품목 + 버전 추가 */}
+
+
+
+
+ {/* 버전 선택 버튼들 */}
+ {versions.length > 0 ? (
+
+
+ {!config.readonly && (
+
+ )}
+ {selectedItemName}+{selectedItemCode} +
+ 버전:
+ {versions.map((ver) => {
+ const isActive = selectedVersionId === ver.id;
+ const isDefault = ver.is_default === true;
+ return (
+
+ ) : (
+
+
+ );
+ })}
+
+
+ )}
+
+ {/* 공정 테이블 */}
+ {selectedVersionId ? (
+ + 라우팅 버전이 없습니다. 버전을 추가해주세요. + +
+ {/* 공정 테이블 헤더 */}
+
+ ) : (
+ versions.length > 0 && (
+
+
+
+ {/* 테이블 */}
+ + {config.rightPanelTitle || "공정 순서"} ({details.length}건) ++ {!config.readonly && ( + + )} +
+ {details.length === 0 ? (
+
+
+
+ ) : (
+ + {loading ? "로딩 중..." : "등록된 공정이 없습니다"} + +
+
+ )
+ )}
+
+ ) : (
+ + 라우팅 버전을 선택해주세요 + +
+
+ )}
+ + 좌측에서 품목을 선택하세요 + ++ 품목을 선택하면 라우팅 버전별 공정 순서를 관리할 수 있습니다 + ++ 해당 버전에 포함된 모든 공정 정보도 함께 삭제됩니다. + + )} +
+
+ {t.displayName || t.tableName}
+
+ {t.displayName && (
+
+ {t.tableName}
+
+ )}
+
+
+
+ {c.displayName || c.columnName}
+
+ {c.displayName && (
+
+ {c.columnName}
+
+ )}
+
+
+ {s.screenName}
+
+ {s.screenCode} (ID: {s.screenId})
+
+
+
+
+ );
+}
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx b/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx
new file mode 100644
index 00000000..7a9fa624
--- /dev/null
+++ b/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2ItemRoutingDefinition } from "./index";
+import { ItemRoutingComponent } from "./ItemRoutingComponent";
+
+export class ItemRoutingRenderer extends AutoRegisteringComponentRenderer {
+ static componentDefinition = V2ItemRoutingDefinition;
+
+ render(): React.ReactElement {
+ const { formData, isPreview, config, tableName } = this.props as Record<
+ string,
+ unknown
+ >;
+
+ return (
+ 품목별 라우팅 설정+ + {/* 데이터 소스 설정 */} ++ 데이터 소스 + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 모달 연동 + +
+
+
+
+
+
+
+
+
+
+
+
+ + 공정 테이블 컬럼 + + +
+ {config.processColumns.map((col, idx) => (
+
+
+
+ ))}
+ UI 설정 + +
+
+ update({ splitRatio: Number(e.target.value) })}
+ min={20}
+ max={60}
+ className="mt-1 h-8 w-20 text-xs"
+ />
+
+
+
+
+ update({ leftPanelTitle: e.target.value })}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+ update({ rightPanelTitle: e.target.value })}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+
+ update({ versionAddButtonText: e.target.value })}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+ update({ processAddButtonText: e.target.value })}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ + 공정 작업기준 + ++ {sortedPhases.map((p) => p.label).join(" / ")} + +
+ {/* 메인 콘텐츠 */}
+
+ );
+}
diff --git a/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx b/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx
new file mode 100644
index 00000000..21a5d69f
--- /dev/null
+++ b/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import React from "react";
+import { Plus, Trash2, GripVertical } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { ProcessWorkStandardConfig, WorkPhaseDefinition, DetailTypeDefinition } from "./types";
+import { defaultConfig } from "./config";
+
+interface ConfigPanelProps {
+ config: Partial
+ {/* 좌측 패널 */}
+
+
+ {/* 작업 항목 추가/수정 모달 */}
+
+
+
+ {/* 우측 패널 */}
+
+ {/* 우측 헤더 */}
+ {selection.routingDetailId ? (
+ <>
+
+
+
+
+ {/* 작업 단계별 섹션 */}
+
+
+ {!config.readonly && (
+
+ )}
+ + {selection.itemName} - {selection.processName} ++
+ 품목: {selection.itemCode}
+ 공정: {selection.processName}
+ 버전: {selection.routingVersionName}
+
+
+ {sortedPhases.map((phase) => (
+
+
+ ) : (
+
+
+ )}
+ + 좌측에서 품목과 공정을 선택하세요 + ++ 품목을 펼쳐 라우팅별 공정을 선택하면 작업기준을 관리할 수 + 있습니다 + +
+
+ );
+}
diff --git a/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardRenderer.tsx b/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardRenderer.tsx
new file mode 100644
index 00000000..cb1e0e85
--- /dev/null
+++ b/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardRenderer.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2ProcessWorkStandardDefinition } from "./index";
+import { ProcessWorkStandardComponent } from "./ProcessWorkStandardComponent";
+
+export class ProcessWorkStandardRenderer extends AutoRegisteringComponentRenderer {
+ static componentDefinition = V2ProcessWorkStandardDefinition;
+
+ render(): React.ReactElement {
+ const { formData, isPreview, config, tableName } = this.props as Record<
+ string,
+ unknown
+ >;
+
+ return (
+ 공정 작업기준 설정+ + {/* 데이터 소스 설정 */} +데이터 소스 설정 + +
+
+ updateDataSource("itemTable", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+
+
+
+ updateDataSource("itemNameColumn", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+ updateDataSource("itemCodeColumn", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+ updateDataSource("routingVersionTable", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+ updateDataSource("routingFkColumn", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+
+ updateDataSource("processTable", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+
+
+ updateDataSource("processNameColumn", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+ updateDataSource("processCodeColumn", e.target.value)}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+
+ 작업 단계 설정 + +
+ {config.phases.map((phase, idx) => (
+
+
+
+ ))}
+
+
+
+ 상세 유형 옵션 + +
+ {config.detailTypes.map((dt, idx) => (
+
+
+ updateDetailType(idx, "value", e.target.value)}
+ className="h-7 w-24 text-[10px]"
+ placeholder="값"
+ />
+ updateDetailType(idx, "label", e.target.value)}
+ className="h-7 flex-1 text-[10px]"
+ placeholder="표시명"
+ />
+
+
+ ))}
+ UI 설정 + +
+
+ update({ splitRatio: Number(e.target.value) })}
+ min={15}
+ max={50}
+ className="mt-1 h-8 w-20 text-xs"
+ />
+
+
+
+
+ update({ leftPanelTitle: e.target.value })}
+ className="mt-1 h-8 text-xs"
+ />
+
+
+
+
+
+ {/* 헤더 */}
+
+ );
+}
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/WorkItemAddModal.tsx b/frontend/lib/registry/components/v2-process-work-standard/components/WorkItemAddModal.tsx
new file mode 100644
index 00000000..e9f97c02
--- /dev/null
+++ b/frontend/lib/registry/components/v2-process-work-standard/components/WorkItemAddModal.tsx
@@ -0,0 +1,350 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { DetailTypeDefinition, WorkItem } from "../types";
+
+interface ModalDetail {
+ id: string;
+ detail_type: string;
+ content: string;
+ is_required: string;
+ sort_order: number;
+}
+
+interface WorkItemAddModalProps {
+ open: boolean;
+ onClose: () => void;
+ onSave: (data: {
+ work_phase: string;
+ title: string;
+ is_required: string;
+ description?: string;
+ details?: Array<{
+ detail_type?: string;
+ content: string;
+ is_required: string;
+ sort_order: number;
+ }>;
+ }) => void;
+ phaseKey: string;
+ phaseLabel: string;
+ detailTypes: DetailTypeDefinition[];
+ editItem?: WorkItem | null;
+}
+
+export function WorkItemAddModal({
+ open,
+ onClose,
+ onSave,
+ phaseKey,
+ phaseLabel,
+ detailTypes,
+ editItem,
+}: WorkItemAddModalProps) {
+ const [title, setTitle] = useState("");
+ const [isRequired, setIsRequired] = useState("Y");
+ const [description, setDescription] = useState("");
+ const [details, setDetails] = useState
+
+
+ {/* 트리 목록 */}
+
+
+
+
+
+ {items.length === 0 ? (
+
+
+
+ ) : (
+ items.map((item) => (
+ + 라우팅이 등록된 품목이 없습니다 + +
+ {/* 품목 헤더 */}
+
+
+ {/* 라우팅 + 공정 */}
+ {isItemExpanded(item.item_code) &&
+ selection.itemCode === item.item_code && (
+
+ ))
+ )}
+
+ {routings.length === 0 ? (
+
+ )}
+ + 등록된 공정이 없습니다 + + ) : ( + routings.map((routing) => ( +
+ {/* 라우팅 버전 */}
+
+ ))
+ )}
+
+
+
+ {/* 공정 목록 */}
+ {routing.processes.map((proc) => (
+
+ ))}
+ |