From 2976cad0a5f92481f1c0b902d7af7d10fbe75fa7 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 17 Mar 2026 16:54:56 +0900
Subject: [PATCH] feat: enhance item routing modal configuration

- Added new properties for configuring the item addition modal's maximum width and list height in the ItemRoutingConfig interface.
- Updated the ColumnEditor component to include additional content for modal size settings, allowing users to specify width and height in pixels.
- Adjusted the ItemRoutingComponent to apply the new configuration settings for the modal's dimensions, improving the user experience by providing more control over modal appearance.

These changes aim to enhance the flexibility and usability of the item routing modal within the application.
---
 .../V2ItemRoutingConfigPanel.tsx              | 29 +++++++++++++++++--
 .../v2-item-routing/ItemRoutingComponent.tsx  |  8 ++---
 .../components/v2-item-routing/types.ts       |  4 +++
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx b/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
index 851d90fe..6b85429b 100644
--- a/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
@@ -180,12 +180,13 @@ function ScreenCombobox({ value, onChange }: { value?: number; onChange: (v?: nu
 }
 
 // ─── 컬럼 편집 카드 (품목/모달/공정 공용) ───
-function ColumnEditor({ columns, onChange, tableName, title, icon }: {
+function ColumnEditor({ columns, onChange, tableName, title, icon, extraContent }: {
   columns: ColumnDef[];
   onChange: (cols: ColumnDef[]) => void;
   tableName: string;
   title: string;
   icon: React.ReactNode;
+  extraContent?: React.ReactNode;
 }) {
   const [open, setOpen] = useState(false);
 
@@ -263,6 +264,7 @@ function ColumnEditor({ columns, onChange, tableName, title, icon }: {
           <Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addColumn}>
             <Plus className="h-3 w-3" /> 컬럼 추가
           </Button>
+          {extraContent}
         </div>
       </CollapsibleContent>
     </Collapsible>
@@ -378,13 +380,34 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
         icon={<Eye className="h-4 w-4 text-muted-foreground" />}
       />
 
-      {/* ─── 모달 표시 컬럼 (등록 모드에서만 의미 있지만 항상 설정 가능) ─── */}
+      {/* ─── 품목 추가 모달 (컬럼 + 크기 설정) ─── */}
       <ColumnEditor
         columns={config.modalDisplayColumns || []}
         onChange={(cols) => update({ modalDisplayColumns: cols })}
         tableName={config.dataSource.itemTable}
-        title="품목 추가 모달 컬럼"
+        title="품목 추가 모달"
         icon={<Columns className="h-4 w-4 text-muted-foreground" />}
+        extraContent={
+          <div className="mt-3 space-y-2 border-t pt-3">
+            <span className="text-[10px] font-medium text-muted-foreground">모달 크기 (px)</span>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-0.5">
+                <span className="text-[10px] text-muted-foreground">가로 (너비)</span>
+                <Input type="number" min={300} max={1600}
+                  value={parseInt(config.addModalMaxWidth || "600")}
+                  onChange={(e) => update({ addModalMaxWidth: `${e.target.value}px` })}
+                  placeholder="600" className="h-7 text-xs" />
+              </div>
+              <div className="space-y-0.5">
+                <span className="text-[10px] text-muted-foreground">세로 (목록 높이)</span>
+                <Input type="number" min={150} max={900}
+                  value={parseInt(config.addModalListMaxHeight || "340")}
+                  onChange={(e) => update({ addModalListMaxHeight: `${e.target.value}px` })}
+                  placeholder="340" className="h-7 text-xs" />
+              </div>
+            </div>
+          </div>
+        }
       />
 
       {/* ─── 품목 필터 조건 ─── */}
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx b/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx
index d0144d0b..53717003 100644
--- a/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx
+++ b/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx
@@ -458,7 +458,7 @@ export function ItemRoutingComponent({
 
       {/* ════ 품목 추가 다이얼로그 (테이블 형태 + 검색) ════ */}
       <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogContent className="max-w-[95vw]" style={{ maxWidth: `min(95vw, ${config.addModalMaxWidth || "600px"})` }}>
           <DialogHeader>
             <DialogTitle className="text-base sm:text-lg">품목 추가</DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
@@ -481,14 +481,14 @@ export function ItemRoutingComponent({
             </Button>
           </div>
 
-          <div className="max-h-[340px] overflow-auto rounded-md border">
+          <div className="overflow-auto rounded-md border" style={{ maxHeight: config.addModalListMaxHeight || "340px" }}>
             {allItems.length === 0 ? (
               <div className="flex items-center justify-center py-8">
                 <p className="text-xs text-muted-foreground">품목이 없습니다</p>
               </div>
             ) : (
-              <Table>
-                <TableHeader>
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10 bg-background shadow-[0_1px_0_0_hsl(var(--border))]">
                   <TableRow>
                     <TableHead className="w-[40px] text-center text-[11px] py-1.5" />
                     {modalDisplayCols.map((col) => (
diff --git a/frontend/lib/registry/components/v2-item-routing/types.ts b/frontend/lib/registry/components/v2-item-routing/types.ts
index 08fe73c2..23a3a39b 100644
--- a/frontend/lib/registry/components/v2-item-routing/types.ts
+++ b/frontend/lib/registry/components/v2-item-routing/types.ts
@@ -64,6 +64,10 @@ export interface ItemRoutingConfig {
   modalDisplayColumns?: ColumnDef[];
   /** 품목 조회 시 사전 필터 조건 */
   itemFilterConditions?: ItemFilterCondition[];
+  /** 품목 추가 모달 최대 너비 (px 또는 vw, 기본: 600px) */
+  addModalMaxWidth?: string;
+  /** 품목 추가 모달 목록 최대 높이 (px, 기본: 340px) */
+  addModalListMaxHeight?: string;
 }
 
 // 컴포넌트 Props