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

[agent-pipeline] pipe-20260311071246-rhvz round-5

This commit is contained in:
DDD1542 2026-03-11 16:36:06 +09:00
parent 506475e5cc
commit ca001408f8
2 changed files with 174 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/components/v2/config-panels/V2DateConfigPanel.tsx
View File

@ -9,7 +9,6 @@ import React from "react";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
interface V2DateConfigPanelProps { interface V2DateConfigPanelProps {
@ -21,21 +20,23 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
config, config,
onChange, onChange,
}) => { }) => {
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => { const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value }); onChange({ ...config, [field]: value });
}; };
return ( return (
<div className="space-y-4"> <div className="space-y-1">
{/* 날짜 타입 */} {/* DATE TYPE 섹션 */}
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">날짜 타입</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATE TYPE</h4>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">날짜 타입</span>
<div className="w-[140px]">
<Select <Select
value={config.dateType || config.type || "date"} value={config.dateType || config.type || "date"}
onValueChange={(value) => updateConfig("dateType", value)} onValueChange={(value) => updateConfig("dateType", value)}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="타입 선택" /> <SelectValue placeholder="타입 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -45,31 +46,36 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</div>
<Separator /> {/* PLACEHOLDER 섹션 */}
<div className="border-b border-border/50 pb-3 mb-3">
{/* 플레이스홀더 */} <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">PLACEHOLDER</h4>
<div className="space-y-2"> <div className="flex items-center justify-between py-1.5">
<Label className="text-xs font-medium">플레이스홀더</Label> <span className="text-xs text-muted-foreground">안내 텍스트</span>
<div className="w-[140px]">
<Input <Input
value={config.placeholder || ""} value={config.placeholder || ""}
onChange={(e) => updateConfig("placeholder", e.target.value)} onChange={(e) => updateConfig("placeholder", e.target.value)}
placeholder="날짜 선택" placeholder="날짜 선택"
className="h-8 text-xs" className="h-7 text-xs"
/> />
<p className="text-muted-foreground text-[10px]">날짜가 선택되지 않았을 때 표시할 텍스트</p> </div>
</div>
</div> </div>
<Separator /> {/* FORMAT 섹션 */}
<div className="border-b border-border/50 pb-3 mb-3">
{/* 표시 형식 */} <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">FORMAT</h4>
<div className="space-y-2"> <div className="flex items-center justify-between py-1.5">
<Label className="text-xs font-medium">표시 형식</Label> <span className="text-xs text-muted-foreground">표시 형식</span>
<div className="w-[140px]">
<Select <Select
value={config.format || "YYYY-MM-DD"} value={config.format || "YYYY-MM-DD"}
onValueChange={(value) => updateConfig("format", value)} onValueChange={(value) => updateConfig("format", value)}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="형식 선택" /> <SelectValue placeholder="형식 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -89,66 +95,61 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</div>
<Separator /> {/* DATE RANGE 섹션 */}
<div className="border-b border-border/50 pb-3 mb-3">
{/* 날짜 범위 제한 */} <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATE RANGE</h4>
<div className="space-y-3"> <div className="flex gap-2">
<Label className="text-xs font-medium">날짜 범위 제한</Label> <div className="flex-1">
<div className="grid grid-cols-2 gap-2">
<div className="space-y-2">
<Label className="text-[10px] text-muted-foreground">최소 날짜</Label> <Label className="text-[10px] text-muted-foreground">최소 날짜</Label>
<Input <Input
type="date" type="date"
value={config.minDate || ""} value={config.minDate || ""}
onChange={(e) => updateConfig("minDate", e.target.value)} onChange={(e) => updateConfig("minDate", e.target.value)}
className="h-8 text-xs" className="h-7 text-xs"
/> />
</div> </div>
<div className="space-y-2"> <div className="flex-1">
<Label className="text-[10px] text-muted-foreground">최대 날짜</Label> <Label className="text-[10px] text-muted-foreground">최대 날짜</Label>
<Input <Input
type="date" type="date"
value={config.maxDate || ""} value={config.maxDate || ""}
onChange={(e) => updateConfig("maxDate", e.target.value)} onChange={(e) => updateConfig("maxDate", e.target.value)}
className="h-8 text-xs" className="h-7 text-xs"
/> />
</div> </div>
</div> </div>
</div> </div>
<Separator /> {/* OPTIONS 섹션 */}
<div className="border-b border-border/50 pb-3 mb-3">
<h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">OPTIONS</h4>
{/* 추가 옵션 */} <div className="flex items-center justify-between py-1.5">
<div className="space-y-3"> <span className="text-xs text-muted-foreground">기간 선택 (시작~종료)</span>
<Label className="text-xs font-medium">추가 옵션</Label>
<div className="flex items-center space-x-2">
<Checkbox <Checkbox
id="range"
checked={config.range || false} checked={config.range || false}
onCheckedChange={(checked) => updateConfig("range", checked)} onCheckedChange={(checked) => updateConfig("range", checked)}
/> />
<label htmlFor="range" className="text-xs">기간 선택 (시작~종료)</label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">오늘 버튼 표시</span>
<Checkbox <Checkbox
id="showToday"
checked={config.showToday !== false} checked={config.showToday !== false}
onCheckedChange={(checked) => updateConfig("showToday", checked)} onCheckedChange={(checked) => updateConfig("showToday", checked)}
/> />
<label htmlFor="showToday" className="text-xs">오늘 버튼 표시</label>
</div> </div>
{(config.dateType === "datetime" || config.dateType === "time") && ( {(config.dateType === "datetime" || config.dateType === "time") && (
<div className="flex items-center space-x-2"> <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">초 단위 표시</span>
<Checkbox <Checkbox
id="showSeconds"
checked={config.showSeconds || false} checked={config.showSeconds || false}
onCheckedChange={(checked) => updateConfig("showSeconds", checked)} onCheckedChange={(checked) => updateConfig("showSeconds", checked)}
/> />
<label htmlFor="showSeconds" className="text-xs">초 단위 표시</label>
</div> </div>
)} )}
</div> </div>
@ -159,5 +160,3 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
V2DateConfigPanel.displayName = "V2DateConfigPanel"; V2DateConfigPanel.displayName = "V2DateConfigPanel";
export default V2DateConfigPanel; export default V2DateConfigPanel;

98
frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
View File

@ -9,7 +9,6 @@ import React from "react";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Plus, Trash2 } from "lucide-react"; import { Plus, Trash2 } from "lucide-react";
@ -23,12 +22,10 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
config, config,
onChange, onChange,
}) => { }) => {
// 설정 업데이트 핸들러
const updateConfig = (field: string, value: any) => { const updateConfig = (field: string, value: any) => {
onChange({ ...config, [field]: value }); onChange({ ...config, [field]: value });
}; };
// 탭 관리
const tabs = config.tabs || []; const tabs = config.tabs || [];
const addTab = () => { const addTab = () => {
@ -48,15 +45,18 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
}; };
return ( return (
<div className="space-y-4"> <div className="space-y-1">
{/* 그룹 타입 */} {/* GROUP TYPE 섹션 */}
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<Label className="text-xs font-medium">그룹 타입</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">GROUP TYPE</h4>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">그룹 타입</span>
<div className="w-[140px]">
<Select <Select
value={config.groupType || config.type || "section"} value={config.groupType || config.type || "section"}
onValueChange={(value) => updateConfig("groupType", value)} onValueChange={(value) => updateConfig("groupType", value)}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue placeholder="타입 선택" /> <SelectValue placeholder="타입 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -69,25 +69,30 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</div>
<Separator /> {/* TITLE 섹션 */}
<div className="border-b border-border/50 pb-3 mb-3">
{/* 제목 */} <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">TITLE</h4>
<div className="space-y-2"> <div className="flex items-center justify-between py-1.5">
<Label className="text-xs font-medium">제목</Label> <span className="text-xs text-muted-foreground">제목</span>
<div className="w-[140px]">
<Input <Input
value={config.title || ""} value={config.title || ""}
onChange={(e) => updateConfig("title", e.target.value)} onChange={(e) => updateConfig("title", e.target.value)}
placeholder="그룹 제목" placeholder="그룹 제목"
className="h-8 text-xs" className="h-7 text-xs"
/> />
</div> </div>
</div>
</div>
{/* 탭 설정 */} {/* TABS 섹션 - 탭 타입일 때만 */}
{config.groupType === "tabs" && ( {config.groupType === "tabs" && (
<div className="space-y-2"> <div className="border-b border-border/50 pb-3 mb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between py-2">
<Label className="text-xs font-medium">탭 목록</Label> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">TABS</h4>
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
@ -99,9 +104,9 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
추가 추가
</Button> </Button>
</div> </div>
<div className="space-y-2 max-h-40 overflow-y-auto"> <div className="space-y-1.5 max-h-40 overflow-y-auto">
{tabs.map((tab: any, index: number) => ( {tabs.map((tab: any, index: number) => (
<div key={index} className="flex items-center gap-2"> <div key={index} className="flex items-center gap-1.5">
<Input <Input
value={tab.id || ""} value={tab.id || ""}
onChange={(e) => updateTab(index, "id", e.target.value)} onChange={(e) => updateTab(index, "id", e.target.value)}
@ -134,41 +139,44 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
</div> </div>
)} )}
{/* 섹션/아코디언 옵션 */} {/* SECTION OPTIONS 섹션 - 섹션/아코디언일 때 */}
{(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && ( {(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && (
<div className="space-y-3"> <div className="border-b border-border/50 pb-3 mb-3">
<div className="flex items-center space-x-2"> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">SECTION OPTIONS</h4>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">접기/펴기 가능</span>
<Checkbox <Checkbox
id="collapsible"
checked={config.collapsible || false} checked={config.collapsible || false}
onCheckedChange={(checked) => updateConfig("collapsible", checked)} onCheckedChange={(checked) => updateConfig("collapsible", checked)}
/> />
<label htmlFor="collapsible" className="text-xs">접기/펴기 가능</label>
</div> </div>
{config.collapsible && ( {config.collapsible && (
<div className="flex items-center space-x-2"> <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">기본으로 펼침</span>
<Checkbox <Checkbox
id="defaultOpen"
checked={config.defaultOpen !== false} checked={config.defaultOpen !== false}
onCheckedChange={(checked) => updateConfig("defaultOpen", checked)} onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
/> />
<label htmlFor="defaultOpen" className="text-xs">기본으로 펼침</label>
</div> </div>
)} )}
</div> </div>
)} )}
{/* 모달 옵션 */} {/* MODAL OPTIONS 섹션 - 모달/폼모달일 때 */}
{(config.groupType === "modal" || config.groupType === "form-modal") && ( {(config.groupType === "modal" || config.groupType === "form-modal") && (
<div className="space-y-3"> <div className="border-b border-border/50 pb-3 mb-3">
<div className="space-y-2"> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">MODAL OPTIONS</h4>
<Label className="text-xs font-medium">모달 크기</Label>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">모달 크기</span>
<div className="w-[140px]">
<Select <Select
value={config.modalSize || "md"} value={config.modalSize || "md"}
onValueChange={(value) => updateConfig("modalSize", value)} onValueChange={(value) => updateConfig("modalSize", value)}
> >
<SelectTrigger className="h-8 text-xs"> <SelectTrigger className="h-7 text-xs">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -180,36 +188,36 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
<div className="flex items-center space-x-2"> <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">닫기 버튼 표시</span>
<Checkbox <Checkbox
id="closeable"
checked={config.closeable !== false} checked={config.closeable !== false}
onCheckedChange={(checked) => updateConfig("closeable", checked)} onCheckedChange={(checked) => updateConfig("closeable", checked)}
/> />
<label htmlFor="closeable" className="text-xs">닫기 버튼 표시</label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">배경 클릭으로 닫기</span>
<Checkbox <Checkbox
id="backdrop"
checked={config.backdrop !== false} checked={config.backdrop !== false}
onCheckedChange={(checked) => updateConfig("backdrop", checked)} onCheckedChange={(checked) => updateConfig("backdrop", checked)}
/> />
<label htmlFor="backdrop" className="text-xs">배경 클릭으로 닫기</label>
</div> </div>
</div> </div>
)} )}
{/* 헤더 표시 여부 */} {/* DISPLAY 섹션 */}
<Separator /> <div className="border-b border-border/50 pb-3 mb-3">
<div className="flex items-center space-x-2"> <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DISPLAY</h4>
<div className="flex items-center justify-between py-1.5">
<span className="text-xs text-muted-foreground">헤더 표시</span>
<Checkbox <Checkbox
id="showHeader"
checked={config.showHeader !== false} checked={config.showHeader !== false}
onCheckedChange={(checked) => updateConfig("showHeader", checked)} onCheckedChange={(checked) => updateConfig("showHeader", checked)}
/> />
<label htmlFor="showHeader" className="text-xs">헤더 표시</label> </div>
</div> </div>
</div> </div>
); );
@ -218,5 +226,3 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
V2GroupConfigPanel.displayName = "V2GroupConfigPanel"; V2GroupConfigPanel.displayName = "V2GroupConfigPanel";
export default V2GroupConfigPanel; export default V2GroupConfigPanel;