화면 분할 패널 기능

frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx

@@ -12,19 +12,38 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Plus, Trash2, GripVertical, Loader2 } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Plus, Trash2, GripVertical, Loader2, Check, ChevronsUpDown, Database } from "lucide-react";
 import { ConditionalContainerConfig, ConditionalSection } from "./types";
 import { screenApi } from "@/lib/api/screen";
+import { cn } from "@/lib/utils";
+import { getCategoryColumnsByMenu, getCategoryValues, getSecondLevelMenus } from "@/lib/api/tableCategoryValue";
 
 interface ConditionalContainerConfigPanelProps {
   config: ConditionalContainerConfig;
-  onConfigChange: (config: ConditionalContainerConfig) => void;
+  onChange?: (config: ConditionalContainerConfig) => void;
+  onConfigChange?: (config: ConditionalContainerConfig) => void;
 }
 
 export function ConditionalContainerConfigPanel({
   config,
+  onChange,
   onConfigChange,
 }: ConditionalContainerConfigPanelProps) {
+  // onChange 또는 onConfigChange 둘 다 지원
+  const handleConfigChange = onChange || onConfigChange;
   const [localConfig, setLocalConfig] = useState<ConditionalContainerConfig>({
     controlField: config.controlField || "condition",
     controlLabel: config.controlLabel || "조건 선택",
@@ -38,6 +57,21 @@ export function ConditionalContainerConfigPanel({
   const [screens, setScreens] = useState<any[]>([]);
   const [screensLoading, setScreensLoading] = useState(false);
 
+  // 🆕 메뉴 기반 카테고리 관련 상태
+  const [availableMenus, setAvailableMenus] = useState<Array<{ menuObjid: number; menuName: string; parentMenuName: string; screenCode?: string }>>([]);
+  const [menusLoading, setMenusLoading] = useState(false);
+  const [selectedMenuObjid, setSelectedMenuObjid] = useState<number | null>(null);
+  const [menuPopoverOpen, setMenuPopoverOpen] = useState(false);
+  
+  const [categoryColumns, setCategoryColumns] = useState<Array<{ columnName: string; columnLabel: string; tableName: string }>>([]);
+  const [categoryColumnsLoading, setCategoryColumnsLoading] = useState(false);
+  const [selectedCategoryColumn, setSelectedCategoryColumn] = useState<string>("");
+  const [selectedCategoryTableName, setSelectedCategoryTableName] = useState<string>("");
+  const [columnPopoverOpen, setColumnPopoverOpen] = useState(false);
+  
+  const [categoryValues, setCategoryValues] = useState<Array<{ value: string; label: string }>>([]);
+  const [categoryValuesLoading, setCategoryValuesLoading] = useState(false);
+
   // 화면 목록 로드
   useEffect(() => {
     const loadScreens = async () => {
@@ -56,11 +90,122 @@ export function ConditionalContainerConfigPanel({
     loadScreens();
   }, []);
 
+  // 🆕 2레벨 메뉴 목록 로드
+  useEffect(() => {
+    const loadMenus = async () => {
+      setMenusLoading(true);
+      try {
+        const response = await getSecondLevelMenus();
+        console.log("🔍 [ConditionalContainer] 메뉴 목록 응답:", response);
+        if (response.success && response.data) {
+          setAvailableMenus(response.data);
+        }
+      } catch (error) {
+        console.error("메뉴 목록 로드 실패:", error);
+      } finally {
+        setMenusLoading(false);
+      }
+    };
+    loadMenus();
+  }, []);
+
+  // 🆕 선택된 메뉴의 카테고리 컬럼 목록 로드
+  useEffect(() => {
+    if (!selectedMenuObjid) {
+      setCategoryColumns([]);
+      setSelectedCategoryColumn("");
+      setSelectedCategoryTableName("");
+      setCategoryValues([]);
+      return;
+    }
+
+    const loadCategoryColumns = async () => {
+      setCategoryColumnsLoading(true);
+      try {
+        console.log("🔍 [ConditionalContainer] 메뉴별 카테고리 컬럼 로드:", selectedMenuObjid);
+        const response = await getCategoryColumnsByMenu(selectedMenuObjid);
+        console.log("✅ [ConditionalContainer] 카테고리 컬럼 응답:", response);
+        
+        if (response.success && response.data) {
+          setCategoryColumns(response.data.map((col: any) => ({
+            columnName: col.columnName || col.column_name,
+            columnLabel: col.columnLabel || col.column_label || col.columnName || col.column_name,
+            tableName: col.tableName || col.table_name,
+          })));
+        } else {
+          setCategoryColumns([]);
+        }
+      } catch (error) {
+        console.error("카테고리 컬럼 로드 실패:", error);
+        setCategoryColumns([]);
+      } finally {
+        setCategoryColumnsLoading(false);
+      }
+    };
+    loadCategoryColumns();
+  }, [selectedMenuObjid]);
+
+  // 🆕 선택된 카테고리 컬럼의 값 목록 로드
+  useEffect(() => {
+    if (!selectedCategoryTableName || !selectedCategoryColumn || !selectedMenuObjid) {
+      setCategoryValues([]);
+      return;
+    }
+
+    const loadCategoryValues = async () => {
+      setCategoryValuesLoading(true);
+      try {
+        console.log("🔍 [ConditionalContainer] 카테고리 값 로드:", selectedCategoryTableName, selectedCategoryColumn, selectedMenuObjid);
+        const response = await getCategoryValues(selectedCategoryTableName, selectedCategoryColumn, false, selectedMenuObjid);
+        console.log("✅ [ConditionalContainer] 카테고리 값 응답:", response);
+        
+        if (response.success && response.data) {
+          const values = response.data.map((v: any) => ({
+            value: v.valueCode || v.value_code,
+            label: v.valueLabel || v.value_label || v.valueCode || v.value_code,
+          }));
+          setCategoryValues(values);
+        } else {
+          setCategoryValues([]);
+        }
+      } catch (error) {
+        console.error("카테고리 값 로드 실패:", error);
+        setCategoryValues([]);
+      } finally {
+        setCategoryValuesLoading(false);
+      }
+    };
+    loadCategoryValues();
+  }, [selectedCategoryTableName, selectedCategoryColumn, selectedMenuObjid]);
+
+  // 🆕 테이블 카테고리에서 섹션 자동 생성
+  const generateSectionsFromCategory = () => {
+    if (categoryValues.length === 0) {
+      alert("먼저 테이블과 카테고리 컬럼을 선택하고 값을 로드해주세요.");
+      return;
+    }
+
+    const newSections: ConditionalSection[] = categoryValues.map((option, index) => ({
+      id: `section_${Date.now()}_${index}`,
+      condition: option.value,
+      label: option.label,
+      screenId: null,
+      screenName: undefined,
+    }));
+
+    updateConfig({
+      sections: newSections,
+      controlField: selectedCategoryColumn, // 카테고리 컬럼명을 제어 필드로 사용
+    });
+
+    alert(`${newSections.length}개의 섹션이 생성되었습니다.`);
+  };
+
   // 설정 업데이트 헬퍼
   const updateConfig = (updates: Partial<ConditionalContainerConfig>) => {
     const newConfig = { ...localConfig, ...updates };
     setLocalConfig(newConfig);
-    onConfigChange(newConfig);
+    handleConfigChange?.(newConfig);
   };
 
   // 새 섹션 추가
@@ -134,6 +279,207 @@ export function ConditionalContainerConfigPanel({
           </div>
         </div>
 
+        {/* 🆕 메뉴별 카테고리에서 섹션 자동 생성 */}
+        <div className="space-y-3 p-3 border rounded-lg bg-blue-50/50 dark:bg-blue-950/20">
+          <div className="flex items-center gap-2">
+            <Database className="h-4 w-4 text-blue-600" />
+            <Label className="text-xs font-semibold text-blue-700 dark:text-blue-400">
+              메뉴 카테고리에서 자동 생성
+            </Label>
+          </div>
+          
+          {/* 1. 메뉴 선택 */}
+          <div className="space-y-2">
+            <Label className="text-[10px] text-muted-foreground">
+              1. 메뉴 선택
+            </Label>
+            <Popover open={menuPopoverOpen} onOpenChange={setMenuPopoverOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={menuPopoverOpen}
+                  className="h-8 w-full justify-between text-xs"
+                  disabled={menusLoading}
+                >
+                  {menusLoading ? (
+                    <>
+                      <Loader2 className="mr-2 h-3 w-3 animate-spin" />
+                      로딩 중...
+                    </>
+                  ) : selectedMenuObjid ? (
+                    (() => {
+                      const menu = availableMenus.find((m) => m.menuObjid === selectedMenuObjid);
+                      return menu ? `${menu.parentMenuName} > ${menu.menuName}` : `메뉴 ${selectedMenuObjid}`;
+                    })()
+                  ) : (
+                    "메뉴 선택..."
+                  )}
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[350px] p-0">
+                <Command>
+                  <CommandInput placeholder="메뉴 검색..." className="h-8 text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="py-2 text-xs">메뉴를 찾을 수 없습니다</CommandEmpty>
+                    <CommandGroup>
+                      {availableMenus.map((menu) => (
+                        <CommandItem
+                          key={menu.menuObjid}
+                          value={`${menu.parentMenuName} ${menu.menuName}`}
+                          onSelect={() => {
+                            setSelectedMenuObjid(menu.menuObjid);
+                            setSelectedCategoryColumn("");
+                            setSelectedCategoryTableName("");
+                            setMenuPopoverOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              selectedMenuObjid === menu.menuObjid ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span>{menu.parentMenuName} &gt; {menu.menuName}</span>
+                            {menu.screenCode && (
+                              <span className="text-[10px] text-muted-foreground">
+                                {menu.screenCode}
+                              </span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 2. 카테고리 컬럼 선택 */}
+          {selectedMenuObjid && (
+            <div className="space-y-2">
+              <Label className="text-[10px] text-muted-foreground">
+                2. 카테고리 컬럼 선택
+              </Label>
+              {categoryColumnsLoading ? (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground h-8 px-3 border rounded">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  로딩 중...
+                </div>
+              ) : categoryColumns.length > 0 ? (
+                <Popover open={columnPopoverOpen} onOpenChange={setColumnPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={columnPopoverOpen}
+                      className="h-8 w-full justify-between text-xs"
+                    >
+                      {selectedCategoryColumn ? (
+                        categoryColumns.find((c) => c.columnName === selectedCategoryColumn)?.columnLabel || selectedCategoryColumn
+                      ) : (
+                        "카테고리 컬럼 선택..."
+                      )}
+                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[280px] p-0">
+                    <Command>
+                      <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                      <CommandList>
+                        <CommandEmpty className="py-2 text-xs">카테고리 컬럼이 없습니다</CommandEmpty>
+                        <CommandGroup>
+                          {categoryColumns.map((col) => (
+                            <CommandItem
+                              key={`${col.tableName}.${col.columnName}`}
+                              value={col.columnName}
+                              onSelect={() => {
+                                setSelectedCategoryColumn(col.columnName);
+                                setSelectedCategoryTableName(col.tableName);
+                                setColumnPopoverOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-3 w-3",
+                                  selectedCategoryColumn === col.columnName ? "opacity-100" : "opacity-0"
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span>{col.columnLabel}</span>
+                                <span className="text-[10px] text-muted-foreground">
+                                  {col.tableName}.{col.columnName}
+                                </span>
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              ) : (
+                <p className="text-[10px] text-amber-600 dark:text-amber-400">
+                  이 메뉴에 설정된 카테고리 컬럼이 없습니다.
+                  카테고리 관리에서 먼저 설정해주세요.
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* 3. 카테고리 값 미리보기 */}
+          {selectedCategoryColumn && (
+            <div className="space-y-2">
+              <Label className="text-[10px] text-muted-foreground">
+                3. 카테고리 값 미리보기
+              </Label>
+              {categoryValuesLoading ? (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  로딩 중...
+                </div>
+              ) : categoryValues.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {categoryValues.map((option) => (
+                    <span
+                      key={option.value}
+                      className="px-2 py-0.5 text-[10px] bg-blue-100 text-blue-800 rounded dark:bg-blue-900 dark:text-blue-200"
+                    >
+                      {option.label}
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-[10px] text-amber-600 dark:text-amber-400">
+                  이 컬럼에 등록된 카테고리 값이 없습니다.
+                  카테고리 관리에서 값을 먼저 등록해주세요.
+                </p>
+              )}
+            </div>
+          )}
+
+          <Button
+            onClick={generateSectionsFromCategory}
+            size="sm"
+            variant="default"
+            className="h-7 w-full text-xs"
+            disabled={!selectedCategoryColumn || categoryValues.length === 0 || categoryValuesLoading}
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            {categoryValues.length > 0 ? `${categoryValues.length}개 섹션 자동 생성` : "섹션 자동 생성"}
+          </Button>
+          
+          <p className="text-[10px] text-muted-foreground">
+            선택한 메뉴의 카테고리 값들로 조건별 섹션을 자동으로 생성합니다.
+            각 섹션에 표시할 화면은 아래에서 개별 설정하세요.
+          </p>
+        </div>
+
         {/* 조건별 섹션 설정 */}
         <div className="space-y-4">
           <div className="flex items-center justify-between">