From 27558787b05778aa18d4ce5d4234206c7a9cae6c Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 5 Mar 2026 23:32:40 +0900
Subject: [PATCH] feat: Enhance CategoryValueManagerTree with input focus
 management and modal improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 .../CategoryValueManagerTree.tsx              | 34 +++++++++++++++++--
 .../select-basic/SelectBasicComponent.tsx     | 16 +++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/frontend/components/table-category/CategoryValueManagerTree.tsx b/frontend/components/table-category/CategoryValueManagerTree.tsx
index 07965ce2..b3329a41 100644
--- a/frontend/components/table-category/CategoryValueManagerTree.tsx
+++ b/frontend/components/table-category/CategoryValueManagerTree.tsx
@@ -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">
               추가
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index 53a6416b..9cf9706f 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -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에서 전달된 값