[agent-pipeline] pipe-20260311071246-rhvz round-5
This commit is contained in:
DDD1542
parent
506475e5cc
commit
ca001408f8
|
|
@ -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,134 +20,136 @@ 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>
|
||||||
<Select
|
<div className="flex items-center justify-between py-1.5">
|
||||||
value={config.dateType || config.type || "date"}
|
<span className="text-xs text-muted-foreground">날짜 타입</span>
|
||||||
onValueChange={(value) => updateConfig("dateType", value)}
|
<div className="w-[140px]">
|
||||||
>
|
<Select
|
||||||
<SelectTrigger className="h-8 text-xs">
|
value={config.dateType || config.type || "date"}
|
||||||
<SelectValue placeholder="타입 선택" />
|
onValueChange={(value) => updateConfig("dateType", value)}
|
||||||
</SelectTrigger>
|
>
|
||||||
<SelectContent>
|
<SelectTrigger className="h-7 text-xs">
|
||||||
<SelectItem value="date">날짜</SelectItem>
|
<SelectValue placeholder="타입 선택" />
|
||||||
<SelectItem value="time">시간</SelectItem>
|
</SelectTrigger>
|
||||||
<SelectItem value="datetime">날짜+시간</SelectItem>
|
<SelectContent>
|
||||||
</SelectContent>
|
<SelectItem value="date">날짜</SelectItem>
|
||||||
</Select>
|
<SelectItem value="time">시간</SelectItem>
|
||||||
|
<SelectItem value="datetime">날짜+시간</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</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>
|
||||||
<Input
|
<div className="w-[140px]">
|
||||||
value={config.placeholder || ""}
|
<Input
|
||||||
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
value={config.placeholder || ""}
|
||||||
placeholder="날짜 선택"
|
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
||||||
className="h-8 text-xs"
|
placeholder="날짜 선택"
|
||||||
/>
|
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>
|
||||||
<Select
|
<div className="w-[140px]">
|
||||||
value={config.format || "YYYY-MM-DD"}
|
<Select
|
||||||
onValueChange={(value) => updateConfig("format", value)}
|
value={config.format || "YYYY-MM-DD"}
|
||||||
>
|
onValueChange={(value) => updateConfig("format", value)}
|
||||||
<SelectTrigger className="h-8 text-xs">
|
>
|
||||||
<SelectValue placeholder="형식 선택" />
|
<SelectTrigger className="h-7 text-xs">
|
||||||
</SelectTrigger>
|
<SelectValue placeholder="형식 선택" />
|
||||||
<SelectContent>
|
</SelectTrigger>
|
||||||
<SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
|
<SelectContent>
|
||||||
<SelectItem value="YYYY/MM/DD">YYYY/MM/DD</SelectItem>
|
<SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
|
||||||
<SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
|
<SelectItem value="YYYY/MM/DD">YYYY/MM/DD</SelectItem>
|
||||||
<SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
|
<SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
|
||||||
<SelectItem value="YYYY년 MM월 DD일">YYYY년 MM월 DD일</SelectItem>
|
<SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
|
||||||
{(config.dateType === "time" || config.dateType === "datetime") && (
|
<SelectItem value="YYYY년 MM월 DD일">YYYY년 MM월 DD일</SelectItem>
|
||||||
<>
|
{(config.dateType === "time" || config.dateType === "datetime") && (
|
||||||
<SelectItem value="HH:mm">HH:mm</SelectItem>
|
<>
|
||||||
<SelectItem value="HH:mm:ss">HH:mm:ss</SelectItem>
|
<SelectItem value="HH:mm">HH:mm</SelectItem>
|
||||||
<SelectItem value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</SelectItem>
|
<SelectItem value="HH:mm:ss">HH:mm:ss</SelectItem>
|
||||||
<SelectItem value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</SelectItem>
|
<SelectItem value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</SelectItem>
|
||||||
</>
|
<SelectItem value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</SelectItem>
|
||||||
)}
|
</>
|
||||||
</SelectContent>
|
)}
|
||||||
</Select>
|
</SelectContent>
|
||||||
|
</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;
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,46 +45,54 @@ 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>
|
||||||
<Select
|
<div className="flex items-center justify-between py-1.5">
|
||||||
value={config.groupType || config.type || "section"}
|
<span className="text-xs text-muted-foreground">그룹 타입</span>
|
||||||
onValueChange={(value) => updateConfig("groupType", value)}
|
<div className="w-[140px]">
|
||||||
>
|
<Select
|
||||||
<SelectTrigger className="h-8 text-xs">
|
value={config.groupType || config.type || "section"}
|
||||||
<SelectValue placeholder="타입 선택" />
|
onValueChange={(value) => updateConfig("groupType", value)}
|
||||||
</SelectTrigger>
|
>
|
||||||
<SelectContent>
|
<SelectTrigger className="h-7 text-xs">
|
||||||
<SelectItem value="section">섹션</SelectItem>
|
<SelectValue placeholder="타입 선택" />
|
||||||
<SelectItem value="tabs">탭</SelectItem>
|
</SelectTrigger>
|
||||||
<SelectItem value="accordion">아코디언</SelectItem>
|
<SelectContent>
|
||||||
<SelectItem value="card">카드 섹션</SelectItem>
|
<SelectItem value="section">섹션</SelectItem>
|
||||||
<SelectItem value="modal">모달</SelectItem>
|
<SelectItem value="tabs">탭</SelectItem>
|
||||||
<SelectItem value="form-modal">폼 모달</SelectItem>
|
<SelectItem value="accordion">아코디언</SelectItem>
|
||||||
</SelectContent>
|
<SelectItem value="card">카드 섹션</SelectItem>
|
||||||
</Select>
|
<SelectItem value="modal">모달</SelectItem>
|
||||||
|
<SelectItem value="form-modal">폼 모달</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</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>
|
||||||
<Input
|
<div className="w-[140px]">
|
||||||
value={config.title || ""}
|
<Input
|
||||||
onChange={(e) => updateConfig("title", e.target.value)}
|
value={config.title || ""}
|
||||||
placeholder="그룹 제목"
|
onChange={(e) => updateConfig("title", e.target.value)}
|
||||||
className="h-8 text-xs"
|
placeholder="그룹 제목"
|
||||||
/>
|
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,82 +139,85 @@ 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>
|
|
||||||
<Select
|
<div className="flex items-center justify-between py-1.5">
|
||||||
value={config.modalSize || "md"}
|
<span className="text-xs text-muted-foreground">모달 크기</span>
|
||||||
onValueChange={(value) => updateConfig("modalSize", value)}
|
<div className="w-[140px]">
|
||||||
>
|
<Select
|
||||||
<SelectTrigger className="h-8 text-xs">
|
value={config.modalSize || "md"}
|
||||||
<SelectValue />
|
onValueChange={(value) => updateConfig("modalSize", value)}
|
||||||
</SelectTrigger>
|
>
|
||||||
<SelectContent>
|
<SelectTrigger className="h-7 text-xs">
|
||||||
<SelectItem value="sm">작게 (400px)</SelectItem>
|
<SelectValue />
|
||||||
<SelectItem value="md">보통 (600px)</SelectItem>
|
</SelectTrigger>
|
||||||
<SelectItem value="lg">크게 (800px)</SelectItem>
|
<SelectContent>
|
||||||
<SelectItem value="xl">매우 크게 (1000px)</SelectItem>
|
<SelectItem value="sm">작게 (400px)</SelectItem>
|
||||||
<SelectItem value="full">전체 화면</SelectItem>
|
<SelectItem value="md">보통 (600px)</SelectItem>
|
||||||
</SelectContent>
|
<SelectItem value="lg">크게 (800px)</SelectItem>
|
||||||
</Select>
|
<SelectItem value="xl">매우 크게 (1000px)</SelectItem>
|
||||||
|
<SelectItem value="full">전체 화면</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</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>
|
||||||
<Checkbox
|
<div className="flex items-center justify-between py-1.5">
|
||||||
id="showHeader"
|
<span className="text-xs text-muted-foreground">헤더 표시</span>
|
||||||
checked={config.showHeader !== false}
|
<Checkbox
|
||||||
onCheckedChange={(checked) => updateConfig("showHeader", checked)}
|
checked={config.showHeader !== false}
|
||||||
/>
|
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;
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue