fix: 첫 글자 입력 시 포커스 유지 문제 해결

- handleAddGroupEntry: + 추가 버튼 클릭 시 미리 빈 entry를 배열에 추가
- handleFieldChange: 기존 entry 업데이트만 수행 (새로운 entry 추가 로직 제거)
- 이제 첫 글자 입력 시에도 배열 길이가 변하지 않아 포커스가 유지됨
This commit is contained in:
kjs 2025-11-18 10:02:27 +09:00
parent 3d74b9deb2
commit cddce40f35
1 changed files with 24 additions and 16 deletions

View File

@ -263,14 +263,14 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
// 🆕 그룹별 필드 변경 핸들러: itemId + groupId + entryId + fieldName
const handleFieldChange = useCallback((itemId: string, groupId: string, entryId: string, fieldName: string, value: any) => {
setItems((prevItems) => {
const updatedItems = prevItems.map((item) => {
return prevItems.map((item) => {
if (item.id !== itemId) return item;
const groupEntries = item.fieldGroups[groupId] || [];
const existingEntryIndex = groupEntries.findIndex((e) => e.id === entryId);
if (existingEntryIndex >= 0) {
// 기존 entry 업데이트
// 기존 entry 업데이트 (항상 이 경로로만 진입)
const updatedEntries = [...groupEntries];
updatedEntries[existingEntryIndex] = {
...updatedEntries[existingEntryIndex],
@ -284,22 +284,11 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
},
};
} else {
// 새로운 entry 추가
const newEntry: GroupEntry = {
id: entryId,
[fieldName]: value,
};
return {
...item,
fieldGroups: {
...item.fieldGroups,
[groupId]: [...groupEntries, newEntry],
},
};
// 이 경로는 발생하면 안 됨 (handleAddGroupEntry에서 미리 추가함)
console.warn("⚠️ entry가 없는데 handleFieldChange 호출됨:", { itemId, groupId, entryId });
return item;
}
});
return updatedItems;
});
}, []);
@ -311,6 +300,25 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
// 🆕 그룹 항목 추가 핸들러 (특정 그룹에 새 항목 추가)
const handleAddGroupEntry = (itemId: string, groupId: string) => {
const newEntryId = `entry-${Date.now()}`;
// 🔧 미리 빈 entry를 추가하여 리렌더링 방지
setItems((prevItems) => {
return prevItems.map((item) => {
if (item.id !== itemId) return item;
const groupEntries = item.fieldGroups[groupId] || [];
const newEntry: GroupEntry = { id: newEntryId };
return {
...item,
fieldGroups: {
...item.fieldGroups,
[groupId]: [...groupEntries, newEntry],
},
};
});
});
setIsEditing(true);
setEditingItemId(itemId);
setEditingDetailId(newEntryId);