jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

저장버튼 제어기능 (insert)

Browse Source
This commit is contained in:
kjs
2025-09-18 10:05:50 +09:00
parent 7b7f81d85c
commit 7cbbf45dc9
32 changed files with 8500 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/components/screen/config-panels/ButtonConfigPanel.tsx
View File

@@ -11,6 +11,7 @@ import { Check, ChevronsUpDown, Search } from "lucide-react";
import { cn } from "@/lib/utils";
import { ComponentData } from "@/types/screen";
import { apiClient } from "@/lib/api/client";
import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
interface ButtonConfigPanelProps {
component: ComponentData;
@@ -66,7 +67,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
return screens.filter(
(screen) =>
screen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
(screen.description && screen.description.toLowerCase().includes(searchTerm.toLowerCase()))
(screen.description && screen.description.toLowerCase().includes(searchTerm.toLowerCase())),
);
};
@@ -205,7 +206,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
variant="outline"
role="combobox"
aria-expanded={modalScreenOpen}
className="w-full justify-between h-10"
className="h-10 w-full justify-between"
disabled={screensLoading}
>
{config.action?.targetScreenId
@@ -215,7 +216,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" align="start" style={{ width: 'var(--radix-popover-trigger-width)' }}>
<PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
<div className="flex flex-col">
{/* 검색 입력 */}
<div className="flex items-center border-b px-3 py-2">
@@ -284,7 +285,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
variant="outline"
role="combobox"
aria-expanded={navScreenOpen}
className="w-full justify-between h-10"
className="h-10 w-full justify-between"
disabled={screensLoading}
>
{config.action?.targetScreenId
@@ -294,7 +295,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" align="start" style={{ width: 'var(--radix-popover-trigger-width)' }}>
<PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
<div className="flex flex-col">
{/* 검색 입력 */}
<div className="flex items-center border-b px-3 py-2">
@@ -369,57 +370,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
</div>
)}
{/* 확인 메시지 설정 (모든 액션 공통) */}
{config.action?.type && config.action.type !== "cancel" && config.action.type !== "close" && (
<div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
<h4 className="text-sm font-medium text-gray-700">확인 메시지 설정</h4>
<div>
<Label htmlFor="confirm-message">실행 전 확인 메시지</Label>
<Input
id="confirm-message"
placeholder="예: 정말 저장하시겠습니까?"
value={config.action?.confirmMessage || ""}
onChange={(e) =>
onUpdateProperty("componentConfig.action", {
...config.action,
confirmMessage: e.target.value,
})
}
/>
</div>
<div>
<Label htmlFor="success-message">성공 메시지</Label>
<Input
id="success-message"
placeholder="예: 저장되었습니다."
value={config.action?.successMessage || ""}
onChange={(e) =>
onUpdateProperty("componentConfig.action", {
...config.action,
successMessage: e.target.value,
})
}
/>
</div>
<div>
<Label htmlFor="error-message">오류 메시지</Label>
<Input
id="error-message"
placeholder="예: 저장 중 오류가 발생했습니다."
value={config.action?.errorMessage || ""}
onChange={(e) =>
onUpdateProperty("componentConfig.action", {
...config.action,
errorMessage: e.target.value,
})
}
/>
</div>
{/* 🔥 NEW: 제어관리 기능 섹션 */}
<div className="mt-8 border-t border-gray-200 pt-6">
<div className="mb-4">
<h3 className="text-lg font-medium text-gray-900">🔧 고급 기능</h3>
<p className="mt-1 text-sm text-gray-600">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
</div>
)}
<ButtonDataflowConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
</div>
</div>
);
};