feat: Enhance CategoryValueManagerTree with input focus management and modal improvements

- Added refs for input fields in the CategoryValueManagerTree component to manage focus transitions between the name and description inputs.
- Updated the modal behavior to reset form data without closing the modal, allowing for continuous input.
- Changed the button label from "취소" to "닫기" for better clarity in the modal interface.
- Included debug logging for cascading roles in the SelectBasicComponent to assist with troubleshooting.

These enhancements improve user experience and maintainability of the component.
This commit is contained in:
kjs 2026-03-05 23:32:40 +09:00
parent db31b02180
commit 27558787b0
2 changed files with 47 additions and 3 deletions

View File

@ -6,7 +6,7 @@
* -
*/
import React, { useState, useEffect, useCallback, useMemo } from "react";
import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
import {
ChevronRight,
ChevronDown,
@ -291,6 +291,10 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
const [editingValue, setEditingValue] = useState<CategoryValue | null>(null);
const [deletingValue, setDeletingValue] = useState<CategoryValue | null>(null);
// 추가 모달 input ref
const addNameRef = useRef<HTMLInputElement>(null);
const addDescRef = useRef<HTMLInputElement>(null);
// 폼 상태
const [formData, setFormData] = useState({
valueCode: "",
@ -508,7 +512,15 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
const response = await createCategoryValue(input);
if (response.success) {
toast.success("카테고리가 추가되었습니다");
setIsAddModalOpen(false);
// 폼 초기화 (모달은 닫지 않고 연속 입력)
setFormData((prev) => ({
...prev,
valueCode: "",
valueLabel: "",
description: "",
color: "",
}));
setTimeout(() => addNameRef.current?.focus(), 50);
// 기존 펼침 상태 유지하면서 데이터 새로고침
await loadTree(true);
// 부모 노드만 펼치기 (하위 추가 시)
@ -746,9 +758,17 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
<span className="text-destructive">*</span>
</Label>
<Input
ref={addNameRef}
id="valueLabel"
value={formData.valueLabel}
onChange={(e) => setFormData({ ...formData, valueLabel: e.target.value })}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
e.stopPropagation();
addDescRef.current?.focus();
}
}}
placeholder="카테고리 이름을 입력하세요"
className="h-9 text-sm"
/>
@ -759,9 +779,17 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
</Label>
<Input
ref={addDescRef}
id="description"
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
e.stopPropagation();
handleAdd();
}
}}
placeholder="선택 사항"
className="h-9 text-sm"
/>
@ -784,7 +812,7 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
onClick={() => setIsAddModalOpen(false)}
className="h-9 flex-1 text-sm sm:flex-none"
>
</Button>
<Button onClick={handleAdd} className="h-9 flex-1 text-sm sm:flex-none">

View File

@ -139,6 +139,22 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
const cascadingRole = config?.cascadingRole || componentConfig?.cascadingRole || "child";
const cascadingParentField = config?.cascadingParentField || componentConfig?.cascadingParentField;
if (component.columnName === "data_type" || component.columnName === "unit") {
console.log("🔥🔥🔥 [PLC 캐스케이딩 디버그]", {
columnName: component.columnName,
categoryRelationCode,
cascadingRole,
cascadingParentField,
configKeys: config ? Object.keys(config) : "null",
componentConfigKeys: componentConfig ? Object.keys(componentConfig) : "null",
configCategoryRelationCode: config?.categoryRelationCode,
componentConfigCategoryRelationCode: componentConfig?.categoryRelationCode,
webType,
formDataKeys: formData ? Object.keys(formData) : "null",
parentValue: cascadingParentField && formData ? formData[cascadingParentField] : "N/A",
});
}
// 🆕 계층구조 역할 설정 (대분류/중분류/소분류)
// 1순위: 동적으로 조회된 값 (테이블 타입관리에서 설정)
// 2순위: config에서 전달된 값