[agent-pipeline] pipe-20260311071246-rhvz round-1
This commit is contained in:
DDD1542
parent
0eba11e047
commit
d4f2a3cf04
|
|
@ -328,147 +328,214 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
|
||||||
const isInputField = inputFieldTypes.includes(componentType);
|
const isInputField = inputFieldTypes.includes(componentType);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-1">
|
||||||
{/* 너비 + 높이 (같은 행) */}
|
{/* DIMENSIONS 섹션 */}
|
||||||
<div className="grid grid-cols-2 gap-2">
|
<div className="border-b border-border/50 pb-3 mb-3">
|
||||||
<div className="space-y-1">
|
<h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DIMENSIONS</h4>
|
||||||
<Label className="text-xs">너비 (px)</Label>
|
<div className="flex gap-2">
|
||||||
<Input
|
<div className="flex-1">
|
||||||
type="number"
|
<Label className="text-[10px] text-muted-foreground">너비</Label>
|
||||||
min={10}
|
<Input
|
||||||
max={3840}
|
type="number"
|
||||||
step="1"
|
min={10}
|
||||||
value={localWidth}
|
max={3840}
|
||||||
onChange={(e) => {
|
step="1"
|
||||||
setLocalWidth(e.target.value);
|
value={localWidth}
|
||||||
}}
|
onChange={(e) => {
|
||||||
onBlur={(e) => {
|
setLocalWidth(e.target.value);
|
||||||
const value = parseInt(e.target.value) || 0;
|
}}
|
||||||
if (value >= 10) {
|
onBlur={(e) => {
|
||||||
const snappedValue = Math.round(value / 10) * 10;
|
const value = parseInt(e.target.value) || 0;
|
||||||
handleUpdate("size.width", snappedValue);
|
|
||||||
setLocalWidth(String(snappedValue));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
const value = parseInt(e.currentTarget.value) || 0;
|
|
||||||
if (value >= 10) {
|
if (value >= 10) {
|
||||||
const snappedValue = Math.round(value / 10) * 10;
|
const snappedValue = Math.round(value / 10) * 10;
|
||||||
handleUpdate("size.width", snappedValue);
|
handleUpdate("size.width", snappedValue);
|
||||||
setLocalWidth(String(snappedValue));
|
setLocalWidth(String(snappedValue));
|
||||||
}
|
}
|
||||||
e.currentTarget.blur();
|
}}
|
||||||
}
|
onKeyDown={(e) => {
|
||||||
}}
|
if (e.key === "Enter") {
|
||||||
placeholder="100"
|
const value = parseInt(e.currentTarget.value) || 0;
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
if (value >= 10) {
|
||||||
/>
|
const snappedValue = Math.round(value / 10) * 10;
|
||||||
</div>
|
handleUpdate("size.width", snappedValue);
|
||||||
<div className="space-y-1">
|
setLocalWidth(String(snappedValue));
|
||||||
<Label className="text-xs">높이</Label>
|
}
|
||||||
<Input
|
e.currentTarget.blur();
|
||||||
type="number"
|
}
|
||||||
value={localHeight}
|
}}
|
||||||
onChange={(e) => {
|
placeholder="100"
|
||||||
setLocalHeight(e.target.value);
|
className="h-7 text-xs"
|
||||||
}}
|
/>
|
||||||
onBlur={(e) => {
|
</div>
|
||||||
const value = parseInt(e.target.value) || 0;
|
<div className="flex-1">
|
||||||
if (value >= 10) {
|
<Label className="text-[10px] text-muted-foreground">높이</Label>
|
||||||
const snappedValue = Math.round(value / 10) * 10;
|
<Input
|
||||||
handleUpdate("size.height", snappedValue);
|
type="number"
|
||||||
setLocalHeight(String(snappedValue));
|
value={localHeight}
|
||||||
}
|
onChange={(e) => {
|
||||||
}}
|
setLocalHeight(e.target.value);
|
||||||
onKeyDown={(e) => {
|
}}
|
||||||
if (e.key === "Enter") {
|
onBlur={(e) => {
|
||||||
const value = parseInt(e.currentTarget.value) || 0;
|
const value = parseInt(e.target.value) || 0;
|
||||||
if (value >= 10) {
|
if (value >= 10) {
|
||||||
const snappedValue = Math.round(value / 10) * 10;
|
const snappedValue = Math.round(value / 10) * 10;
|
||||||
handleUpdate("size.height", snappedValue);
|
handleUpdate("size.height", snappedValue);
|
||||||
setLocalHeight(String(snappedValue));
|
setLocalHeight(String(snappedValue));
|
||||||
}
|
}
|
||||||
e.currentTarget.blur();
|
}}
|
||||||
}
|
onKeyDown={(e) => {
|
||||||
}}
|
if (e.key === "Enter") {
|
||||||
step={1}
|
const value = parseInt(e.currentTarget.value) || 0;
|
||||||
placeholder="10"
|
if (value >= 10) {
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
const snappedValue = Math.round(value / 10) * 10;
|
||||||
/>
|
handleUpdate("size.height", snappedValue);
|
||||||
|
setLocalHeight(String(snappedValue));
|
||||||
|
}
|
||||||
|
e.currentTarget.blur();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
step={1}
|
||||||
|
placeholder="10"
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Z-Index */}
|
||||||
|
<div className="flex items-center justify-between py-1.5">
|
||||||
|
<span className="text-xs text-muted-foreground">Z-Index</span>
|
||||||
|
<div className="w-[140px]">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
step="1"
|
||||||
|
value={currentPosition.z || 1}
|
||||||
|
onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Title (group/area) */}
|
{/* Title (group/area) */}
|
||||||
{(selectedComponent.type === "group" || selectedComponent.type === "area") && (
|
{(selectedComponent.type === "group" || selectedComponent.type === "area") && (
|
||||||
<div className="space-y-1">
|
<div className="border-b border-border/50 pb-3 mb-3">
|
||||||
<Label className="text-xs">제목</Label>
|
<h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CONTENT</h4>
|
||||||
<Input
|
<div className="flex items-center justify-between py-1.5">
|
||||||
value={group.title || area.title || ""}
|
<span className="text-xs text-muted-foreground">제목</span>
|
||||||
onChange={(e) => handleUpdate("title", e.target.value)}
|
<div className="w-[140px]">
|
||||||
placeholder="제목"
|
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Description (area만) */}
|
|
||||||
{selectedComponent.type === "area" && (
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-xs">설명</Label>
|
|
||||||
<Input
|
|
||||||
value={area.description || ""}
|
|
||||||
onChange={(e) => handleUpdate("description", e.target.value)}
|
|
||||||
placeholder="설명"
|
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Z-Index */}
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-xs">Z-Index</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
step="1"
|
|
||||||
value={currentPosition.z || 1}
|
|
||||||
onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
|
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 라벨 스타일 - 입력 필드에서만 표시 */}
|
|
||||||
{isInputField && (
|
|
||||||
<Collapsible>
|
|
||||||
<CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-slate-50 p-2 text-xs font-medium hover:bg-slate-100">
|
|
||||||
라벨 스타일
|
|
||||||
<ChevronDown className="h-3.5 w-3.5" />
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
<CollapsibleContent className="mt-2 space-y-2">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-xs">라벨 텍스트</Label>
|
|
||||||
<Input
|
<Input
|
||||||
value={
|
value={group.title || area.title || ""}
|
||||||
selectedComponent.style?.labelText !== undefined
|
onChange={(e) => handleUpdate("title", e.target.value)}
|
||||||
? selectedComponent.style.labelText
|
placeholder="제목"
|
||||||
: selectedComponent.label || selectedComponent.componentConfig?.label || ""
|
className="h-7 text-xs"
|
||||||
}
|
|
||||||
onChange={(e) => {
|
|
||||||
handleUpdate("style.labelText", e.target.value);
|
|
||||||
handleUpdate("label", e.target.value); // label도 함께 업데이트
|
|
||||||
}}
|
|
||||||
placeholder="라벨을 입력하세요 (비우면 라벨 없음)"
|
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-2">
|
</div>
|
||||||
<div className="space-y-1">
|
{selectedComponent.type === "area" && (
|
||||||
<Label className="text-xs">위치</Label>
|
<div className="flex items-center justify-between py-1.5">
|
||||||
|
<span className="text-xs text-muted-foreground">설명</span>
|
||||||
|
<div className="w-[140px]">
|
||||||
|
<Input
|
||||||
|
value={area.description || ""}
|
||||||
|
onChange={(e) => handleUpdate("description", e.target.value)}
|
||||||
|
placeholder="설명"
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
{(isInputField || widget.required !== undefined) && (() => {
|
||||||
|
const colName = widget.columnName || selectedComponent?.columnName;
|
||||||
|
const colMeta = colName ? currentTable?.columns?.find(
|
||||||
|
(c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase()
|
||||||
|
) : null;
|
||||||
|
const isNotNull = colMeta && ((colMeta as any).isNullable === "NO" || (colMeta as any).isNullable === "N" || (colMeta as any).is_nullable === "NO" || (colMeta as any).is_nullable === "N");
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between py-1.5">
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
필수
|
||||||
|
{isNotNull && <span className="text-muted-foreground/60 ml-1">(NOT NULL)</span>}
|
||||||
|
</span>
|
||||||
|
<Checkbox
|
||||||
|
checked={isNotNull || widget.required === true || selectedComponent.componentConfig?.required === true}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
if (isNotNull) return;
|
||||||
|
handleUpdate("required", checked);
|
||||||
|
handleUpdate("componentConfig.required", checked);
|
||||||
|
}}
|
||||||
|
disabled={!!isNotNull}
|
||||||
|
className="h-4 w-4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
{(isInputField || widget.readonly !== undefined) && (
|
||||||
|
<div className="flex items-center justify-between py-1.5">
|
||||||
|
<span className="text-xs text-muted-foreground">읽기전용</span>
|
||||||
|
<Checkbox
|
||||||
|
checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
handleUpdate("readonly", checked);
|
||||||
|
handleUpdate("componentConfig.readonly", checked);
|
||||||
|
}}
|
||||||
|
className="h-4 w-4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center justify-between py-1.5">
|
||||||
|
<span className="text-xs text-muted-foreground">숨김</span>
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
handleUpdate("hidden", checked);
|
||||||
|
handleUpdate("componentConfig.hidden", checked);
|
||||||
|
}}
|
||||||
|
className="h-4 w-4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* LABEL 섹션 - 입력 필드에서만 표시 */}
|
||||||
|
{isInputField && (
|
||||||
|
<Collapsible>
|
||||||
|
<CollapsibleTrigger className="flex w-full items-center justify-between py-0.5 text-left">
|
||||||
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">LABEL</span>
|
||||||
|
<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground/50" />
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent className="mt-1.5 space-y-1">
|
||||||
|
{/* 라벨 텍스트 */}
|
||||||
|
<div className="flex items-center justify-between py-1.5">
|
||||||
|
<span className="text-xs text-muted-foreground">텍스트</span>
|
||||||
|
<div className="w-[140px]">
|
||||||
|
<Input
|
||||||
|
value={
|
||||||
|
selectedComponent.style?.labelText !== undefined
|
||||||
|
? selectedComponent.style.labelText
|
||||||
|
: selectedComponent.label || selectedComponent.componentConfig?.label || ""
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
handleUpdate("style.labelText", e.target.value);
|
||||||
|
handleUpdate("label", e.target.value);
|
||||||
|
}}
|
||||||
|
placeholder="라벨"
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 위치 + 간격 */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label className="text-[10px] text-muted-foreground">위치</Label>
|
||||||
<Select
|
<Select
|
||||||
value={selectedComponent.style?.labelPosition || "top"}
|
value={selectedComponent.style?.labelPosition || "top"}
|
||||||
onValueChange={(value) => handleUpdate("style.labelPosition", value)}
|
onValueChange={(value) => handleUpdate("style.labelPosition", value)}
|
||||||
>
|
>
|
||||||
<SelectTrigger className="h-6 text-xs">
|
<SelectTrigger className="h-7 text-xs">
|
||||||
<SelectValue />
|
<SelectValue />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -479,8 +546,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="flex-1">
|
||||||
<Label className="text-xs">간격</Label>
|
<Label className="text-[10px] text-muted-foreground">간격</Label>
|
||||||
<Input
|
<Input
|
||||||
value={
|
value={
|
||||||
(selectedComponent.style?.labelPosition === "left" || selectedComponent.style?.labelPosition === "right")
|
(selectedComponent.style?.labelPosition === "left" || selectedComponent.style?.labelPosition === "right")
|
||||||
|
|
@ -495,21 +562,22 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
|
||||||
handleUpdate("style.labelMarginBottom", e.target.value);
|
handleUpdate("style.labelMarginBottom", e.target.value);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
className="h-7 text-xs"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-2">
|
{/* 크기 + 색상 */}
|
||||||
<div className="space-y-1">
|
<div className="flex gap-2">
|
||||||
<Label className="text-xs">크기</Label>
|
<div className="flex-1">
|
||||||
|
<Label className="text-[10px] text-muted-foreground">크기</Label>
|
||||||
<Input
|
<Input
|
||||||
value={selectedComponent.style?.labelFontSize || "12px"}
|
value={selectedComponent.style?.labelFontSize || "12px"}
|
||||||
onChange={(e) => handleUpdate("style.labelFontSize", e.target.value)}
|
onChange={(e) => handleUpdate("style.labelFontSize", e.target.value)}
|
||||||
className="h-6 w-full px-2 py-0 text-xs"
|
className="h-7 text-xs"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="flex-1">
|
||||||
<Label className="text-xs">색상</Label>
|
<Label className="text-[10px] text-muted-foreground">색상</Label>
|
||||||
<ColorPickerWithTransparent
|
<ColorPickerWithTransparent
|
||||||
value={selectedComponent.style?.labelColor}
|
value={selectedComponent.style?.labelColor}
|
||||||
onChange={(value) => handleUpdate("style.labelColor", value)}
|
onChange={(value) => handleUpdate("style.labelColor", value)}
|
||||||
|
|
@ -518,14 +586,15 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-2">
|
{/* 굵기 */}
|
||||||
<div className="space-y-1">
|
<div className="flex items-center justify-between py-1.5">
|
||||||
<Label className="text-xs">굵기</Label>
|
<span className="text-xs text-muted-foreground">굵기</span>
|
||||||
|
<div className="w-[140px]">
|
||||||
<Select
|
<Select
|
||||||
value={selectedComponent.style?.labelFontWeight || "500"}
|
value={selectedComponent.style?.labelFontWeight || "500"}
|
||||||
onValueChange={(value) => handleUpdate("style.labelFontWeight", value)}
|
onValueChange={(value) => handleUpdate("style.labelFontWeight", value)}
|
||||||
>
|
>
|
||||||
<SelectTrigger className="h-6 text-xs">
|
<SelectTrigger className="h-7 text-xs">
|
||||||
<SelectValue />
|
<SelectValue />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -536,84 +605,29 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2 pt-5">
|
</div>
|
||||||
<Checkbox
|
{/* 표시 */}
|
||||||
checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
|
<div className="flex items-center justify-between py-1.5">
|
||||||
onCheckedChange={(checked) => {
|
<span className="text-xs text-muted-foreground">표시</span>
|
||||||
const boolValue = checked === true;
|
<Checkbox
|
||||||
// 🔧 "필수"처럼 직접 경로로 업데이트! (style 객체 전체 덮어쓰기 방지)
|
checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
|
||||||
handleUpdate("style.labelDisplay", boolValue);
|
onCheckedChange={(checked) => {
|
||||||
handleUpdate("labelDisplay", boolValue);
|
const boolValue = checked === true;
|
||||||
// labelText도 설정 (처음 켤 때 라벨 텍스트가 없을 수 있음)
|
handleUpdate("style.labelDisplay", boolValue);
|
||||||
if (boolValue && !selectedComponent.style?.labelText) {
|
handleUpdate("labelDisplay", boolValue);
|
||||||
const labelValue = selectedComponent.label || selectedComponent.componentConfig?.label || "";
|
if (boolValue && !selectedComponent.style?.labelText) {
|
||||||
if (labelValue) {
|
const labelValue = selectedComponent.label || selectedComponent.componentConfig?.label || "";
|
||||||
handleUpdate("style.labelText", labelValue);
|
if (labelValue) {
|
||||||
}
|
handleUpdate("style.labelText", labelValue);
|
||||||
}
|
}
|
||||||
}}
|
}
|
||||||
className="h-4 w-4"
|
}}
|
||||||
/>
|
className="h-4 w-4"
|
||||||
<Label className="text-xs">표시</Label>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 옵션 - 입력 필드에서는 항상 표시, 기타 컴포넌트는 속성이 정의된 경우만 표시 */}
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{(isInputField || widget.required !== undefined) && (() => {
|
|
||||||
const colName = widget.columnName || selectedComponent?.columnName;
|
|
||||||
const colMeta = colName ? currentTable?.columns?.find(
|
|
||||||
(c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase()
|
|
||||||
) : null;
|
|
||||||
const isNotNull = colMeta && ((colMeta as any).isNullable === "NO" || (colMeta as any).isNullable === "N" || (colMeta as any).is_nullable === "NO" || (colMeta as any).is_nullable === "N");
|
|
||||||
return (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
checked={isNotNull || widget.required === true || selectedComponent.componentConfig?.required === true}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
if (isNotNull) return;
|
|
||||||
handleUpdate("required", checked);
|
|
||||||
handleUpdate("componentConfig.required", checked);
|
|
||||||
}}
|
|
||||||
disabled={!!isNotNull}
|
|
||||||
className="h-4 w-4"
|
|
||||||
/>
|
|
||||||
<Label className="text-xs">
|
|
||||||
필수
|
|
||||||
{isNotNull && <span className="text-muted-foreground ml-1">(NOT NULL)</span>}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
{(isInputField || widget.readonly !== undefined) && (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
handleUpdate("readonly", checked);
|
|
||||||
handleUpdate("componentConfig.readonly", checked);
|
|
||||||
}}
|
|
||||||
className="h-4 w-4"
|
|
||||||
/>
|
|
||||||
<Label className="text-xs">읽기전용</Label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* 숨김 옵션 - 모든 컴포넌트에서 표시 */}
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
handleUpdate("hidden", checked);
|
|
||||||
handleUpdate("componentConfig.hidden", checked);
|
|
||||||
}}
|
|
||||||
className="h-4 w-4"
|
|
||||||
/>
|
|
||||||
<Label className="text-xs">숨김</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue