카테고리 설정 구현

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

@@ -11,6 +11,7 @@ import { Link2, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { SelectBasicConfig } from "./types";
 import { cascadingRelationApi, CascadingRelation } from "@/lib/api/cascadingRelation";
+import { categoryValueCascadingApi, CategoryValueCascadingGroup } from "@/lib/api/categoryValueCascading";
 
 export interface SelectBasicConfigPanelProps {
   config: SelectBasicConfig;
@@ -35,6 +36,11 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
   const [cascadingEnabled, setCascadingEnabled] = useState(!!config.cascadingRelationCode);
   const [relationList, setRelationList] = useState<CascadingRelation[]>([]);
   const [loadingRelations, setLoadingRelations] = useState(false);
+  
+  // 🆕 카테고리 값 연쇄관계 상태
+  const [categoryRelationEnabled, setCategoryRelationEnabled] = useState(!!(config as any).categoryRelationCode);
+  const [categoryRelationList, setCategoryRelationList] = useState<CategoryValueCascadingGroup[]>([]);
+  const [loadingCategoryRelations, setLoadingCategoryRelations] = useState(false);
 
   // 연쇄 관계 목록 로드
   useEffect(() => {
@@ -43,10 +49,18 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
     }
   }, [cascadingEnabled]);
 
+  // 🆕 카테고리 값 연쇄관계 목록 로드
+  useEffect(() => {
+    if (categoryRelationEnabled && categoryRelationList.length === 0) {
+      loadCategoryRelationList();
+    }
+  }, [categoryRelationEnabled]);
+
   // config 변경 시 상태 동기화
   useEffect(() => {
     setCascadingEnabled(!!config.cascadingRelationCode);
-  }, [config.cascadingRelationCode]);
+    setCategoryRelationEnabled(!!(config as any).categoryRelationCode);
+  }, [config.cascadingRelationCode, (config as any).categoryRelationCode]);
 
   const loadRelationList = async () => {
     setLoadingRelations(true);
@@ -62,6 +76,21 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
     }
   };
 
+  // 🆕 카테고리 값 연쇄관계 목록 로드
+  const loadCategoryRelationList = async () => {
+    setLoadingCategoryRelations(true);
+    try {
+      const response = await categoryValueCascadingApi.getGroups("Y");
+      if (response.success && response.data) {
+        setCategoryRelationList(response.data);
+      }
+    } catch (error) {
+      console.error("카테고리 값 연쇄관계 목록 로드 실패:", error);
+    } finally {
+      setLoadingCategoryRelations(false);
+    }
+  };
+
   const handleChange = (key: keyof SelectBasicConfig, value: any) => {
     // 기존 config와 병합하여 전체 객체 전달 (다른 속성 보호)
     const newConfig = { ...config, [key]: value };
@@ -82,6 +111,33 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
       onChange(newConfig);
     } else {
       loadRelationList();
+      // 카테고리 값 연쇄관계 비활성화 (둘 중 하나만 사용)
+      if (categoryRelationEnabled) {
+        setCategoryRelationEnabled(false);
+        onChange({ ...config, categoryRelationCode: undefined } as any);
+      }
+    }
+  };
+
+  // 🆕 카테고리 값 연쇄관계 토글
+  const handleCategoryRelationToggle = (enabled: boolean) => {
+    setCategoryRelationEnabled(enabled);
+    if (!enabled) {
+      // 비활성화 시 관계 설정 제거
+      const newConfig = { 
+        ...config, 
+        categoryRelationCode: undefined,
+        cascadingRole: undefined,
+        cascadingParentField: undefined,
+      } as any;
+      onChange(newConfig);
+    } else {
+      loadCategoryRelationList();
+      // 일반 연쇄관계 비활성화 (둘 중 하나만 사용)
+      if (cascadingEnabled) {
+        setCascadingEnabled(false);
+        onChange({ ...config, cascadingRelationCode: undefined });
+      }
     }
   };
   
@@ -280,52 +336,56 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
             )}
 
             {/* 부모 필드 설정 (자식 역할일 때만) */}
-            {config.cascadingRelationCode && config.cascadingRole === "child" && (
-              <div className="space-y-2">
-                <Label className="text-xs">부모 필드명</Label>
-                {(() => {
-                  const parentComp = findParentComponent(config.cascadingRelationCode);
-                  const isAutoDetected = parentComp && config.cascadingParentField === parentComp.columnName;
-                  
-                  return (
-                    <>
-                      <div className="flex gap-2 items-center">
-                        <Input
-                          value={config.cascadingParentField || ""}
-                          onChange={(e) => handleChange("cascadingParentField", e.target.value || undefined)}
-                          placeholder="예: warehouse_code"
-                          className="text-xs flex-1"
-                        />
-                        {parentComp && !isAutoDetected && (
-                          <Button
-                            type="button"
-                            size="sm"
-                            variant="outline"
-                            className="text-xs shrink-0"
-                            onClick={() => handleChange("cascadingParentField", parentComp.columnName)}
-                          >
-                            자동감지
-                          </Button>
-                        )}
-                      </div>
-                      {isAutoDetected ? (
-                        <p className="text-xs text-green-600">
-                          자동 감지됨: {parentComp.label || parentComp.columnName}
-                        </p>
-                      ) : parentComp ? (
-                        <p className="text-xs text-amber-600">
-                          감지된 부모 필드: {parentComp.columnName} ({parentComp.label || "라벨 없음"})
-                        </p>
-                      ) : (
-                        <p className="text-muted-foreground text-xs">
-                          같은 관계의 부모 역할 필드가 없습니다. 수동으로 입력하세요.
-                        </p>
+            {config.cascadingRelationCode && config.cascadingRole === "child" && (() => {
+              // 선택된 관계에서 부모 값 컬럼 가져오기
+              const expectedParentColumn = selectedRelation?.parent_value_column;
+              
+              // 부모 역할에 맞는 컴포넌트만 필터링
+              const parentFieldCandidates = allComponents.filter((comp) => {
+                // 현재 컴포넌트 제외
+                if (currentComponent && comp.id === currentComponent.id) return false;
+                // 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
+                if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
+                // columnName이 있어야 함
+                return !!comp.columnName;
+              });
+              
+              return (
+                <div className="space-y-2">
+                  <Label className="text-xs">부모 필드 선택</Label>
+                  {expectedParentColumn && (
+                    <p className="text-muted-foreground text-xs">
+                      관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
+                    </p>
+                  )}
+                  <Select
+                    value={config.cascadingParentField || ""}
+                    onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
+                  >
+                    <SelectTrigger className="text-xs">
+                      <SelectValue placeholder="부모 필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {parentFieldCandidates.map((comp) => (
+                        <SelectItem key={comp.id} value={comp.columnName}>
+                          {comp.label || comp.columnName} ({comp.columnName})
+                        </SelectItem>
+                      ))}
+                      {parentFieldCandidates.length === 0 && (
+                        <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                          {expectedParentColumn 
+                            ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
+                            : "선택 가능한 부모 필드가 없습니다"}
+                        </div>
                       )}
-                    </>
-                  );
-                })()}
-              </div>
-            )}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-muted-foreground text-xs">
+                    상위 값을 제공할 필드를 선택하세요.
+                  </p>
+                </div>
+              );
+            })()}
 
             {/* 선택된 관계 정보 표시 */}
             {selectedRelation && config.cascadingRole && (
@@ -374,6 +434,152 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
           </div>
         )}
       </div>
+
+      {/* 🆕 카테고리 값 연쇄관계 설정 */}
+      <div className="border-t pt-4 mt-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" />
+            <Label className="text-sm font-medium">카테고리 값 연쇄</Label>
+          </div>
+          <Switch
+            checked={categoryRelationEnabled}
+            onCheckedChange={handleCategoryRelationToggle}
+          />
+        </div>
+        <p className="text-muted-foreground text-xs">
+          부모 카테고리 값 선택에 따라 자식 카테고리 옵션이 변경됩니다.
+          <br />예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
+        </p>
+
+        {categoryRelationEnabled && (
+          <div className="space-y-3 rounded-md border p-3 bg-muted/30">
+            {/* 관계 선택 */}
+            <div className="space-y-2">
+              <Label className="text-xs">카테고리 값 연쇄 관계 선택</Label>
+              <Select
+                value={(config as any).categoryRelationCode || ""}
+                onValueChange={(value) => handleChange("categoryRelationCode" as any, value || undefined)}
+              >
+                <SelectTrigger className="text-xs">
+                  <SelectValue placeholder={loadingCategoryRelations ? "로딩 중..." : "관계 선택"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {categoryRelationList.map((relation) => (
+                    <SelectItem key={relation.relation_code} value={relation.relation_code}>
+                      <div className="flex flex-col">
+                        <span>{relation.relation_name}</span>
+                        <span className="text-muted-foreground text-xs">
+                          {relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.{relation.child_column_name}
+                        </span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 역할 선택 */}
+            {(config as any).categoryRelationCode && (
+              <div className="space-y-2">
+                <Label className="text-xs">역할 선택</Label>
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant={config.cascadingRole === "parent" ? "default" : "outline"}
+                    className="flex-1 text-xs"
+                    onClick={() => handleRoleChange("parent")}
+                  >
+                    부모 (상위 선택)
+                  </Button>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant={config.cascadingRole === "child" ? "default" : "outline"}
+                    className="flex-1 text-xs"
+                    onClick={() => handleRoleChange("child")}
+                  >
+                    자식 (하위 선택)
+                  </Button>
+                </div>
+                <p className="text-muted-foreground text-xs">
+                  {config.cascadingRole === "parent" 
+                    ? "이 필드가 상위 카테고리 선택 역할을 합니다. (예: 검사유형)"
+                    : config.cascadingRole === "child"
+                    ? "이 필드는 상위 카테고리 값에 따라 옵션이 변경됩니다. (예: 적용대상)"
+                    : "이 필드의 역할을 선택하세요."}
+                </p>
+              </div>
+            )}
+
+            {/* 부모 필드 설정 (자식 역할일 때만) */}
+            {(config as any).categoryRelationCode && config.cascadingRole === "child" && (() => {
+              // 선택된 관계 정보 가져오기
+              const selectedRelation = categoryRelationList.find(
+                (r) => r.relation_code === (config as any).categoryRelationCode
+              );
+              const expectedParentColumn = selectedRelation?.parent_column_name;
+              
+              // 부모 역할에 맞는 컴포넌트만 필터링
+              const parentFieldCandidates = allComponents.filter((comp) => {
+                // 현재 컴포넌트 제외
+                if (currentComponent && comp.id === currentComponent.id) return false;
+                // 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
+                if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
+                // columnName이 있어야 함
+                return !!comp.columnName;
+              });
+              
+              return (
+                <div className="space-y-2">
+                  <Label className="text-xs">부모 필드 선택</Label>
+                  {expectedParentColumn && (
+                    <p className="text-muted-foreground text-xs">
+                      관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
+                    </p>
+                  )}
+                  <Select
+                    value={config.cascadingParentField || ""}
+                    onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
+                  >
+                    <SelectTrigger className="text-xs">
+                      <SelectValue placeholder="부모 필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {parentFieldCandidates.map((comp) => (
+                        <SelectItem key={comp.id} value={comp.columnName}>
+                          {comp.label || comp.columnName} ({comp.columnName})
+                        </SelectItem>
+                      ))}
+                      {parentFieldCandidates.length === 0 && (
+                        <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                          {expectedParentColumn 
+                            ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
+                            : "선택 가능한 부모 필드가 없습니다"}
+                        </div>
+                      )}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-muted-foreground text-xs">
+                    상위 카테고리 값을 제공할 필드를 선택하세요.
+                  </p>
+                </div>
+              );
+            })()}
+
+            {/* 관계 관리 페이지 링크 */}
+            <div className="flex justify-end">
+              <Link href="/admin/cascading-management?tab=category-value" target="_blank">
+                <Button variant="link" size="sm" className="h-auto p-0 text-xs">
+                  <ExternalLink className="mr-1 h-3 w-3" />
+                  카테고리 값 연쇄 관리
+                </Button>
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };