fix(modal-repeater-table): 품목 추가 시 UI 즉시 반영되지 않는 버그 수정
- value 상수를 localValue useState로 변경하여 내부 상태 관리 - useEffect로 외부 값(formData, propValue) 변경 시 동기화 - handleChange에서 setLocalValue 호출하여 즉각적인 UI 업데이트 - RepeaterTable, ItemSelectionModal 등 모든 참조를 localValue로 변경
This commit is contained in:
+90
@@ -467,6 +467,96 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
||||
|
||||
{config.saveConfig.multiRowSave?.enabled && (
|
||||
<div className="space-y-2 pt-2 border-t">
|
||||
{/* 공통 필드 선택 */}
|
||||
<div>
|
||||
<Label className="text-[10px]">공통 필드 (모든 행에 저장)</Label>
|
||||
<div className="mt-1 max-h-32 overflow-y-auto border rounded p-1 space-y-1">
|
||||
{config.sections
|
||||
.filter((s) => !s.repeatable)
|
||||
.flatMap((s) => s.fields)
|
||||
.map((field) => (
|
||||
<label key={field.id} className="flex items-center gap-1 text-[10px] cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.saveConfig.multiRowSave?.commonFields?.includes(field.columnName) || false}
|
||||
onChange={(e) => {
|
||||
const currentFields = config.saveConfig.multiRowSave?.commonFields || [];
|
||||
const newFields = e.target.checked
|
||||
? [...currentFields, field.columnName]
|
||||
: currentFields.filter((f) => f !== field.columnName);
|
||||
updateSaveConfig({
|
||||
multiRowSave: { ...config.saveConfig.multiRowSave, commonFields: newFields },
|
||||
});
|
||||
}}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
{field.label} ({field.columnName})
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<HelpText>메인 행과 겸직 행 모두에 저장될 필드</HelpText>
|
||||
</div>
|
||||
|
||||
{/* 메인 섹션 필드 선택 */}
|
||||
<div>
|
||||
<Label className="text-[10px]">메인 섹션 필드 (메인 행에만 저장)</Label>
|
||||
<div className="mt-1 max-h-32 overflow-y-auto border rounded p-1 space-y-1">
|
||||
{config.sections
|
||||
.filter((s) => !s.repeatable)
|
||||
.flatMap((s) => s.fields)
|
||||
.filter((field) => !config.saveConfig.multiRowSave?.commonFields?.includes(field.columnName))
|
||||
.map((field) => (
|
||||
<label key={field.id} className="flex items-center gap-1 text-[10px] cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.saveConfig.multiRowSave?.mainSectionFields?.includes(field.columnName) || false}
|
||||
onChange={(e) => {
|
||||
const currentFields = config.saveConfig.multiRowSave?.mainSectionFields || [];
|
||||
const newFields = e.target.checked
|
||||
? [...currentFields, field.columnName]
|
||||
: currentFields.filter((f) => f !== field.columnName);
|
||||
updateSaveConfig({
|
||||
multiRowSave: { ...config.saveConfig.multiRowSave, mainSectionFields: newFields },
|
||||
});
|
||||
}}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
{field.label} ({field.columnName})
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<HelpText>메인 행에만 저장될 필드 (공통 필드 제외)</HelpText>
|
||||
</div>
|
||||
|
||||
{/* 반복 섹션 선택 */}
|
||||
<div>
|
||||
<Label className="text-[10px]">반복 섹션</Label>
|
||||
<Select
|
||||
value={config.saveConfig.multiRowSave?.repeatSectionId || ""}
|
||||
onValueChange={(value) =>
|
||||
updateSaveConfig({
|
||||
multiRowSave: { ...config.saveConfig.multiRowSave, repeatSectionId: value },
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-6 text-[10px] mt-1">
|
||||
<SelectValue placeholder="반복 섹션 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{config.sections
|
||||
.filter((s) => s.repeatable)
|
||||
.map((section) => (
|
||||
<SelectItem key={section.id} value={section.id}>
|
||||
{section.title}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<HelpText>겸직 등 반복 데이터가 있는 섹션</HelpText>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<Label className="text-[10px]">구분 컬럼</Label>
|
||||
<Input
|
||||
|
||||
Reference in New Issue
Block a user