카테고리 설정 구현

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

@@ -156,22 +156,48 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
 
   // 🆕 연쇄 드롭다운 설정 확인
   const cascadingRelationCode = config?.cascadingRelationCode || componentConfig?.cascadingRelationCode;
+  // 🆕 카테고리 값 연쇄관계 설정
+  const categoryRelationCode = config?.categoryRelationCode || componentConfig?.categoryRelationCode;
   const cascadingRole = config?.cascadingRole || componentConfig?.cascadingRole || "child";
   const cascadingParentField = config?.cascadingParentField || componentConfig?.cascadingParentField;
-  // 자식 역할일 때만 부모 값 필요
-  const parentValue = cascadingRole === "child" && cascadingParentField && formData 
+  
+  // 🆕 자식 역할일 때 부모 값 추출 (단일 또는 다중)
+  const rawParentValue = cascadingRole === "child" && cascadingParentField && formData 
     ? formData[cascadingParentField] 
     : undefined;
   
-  // 🆕 연쇄 드롭다운 훅 사용 (역할에 따라 다른 옵션 로드)
+  // 🆕 부모값이 콤마로 구분된 문자열이면 배열로 변환 (다중 선택 지원)
+  const parentValues: string[] | undefined = useMemo(() => {
+    if (!rawParentValue) return undefined;
+    
+    // 이미 배열인 경우
+    if (Array.isArray(rawParentValue)) {
+      return rawParentValue.map(v => String(v)).filter(v => v);
+    }
+    
+    // 콤마로 구분된 문자열인 경우
+    const strValue = String(rawParentValue);
+    if (strValue.includes(',')) {
+      return strValue.split(',').map(v => v.trim()).filter(v => v);
+    }
+    
+    // 단일 값
+    return [strValue];
+  }, [rawParentValue]);
+  
+  // 🆕 연쇄 드롭다운 훅 사용 (역할에 따라 다른 옵션 로드) - 다중 부모값 지원
   const {
     options: cascadingOptions,
     loading: isLoadingCascading,
   } = useCascadingDropdown({
     relationCode: cascadingRelationCode,
+    categoryRelationCode: categoryRelationCode, // 🆕 카테고리 값 연쇄관계 지원
     role: cascadingRole, // 부모/자식 역할 전달
-    parentValue: parentValue,
+    parentValues: parentValues, // 다중 부모값
   });
+  
+  // 🆕 카테고리 값 연쇄관계가 활성화되었는지 확인
+  const hasCategoryRelation = !!categoryRelationCode;
 
   useEffect(() => {
     if (webType === "category" && component.tableName && component.columnName) {
@@ -324,6 +350,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   // 선택된 값에 따른 라벨 업데이트
   useEffect(() => {
     const getAllOptionsForLabel = () => {
+      // 🆕 카테고리 값 연쇄관계가 설정된 경우 연쇄 옵션 사용
+      if (categoryRelationCode) {
+        return cascadingOptions;
+      }
       // 🆕 연쇄 드롭다운이 설정된 경우 연쇄 옵션만 사용
       if (cascadingRelationCode) {
         return cascadingOptions;
@@ -353,7 +383,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     if (newLabel !== selectedLabel) {
       setSelectedLabel(newLabel);
     }
-  }, [selectedValue, codeOptions, config.options, cascadingOptions, cascadingRelationCode]);
+  }, [selectedValue, codeOptions, config.options, cascadingOptions, cascadingRelationCode, categoryRelationCode]);
 
   // 클릭 이벤트 핸들러 (React Query로 간소화)
   const handleToggle = () => {
@@ -404,6 +434,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
 
   // 모든 옵션 가져오기
   const getAllOptions = () => {
+    // 🆕 카테고리 값 연쇄관계가 설정된 경우 연쇄 옵션 사용
+    if (categoryRelationCode) {
+      return cascadingOptions;
+    }
     // 🆕 연쇄 드롭다운이 설정된 경우 연쇄 옵션만 사용
     if (cascadingRelationCode) {
       return cascadingOptions;
@@ -776,50 +810,121 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               {(isLoadingCodes || isLoadingCategories) ? (
                 <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
               ) : allOptions.length > 0 ? (
-                allOptions.map((option, index) => {
-                  const isOptionSelected = selectedValues.includes(option.value);
-                  return (
-                    <div
-                      key={`${option.value}-${index}`}
-                      className={cn(
-                        "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
-                        isOptionSelected && "bg-blue-50 font-medium"
-                      )}
-                      onClick={() => {
-                        const newVals = isOptionSelected
-                          ? selectedValues.filter((v) => v !== option.value)
-                          : [...selectedValues, option.value];
-                        setSelectedValues(newVals);
-                        const newValue = newVals.join(",");
-                        if (isInteractive && onFormDataChange && component.columnName) {
-                          onFormDataChange(component.columnName, newValue);
-                        }
-                      }}
-                    >
-                      <div className="flex items-center gap-2">
-                        <input
-                          type="checkbox"
-                          checked={isOptionSelected}
-                          value={option.value}
-                          onChange={(e) => {
-                            // 체크박스 직접 클릭 시에도 올바른 값으로 처리
-                            e.stopPropagation();
-                            const newVals = isOptionSelected
-                              ? selectedValues.filter((v) => v !== option.value)
-                              : [...selectedValues, option.value];
-                            setSelectedValues(newVals);
-                            const newValue = newVals.join(",");
-                            if (isInteractive && onFormDataChange && component.columnName) {
-                              onFormDataChange(component.columnName, newValue);
-                            }
-                          }}
-                          className="h-4 w-4 pointer-events-auto"
-                        />
-                        <span>{option.label || option.value}</span>
+                (() => {
+                  // 부모별 그룹핑 (카테고리 연쇄관계인 경우)
+                  const hasParentInfo = allOptions.some((opt: any) => opt.parent_label);
+                  
+                  if (hasParentInfo) {
+                    // 부모별로 그룹핑
+                    const groupedOptions: Record<string, { parentLabel: string; options: typeof allOptions }> = {};
+                    allOptions.forEach((opt: any) => {
+                      const parentKey = opt.parent_value || "기타";
+                      const parentLabel = opt.parent_label || "기타";
+                      if (!groupedOptions[parentKey]) {
+                        groupedOptions[parentKey] = { parentLabel, options: [] };
+                      }
+                      groupedOptions[parentKey].options.push(opt);
+                    });
+                    
+                    return Object.entries(groupedOptions).map(([parentKey, group]) => (
+                      <div key={parentKey}>
+                        {/* 그룹 헤더 */}
+                        <div className="sticky top-0 bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600 border-b">
+                          {group.parentLabel}
+                        </div>
+                        {/* 그룹 옵션들 */}
+                        {group.options.map((option, index) => {
+                          const isOptionSelected = selectedValues.includes(option.value);
+                          return (
+                            <div
+                              key={`${option.value}-${index}`}
+                              className={cn(
+                                "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
+                                isOptionSelected && "bg-blue-50 font-medium"
+                              )}
+                              onClick={() => {
+                                const newVals = isOptionSelected
+                                  ? selectedValues.filter((v) => v !== option.value)
+                                  : [...selectedValues, option.value];
+                                setSelectedValues(newVals);
+                                const newValue = newVals.join(",");
+                                if (isInteractive && onFormDataChange && component.columnName) {
+                                  onFormDataChange(component.columnName, newValue);
+                                }
+                              }}
+                            >
+                              <div className="flex items-center gap-2">
+                                <input
+                                  type="checkbox"
+                                  checked={isOptionSelected}
+                                  value={option.value}
+                                  onChange={(e) => {
+                                    e.stopPropagation();
+                                    const newVals = isOptionSelected
+                                      ? selectedValues.filter((v) => v !== option.value)
+                                      : [...selectedValues, option.value];
+                                    setSelectedValues(newVals);
+                                    const newValue = newVals.join(",");
+                                    if (isInteractive && onFormDataChange && component.columnName) {
+                                      onFormDataChange(component.columnName, newValue);
+                                    }
+                                  }}
+                                  className="h-4 w-4 pointer-events-auto"
+                                />
+                                <span>{option.label || option.value}</span>
+                              </div>
+                            </div>
+                          );
+                        })}
                       </div>
-                    </div>
-                  );
-                })
+                    ));
+                  }
+                  
+                  // 부모 정보가 없으면 기존 방식
+                  return allOptions.map((option, index) => {
+                    const isOptionSelected = selectedValues.includes(option.value);
+                    return (
+                      <div
+                        key={`${option.value}-${index}`}
+                        className={cn(
+                          "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
+                          isOptionSelected && "bg-blue-50 font-medium"
+                        )}
+                        onClick={() => {
+                          const newVals = isOptionSelected
+                            ? selectedValues.filter((v) => v !== option.value)
+                            : [...selectedValues, option.value];
+                          setSelectedValues(newVals);
+                          const newValue = newVals.join(",");
+                          if (isInteractive && onFormDataChange && component.columnName) {
+                            onFormDataChange(component.columnName, newValue);
+                          }
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="checkbox"
+                            checked={isOptionSelected}
+                            value={option.value}
+                            onChange={(e) => {
+                              e.stopPropagation();
+                              const newVals = isOptionSelected
+                                ? selectedValues.filter((v) => v !== option.value)
+                                : [...selectedValues, option.value];
+                              setSelectedValues(newVals);
+                              const newValue = newVals.join(",");
+                              if (isInteractive && onFormDataChange && component.columnName) {
+                                onFormDataChange(component.columnName, newValue);
+                              }
+                            }}
+                            className="h-4 w-4 pointer-events-auto"
+                          />
+                          <span>{option.label || option.value}</span>
+                        </div>
+                      </div>
+                    );
+                  });
+                })()
               ) : (
                 <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
               )}

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>
   );
 };