fix(modal-repeater-table): 품목 추가 시 UI 즉시 반영되지 않는 버그 수정

- value 상수를 localValue useState로 변경하여 내부 상태 관리
- useEffect로 외부 값(formData, propValue) 변경 시 동기화
- handleChange에서 setLocalValue 호출하여 즉각적인 UI 업데이트
- RepeaterTable, ItemSelectionModal 등 모든 참조를 localValue로 변경
This commit is contained in:
SeongHyun Kim
2025-12-04 19:05:43 +09:00
parent 0e4ecef336
commit c1400081c6
4 changed files with 173 additions and 17 deletions
@@ -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