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.
This commit is contained in:
kjs 2026-03-17 16:54:56 +09:00
parent 6d0c52e17a
commit 2976cad0a5
3 changed files with 34 additions and 7 deletions

View File

@ -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[]; columns: ColumnDef[];
onChange: (cols: ColumnDef[]) => void; onChange: (cols: ColumnDef[]) => void;
tableName: string; tableName: string;
title: string; title: string;
icon: React.ReactNode; icon: React.ReactNode;
extraContent?: React.ReactNode;
}) { }) {
const [open, setOpen] = useState(false); 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}> <Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addColumn}>
<Plus className="h-3 w-3" /> <Plus className="h-3 w-3" />
</Button> </Button>
{extraContent}
</div> </div>
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
@ -378,13 +380,34 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
icon={<Eye className="h-4 w-4 text-muted-foreground" />} icon={<Eye className="h-4 w-4 text-muted-foreground" />}
/> />
{/* ─── 모달 표시 컬럼 (등록 모드에서만 의미 있지만 항상 설정 가능) ─── */} {/* ─── 품목 추가 모달 (컬럼 + 크기 설정) ─── */}
<ColumnEditor <ColumnEditor
columns={config.modalDisplayColumns || []} columns={config.modalDisplayColumns || []}
onChange={(cols) => update({ modalDisplayColumns: cols })} onChange={(cols) => update({ modalDisplayColumns: cols })}
tableName={config.dataSource.itemTable} tableName={config.dataSource.itemTable}
title="품목 추가 모달 컬럼" title="품목 추가 모달"
icon={<Columns className="h-4 w-4 text-muted-foreground" />} 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>
}
/> />
{/* ─── 품목 필터 조건 ─── */} {/* ─── 품목 필터 조건 ─── */}

View File

@ -458,7 +458,7 @@ export function ItemRoutingComponent({
{/* ════ 품목 추가 다이얼로그 (테이블 형태 + 검색) ════ */} {/* ════ 품목 추가 다이얼로그 (테이블 형태 + 검색) ════ */}
<Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}> <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> <DialogHeader>
<DialogTitle className="text-base sm:text-lg"> </DialogTitle> <DialogTitle className="text-base sm:text-lg"> </DialogTitle>
<DialogDescription className="text-xs sm:text-sm"> <DialogDescription className="text-xs sm:text-sm">
@ -481,14 +481,14 @@ export function ItemRoutingComponent({
</Button> </Button>
</div> </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 ? ( {allItems.length === 0 ? (
<div className="flex items-center justify-center py-8"> <div className="flex items-center justify-center py-8">
<p className="text-xs text-muted-foreground"> </p> <p className="text-xs text-muted-foreground"> </p>
</div> </div>
) : ( ) : (
<Table> <Table noWrapper>
<TableHeader> <TableHeader className="sticky top-0 z-10 bg-background shadow-[0_1px_0_0_hsl(var(--border))]">
<TableRow> <TableRow>
<TableHead className="w-[40px] text-center text-[11px] py-1.5" /> <TableHead className="w-[40px] text-center text-[11px] py-1.5" />
{modalDisplayCols.map((col) => ( {modalDisplayCols.map((col) => (

View File

@ -64,6 +64,10 @@ export interface ItemRoutingConfig {
modalDisplayColumns?: ColumnDef[]; modalDisplayColumns?: ColumnDef[];
/** 품목 조회 시 사전 필터 조건 */ /** 품목 조회 시 사전 필터 조건 */
itemFilterConditions?: ItemFilterCondition[]; itemFilterConditions?: ItemFilterCondition[];
/** 품목 추가 모달 최대 너비 (px 또는 vw, 기본: 600px) */
addModalMaxWidth?: string;
/** 품목 추가 모달 목록 최대 높이 (px, 기본: 340px) */
addModalListMaxHeight?: string;
} }
// 컴포넌트 Props // 컴포넌트 Props