chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

버튼 수정과 그룹드롭다운, 품목복사기능, 연속입력기능추가

Browse Source
This commit is contained in:
leeheejin
2025-11-06 17:32:24 +09:00
parent c22e38da76
commit b3cd771b99
6 changed files with 551 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -263,6 +263,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
<SelectItem value="save">저장</SelectItem>
<SelectItem value="delete">삭제</SelectItem>
<SelectItem value="edit">편집</SelectItem>
<SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
<SelectItem value="navigate">페이지 이동</SelectItem>
<SelectItem value="modal">모달 열기</SelectItem>
<SelectItem value="control">제어 흐름</SelectItem>
@@ -553,6 +554,159 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
</div>
)}
{/* 복사 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "copy" && (
<div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
<h4 className="text-sm font-medium text-foreground">복사 설정 (품목코드 자동 초기화)</h4>
<div>
<Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
<Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={modalScreenOpen}
className="h-6 w-full justify-between px-2 py-0"
style={{ fontSize: "12px" }}
disabled={screensLoading}
>
{config.action?.targetScreenId
? screens.find((screen) => screen.id === config.action?.targetScreenId)?.name ||
"복사 폼 화면을 선택하세요..."
: "복사 폼 화면을 선택하세요..."}
<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)" }}>
<div className="flex flex-col">
<div className="flex items-center border-b px-3 py-2">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<Input
placeholder="화면 검색..."
value={modalSearchTerm}
onChange={(e) => setModalSearchTerm(e.target.value)}
className="border-0 p-0 focus-visible:ring-0"
/>
</div>
<div className="max-h-[200px] overflow-auto">
{(() => {
const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`copy-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false);
setModalSearchTerm("");
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
config.action?.targetScreenId === screen.id ? "opacity-100" : "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div>
</div>
));
})()}
</div>
</div>
</PopoverContent>
</Popover>
<p className="mt-1 text-xs text-muted-foreground">
선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
</p>
</div>
<div>
<Label htmlFor="copy-mode">복사 모드</Label>
<Select
value={component.componentConfig?.action?.editMode || "modal"}
onValueChange={(value) => {
onUpdateProperty("componentConfig.action.editMode", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="복사 모드 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="modal">모달로 열기</SelectItem>
<SelectItem value="navigate">새 페이지로 이동</SelectItem>
</SelectContent>
</Select>
</div>
{(component.componentConfig?.action?.editMode || "modal") === "modal" && (
<>
<div>
<Label htmlFor="copy-modal-title">모달 제목</Label>
<Input
id="copy-modal-title"
placeholder="모달 제목을 입력하세요 (예: 데이터 복사)"
value={localInputs.editModalTitle}
onChange={(e) => {
const newValue = e.target.value;
setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
onUpdateProperty("componentConfig.action.editModalTitle", newValue);
onUpdateProperty("webTypeConfig.editModalTitle", newValue);
}}
/>
<p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
</div>
<div>
<Label htmlFor="copy-modal-description">모달 설명</Label>
<Input
id="copy-modal-description"
placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 복사합니다)"
value={localInputs.editModalDescription}
onChange={(e) => {
const newValue = e.target.value;
setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
onUpdateProperty("componentConfig.action.editModalDescription", newValue);
onUpdateProperty("webTypeConfig.editModalDescription", newValue);
}}
/>
<p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
</div>
<div>
<Label htmlFor="copy-modal-size">모달 크기</Label>
<Select
value={component.componentConfig?.action?.modalSize || "md"}
onValueChange={(value) => {
onUpdateProperty("componentConfig.action.modalSize", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="모달 크기 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="sm">작음 (Small)</SelectItem>
<SelectItem value="md">보통 (Medium)</SelectItem>
<SelectItem value="lg">큼 (Large)</SelectItem>
<SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
<SelectItem value="full">전체 화면 (Full)</SelectItem>
</SelectContent>
</Select>
</div>
</>
)}
</div>
)}
{/* 테이블 이력 보기 액션 설정 */}
{(component.componentConfig?.action?.type || "save") === "view_table_history" && (
<div className="mt-4 space-y-4">