플레이스홀더 변경

This commit is contained in:
kjs 2025-11-18 11:08:05 +09:00
parent 4cd27639e6
commit 967b76591b
1 changed files with 52 additions and 54 deletions

View File

@ -715,31 +715,33 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
open={expandedDisplayItems[group.id] ?? false}
onOpenChange={(open) => setExpandedDisplayItems(prev => ({ ...prev, [group.id]: open }))}
>
<div className="space-y-2 rounded-lg border-2 border-dashed border-primary/30 bg-primary/5 p-2">
<div className="flex items-center justify-between">
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="h-auto p-0 hover:bg-transparent">
<div className="flex items-center gap-1">
{expandedDisplayItems[group.id] ? (
<ChevronDown className="h-3 w-3" />
) : (
<ChevronRight className="h-3 w-3" />
)}
<Label className="text-[10px] font-semibold sm:text-xs cursor-pointer">
({(group.displayItems || []).length})
</Label>
</div>
</Button>
</CollapsibleTrigger>
<div className="flex gap-1">
<div className="rounded-lg border-2 border-dashed border-primary/30 bg-primary/5 p-2">
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="h-auto w-full justify-start p-1 hover:bg-transparent">
<div className="flex items-center gap-1">
{expandedDisplayItems[group.id] ? (
<ChevronDown className="h-3 w-3" />
) : (
<ChevronRight className="h-3 w-3" />
)}
<Label className="text-[10px] font-semibold sm:text-xs cursor-pointer">
({(group.displayItems || []).length})
</Label>
</div>
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 mt-2">
{/* 추가 버튼들 */}
<div className="flex gap-1 flex-wrap">
<Button
type="button"
size="sm"
variant="outline"
onClick={() => addDisplayItemToGroup(group.id, "icon")}
className="h-5 px-1 text-[9px] sm:h-6 sm:px-2 sm:text-[10px]"
className="h-5 px-1.5 text-[8px] sm:h-6 sm:px-2 sm:text-[10px]"
>
<Plus className="mr-0.5 h-2 w-2 sm:mr-1 sm:h-3 sm:w-3" />
<Plus className="mr-0.5 h-2.5 w-2.5 sm:mr-1 sm:h-3 sm:w-3" />
</Button>
<Button
@ -747,9 +749,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
size="sm"
variant="outline"
onClick={() => addDisplayItemToGroup(group.id, "field")}
className="h-5 px-1 text-[9px] sm:h-6 sm:px-2 sm:text-[10px]"
className="h-5 px-1.5 text-[8px] sm:h-6 sm:px-2 sm:text-[10px]"
>
<Plus className="mr-0.5 h-2 w-2 sm:mr-1 sm:h-3 sm:w-3" />
<Plus className="mr-0.5 h-2.5 w-2.5 sm:mr-1 sm:h-3 sm:w-3" />
</Button>
<Button
@ -757,15 +759,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
size="sm"
variant="outline"
onClick={() => addDisplayItemToGroup(group.id, "text")}
className="h-5 px-1 text-[9px] sm:h-6 sm:px-2 sm:text-[10px]"
className="h-5 px-1.5 text-[8px] sm:h-6 sm:px-2 sm:text-[10px]"
>
<Plus className="mr-0.5 h-2 w-2 sm:mr-1 sm:h-3 sm:w-3" />
<Plus className="mr-0.5 h-2.5 w-2.5 sm:mr-1 sm:h-3 sm:w-3" />
</Button>
</div>
</div>
<CollapsibleContent className="space-y-2">
<p className="text-[9px] text-muted-foreground sm:text-[10px]">
</p>
@ -825,7 +825,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
value={item.fieldName || ""}
onValueChange={(value) => updateDisplayItemInGroup(group.id, itemIndex, { fieldName: value })}
>
<SelectTrigger className="h-6 text-[9px] sm:text-[10px]">
<SelectTrigger className="h-6 w-full text-[9px] sm:text-[10px]">
<SelectValue placeholder="필드 선택" />
</SelectTrigger>
<SelectContent>
@ -841,8 +841,8 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
<Input
value={item.label || ""}
onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { label: e.target.value })}
placeholder="거래처:"
className="h-6 text-[9px] sm:text-[10px]"
placeholder="라벨 (예: 거래처:)"
className="h-6 w-full text-[9px] sm:text-[10px]"
/>
{/* 표시 형식 */}
@ -850,7 +850,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
value={item.format || "text"}
onValueChange={(value) => updateDisplayItemInGroup(group.id, itemIndex, { format: value as DisplayFieldFormat })}
>
<SelectTrigger className="h-6 text-[9px] sm:text-[10px]">
<SelectTrigger className="h-6 w-full text-[9px] sm:text-[10px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
@ -863,31 +863,29 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
</Select>
{/* 빈 값 처리 */}
<div className="grid grid-cols-2 gap-1">
<Select
value={item.emptyBehavior || "default"}
onValueChange={(value) => updateDisplayItemInGroup(group.id, itemIndex, { emptyBehavior: value as EmptyBehavior })}
>
<SelectTrigger className="h-6 text-[9px] sm:text-[10px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="hide" className="text-[9px] sm:text-[10px]"></SelectItem>
<SelectItem value="default" className="text-[9px] sm:text-[10px]"></SelectItem>
<SelectItem value="blank" className="text-[9px] sm:text-[10px]"></SelectItem>
</SelectContent>
</Select>
<Select
value={item.emptyBehavior || "default"}
onValueChange={(value) => updateDisplayItemInGroup(group.id, itemIndex, { emptyBehavior: value as EmptyBehavior })}
>
<SelectTrigger className="h-6 w-full text-[9px] sm:text-[10px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="hide" className="text-[9px] sm:text-[10px]"></SelectItem>
<SelectItem value="default" className="text-[9px] sm:text-[10px]"></SelectItem>
<SelectItem value="blank" className="text-[9px] sm:text-[10px]"></SelectItem>
</SelectContent>
</Select>
{/* 기본값 */}
{item.emptyBehavior === "default" && (
<Input
value={item.defaultValue || ""}
onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: e.target.value })}
placeholder="미입력"
className="h-6 text-[9px] sm:text-[10px]"
/>
)}
</div>
{/* 기본값 */}
{item.emptyBehavior === "default" && (
<Input
value={item.defaultValue || ""}
onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: e.target.value })}
placeholder="미입력"
className="h-6 w-full text-[9px] sm:text-[10px]"
/>
)}
</div>
)}
</div>