From 967b76591bcd1ece0279d665fec914df8559290a Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 18 Nov 2025 11:08:05 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=8C=EB=A0=88=EC=9D=B4=EC=8A=A4=ED=99=80?=
 =?UTF-8?q?=EB=8D=94=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectedItemsDetailInputConfigPanel.tsx   | 106 +++++++++---------
 1 file changed, 52 insertions(+), 54 deletions(-)

diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
index 22f4296f..a2b2df51 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
@@ -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>