연쇄관계 관리

frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx

@@ -4,6 +4,7 @@ import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";
 import { cn } from "@/lib/registry/components/common/inputStyles";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import type { DataProvidable } from "@/types/data-transfer";
+import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
 
 interface Option {
   value: string;
@@ -26,6 +27,7 @@ export interface SelectBasicComponentProps {
   onDragEnd?: () => void;
   value?: any; // 외부에서 전달받는 값
   menuObjid?: number; // 🆕 메뉴 OBJID (코드 스코프용)
+  formData?: Record<string, any>; // 🆕 폼 데이터 (연쇄 드롭다운용)
   [key: string]: any;
 }
 
@@ -50,6 +52,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   onDragEnd,
   value: externalValue, // 명시적으로 value prop 받기
   menuObjid, // 🆕 메뉴 OBJID
+  formData, // 🆕 폼 데이터 (연쇄 드롭다운용)
   ...props
 }) => {
   // 🆕 읽기전용/비활성화 상태 확인
@@ -151,6 +154,25 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   const [categoryOptions, setCategoryOptions] = useState<Option[]>([]);
   const [isLoadingCategories, setIsLoadingCategories] = useState(false);
 
+  // 🆕 연쇄 드롭다운 설정 확인
+  const cascadingRelationCode = config?.cascadingRelationCode || componentConfig?.cascadingRelationCode;
+  const cascadingRole = config?.cascadingRole || componentConfig?.cascadingRole || "child";
+  const cascadingParentField = config?.cascadingParentField || componentConfig?.cascadingParentField;
+  // 자식 역할일 때만 부모 값 필요
+  const parentValue = cascadingRole === "child" && cascadingParentField && formData 
+    ? formData[cascadingParentField] 
+    : undefined;
+  
+  // 🆕 연쇄 드롭다운 훅 사용 (역할에 따라 다른 옵션 로드)
+  const {
+    options: cascadingOptions,
+    loading: isLoadingCascading,
+  } = useCascadingDropdown({
+    relationCode: cascadingRelationCode,
+    role: cascadingRole, // 부모/자식 역할 전달
+    parentValue: parentValue,
+  });
+
   useEffect(() => {
     if (webType === "category" && component.tableName && component.columnName) {
       console.log("🔍 [SelectBasic] 카테고리 값 로딩 시작:", {
@@ -301,12 +323,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
 
   // 선택된 값에 따른 라벨 업데이트
   useEffect(() => {
-    const getAllOptions = () => {
+    const getAllOptionsForLabel = () => {
+      // 🆕 연쇄 드롭다운이 설정된 경우 연쇄 옵션만 사용
+      if (cascadingRelationCode) {
+        return cascadingOptions;
+      }
       const configOptions = config.options || [];
       return [...codeOptions, ...categoryOptions, ...configOptions];
     };
 
-    const options = getAllOptions();
+    const options = getAllOptionsForLabel();
     const selectedOption = options.find((option) => option.value === selectedValue);
 
     // 🎯 코드 타입의 경우 코드값과 코드명을 모두 고려하여 라벨 찾기
@@ -327,7 +353,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     if (newLabel !== selectedLabel) {
       setSelectedLabel(newLabel);
     }
-  }, [selectedValue, codeOptions, config.options]);
+  }, [selectedValue, codeOptions, config.options, cascadingOptions, cascadingRelationCode]);
 
   // 클릭 이벤트 핸들러 (React Query로 간소화)
   const handleToggle = () => {
@@ -378,6 +404,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
 
   // 모든 옵션 가져오기
   const getAllOptions = () => {
+    // 🆕 연쇄 드롭다운이 설정된 경우 연쇄 옵션만 사용
+    if (cascadingRelationCode) {
+      return cascadingOptions;
+    }
+    
     const configOptions = config.options || [];
     return [...codeOptions, ...categoryOptions, ...configOptions];
   };