kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/screen-management #224

Merged
kjs merged 3 commits from feature/screen-management into main 2025-11-26 16:10:15 +09:00
Conversation 0 Commits 3 Files Changed 11 +795 -360
11 changed files with 795 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
frontend/components/screen/ScreenList.tsx
View File

@ -47,6 +47,9 @@ import dynamic from "next/dynamic";
import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
import { DynamicWebTypeRenderer } from "@/lib/registry";
import { isFileComponent, getComponentWebType } from "@/lib/utils/componentTypeUtils";
import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
import { RealtimePreview } from "./RealtimePreviewDynamic";
import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
// InteractiveScreenViewer를 동적으로 import (SSR 비활성화)
const InteractiveScreenViewer = dynamic(
@ -1315,24 +1318,40 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
<DialogHeader>
<DialogTitle>화면 미리보기 - {screenToPreview?.screenName}</DialogTitle>
</DialogHeader>
<div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-slate-100 p-6">
{isLoadingPreview ? (
<div className="flex h-full items-center justify-center">
<div className="text-center">
<div className="mb-2 text-lg font-medium">레이아웃 로딩 중...</div>
<div className="text-muted-foreground text-sm">화면 정보를 불러오고 있습니다.</div>
<ScreenPreviewProvider isPreviewMode={true}>
<TableOptionsProvider>
<div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-slate-100 p-6">
{isLoadingPreview ? (
<div className="flex h-full items-center justify-center">
<div className="text-center">
<div className="mb-2 text-lg font-medium">레이아웃 로딩 중...</div>
<div className="text-muted-foreground text-sm">화면 정보를 불러오고 있습니다.</div>
</div>
</div>
</div>
) : previewLayout && previewLayout.components ? (
) : previewLayout && previewLayout.components ? (
(() => {
const screenWidth = previewLayout.screenResolution?.width || 1200;
const screenHeight = previewLayout.screenResolution?.height || 800;
// 모달 내부 가용 공간 계산 (헤더, 푸터, 패딩 제외)
const availableWidth = typeof window !== "undefined" ? window.innerWidth * 0.95 - 100 : 1800; // 95vw - 패딩
const modalPadding = 100; // 헤더 + 푸터 + 패딩
const availableWidth = typeof window !== "undefined" ? window.innerWidth * 0.95 - modalPadding : 1700;
const availableHeight = typeof window !== "undefined" ? window.innerHeight * 0.95 - modalPadding : 900;
// 가로폭 기준으로 스케일 계산 (가로폭에 맞춤)
const scale = availableWidth / screenWidth;
// 가로/세로 비율을 모두 고려하여 작은 쪽에 맞춤 (화면이 잘리지 않도록)
const scaleX = availableWidth / screenWidth;
const scaleY = availableHeight / screenHeight;
const scale = Math.min(scaleX, scaleY, 1); // 최대 1배율 (확대 방지)
console.log("📐 미리보기 스케일 계산:", {
screenWidth,
screenHeight,
availableWidth,
availableHeight,
scaleX,
scaleY,
finalScale: scale,
});
return (
<div
@ -1414,115 +1433,61 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
);
}
// 라벨 표시 여부 계산
const templateTypes = ["datatable"];
const shouldShowLabel =
component.style?.labelDisplay !== false &&
(component.label || component.style?.labelText) &&
!templateTypes.includes(component.type);
const labelText = component.style?.labelText || component.label || "";
const labelStyle = {
fontSize: component.style?.labelFontSize || "14px",
color: component.style?.labelColor || "#212121",
fontWeight: component.style?.labelFontWeight || "500",
backgroundColor: component.style?.labelBackgroundColor || "transparent",
};
const labelMarginBottom = component.style?.labelMarginBottom || "4px";
// 일반 컴포넌트 렌더링
// 일반 컴포넌트 렌더링 - RealtimePreview 사용 (실제 화면과 동일)
return (
<div key={component.id}>
{/* 라벨을 외부에 별도로 렌더링 */}
{shouldShowLabel && (
<div
style={{
position: "absolute",
left: `${component.position.x}px`,
top: `${component.position.y - 25}px`, // 컴포넌트 위쪽에 라벨 배치
zIndex: (component.position.z || 1) + 1,
...labelStyle,
}}
>
{labelText}
{component.required && <span style={{ color: "#f97316", marginLeft: "2px" }}>*</span>}
</div>
)}
<RealtimePreview
key={component.id}
component={component}
isSelected={false}
isDesignMode={false}
onClick={() => {}}
screenId={screenToPreview!.screenId}
tableName={screenToPreview?.tableName}
formData={previewFormData}
onFormDataChange={(fieldName, value) => {
setPreviewFormData((prev) => ({
...prev,
[fieldName]: value,
}));
}}
>
{/* 자식 컴포넌트들 */}
{(component.type === "group" ||
component.type === "container" ||
component.type === "area") &&
previewLayout.components
.filter((child: any) => child.parentId === component.id)
.map((child: any) => {
// 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
const relativeChildComponent = {
...child,
position: {
x: child.position.x - component.position.x,
y: child.position.y - component.position.y,
z: child.position.z || 1,
},
};
{/* 실제 컴포넌트 */}
<div
style={(() => {
const style = {
position: "absolute" as const,
left: `${component.position.x}px`,
top: `${component.position.y}px`,
width: component.style?.width || `${component.size.width}px`,
height: component.style?.height || `${component.size.height}px`,
zIndex: component.position.z || 1,
};
return style;
})()}
>
{/* 위젯 컴포넌트가 아닌 경우 DynamicComponentRenderer 사용 */}
{component.type !== "widget" ? (
<DynamicComponentRenderer
component={{
...component,
style: {
...component.style,
labelDisplay: shouldShowLabel ? false : (component.style?.labelDisplay ?? true), // 상위에서 라벨을 표시했으면 컴포넌트 내부에서는 숨김
},
}}
isInteractive={true}
formData={previewFormData}
onFormDataChange={(fieldName, value) => {
setPreviewFormData((prev) => ({
...prev,
[fieldName]: value,
}));
}}
screenId={screenToPreview!.screenId}
tableName={screenToPreview?.tableName}
/>
) : (
<DynamicWebTypeRenderer
webType={(() => {
// 유틸리티 함수로 파일 컴포넌트 감지
if (isFileComponent(component)) {
return "file";
}
// 다른 컴포넌트는 유틸리티 함수로 webType 결정
return getComponentWebType(component) || "text";
})()}
config={component.webTypeConfig}
props={{
component: component,
value: previewFormData[component.columnName || component.id] || "",
onChange: (value: any) => {
const fieldName = component.columnName || component.id;
setPreviewFormData((prev) => ({
...prev,
[fieldName]: value,
}));
},
onFormDataChange: (fieldName, value) => {
setPreviewFormData((prev) => ({
...prev,
[fieldName]: value,
}));
},
isInteractive: true,
formData: previewFormData,
readonly: component.readonly,
required: component.required,
placeholder: component.placeholder,
className: "w-full h-full",
}}
/>
)}
</div>
</div>
return (
<RealtimePreview
key={child.id}
component={relativeChildComponent}
isSelected={false}
isDesignMode={false}
onClick={() => {}}
screenId={screenToPreview!.screenId}
tableName={screenToPreview?.tableName}
formData={previewFormData}
onFormDataChange={(fieldName, value) => {
setPreviewFormData((prev) => ({
...prev,
[fieldName]: value,
}));
}}
/>
);
})}
</RealtimePreview>
);
})}
</div>
@ -1536,7 +1501,9 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
</div>
</div>
)}
</div>
</div>
</TableOptionsProvider>
</ScreenPreviewProvider>
<DialogFooter>
<Button variant="outline" onClick={() => setPreviewDialogOpen(false)}>
닫기

71
frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
View File

@ -47,6 +47,14 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
// 새 옵션 추가용 상태
const [newOptionLabel, setNewOptionLabel] = useState("");
const [newOptionValue, setNewOptionValue] = useState("");
// 입력 필드용 로컬 상태
const [localInputs, setLocalInputs] = useState({
label: config.label || "",
checkedValue: config.checkedValue || "Y",
uncheckedValue: config.uncheckedValue || "N",
groupLabel: config.groupLabel || "",
});
// 컴포넌트 변경 시 로컬 상태 동기화
useEffect(() => {
@ -63,6 +71,14 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
readonly: currentConfig.readonly || false,
inline: currentConfig.inline !== false,
});
// 입력 필드 로컬 상태도 동기화
setLocalInputs({
label: currentConfig.label || "",
checkedValue: currentConfig.checkedValue || "Y",
uncheckedValue: currentConfig.uncheckedValue || "N",
groupLabel: currentConfig.groupLabel || "",
});
}, [widget.webTypeConfig]);
// 설정 업데이트 핸들러
@ -107,11 +123,16 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
updateConfig("options", newOptions);
};
// 옵션 업데이트
const updateOption = (index: number, field: keyof CheckboxOption, value: any) => {
// 옵션 업데이트 (입력 필드용 - 로컬 상태만)
const updateOptionLocal = (index: number, field: keyof CheckboxOption, value: any) => {
const newOptions = [...localConfig.options];
newOptions[index] = { ...newOptions[index], [field]: value };
updateConfig("options", newOptions);
setLocalConfig({ ...localConfig, options: newOptions });
};
// 옵션 업데이트 완료 (onBlur)
const handleOptionBlur = () => {
onUpdateProperty("webTypeConfig", localConfig);
};
return (
@ -170,8 +191,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="label"
value={localConfig.label || ""}
onChange={(e) => updateConfig("label", e.target.value)}
value={localInputs.label}
onChange={(e) => setLocalInputs({ ...localInputs, label: e.target.value })}
onBlur={() => updateConfig("label", localInputs.label)}
placeholder="체크박스 라벨"
className="text-xs"
/>
@ -184,8 +206,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="checkedValue"
value={localConfig.checkedValue || ""}
onChange={(e) => updateConfig("checkedValue", e.target.value)}
value={localInputs.checkedValue}
onChange={(e) => setLocalInputs({ ...localInputs, checkedValue: e.target.value })}
onBlur={() => updateConfig("checkedValue", localInputs.checkedValue)}
placeholder="Y"
className="text-xs"
/>
@ -196,8 +219,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="uncheckedValue"
value={localConfig.uncheckedValue || ""}
onChange={(e) => updateConfig("uncheckedValue", e.target.value)}
value={localInputs.uncheckedValue}
onChange={(e) => setLocalInputs({ ...localInputs, uncheckedValue: e.target.value })}
onBlur={() => updateConfig("uncheckedValue", localInputs.uncheckedValue)}
placeholder="N"
className="text-xs"
/>
@ -229,8 +253,9 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="groupLabel"
value={localConfig.groupLabel || ""}
onChange={(e) => updateConfig("groupLabel", e.target.value)}
value={localInputs.groupLabel}
onChange={(e) => setLocalInputs({ ...localInputs, groupLabel: e.target.value })}
onBlur={() => updateConfig("groupLabel", localInputs.groupLabel)}
placeholder="체크박스 그룹 제목"
className="text-xs"
/>
@ -268,26 +293,40 @@ export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
<Label className="text-xs">옵션 목록 ({localConfig.options.length}개)</Label>
<div className="max-h-40 space-y-2 overflow-y-auto">
{localConfig.options.map((option, index) => (
<div key={index} className="flex items-center gap-2 rounded border p-2">
<div key={`${option.value}-${index}`} className="flex items-center gap-2 rounded border p-2">
<Switch
checked={option.checked || false}
onCheckedChange={(checked) => updateOption(index, "checked", checked)}
onCheckedChange={(checked) => {
const newOptions = [...localConfig.options];
newOptions[index] = { ...newOptions[index], checked };
const newConfig = { ...localConfig, options: newOptions };
setLocalConfig(newConfig);
onUpdateProperty("webTypeConfig", newConfig);
}}
/>
<Input
value={option.label}
onChange={(e) => updateOption(index, "label", e.target.value)}
onChange={(e) => updateOptionLocal(index, "label", e.target.value)}
onBlur={handleOptionBlur}
placeholder="라벨"
className="flex-1 text-xs"
/>
<Input
value={option.value}
onChange={(e) => updateOption(index, "value", e.target.value)}
onChange={(e) => updateOptionLocal(index, "value", e.target.value)}
onBlur={handleOptionBlur}
placeholder="값"
className="flex-1 text-xs"
/>
<Switch
checked={!option.disabled}
onCheckedChange={(checked) => updateOption(index, "disabled", !checked)}
onCheckedChange={(checked) => {
const newOptions = [...localConfig.options];
newOptions[index] = { ...newOptions[index], disabled: !checked };
const newConfig = { ...localConfig, options: newOptions };
setLocalConfig(newConfig);
onUpdateProperty("webTypeConfig", newConfig);
}}
/>
<Button size="sm" variant="destructive" onClick={() => removeOption(index)} className="p-1 text-xs">
<Trash2 className="h-3 w-3" />

73
frontend/components/screen/config-panels/EntityConfigPanel.tsx
View File

@ -51,32 +51,29 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
const [newFieldName, setNewFieldName] = useState("");
const [newFieldLabel, setNewFieldLabel] = useState("");
const [newFieldType, setNewFieldType] = useState("string");
const [isUserEditing, setIsUserEditing] = useState(false);
// 컴포넌트 변경 시 로컬 상태 동기화 (사용자가 입력 중이 아닐 때만)
// 컴포넌트 변경 시 로컬 상태 동기화
useEffect(() => {
if (!isUserEditing) {
const currentConfig = (widget.webTypeConfig as EntityTypeConfig) || {};
setLocalConfig({
entityType: currentConfig.entityType || "",
displayFields: currentConfig.displayFields || [],
searchFields: currentConfig.searchFields || [],
valueField: currentConfig.valueField || "id",
labelField: currentConfig.labelField || "name",
multiple: currentConfig.multiple || false,
searchable: currentConfig.searchable !== false,
placeholder: currentConfig.placeholder || "엔티티를 선택하세요",
emptyMessage: currentConfig.emptyMessage || "검색 결과가 없습니다",
pageSize: currentConfig.pageSize || 20,
minSearchLength: currentConfig.minSearchLength || 1,
defaultValue: currentConfig.defaultValue || "",
required: currentConfig.required || false,
readonly: currentConfig.readonly || false,
apiEndpoint: currentConfig.apiEndpoint || "",
filters: currentConfig.filters || {},
});
}
}, [widget.webTypeConfig, isUserEditing]);
const currentConfig = (widget.webTypeConfig as EntityTypeConfig) || {};
setLocalConfig({
entityType: currentConfig.entityType || "",
displayFields: currentConfig.displayFields || [],
searchFields: currentConfig.searchFields || [],
valueField: currentConfig.valueField || "id",
labelField: currentConfig.labelField || "name",
multiple: currentConfig.multiple || false,
searchable: currentConfig.searchable !== false,
placeholder: currentConfig.placeholder || "엔티티를 선택하세요",
emptyMessage: currentConfig.emptyMessage || "검색 결과가 없습니다",
pageSize: currentConfig.pageSize || 20,
minSearchLength: currentConfig.minSearchLength || 1,
defaultValue: currentConfig.defaultValue || "",
required: currentConfig.required || false,
readonly: currentConfig.readonly || false,
apiEndpoint: currentConfig.apiEndpoint || "",
filters: currentConfig.filters || {},
});
}, [widget.webTypeConfig]);
// 설정 업데이트 핸들러 (즉시 부모에게 전달 - 드롭다운, 체크박스 등)
const updateConfig = (field: keyof EntityTypeConfig, value: any) => {
@ -87,13 +84,11 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
// 입력 필드용 업데이트 (로컬 상태만)
const updateConfigLocal = (field: keyof EntityTypeConfig, value: any) => {
setIsUserEditing(true);
setLocalConfig({ ...localConfig, [field]: value });
};
// 입력 완료 시 부모에게 전달
const handleInputBlur = () => {
setIsUserEditing(false);
onUpdateProperty("webTypeConfig", localConfig);
};
@ -121,17 +116,15 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
updateConfig("displayFields", newFields);
};
// 필드 업데이트 (입력 중)
// 필드 업데이트 (입력 중) - 로컬 상태만 업데이트
const updateDisplayField = (index: number, field: keyof EntityField, value: any) => {
setIsUserEditing(true);
const newFields = [...localConfig.displayFields];
newFields[index] = { ...newFields[index], [field]: value };
setLocalConfig({ ...localConfig, displayFields: newFields });
};
// 필드 업데이트 완료 (onBlur)
// 필드 업데이트 완료 (onBlur) - 부모에게 전달
const handleFieldBlur = () => {
setIsUserEditing(false);
onUpdateProperty("webTypeConfig", localConfig);
};
@ -325,12 +318,15 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
<Label className="text-xs">표시 필드 ({localConfig.displayFields.length}개)</Label>
<div className="max-h-40 space-y-2 overflow-y-auto">
{localConfig.displayFields.map((field, index) => (
<div key={index} className="flex items-center gap-2 rounded border p-2">
<div key={`${field.name}-${index}`} className="flex items-center gap-2 rounded border p-2">
<Switch
checked={field.visible}
onCheckedChange={(checked) => {
updateDisplayField(index, "visible", checked);
handleFieldBlur();
const newFields = [...localConfig.displayFields];
newFields[index] = { ...newFields[index], visible: checked };
const newConfig = { ...localConfig, displayFields: newFields };
setLocalConfig(newConfig);
onUpdateProperty("webTypeConfig", newConfig);
}}
/>
<Input
@ -347,7 +343,16 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
placeholder="라벨"
className="flex-1 text-xs"
/>
<Select value={field.type} onValueChange={(value) => updateDisplayField(index, "type", value)}>
<Select
value={field.type}
onValueChange={(value) => {
const newFields = [...localConfig.displayFields];
newFields[index] = { ...newFields[index], type: value };
const newConfig = { ...localConfig, displayFields: newFields };
setLocalConfig(newConfig);
onUpdateProperty("webTypeConfig", newConfig);
}}
>
<SelectTrigger className="w-24 text-xs">
<SelectValue />
</SelectTrigger>

55
frontend/components/screen/config-panels/RadioConfigPanel.tsx
View File

@ -43,6 +43,12 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
const [newOptionLabel, setNewOptionLabel] = useState("");
const [newOptionValue, setNewOptionValue] = useState("");
const [bulkOptions, setBulkOptions] = useState("");
// 입력 필드용 로컬 상태
const [localInputs, setLocalInputs] = useState({
groupLabel: config.groupLabel || "",
groupName: config.groupName || "",
});
// 컴포넌트 변경 시 로컬 상태 동기화
useEffect(() => {
@ -59,6 +65,12 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
inline: currentConfig.inline !== false,
groupLabel: currentConfig.groupLabel || "",
});
// 입력 필드 로컬 상태도 동기화
setLocalInputs({
groupLabel: currentConfig.groupLabel || "",
groupName: currentConfig.groupName || "",
});
}, [widget.webTypeConfig]);
// 설정 업데이트 핸들러
@ -95,17 +107,24 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
}
};
// 옵션 업데이트
const updateOption = (index: number, field: keyof RadioOption, value: any) => {
// 옵션 업데이트 (입력 필드용 - 로컬 상태만)
const updateOptionLocal = (index: number, field: keyof RadioOption, value: any) => {
const newOptions = [...localConfig.options];
const oldValue = newOptions[index].value;
newOptions[index] = { ...newOptions[index], [field]: value };
updateConfig("options", newOptions);
// 값이 변경되고 해당 값이 기본값이었다면 기본값도 업데이트
const newConfig = { ...localConfig, options: newOptions };
if (field === "value" && localConfig.defaultValue === oldValue) {
updateConfig("defaultValue", value);
newConfig.defaultValue = value;
}
setLocalConfig(newConfig);
};
// 옵션 업데이트 완료 (onBlur)
const handleOptionBlur = () => {
onUpdateProperty("webTypeConfig", localConfig);
};
// 벌크 옵션 추가
@ -185,8 +204,9 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="groupLabel"
value={localConfig.groupLabel || ""}
onChange={(e) => updateConfig("groupLabel", e.target.value)}
value={localInputs.groupLabel}
onChange={(e) => setLocalInputs({ ...localInputs, groupLabel: e.target.value })}
onBlur={() => updateConfig("groupLabel", localInputs.groupLabel)}
placeholder="라디오버튼 그룹 제목"
className="text-xs"
/>
@ -198,8 +218,9 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="groupName"
value={localConfig.groupName || ""}
onChange={(e) => updateConfig("groupName", e.target.value)}
value={localInputs.groupName}
onChange={(e) => setLocalInputs({ ...localInputs, groupName: e.target.value })}
onBlur={() => updateConfig("groupName", localInputs.groupName)}
placeholder="자동 생성 (필드명 기반)"
className="text-xs"
/>
@ -290,22 +311,30 @@ export const RadioConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
<Label className="text-xs">현재 옵션 ({localConfig.options.length}개)</Label>
<div className="max-h-40 space-y-2 overflow-y-auto">
{localConfig.options.map((option, index) => (
<div key={index} className="flex items-center gap-2 rounded border p-2">
<div key={`${option.value}-${index}`} className="flex items-center gap-2 rounded border p-2">
<Input
value={option.label}
onChange={(e) => updateOption(index, "label", e.target.value)}
onChange={(e) => updateOptionLocal(index, "label", e.target.value)}
onBlur={handleOptionBlur}
placeholder="라벨"
className="flex-1 text-xs"
/>
<Input
value={option.value}
onChange={(e) => updateOption(index, "value", e.target.value)}
onChange={(e) => updateOptionLocal(index, "value", e.target.value)}
onBlur={handleOptionBlur}
placeholder="값"
className="flex-1 text-xs"
/>
<Switch
checked={!option.disabled}
onCheckedChange={(checked) => updateOption(index, "disabled", !checked)}
onCheckedChange={(checked) => {
const newOptions = [...localConfig.options];
newOptions[index] = { ...newOptions[index], disabled: !checked };
const newConfig = { ...localConfig, options: newOptions };
setLocalConfig(newConfig);
onUpdateProperty("webTypeConfig", newConfig);
}}
/>
<Button size="sm" variant="destructive" onClick={() => removeOption(index)} className="p-1 text-xs">
<Trash2 className="h-3 w-3" />

49
frontend/components/screen/config-panels/SelectConfigPanel.tsx
View File

@ -44,6 +44,12 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
const [newOptionLabel, setNewOptionLabel] = useState("");
const [newOptionValue, setNewOptionValue] = useState("");
const [bulkOptions, setBulkOptions] = useState("");
// 입력 필드용 로컬 상태
const [localInputs, setLocalInputs] = useState({
placeholder: config.placeholder || "",
emptyMessage: config.emptyMessage || "",
});
// 컴포넌트 변경 시 로컬 상태 동기화
useEffect(() => {
@ -61,6 +67,12 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
readonly: currentConfig.readonly || false,
emptyMessage: currentConfig.emptyMessage || "선택 가능한 옵션이 없습니다",
});
// 입력 필드 로컬 상태도 동기화
setLocalInputs({
placeholder: currentConfig.placeholder || "",
emptyMessage: currentConfig.emptyMessage || "",
});
}, [widget.webTypeConfig]);
// 설정 업데이트 핸들러
@ -91,11 +103,16 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
updateConfig("options", newOptions);
};
// 옵션 업데이트
const updateOption = (index: number, field: keyof SelectOption, value: any) => {
// 옵션 업데이트 (입력 필드용 - 로컬 상태만)
const updateOptionLocal = (index: number, field: keyof SelectOption, value: any) => {
const newOptions = [...localConfig.options];
newOptions[index] = { ...newOptions[index], [field]: value };
updateConfig("options", newOptions);
setLocalConfig({ ...localConfig, options: newOptions });
};
// 옵션 업데이트 완료 (onBlur)
const handleOptionBlur = () => {
onUpdateProperty("webTypeConfig", localConfig);
};
// 벌크 옵션 추가
@ -170,8 +187,9 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="placeholder"
value={localConfig.placeholder || ""}
onChange={(e) => updateConfig("placeholder", e.target.value)}
value={localInputs.placeholder}
onChange={(e) => setLocalInputs({ ...localInputs, placeholder: e.target.value })}
onBlur={() => updateConfig("placeholder", localInputs.placeholder)}
placeholder="선택하세요"
className="text-xs"
/>
@ -183,8 +201,9 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
</Label>
<Input
id="emptyMessage"
value={localConfig.emptyMessage || ""}
onChange={(e) => updateConfig("emptyMessage", e.target.value)}
value={localInputs.emptyMessage}
onChange={(e) => setLocalInputs({ ...localInputs, emptyMessage: e.target.value })}
onBlur={() => updateConfig("emptyMessage", localInputs.emptyMessage)}
placeholder="선택 가능한 옵션이 없습니다"
className="text-xs"
/>
@ -285,22 +304,30 @@ export const SelectConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
<Label className="text-xs">현재 옵션 ({localConfig.options.length}개)</Label>
<div className="max-h-40 space-y-2 overflow-y-auto">
{localConfig.options.map((option, index) => (
<div key={index} className="flex items-center gap-2 rounded border p-2">
<div key={`${option.value}-${index}`} className="flex items-center gap-2 rounded border p-2">
<Input
value={option.label}
onChange={(e) => updateOption(index, "label", e.target.value)}
onChange={(e) => updateOptionLocal(index, "label", e.target.value)}
onBlur={handleOptionBlur}
placeholder="라벨"
className="flex-1 text-xs"
/>
<Input
value={option.value}
onChange={(e) => updateOption(index, "value", e.target.value)}
onChange={(e) => updateOptionLocal(index, "value", e.target.value)}
onBlur={handleOptionBlur}
placeholder="값"
className="flex-1 text-xs"
/>
<Switch
checked={!option.disabled}
onCheckedChange={(checked) => updateOption(index, "disabled", !checked)}
onCheckedChange={(checked) => {
const newOptions = [...localConfig.options];
newOptions[index] = { ...newOptions[index], disabled: !checked };
const newConfig = { ...localConfig, options: newOptions };
setLocalConfig(newConfig);
onUpdateProperty("webTypeConfig", newConfig);
}}
/>
<Button size="sm" variant="destructive" onClick={() => removeOption(index)} className="p-1 text-xs">
<Trash2 className="h-3 w-3" />

1
frontend/components/screen/templates/NumberingRuleTemplate.ts
View File

@ -78,3 +78,4 @@ export const numberingRuleTemplate = {

71
frontend/components/webtypes/config/RepeaterConfigPanel.tsx
View File

@ -1,6 +1,6 @@
"use client";
import React, { useState, useMemo } from "react";
import React, { useState, useMemo, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
@ -34,6 +34,21 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
}) => {
const [localFields, setLocalFields] = useState<RepeaterFieldDefinition[]>(config.fields || []);
const [fieldNamePopoverOpen, setFieldNamePopoverOpen] = useState<Record<number, boolean>>({});
// 로컬 입력 상태 (각 필드의 라벨, placeholder 등)
const [localInputs, setLocalInputs] = useState<Record<number, { label: string; placeholder: string }>>({});
// 설정 입력 필드의 로컬 상태
const [localConfigInputs, setLocalConfigInputs] = useState({
addButtonText: config.addButtonText || "",
});
// config 변경 시 로컬 상태 동기화
useEffect(() => {
setLocalConfigInputs({
addButtonText: config.addButtonText || "",
});
}, [config.addButtonText]);
// 이미 사용된 컬럼명 목록
const usedColumnNames = useMemo(() => {
@ -72,7 +87,32 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
handleFieldsChange(localFields.filter((_, i) => i !== index));
};
// 필드 수정
// 필드 수정 (입력 중 - 로컬 상태만)
const updateFieldLocal = (index: number, field: 'label' | 'placeholder', value: string) => {
setLocalInputs(prev => ({
...prev,
[index]: {
...prev[index],
[field]: value
}
}));
};
// 필드 수정 완료 (onBlur - 실제 업데이트)
const handleFieldBlur = (index: number) => {
const localInput = localInputs[index];
if (localInput) {
const newFields = [...localFields];
newFields[index] = {
...newFields[index],
label: localInput.label,
placeholder: localInput.placeholder
};
handleFieldsChange(newFields);
}
};
// 필드 수정 (즉시 반영 - 드롭다운, 체크박스 등)
const updateField = (index: number, updates: Partial<RepeaterFieldDefinition>) => {
const newFields = [...localFields];
newFields[index] = { ...newFields[index], ...updates };
@ -157,7 +197,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
<Label className="text-sm font-semibold">필드 정의</Label>
{localFields.map((field, index) => (
<Card key={index} className="border-2">
<Card key={`${field.name}-${index}`} className="border-2">
<CardContent className="space-y-3 pt-4">
<div className="flex items-center justify-between">
<span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
@ -200,6 +240,14 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
label: column.columnLabel || column.columnName,
type: (column.widgetType as RepeaterFieldType) || "text",
});
// 로컬 입력 상태도 업데이트
setLocalInputs(prev => ({
...prev,
[index]: {
label: column.columnLabel || column.columnName,
placeholder: prev[index]?.placeholder || ""
}
}));
setFieldNamePopoverOpen({ ...fieldNamePopoverOpen, [index]: false });
}}
className="text-xs"
@ -225,8 +273,9 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
<div className="space-y-1">
<Label className="text-xs">라벨</Label>
<Input
value={field.label}
onChange={(e) => updateField(index, { label: e.target.value })}
value={localInputs[index]?.label !== undefined ? localInputs[index].label : field.label}
onChange={(e) => updateFieldLocal(index, 'label', e.target.value)}
onBlur={() => handleFieldBlur(index)}
placeholder="필드 라벨"
className="h-8 w-full text-xs"
/>
@ -258,10 +307,11 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
<div className="space-y-1">
<Label className="text-xs">Placeholder</Label>
<Input
value={field.placeholder || ""}
onChange={(e) => updateField(index, { placeholder: e.target.value })}
value={localInputs[index]?.placeholder !== undefined ? localInputs[index].placeholder : (field.placeholder || "")}
onChange={(e) => updateFieldLocal(index, 'placeholder', e.target.value)}
onBlur={() => handleFieldBlur(index)}
placeholder="입력 안내"
className="h-8 w-full"
className="h-8 w-full text-xs"
/>
</div>
</div>
@ -329,8 +379,9 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
<Input
id="repeater-add-button-text"
type="text"
value={config.addButtonText || ""}
onChange={(e) => handleChange("addButtonText", e.target.value)}
value={localConfigInputs.addButtonText}
onChange={(e) => setLocalConfigInputs({ ...localConfigInputs, addButtonText: e.target.value })}
onBlur={() => handleChange("addButtonText", localConfigInputs.addButtonText)}
placeholder="항목 추가"
className="h-8"
/>

19
frontend/lib/api/tableCategoryValue.ts
View File

@ -20,6 +20,25 @@ export async function getCategoryColumns(tableName: string) {
}
}
/**
* 메뉴별 카테고리 컬럼 목록 조회
*
* @param menuObjid 메뉴 OBJID
* @returns 해당 메뉴와 상위 메뉴들이 설정한 모든 카테고리 컬럼
*/
export async function getCategoryColumnsByMenu(menuObjid: number) {
try {
const response = await apiClient.get<{
success: boolean;
data: CategoryColumn[];
}>(`/table-management/menu/${menuObjid}/category-columns`);
return response.data;
} catch (error: any) {
console.error("메뉴별 카테고리 컬럼 조회 실패:", error);
return { success: false, error: error.message };
}
}
/**
* 카테고리 값 목록 조회 (메뉴 스코프)
*

594
frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
View File

@ -15,14 +15,14 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { getSecondLevelMenus, getCategoryColumns, getCategoryValues } from "@/lib/api/tableCategoryValue";
import { getSecondLevelMenus, getCategoryColumns, getCategoryColumnsByMenu, getCategoryValues } from "@/lib/api/tableCategoryValue";
import { CalculationBuilder } from "./CalculationBuilder";
export interface SelectedItemsDetailInputConfigPanelProps {
config: SelectedItemsDetailInputConfig;
onChange: (config: Partial<SelectedItemsDetailInputConfig>) => void;
sourceTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>; // 🆕 원본 테이블 컬럼
targetTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>; // 🆕 대상 테이블 컬럼
sourceTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string }>; // 🆕 원본 테이블 컬럼 (inputType 추가)
targetTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string; codeCategory?: string }>; // 🆕 대상 테이블 컬럼 (inputType, codeCategory 추가)
allTables?: Array<{ tableName: string; displayName?: string }>;
screenTableName?: string; // 🆕 현재 화면의 테이블명 (자동 설정용)
onSourceTableChange?: (tableName: string) => void; // 🆕 원본 테이블 변경 콜백
@ -53,9 +53,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
// 🆕 그룹 입력값을 위한 로컬 상태 (포커스 유지용)
const [localGroupInputs, setLocalGroupInputs] = useState<Record<string, { id?: string; title?: string; description?: string; order?: number }>>({});
// 🆕 필드 입력값을 위한 로컬 상태 (포커스 유지용)
const [localFieldInputs, setLocalFieldInputs] = useState<Record<number, { label?: string; placeholder?: string }>>({});
// 🆕 표시 항목의 입력값을 위한 로컬 상태 (포커스 유지용)
const [localDisplayItemInputs, setLocalDisplayItemInputs] = useState<Record<string, Record<number, { label?: string; value?: string }>>>({});
// 🆕 부모 데이터 매핑의 기본값 입력을 위한 로컬 상태 (포커스 유지용)
const [localMappingInputs, setLocalMappingInputs] = useState<Record<number, string>>({});
// 🆕 그룹별 펼침/접힘 상태
const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({});
@ -63,6 +69,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
// 🆕 그룹별 표시 항목 설정 펼침/접힘 상태
const [expandedDisplayItems, setExpandedDisplayItems] = useState<Record<string, boolean>>({});
// 🆕 카테고리 매핑 아코디언 펼침/접힘 상태
const [expandedCategoryMappings, setExpandedCategoryMappings] = useState<Record<string, boolean>>({
discountType: false,
roundingType: false,
roundingUnit: false,
});
// 🆕 원본 테이블 선택 상태
const [sourceTableSelectOpen, setSourceTableSelectOpen] = useState(false);
const [sourceTableSearchValue, setSourceTableSearchValue] = useState("");
@ -83,8 +96,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
const [autoFillTableColumns, setAutoFillTableColumns] = useState<Record<number, Array<{ columnName: string; columnLabel?: string; dataType?: string }>>>({});
// 🆕 원본/대상 테이블 컬럼 상태 (내부에서 로드)
const [loadedSourceTableColumns, setLoadedSourceTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
const [loadedTargetTableColumns, setLoadedTargetTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
const [loadedSourceTableColumns, setLoadedSourceTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string }>>([]);
const [loadedTargetTableColumns, setLoadedTargetTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string; inputType?: string; codeCategory?: string }>>([]);
// 🆕 원본 테이블 컬럼 로드
useEffect(() => {
@ -105,6 +118,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
columnName: col.columnName,
columnLabel: col.displayName || col.columnLabel || col.columnName,
dataType: col.dataType,
inputType: col.inputType, // 🔧 inputType 추가
})));
console.log("✅ 원본 테이블 컬럼 로드 성공:", columns.length);
}
@ -135,6 +149,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
columnName: col.columnName,
columnLabel: col.displayName || col.columnLabel || col.columnName,
dataType: col.dataType,
inputType: col.inputType, // 🔧 inputType 추가
})));
console.log("✅ 대상 테이블 컬럼 로드 성공:", columns.length);
}
@ -165,6 +180,18 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
});
return newInputs;
});
// 🔧 표시 항목이 있는 그룹은 아코디언을 열린 상태로 초기화
setExpandedDisplayItems(prev => {
const newExpanded = { ...prev };
(config.fieldGroups || []).forEach(group => {
// 이미 상태가 있으면 유지, 없으면 displayItems가 있을 때만 열기
if (!(group.id in newExpanded) && group.displayItems && group.displayItems.length > 0) {
newExpanded[group.id] = true;
}
});
return newExpanded;
});
}, [config.fieldGroups]);
// 🆕 초기 렌더링 시 기존 필드들의 autoFillFromTable 컬럼 로드
@ -238,6 +265,36 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
}
};
// 🆕 저장된 부모 데이터 매핑의 컬럼 자동 로드
useEffect(() => {
const loadSavedMappingColumns = async () => {
if (!config.parentDataMapping || config.parentDataMapping.length === 0) {
console.log("📭 [부모 데이터 매핑] 매핑이 없습니다");
return;
}
console.log("🔍 [부모 데이터 매핑] 저장된 매핑 컬럼 자동 로드 시작:", config.parentDataMapping.length);
for (let i = 0; i < config.parentDataMapping.length; i++) {
const mapping = config.parentDataMapping[i];
// 이미 로드된 컬럼이 있으면 스킵
if (mappingSourceColumns[i] && mappingSourceColumns[i].length > 0) {
console.log(`⏭️ [매핑 ${i}] 이미 로드된 컬럼이 있음`);
continue;
}
// 소스 테이블이 선택되어 있으면 컬럼 로드
if (mapping.sourceTable) {
console.log(`📡 [매핑 ${i}] 소스 테이블 컬럼 자동 로드:`, mapping.sourceTable);
await loadMappingSourceColumns(mapping.sourceTable, i);
}
}
};
loadSavedMappingColumns();
}, [config.parentDataMapping]);
// 2레벨 메뉴 목록 로드
useEffect(() => {
const loadMenus = async () => {
@ -251,26 +308,39 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
// 메뉴 선택 시 카테고리 목록 로드
const handleMenuSelect = async (menuObjid: number, fieldType: "discountType" | "roundingType" | "roundingUnit") => {
if (!config.targetTable) {
console.warn("⚠️ targetTable이 설정되지 않았습니다");
return;
}
console.log("🔍 [handleMenuSelect] 시작", { menuObjid, fieldType });
console.log("🔍 카테고리 목록 로드 시작", { targetTable: config.targetTable, menuObjid, fieldType });
// 🔧 1단계: 아코디언 먼저 열기 (리렌더링 전에)
setExpandedCategoryMappings(prev => {
const newState = { ...prev, [fieldType]: true };
console.log("🔄 [handleMenuSelect] 아코디언 열기:", newState);
return newState;
});
const response = await getCategoryColumns(config.targetTable);
// 🔧 2단계: 메뉴별 카테고리 컬럼 API 호출
const response = await getCategoryColumnsByMenu(menuObjid);
console.log("📥 getCategoryColumns 응답:", response);
console.log("📥 [handleMenuSelect] API 응답:", response);
if (response.success && response.data) {
console.log("✅ 카테고리 컬럼 데이터:", response.data);
setCategoryColumns(prev => ({ ...prev, [fieldType]: response.data }));
console.log("✅ [handleMenuSelect] 카테고리 컬럼 데이터:", {
fieldType,
columns: response.data,
count: response.data.length
});
// 카테고리 컬럼 상태 업데이트
setCategoryColumns(prev => {
const newState = { ...prev, [fieldType]: response.data };
console.log("🔄 [handleMenuSelect] categoryColumns 업데이트:", newState);
return newState;
});
} else {
console.error("❌ 카테고리 컬럼 로드 실패:", response);
console.error("❌ [handleMenuSelect] 카테고리 컬럼 로드 실패:", response);
}
// valueMapping 업데이트
handleChange("autoCalculation", {
// 🔧 3단계: valueMapping 업데이트 (마지막에)
const newConfig = {
...config.autoCalculation,
valueMapping: {
...config.autoCalculation.valueMapping,
@ -279,20 +349,50 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
[fieldType]: menuObjid,
},
},
});
};
console.log("🔄 [handleMenuSelect] valueMapping 업데이트:", newConfig);
handleChange("autoCalculation", newConfig);
};
// 카테고리 선택 시 카테고리 값 목록 로드
const handleCategorySelect = async (columnName: string, menuObjid: number, fieldType: "discountType" | "roundingType" | "roundingUnit") => {
if (!config.targetTable) return;
console.log("🔍 [handleCategorySelect] 시작", { columnName, menuObjid, fieldType, targetTable: config.targetTable });
const response = await getCategoryValues(config.targetTable, columnName, false, menuObjid);
if (response.success && response.data) {
setCategoryValues(prev => ({ ...prev, [fieldType]: response.data }));
if (!config.targetTable) {
console.warn("⚠️ [handleCategorySelect] targetTable이 없습니다");
return;
}
const response = await getCategoryValues(config.targetTable, columnName, false, menuObjid);
console.log("📥 [handleCategorySelect] API 응답:", response);
if (response.success && response.data) {
console.log("✅ [handleCategorySelect] 카테고리 값 데이터:", {
fieldType,
values: response.data,
count: response.data.length
});
setCategoryValues(prev => {
const newState = { ...prev, [fieldType]: response.data };
console.log("🔄 [handleCategorySelect] categoryValues 업데이트:", newState);
return newState;
});
} else {
console.error("❌ [handleCategorySelect] 카테고리 값 로드 실패:", response);
}
// 🔧 카테고리 선택 시 아코디언 열기 (이미 열려있을 수도 있음)
setExpandedCategoryMappings(prev => {
const newState = { ...prev, [fieldType]: true };
console.log("🔄 [handleCategorySelect] 아코디언 상태:", newState);
return newState;
});
// valueMapping 업데이트
handleChange("autoCalculation", {
const newConfig = {
...config.autoCalculation,
valueMapping: {
...config.autoCalculation.valueMapping,
@ -301,9 +401,99 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
[fieldType]: columnName,
},
},
});
};
console.log("🔄 [handleCategorySelect] valueMapping 업데이트:", newConfig);
handleChange("autoCalculation", newConfig);
};
// 🆕 저장된 설정에서 카테고리 정보 복원
useEffect(() => {
const loadSavedCategories = async () => {
console.log("🔍 [loadSavedCategories] useEffect 실행", {
hasTargetTable: !!config.targetTable,
hasAutoCalc: !!config.autoCalculation,
hasValueMapping: !!config.autoCalculation?.valueMapping
});
if (!config.targetTable || !config.autoCalculation?.valueMapping) {
console.warn("⚠️ [loadSavedCategories] targetTable 또는 valueMapping이 없어 종료");
return;
}
const savedMenus = (config.autoCalculation.valueMapping as any)?._selectedMenus;
const savedCategories = (config.autoCalculation.valueMapping as any)?._selectedCategories;
console.log("🔄 [loadSavedCategories] 저장된 카테고리 설정 복원 시작:", { savedMenus, savedCategories });
// 각 필드 타입별로 저장된 카테고리 값 로드
const fieldTypes: Array<"discountType" | "roundingType" | "roundingUnit"> = ["discountType", "roundingType", "roundingUnit"];
// 🔧 복원할 아코디언 상태 준비
const newExpandedState: Record<string, boolean> = {};
for (const fieldType of fieldTypes) {
const menuObjid = savedMenus?.[fieldType];
const columnName = savedCategories?.[fieldType];
console.log(`🔍 [loadSavedCategories] ${fieldType} 처리`, { menuObjid, columnName });
// 🔧 메뉴만 선택된 경우에도 카테고리 컬럼 로드
if (menuObjid) {
console.log(`✅ [loadSavedCategories] ${fieldType} 메뉴 발견, 카테고리 컬럼 로드 시작:`, { menuObjid });
// 🔧 메뉴가 선택되어 있으면 아코디언 열기
newExpandedState[fieldType] = true;
// 🔧 메뉴별 카테고리 컬럼 로드 (카테고리 선택 여부와 무관)
console.log(`📡 [loadSavedCategories] ${fieldType} 카테고리 컬럼 API 호출`, { menuObjid });
const columnsResponse = await getCategoryColumnsByMenu(menuObjid);
console.log(`📥 [loadSavedCategories] ${fieldType} 컬럼 응답:`, columnsResponse);
if (columnsResponse.success && columnsResponse.data) {
setCategoryColumns(prev => {
const newState = { ...prev, [fieldType]: columnsResponse.data };
console.log(`🔄 [loadSavedCategories] ${fieldType} categoryColumns 업데이트:`, newState);
return newState;
});
} else {
console.error(`❌ [loadSavedCategories] ${fieldType} 컬럼 로드 실패:`, columnsResponse);
}
// 🔧 카테고리까지 선택된 경우에만 값 로드
if (columnName) {
console.log(`📡 [loadSavedCategories] ${fieldType} 카테고리 값 API 호출`, { columnName });
const valuesResponse = await getCategoryValues(config.targetTable, columnName, false, menuObjid);
console.log(`📥 [loadSavedCategories] ${fieldType} 값 응답:`, valuesResponse);
if (valuesResponse.success && valuesResponse.data) {
console.log(`✅ [loadSavedCategories] ${fieldType} 카테고리 값:`, valuesResponse.data);
setCategoryValues(prev => {
const newState = { ...prev, [fieldType]: valuesResponse.data };
console.log(`🔄 [loadSavedCategories] ${fieldType} categoryValues 업데이트:`, newState);
return newState;
});
} else {
console.error(`❌ [loadSavedCategories] ${fieldType} 값 로드 실패:`, valuesResponse);
}
}
}
}
// 🔧 저장된 설정이 있는 아코디언들 열기
if (Object.keys(newExpandedState).length > 0) {
console.log("🔓 [loadSavedCategories] 아코디언 열기:", newExpandedState);
setExpandedCategoryMappings(prev => {
const finalState = { ...prev, ...newExpandedState };
console.log("🔄 [loadSavedCategories] 최종 아코디언 상태:", finalState);
return finalState;
});
}
};
loadSavedCategories();
}, [config.targetTable, config.autoCalculation?.valueMapping]);
// 🆕 초기 로드 시 screenTableName을 targetTable로 자동 설정
React.useEffect(() => {
if (screenTableName && !config.targetTable) {
@ -344,10 +534,37 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
// 필드 제거
const removeField = (index: number) => {
// 로컬 입력 상태에서도 제거
setLocalFieldInputs(prev => {
const newInputs = { ...prev };
delete newInputs[index];
return newInputs;
});
handleFieldsChange(localFields.filter((_, i) => i !== index));
};
// 필드 수정
// 🆕 로컬 필드 입력 업데이트 (포커스 유지용)
const updateFieldLocal = (index: number, field: 'label' | 'placeholder', value: string) => {
setLocalFieldInputs(prev => ({
...prev,
[index]: {
...prev[index],
[field]: value
}
}));
};
// 🆕 실제 필드 데이터 업데이트 (onBlur 시 호출)
const handleFieldBlur = (index: number) => {
const localInput = localFieldInputs[index];
if (localInput) {
const newFields = [...localFields];
newFields[index] = { ...newFields[index], ...localInput };
handleFieldsChange(newFields);
}
};
// 필드 수정 (Switch 같은 즉시 업데이트가 필요한 경우에만 사용)
const updateField = (index: number, updates: Partial<AdditionalFieldDefinition>) => {
const newFields = [...localFields];
newFields[index] = { ...newFields[index], ...updates };
@ -386,14 +603,30 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
handleFieldGroupsChange(localFieldGroups.filter(g => g.id !== groupId));
};
const updateFieldGroup = (groupId: string, updates: Partial<FieldGroup>) => {
// 1. 로컬 입력 상태 즉시 업데이트 (포커스 유지)
// 🆕 로컬 그룹 입력 업데이트 (포커스 유지용)
const updateGroupLocal = (groupId: string, field: 'id' | 'title' | 'description' | 'order', value: any) => {
setLocalGroupInputs(prev => ({
...prev,
[groupId]: { ...prev[groupId], ...updates }
[groupId]: {
...prev[groupId],
[field]: value
}
}));
// 2. 실제 그룹 데이터 업데이트
};
// 🆕 실제 그룹 데이터 업데이트 (onBlur 시 호출)
const handleGroupBlur = (groupId: string) => {
const localInput = localGroupInputs[groupId];
if (localInput) {
const newGroups = localFieldGroups.map(g =>
g.id === groupId ? { ...g, ...localInput } : g
);
handleFieldGroupsChange(newGroups);
}
};
const updateFieldGroup = (groupId: string, updates: Partial<FieldGroup>) => {
// 2. 실제 그룹 데이터 업데이트 (Switch 같은 즉시 업데이트가 필요한 경우에만 사용)
const newGroups = localFieldGroups.map(g =>
g.id === groupId ? { ...g, ...updates } : g
);
@ -467,6 +700,12 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
return g;
});
// 🔧 아이템 추가 시 해당 그룹의 아코디언을 열린 상태로 유지
setExpandedDisplayItems(prev => ({
...prev,
[groupId]: true
}));
setLocalFieldGroups(updatedGroups);
handleChange("fieldGroups", updatedGroups);
};
@ -796,8 +1035,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<div className="space-y-1">
<Label className="text-[10px] sm:text-xs">라벨</Label>
<Input
value={field.label}
onChange={(e) => updateField(index, { label: e.target.value })}
value={localFieldInputs[index]?.label !== undefined ? localFieldInputs[index].label : field.label}
onChange={(e) => updateFieldLocal(index, 'label', e.target.value)}
onBlur={() => handleFieldBlur(index)}
placeholder="필드 라벨"
className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
/>
@ -821,8 +1061,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<div className="space-y-1">
<Label className="text-[10px] sm:text-xs">Placeholder</Label>
<Input
value={field.placeholder || ""}
onChange={(e) => updateField(index, { placeholder: e.target.value })}
value={localFieldInputs[index]?.placeholder !== undefined ? localFieldInputs[index].placeholder : (field.placeholder || "")}
onChange={(e) => updateFieldLocal(index, 'placeholder', e.target.value)}
onBlur={() => handleFieldBlur(index)}
placeholder="입력 안내"
className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
/>
@ -1078,14 +1319,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<Label className="text-[10px] sm:text-xs">그룹 ID</Label>
<Input
value={localGroupInputs[group.id]?.id !== undefined ? localGroupInputs[group.id].id : group.id}
onChange={(e) => {
const newValue = e.target.value;
setLocalGroupInputs(prev => ({
...prev,
[group.id]: { ...prev[group.id], id: newValue }
}));
updateFieldGroup(group.id, { id: newValue });
}}
onChange={(e) => updateGroupLocal(group.id, 'id', e.target.value)}
onBlur={() => handleGroupBlur(group.id)}
className="h-7 text-xs sm:h-8 sm:text-sm"
placeholder="group_customer"
/>
@ -1096,14 +1331,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<Label className="text-[10px] sm:text-xs">그룹 제목</Label>
<Input
value={localGroupInputs[group.id]?.title !== undefined ? localGroupInputs[group.id].title : group.title}
onChange={(e) => {
const newValue = e.target.value;
setLocalGroupInputs(prev => ({
...prev,
[group.id]: { ...prev[group.id], title: newValue }
}));
updateFieldGroup(group.id, { title: newValue });
}}
onChange={(e) => updateGroupLocal(group.id, 'title', e.target.value)}
onBlur={() => handleGroupBlur(group.id)}
className="h-7 text-xs sm:h-8 sm:text-sm"
placeholder="거래처 정보"
/>
@ -1114,14 +1343,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<Label className="text-[10px] sm:text-xs">그룹 설명 (선택사항)</Label>
<Input
value={localGroupInputs[group.id]?.description !== undefined ? localGroupInputs[group.id].description : (group.description || "")}
onChange={(e) => {
const newValue = e.target.value;
setLocalGroupInputs(prev => ({
...prev,
[group.id]: { ...prev[group.id], description: newValue }
}));
updateFieldGroup(group.id, { description: newValue });
}}
onChange={(e) => updateGroupLocal(group.id, 'description', e.target.value)}
onBlur={() => handleGroupBlur(group.id)}
className="h-7 text-xs sm:h-8 sm:text-sm"
placeholder="거래처 관련 정보를 입력합니다"
/>
@ -1133,14 +1356,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<Input
type="number"
value={localGroupInputs[group.id]?.order !== undefined ? localGroupInputs[group.id].order : (group.order || 0)}
onChange={(e) => {
const newValue = parseInt(e.target.value) || 0;
setLocalGroupInputs(prev => ({
...prev,
[group.id]: { ...prev[group.id], order: newValue }
}));
updateFieldGroup(group.id, { order: newValue });
}}
onChange={(e) => updateGroupLocal(group.id, 'order', parseInt(e.target.value) || 0)}
onBlur={() => handleGroupBlur(group.id)}
className="h-7 text-xs sm:h-8 sm:text-sm"
min="0"
/>
@ -1236,8 +1453,30 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
{/* 아이콘 설정 */}
{item.type === "icon" && (
<Input
value={item.icon || ""}
onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { icon: e.target.value })}
value={
localDisplayItemInputs[group.id]?.[itemIndex]?.value !== undefined
? localDisplayItemInputs[group.id][itemIndex].value
: item.icon || ""
}
onChange={(e) => {
const newValue = e.target.value;
setLocalDisplayItemInputs(prev => ({
...prev,
[group.id]: {
...prev[group.id],
[itemIndex]: {
...prev[group.id]?.[itemIndex],
value: newValue
}
}
}));
}}
onBlur={() => {
const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.value;
if (localValue !== undefined) {
updateDisplayItemInGroup(group.id, itemIndex, { icon: localValue });
}
}}
placeholder="Building"
className="h-6 text-[9px] sm:text-[10px]"
/>
@ -1264,8 +1503,12 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
}
}
}));
// 실제 상태 업데이트
updateDisplayItemInGroup(group.id, itemIndex, { value: newValue });
}}
onBlur={() => {
const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.value;
if (localValue !== undefined) {
updateDisplayItemInGroup(group.id, itemIndex, { value: localValue });
}
}}
placeholder="| , / , -"
className="h-6 text-[9px] sm:text-[10px]"
@ -1312,8 +1555,12 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
}
}
}));
// 실제 상태 업데이트
updateDisplayItemInGroup(group.id, itemIndex, { label: newValue });
}}
onBlur={() => {
const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.label;
if (localValue !== undefined) {
updateDisplayItemInGroup(group.id, itemIndex, { label: localValue });
}
}}
placeholder="라벨 (예: 거래처:)"
className="h-6 w-full text-[9px] sm:text-[10px]"
@ -1354,8 +1601,30 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
{/* 기본값 */}
{item.emptyBehavior === "default" && (
<Input
value={item.defaultValue || ""}
onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: e.target.value })}
value={
localDisplayItemInputs[group.id]?.[itemIndex]?.value !== undefined
? localDisplayItemInputs[group.id][itemIndex].value
: item.defaultValue || ""
}
onChange={(e) => {
const newValue = e.target.value;
setLocalDisplayItemInputs(prev => ({
...prev,
[group.id]: {
...prev[group.id],
[itemIndex]: {
...prev[group.id]?.[itemIndex],
value: newValue
}
}
}));
}}
onBlur={() => {
const localValue = localDisplayItemInputs[group.id]?.[itemIndex]?.value;
if (localValue !== undefined) {
updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: localValue });
}
}}
placeholder="미입력"
className="h-6 w-full text-[9px] sm:text-[10px]"
/>
@ -1670,14 +1939,21 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<Label className="text-[10px] font-semibold sm:text-xs">카테고리 값 매핑</Label>
{/* 할인 방식 매핑 */}
<Collapsible>
<Collapsible
open={expandedCategoryMappings.discountType}
onOpenChange={(open) => setExpandedCategoryMappings(prev => ({ ...prev, discountType: open }))}
>
<CollapsibleTrigger asChild>
<Button
variant="ghost"
className="flex w-full items-center justify-between p-2 hover:bg-muted"
>
<span className="text-xs font-medium">할인 방식 연산 매핑</span>
<ChevronDown className="h-4 w-4" />
{expandedCategoryMappings.discountType ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
@ -1702,30 +1978,40 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
</div>
{/* 2단계: 카테고리 선택 */}
{(config.autoCalculation.valueMapping as any)?._selectedMenus?.discountType && (
<div className="space-y-1">
<Label className="text-[9px] sm:text-[10px]">2단계: 카테고리 선택</Label>
<Select
value={(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType || ""}
onValueChange={(value) => handleCategorySelect(
value,
(config.autoCalculation.valueMapping as any)._selectedMenus.discountType,
"discountType"
)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
{(categoryColumns.discountType || []).map((col: any) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
{(() => {
const hasSelectedMenu = !!(config.autoCalculation.valueMapping as any)?._selectedMenus?.discountType;
const columns = categoryColumns.discountType || [];
console.log("🎨 [렌더링] 2단계 카테고리 선택", {
hasSelectedMenu,
columns,
columnsCount: columns.length,
categoryColumnsState: categoryColumns
});
return hasSelectedMenu ? (
<div className="space-y-1">
<Label className="text-[9px] sm:text-[10px]">2단계: 카테고리 선택</Label>
<Select
value={(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType || ""}
onValueChange={(value) => handleCategorySelect(
value,
(config.autoCalculation.valueMapping as any)._selectedMenus.discountType,
"discountType"
)}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="카테고리 선택" />
</SelectTrigger>
<SelectContent>
{columns.map((col: any) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.columnLabel || col.columnName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
) : null;
})()}
{/* 3단계: 값 매핑 */}
{(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType && (
@ -1780,14 +2066,21 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
</Collapsible>
{/* 반올림 방식 매핑 */}
<Collapsible>
<Collapsible
open={expandedCategoryMappings.roundingType}
onOpenChange={(open) => setExpandedCategoryMappings(prev => ({ ...prev, roundingType: open }))}
>
<CollapsibleTrigger asChild>
<Button
variant="ghost"
className="flex w-full items-center justify-between p-2 hover:bg-muted"
>
<span className="text-xs font-medium">반올림 방식 연산 매핑</span>
<ChevronDown className="h-4 w-4" />
{expandedCategoryMappings.roundingType ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
@ -1890,14 +2183,21 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
</Collapsible>
{/* 반올림 단위 매핑 */}
<Collapsible>
<Collapsible
open={expandedCategoryMappings.roundingUnit}
onOpenChange={(open) => setExpandedCategoryMappings(prev => ({ ...prev, roundingUnit: open }))}
>
<CollapsibleTrigger asChild>
<Button
variant="ghost"
className="flex w-full items-center justify-between p-2 hover:bg-muted"
>
<span className="text-xs font-medium">반올림 단위 값 매핑</span>
<ChevronDown className="h-4 w-4" />
{expandedCategoryMappings.roundingUnit ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
@ -2235,10 +2535,10 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
variant="outline"
role="combobox"
className="h-7 w-full justify-between text-xs font-normal"
disabled={targetTableColumns.length === 0}
disabled={!config.targetTable || loadedTargetTableColumns.length === 0}
>
{mapping.targetField
? targetTableColumns.find((c) => c.columnName === mapping.targetField)?.columnLabel ||
? loadedTargetTableColumns.find((c) => c.columnName === mapping.targetField)?.columnLabel ||
mapping.targetField
: "저장 테이블 컬럼 선택"}
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
@ -2248,13 +2548,15 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<Command>
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
<CommandList>
{targetTableColumns.length === 0 ? (
<CommandEmpty className="text-xs">저장 테이블을 먼저 선택하세요</CommandEmpty>
{!config.targetTable ? (
<CommandEmpty className="text-xs">저장 대상 테이블을 먼저 선택하세요</CommandEmpty>
) : loadedTargetTableColumns.length === 0 ? (
<CommandEmpty className="text-xs">컬럼 로딩 중...</CommandEmpty>
) : (
<>
<CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
<CommandGroup>
{targetTableColumns.map((col) => {
{loadedTargetTableColumns.map((col) => {
const searchValue = `${col.columnLabel || col.columnName} ${col.columnName} ${col.dataType || ""}`.toLowerCase();
return (
<CommandItem
@ -2276,7 +2578,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<div className="flex flex-col">
<span>{col.columnLabel || col.columnName}</span>
{col.dataType && (
<span className="text-[10px] text-muted-foreground">{col.dataType}</span>
<span className="text-[10px] text-muted-foreground">
{col.dataType}
</span>
)}
</div>
</CommandItem>
@ -2289,17 +2593,27 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
</Command>
</PopoverContent>
</Popover>
<p className="text-[8px] text-muted-foreground">
현재 화면의 저장 대상 테이블 ({config.targetTable || "미선택"})의 컬럼
</p>
</div>
{/* 기본값 (선택사항) */}
<div className="space-y-1">
<Label className="text-[9px] sm:text-[10px]">기본값 (선택사항)</Label>
<Input
value={mapping.defaultValue || ""}
value={localMappingInputs[index] !== undefined ? localMappingInputs[index] : mapping.defaultValue || ""}
onChange={(e) => {
const updated = [...(config.parentDataMapping || [])];
updated[index] = { ...updated[index], defaultValue: e.target.value };
handleChange("parentDataMapping", updated);
const newValue = e.target.value;
setLocalMappingInputs(prev => ({ ...prev, [index]: newValue }));
}}
onBlur={() => {
const currentValue = localMappingInputs[index];
if (currentValue !== undefined) {
const updated = [...(config.parentDataMapping || [])];
updated[index] = { ...updated[index], defaultValue: currentValue || undefined };
handleChange("parentDataMapping", updated);
}
}}
placeholder="값이 없을 때 사용할 기본값"
className="h-7 text-xs"
@ -2307,46 +2621,24 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
</div>
{/* 삭제 버튼 */}
<Button
size="sm"
variant="ghost"
className="h-6 w-full text-xs text-destructive hover:text-destructive"
onClick={() => {
const updated = (config.parentDataMapping || []).filter((_, i) => i !== index);
handleChange("parentDataMapping", updated);
}}
>
<X className="mr-1 h-3 w-3" />
삭제
</Button>
<div className="flex justify-end pt-2">
<Button
size="sm"
variant="ghost"
className="h-7 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
onClick={() => {
const updated = (config.parentDataMapping || []).filter((_, i) => i !== index);
handleChange("parentDataMapping", updated);
}}
>
<X className="mr-1 h-3 w-3" />
삭제
</Button>
</div>
</div>
</Card>
))}
</div>
{(config.parentDataMapping || []).length === 0 && (
<p className="text-center text-[10px] text-muted-foreground py-4">
매핑 설정이 없습니다. "추가" 버튼을 클릭하여 설정하세요.
</p>
)}
{/* 예시 */}
<div className="rounded-lg bg-green-50 p-2 text-xs">
<p className="mb-1 text-[10px] font-medium text-green-900">💡 예시</p>
<div className="space-y-1 text-[9px] text-green-700">
<p><strong>매핑 1: 거래처 ID</strong></p>
<p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">customer_mng</code></p>
<p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">id</code> → 저장 필드: <code className="bg-green-100 px-1">customer_id</code></p>
<p className="mt-1"><strong>매핑 2: 품목 ID</strong></p>
<p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">item_info</code></p>
<p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">id</code> → 저장 필드: <code className="bg-green-100 px-1">item_id</code></p>
<p className="mt-1"><strong>매핑 3: 품목 기준단가</strong></p>
<p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">item_info</code></p>
<p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">standard_price</code> → 저장 필드: <code className="bg-green-100 px-1">base_price</code></p>
</div>
</div>
</div>
{/* 사용 예시 */}
@ -2363,3 +2655,5 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
};
SelectedItemsDetailInputConfigPanel.displayName = "SelectedItemsDetailInputConfigPanel";
export default SelectedItemsDetailInputConfigPanel;

16
frontend/lib/registry/components/table-search-widget/TableSearchWidget.tsx
View File

@ -12,6 +12,7 @@ import { GroupingPanel } from "@/components/screen/table-options/GroupingPanel";
import { TableFilter } from "@/types/table-options";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ModernDatePicker } from "@/components/screen/filters/ModernDatePicker";
import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
interface PresetFilter {
id: string;
@ -44,6 +45,7 @@ interface TableSearchWidgetProps {
export function TableSearchWidget({ component, screenId, onHeightChange }: TableSearchWidgetProps) {
const { registeredTables, selectedTableId, setSelectedTableId, getTable } = useTableOptions();
const { isPreviewMode } = useScreenPreview(); // 미리보기 모드 확인
// 높이 관리 context (실제 화면에서만 사용)
let setWidgetHeight:
@ -445,14 +447,14 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
</div>
)}
{/* 동적 모드일 때만 설정 버튼들 표시 */}
{/* 동적 모드일 때만 설정 버튼들 표시 (미리보기에서는 비활성화) */}
{filterMode === "dynamic" && (
<>
<Button
variant="outline"
size="sm"
onClick={() => setColumnVisibilityOpen(true)}
disabled={!selectedTableId}
onClick={() => !isPreviewMode && setColumnVisibilityOpen(true)}
disabled={!selectedTableId || isPreviewMode}
className="h-8 text-xs sm:h-9 sm:text-sm"
>
<Settings className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
@ -462,8 +464,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
<Button
variant="outline"
size="sm"
onClick={() => setFilterOpen(true)}
disabled={!selectedTableId}
onClick={() => !isPreviewMode && setFilterOpen(true)}
disabled={!selectedTableId || isPreviewMode}
className="h-8 text-xs sm:h-9 sm:text-sm"
>
<Filter className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
@ -473,8 +475,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
<Button
variant="outline"
size="sm"
onClick={() => setGroupingOpen(true)}
disabled={!selectedTableId}
onClick={() => !isPreviewMode && setGroupingOpen(true)}
disabled={!selectedTableId || isPreviewMode}
className="h-8 text-xs sm:h-9 sm:text-sm"
>
<Layers className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />

1
동적_테이블_접근_시스템_개선_완료.md
View File

@ -378,3 +378,4 @@ interface TablePermission {