475 lines
20 KiB
TypeScript
475 lines
20 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useMemo } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
import { Card, CardContent } from "@/components/ui/card";
|
||
|
|
import { Plus, X } from "lucide-react";
|
||
|
|
import { SelectedItemsDetailInputConfig, AdditionalFieldDefinition } from "./types";
|
||
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
|
||
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||
|
|
import { Check, ChevronsUpDown } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
export interface SelectedItemsDetailInputConfigPanelProps {
|
||
|
|
config: SelectedItemsDetailInputConfig;
|
||
|
|
onChange: (config: Partial<SelectedItemsDetailInputConfig>) => void;
|
||
|
|
tableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>;
|
||
|
|
allTables?: Array<{ tableName: string; displayName?: string }>;
|
||
|
|
onTableChange?: (tableName: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* SelectedItemsDetailInput 설정 패널
|
||
|
|
* 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
|
||
|
|
*/
|
||
|
|
export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailInputConfigPanelProps> = ({
|
||
|
|
config,
|
||
|
|
onChange,
|
||
|
|
tableColumns = [],
|
||
|
|
allTables = [],
|
||
|
|
onTableChange,
|
||
|
|
}) => {
|
||
|
|
const [localFields, setLocalFields] = useState<AdditionalFieldDefinition[]>(config.additionalFields || []);
|
||
|
|
const [displayColumns, setDisplayColumns] = useState<string[]>(config.displayColumns || []);
|
||
|
|
const [fieldPopoverOpen, setFieldPopoverOpen] = useState<Record<number, boolean>>({});
|
||
|
|
|
||
|
|
const handleChange = (key: keyof SelectedItemsDetailInputConfig, value: any) => {
|
||
|
|
onChange({ [key]: value });
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleFieldsChange = (fields: AdditionalFieldDefinition[]) => {
|
||
|
|
setLocalFields(fields);
|
||
|
|
handleChange("additionalFields", fields);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDisplayColumnsChange = (columns: string[]) => {
|
||
|
|
setDisplayColumns(columns);
|
||
|
|
handleChange("displayColumns", columns);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 필드 추가
|
||
|
|
const addField = () => {
|
||
|
|
const newField: AdditionalFieldDefinition = {
|
||
|
|
name: `field_${localFields.length + 1}`,
|
||
|
|
label: `필드 ${localFields.length + 1}`,
|
||
|
|
type: "text",
|
||
|
|
};
|
||
|
|
handleFieldsChange([...localFields, newField]);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 필드 제거
|
||
|
|
const removeField = (index: number) => {
|
||
|
|
handleFieldsChange(localFields.filter((_, i) => i !== index));
|
||
|
|
};
|
||
|
|
|
||
|
|
// 필드 수정
|
||
|
|
const updateField = (index: number, updates: Partial<AdditionalFieldDefinition>) => {
|
||
|
|
const newFields = [...localFields];
|
||
|
|
newFields[index] = { ...newFields[index], ...updates };
|
||
|
|
handleFieldsChange(newFields);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 표시 컬럼 추가
|
||
|
|
const addDisplayColumn = (columnName: string) => {
|
||
|
|
if (!displayColumns.includes(columnName)) {
|
||
|
|
handleDisplayColumnsChange([...displayColumns, columnName]);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 표시 컬럼 제거
|
||
|
|
const removeDisplayColumn = (columnName: string) => {
|
||
|
|
handleDisplayColumnsChange(displayColumns.filter((col) => col !== columnName));
|
||
|
|
};
|
||
|
|
|
||
|
|
// 사용되지 않은 컬럼 목록
|
||
|
|
const availableColumns = useMemo(() => {
|
||
|
|
const usedColumns = new Set([...displayColumns, ...localFields.map((f) => f.name)]);
|
||
|
|
return tableColumns.filter((col) => !usedColumns.has(col.columnName));
|
||
|
|
}, [tableColumns, displayColumns, localFields]);
|
||
|
|
|
||
|
|
// 테이블 선택 Combobox 상태
|
||
|
|
const [tableSelectOpen, setTableSelectOpen] = useState(false);
|
||
|
|
const [tableSearchValue, setTableSearchValue] = useState("");
|
||
|
|
|
||
|
|
// 필터링된 테이블 목록
|
||
|
|
const filteredTables = useMemo(() => {
|
||
|
|
if (!tableSearchValue) return allTables;
|
||
|
|
const searchLower = tableSearchValue.toLowerCase();
|
||
|
|
return allTables.filter(
|
||
|
|
(table) =>
|
||
|
|
table.tableName.toLowerCase().includes(searchLower) || table.displayName?.toLowerCase().includes(searchLower),
|
||
|
|
);
|
||
|
|
}, [allTables, tableSearchValue]);
|
||
|
|
|
||
|
|
// 선택된 테이블 표시명
|
||
|
|
const selectedTableLabel = useMemo(() => {
|
||
|
|
if (!config.targetTable) return "테이블을 선택하세요";
|
||
|
|
const table = allTables.find((t) => t.tableName === config.targetTable);
|
||
|
|
return table ? table.displayName || table.tableName : config.targetTable;
|
||
|
|
}, [config.targetTable, allTables]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* 데이터 소스 ID */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-semibold sm:text-sm">데이터 소스 ID</Label>
|
||
|
|
<Input
|
||
|
|
value={config.dataSourceId || ""}
|
||
|
|
onChange={(e) => handleChange("dataSourceId", e.target.value)}
|
||
|
|
placeholder="table-list-123"
|
||
|
|
className="h-7 text-xs sm:h-8 sm:text-sm"
|
||
|
|
/>
|
||
|
|
<p className="text-[10px] text-gray-500 sm:text-xs">
|
||
|
|
💡 이전 모달에서 데이터를 전달하는 컴포넌트 ID (보통 TableList의 ID)
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 저장 대상 테이블 */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-semibold sm:text-sm">저장 대상 테이블</Label>
|
||
|
|
<Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={tableSelectOpen}
|
||
|
|
className="h-7 w-full justify-between text-xs sm:h-8 sm:text-sm"
|
||
|
|
>
|
||
|
|
{selectedTableLabel}
|
||
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-full p-0" align="start">
|
||
|
|
<Command>
|
||
|
|
<CommandInput
|
||
|
|
placeholder="테이블 검색..."
|
||
|
|
value={tableSearchValue}
|
||
|
|
onValueChange={setTableSearchValue}
|
||
|
|
className="text-xs sm:text-sm"
|
||
|
|
/>
|
||
|
|
<CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
|
||
|
|
<CommandGroup className="max-h-48 overflow-auto sm:max-h-64">
|
||
|
|
{filteredTables.map((table) => (
|
||
|
|
<CommandItem
|
||
|
|
key={table.tableName}
|
||
|
|
value={table.tableName}
|
||
|
|
onSelect={(currentValue) => {
|
||
|
|
handleChange("targetTable", currentValue);
|
||
|
|
setTableSelectOpen(false);
|
||
|
|
setTableSearchValue("");
|
||
|
|
if (onTableChange) {
|
||
|
|
onTableChange(currentValue);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="text-xs sm:text-sm"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-2 h-3 w-3 sm:h-4 sm:w-4",
|
||
|
|
config.targetTable === table.tableName ? "opacity-100" : "opacity-0",
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
{table.displayName || table.tableName}
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
<p className="text-[10px] text-gray-500 sm:text-xs">최종 데이터를 저장할 테이블</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 표시할 원본 데이터 컬럼 */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-semibold sm:text-sm">표시할 원본 데이터 컬럼</Label>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{displayColumns.map((colName, index) => (
|
||
|
|
<div key={index} className="flex items-center gap-2">
|
||
|
|
<Input value={colName} readOnly className="h-7 flex-1 text-xs sm:h-8 sm:text-sm" />
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
onClick={() => removeDisplayColumn(colName)}
|
||
|
|
className="h-6 w-6 text-red-500 hover:bg-red-50 sm:h-7 sm:w-7"
|
||
|
|
>
|
||
|
|
<X className="h-3 w-3 sm:h-4 sm:w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
<Popover>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="h-7 w-full border-dashed text-xs sm:text-sm"
|
||
|
|
>
|
||
|
|
<Plus className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
|
||
|
|
컬럼 추가
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-full p-0" align="start">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
|
||
|
|
<CommandEmpty className="text-xs sm:text-sm">사용 가능한 컬럼이 없습니다.</CommandEmpty>
|
||
|
|
<CommandGroup className="max-h-48 overflow-auto sm:max-h-64">
|
||
|
|
{availableColumns.map((column) => (
|
||
|
|
<CommandItem
|
||
|
|
key={column.columnName}
|
||
|
|
value={column.columnName}
|
||
|
|
onSelect={() => addDisplayColumn(column.columnName)}
|
||
|
|
className="text-xs sm:text-sm"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<div className="font-medium">{column.columnLabel || column.columnName}</div>
|
||
|
|
{column.dataType && <div className="text-[10px] text-gray-500">{column.dataType}</div>}
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
<p className="text-[10px] text-gray-500 sm:text-xs">
|
||
|
|
전달받은 원본 데이터 중 화면에 표시할 컬럼 (예: 품목코드, 품목명)
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 추가 입력 필드 정의 */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-semibold sm:text-sm">추가 입력 필드 정의</Label>
|
||
|
|
|
||
|
|
{localFields.map((field, index) => (
|
||
|
|
<Card key={index} className="border-2">
|
||
|
|
<CardContent className="space-y-2 pt-3 sm:space-y-3 sm:pt-4">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="text-xs font-semibold text-gray-700 sm:text-sm">필드 {index + 1}</span>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
onClick={() => removeField(index)}
|
||
|
|
className="h-5 w-5 text-red-500 hover:bg-red-50 sm:h-6 sm:w-6"
|
||
|
|
>
|
||
|
|
<X className="h-2 w-2 sm:h-3 sm:w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-2 sm:gap-3">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px] sm:text-xs">필드명 (컬럼)</Label>
|
||
|
|
<Popover
|
||
|
|
open={fieldPopoverOpen[index] || false}
|
||
|
|
onOpenChange={(open) => setFieldPopoverOpen({ ...fieldPopoverOpen, [index]: open })}
|
||
|
|
>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
className="h-6 w-full justify-between text-[10px] sm:h-7 sm:text-xs"
|
||
|
|
>
|
||
|
|
{field.name || "컬럼 선택"}
|
||
|
|
<ChevronsUpDown className="ml-1 h-2 w-2 shrink-0 opacity-50 sm:h-3 sm:w-3" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[180px] p-0 sm:w-[200px]">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="컬럼 검색..." className="h-6 text-[10px] sm:h-7 sm:text-xs" />
|
||
|
|
<CommandEmpty className="text-[10px] sm:text-xs">사용 가능한 컬럼이 없습니다.</CommandEmpty>
|
||
|
|
<CommandGroup className="max-h-[150px] overflow-auto sm:max-h-[200px]">
|
||
|
|
{availableColumns.map((column) => (
|
||
|
|
<CommandItem
|
||
|
|
key={column.columnName}
|
||
|
|
value={column.columnName}
|
||
|
|
onSelect={() => {
|
||
|
|
updateField(index, {
|
||
|
|
name: column.columnName,
|
||
|
|
label: column.columnLabel || column.columnName,
|
||
|
|
});
|
||
|
|
setFieldPopoverOpen({ ...fieldPopoverOpen, [index]: false });
|
||
|
|
}}
|
||
|
|
className="text-[10px] sm:text-xs"
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-1 h-2 w-2 sm:mr-2 sm:h-3 sm:w-3",
|
||
|
|
field.name === column.columnName ? "opacity-100" : "opacity-0",
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<div className="font-medium">{column.columnLabel}</div>
|
||
|
|
<div className="text-[9px] text-gray-500">{column.columnName}</div>
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px] sm:text-xs">라벨</Label>
|
||
|
|
<Input
|
||
|
|
value={field.label}
|
||
|
|
onChange={(e) => updateField(index, { label: e.target.value })}
|
||
|
|
placeholder="필드 라벨"
|
||
|
|
className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-2 sm:gap-3">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px] sm:text-xs">타입</Label>
|
||
|
|
<Select
|
||
|
|
value={field.type}
|
||
|
|
onValueChange={(value) =>
|
||
|
|
updateField(index, { type: value as AdditionalFieldDefinition["type"] })
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-6 w-full text-[10px] sm:h-7 sm:text-xs">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="text" className="text-[10px] sm:text-xs">
|
||
|
|
텍스트
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="number" className="text-[10px] sm:text-xs">
|
||
|
|
숫자
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="date" className="text-[10px] sm:text-xs">
|
||
|
|
날짜
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="select" className="text-[10px] sm:text-xs">
|
||
|
|
선택박스
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="checkbox" className="text-[10px] sm:text-xs">
|
||
|
|
체크박스
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="textarea" className="text-[10px] sm:text-xs">
|
||
|
|
텍스트영역
|
||
|
|
</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label className="text-[10px] sm:text-xs">Placeholder</Label>
|
||
|
|
<Input
|
||
|
|
value={field.placeholder || ""}
|
||
|
|
onChange={(e) => updateField(index, { placeholder: e.target.value })}
|
||
|
|
placeholder="입력 안내"
|
||
|
|
className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Checkbox
|
||
|
|
id={`required-${index}`}
|
||
|
|
checked={field.required ?? false}
|
||
|
|
onCheckedChange={(checked) => updateField(index, { required: checked as boolean })}
|
||
|
|
/>
|
||
|
|
<Label htmlFor={`required-${index}`} className="cursor-pointer text-[10px] font-normal sm:text-xs">
|
||
|
|
필수 입력
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
onClick={addField}
|
||
|
|
className="h-7 w-full border-dashed text-xs sm:text-sm"
|
||
|
|
>
|
||
|
|
<Plus className="mr-1 h-3 w-3 sm:mr-2 sm:h-4 sm:w-4" />
|
||
|
|
필드 추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 레이아웃 설정 */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs font-semibold sm:text-sm">레이아웃</Label>
|
||
|
|
<Select
|
||
|
|
value={config.layout || "grid"}
|
||
|
|
onValueChange={(value) => handleChange("layout", value as "grid" | "card")}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-7 text-xs sm:h-8 sm:text-sm">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="grid" className="text-xs sm:text-sm">
|
||
|
|
테이블 형식 (Grid)
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="card" className="text-xs sm:text-sm">
|
||
|
|
카드 형식 (Card)
|
||
|
|
</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<p className="text-[10px] text-muted-foreground sm:text-xs">
|
||
|
|
{config.layout === "grid" ? "행 단위로 데이터를 표시합니다" : "각 항목을 카드로 표시합니다"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 옵션 */}
|
||
|
|
<div className="space-y-2 rounded-lg border p-3 sm:p-4">
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Checkbox
|
||
|
|
id="show-index"
|
||
|
|
checked={config.showIndex ?? true}
|
||
|
|
onCheckedChange={(checked) => handleChange("showIndex", checked as boolean)}
|
||
|
|
/>
|
||
|
|
<Label htmlFor="show-index" className="cursor-pointer text-[10px] font-normal sm:text-xs">
|
||
|
|
항목 번호 표시
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Checkbox
|
||
|
|
id="allow-remove"
|
||
|
|
checked={config.allowRemove ?? false}
|
||
|
|
onCheckedChange={(checked) => handleChange("allowRemove", checked as boolean)}
|
||
|
|
/>
|
||
|
|
<Label htmlFor="allow-remove" className="cursor-pointer text-[10px] font-normal sm:text-xs">
|
||
|
|
항목 삭제 허용
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Checkbox
|
||
|
|
id="disabled"
|
||
|
|
checked={config.disabled ?? false}
|
||
|
|
onCheckedChange={(checked) => handleChange("disabled", checked as boolean)}
|
||
|
|
/>
|
||
|
|
<Label htmlFor="disabled" className="cursor-pointer text-[10px] font-normal sm:text-xs">
|
||
|
|
비활성화 (읽기 전용)
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 사용 예시 */}
|
||
|
|
<div className="rounded-lg bg-blue-50 p-2 text-xs sm:p-3 sm:text-sm">
|
||
|
|
<p className="mb-1 font-medium text-blue-900">💡 사용 예시</p>
|
||
|
|
<ul className="space-y-1 text-[10px] text-blue-700 sm:text-xs">
|
||
|
|
<li>• 품목 선택 모달 → 다음 버튼 → 거래처별 가격 입력</li>
|
||
|
|
<li>• 사용자 선택 모달 → 다음 버튼 → 권한 및 부서 할당</li>
|
||
|
|
<li>• 제품 선택 모달 → 다음 버튼 → 수량 및 납기일 입력</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
SelectedItemsDetailInputConfigPanel.displayName = "SelectedItemsDetailInputConfigPanel";
|