kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

행추가,모달 동시입력기능 구현

This commit is contained in:
kjs 2025-12-30 13:32:49 +09:00
parent c7efe8ec33
commit fd58e9cce2
3 changed files with 639 additions and 563 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

831
frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx
View File

File diff suppressed because it is too large Load Diff

91
frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
View File

@ -2928,54 +2928,74 @@ export function TableSectionSettingsModal({
{/* UI 설정 */}
<div className="space-y-3 border rounded-lg p-4">
<h4 className="text-sm font-medium">UI 설정</h4>
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="text-xs">추가 버튼 동작</Label>
<Select
value={tableConfig.uiConfig?.addButtonType || "search"}
onValueChange={(value) => updateUiConfig({ addButtonType: value as "search" | "addRow" })}
>
<SelectTrigger className="h-8 text-xs mt-1">
<SelectValue placeholder="버튼 동작 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="search">
<div className="flex flex-col">
<span>검색 모달 열기</span>
<span className="text-[10px] text-muted-foreground">기존 데이터에서 선택</span>
</div>
</SelectItem>
<SelectItem value="addRow">
<div className="flex flex-col">
<span>빈 행 추가</span>
<span className="text-[10px] text-muted-foreground">새 데이터 직접 입력</span>
</div>
</SelectItem>
</SelectContent>
</Select>
{/* 버튼 표시 설정 */}
<div className="space-y-2 p-3 bg-muted/30 rounded-lg">
<Label className="text-xs font-medium">표시할 버튼 선택</Label>
<p className="text-[10px] text-muted-foreground mb-2">
두 버튼을 동시에 표시할 수 있습니다.
</p>
<div className="grid grid-cols-2 gap-4">
<div className="flex items-center gap-2">
<Switch
checked={tableConfig.uiConfig?.showSearchButton ?? true}
onCheckedChange={(checked) => updateUiConfig({ showSearchButton: checked })}
className="scale-75"
/>
<div>
<span className="text-xs font-medium">검색 버튼</span>
<p className="text-[10px] text-muted-foreground">기존 데이터에서 선택</p>
</div>
</div>
<div className="flex items-center gap-2">
<Switch
checked={tableConfig.uiConfig?.showAddRowButton ?? false}
onCheckedChange={(checked) => updateUiConfig({ showAddRowButton: checked })}
className="scale-75"
/>
<div>
<span className="text-xs font-medium">행 추가 버튼</span>
<p className="text-[10px] text-muted-foreground">빈 행 직접 입력</p>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
{/* 검색 버튼 텍스트 */}
<div>
<Label className="text-xs">추가 버튼 텍스트</Label>
<Label className="text-xs">검색 버튼 텍스트</Label>
<Input
value={tableConfig.uiConfig?.addButtonText || ""}
onChange={(e) => updateUiConfig({ addButtonText: e.target.value })}
placeholder={tableConfig.uiConfig?.addButtonType === "addRow" ? "항목 추가" : "항목 검색"}
value={tableConfig.uiConfig?.searchButtonText || ""}
onChange={(e) => updateUiConfig({ searchButtonText: e.target.value })}
placeholder="품목 검색"
className="h-8 text-xs mt-1"
disabled={!(tableConfig.uiConfig?.showSearchButton ?? true)}
/>
</div>
{/* 행 추가 버튼 텍스트 */}
<div>
<Label className="text-xs">모달 제목</Label>
<Label className="text-xs">행 추가 버튼 텍스트</Label>
<Input
value={tableConfig.uiConfig?.addRowButtonText || ""}
onChange={(e) => updateUiConfig({ addRowButtonText: e.target.value })}
placeholder="직접 입력"
className="h-8 text-xs mt-1"
disabled={!tableConfig.uiConfig?.showAddRowButton}
/>
</div>
{/* 모달 제목 */}
<div>
<Label className="text-xs">검색 모달 제목</Label>
<Input
value={tableConfig.uiConfig?.modalTitle || ""}
onChange={(e) => updateUiConfig({ modalTitle: e.target.value })}
placeholder="항목 검색 및 선택"
className="h-8 text-xs mt-1"
disabled={tableConfig.uiConfig?.addButtonType === "addRow"}
disabled={!(tableConfig.uiConfig?.showSearchButton ?? true)}
/>
{tableConfig.uiConfig?.addButtonType === "addRow" && (
<p className="text-[10px] text-muted-foreground mt-0.5">빈 행 추가 모드에서는 모달이 열리지 않습니다</p>
)}
</div>
{/* 테이블 최대 높이 */}
<div>
<Label className="text-xs">테이블 최대 높이</Label>
<Input
@ -2985,13 +3005,14 @@ export function TableSectionSettingsModal({
className="h-8 text-xs mt-1"
/>
</div>
{/* 다중 선택 허용 */}
<div className="flex items-end">
<label className="flex items-center gap-2 text-xs cursor-pointer">
<Switch
checked={tableConfig.uiConfig?.multiSelect ?? true}
onCheckedChange={(checked) => updateUiConfig({ multiSelect: checked })}
className="scale-75"
disabled={tableConfig.uiConfig?.addButtonType === "addRow"}
disabled={!(tableConfig.uiConfig?.showSearchButton ?? true)}
/>
<span>다중 선택 허용</span>
</label>

12
frontend/lib/registry/components/universal-form-modal/types.ts
View File

@ -253,15 +253,19 @@ export interface TableSectionConfig {
// 6. UI 설정
uiConfig?: {
addButtonText?: string; // 추가 버튼 텍스트 (기본: "품목 검색")
modalTitle?: string; // 모달 제목 (기본: "항목 검색 및 선택")
multiSelect?: boolean; // 다중 선택 허용 (기본: true)
maxHeight?: string; // 테이블 최대 높이 (기본: "400px")
// 추가 버튼 타입
// - search: 검색 모달 열기 (기본값) - 기존 데이터에서 선택
// - addRow: 빈 행 직접 추가 - 새 데이터 직접 입력
// 버튼 표시 설정 (동시 표시 가능)
showSearchButton?: boolean; // 검색 버튼 표시 (기본: true)
showAddRowButton?: boolean; // 행 추가 버튼 표시 (기본: false)
searchButtonText?: string; // 검색 버튼 텍스트 (기본: "품목 검색")
addRowButtonText?: string; // 행 추가 버튼 텍스트 (기본: "직접 입력")
// 레거시 호환용 (deprecated)
addButtonType?: "search" | "addRow";
addButtonText?: string;
};
// 7. 조건부 테이블 설정 (고급)