feat: 화면 관리 기능 개선 (복제/삭제/그룹 관리/테이블 설정)

- 화면 관리 시스템의 복제, 삭제, 수정 및 테이블 설정 기능을 전면 개선
- 그룹 삭제 시 하위 그룹과의 연관성 정리 및 로딩 프로그레스 바 추가
- 화면 수정 기능 추가: 이름, 그룹, 역할, 정렬 순서 변경
- 테이블 설정 모달에 관련 기능 추가 및 데이터 일관성 유지
- 메뉴-화면 그룹 동기화 API 추가 및 관련 상태 관리 기능 구현
- 검색어 필터링 로직 개선: 다중 키워드 지원
- 관련 파일 및 진행 상태 업데이트

frontend/components/screen/CopyScreenModal.tsx

@@ -927,7 +927,7 @@ export default function CopyScreenModal({
   if (mode === "group") {
     return (
       <Dialog open={isOpen} onOpenChange={handleClose}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
           {/* 로딩 오버레이 */}
           {isCopying && (
             <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">

frontend/components/screen/ScreenGroupTreeView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { cn } from "@/lib/utils";
 import {
   ChevronRight,
@@ -16,6 +16,8 @@ import {
   Copy,
   FolderTree,
   Loader2,
+  RefreshCw,
+  Building2,
 } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 import {
@@ -24,9 +26,17 @@ import {
   deleteScreenGroup,
   addScreenToGroup,
   removeScreenFromGroup,
+  getMenuScreenSyncStatus,
+  syncScreenGroupsToMenu,
+  syncMenuToScreenGroups,
+  syncAllCompanies,
+  SyncStatus,
+  AllCompaniesSyncResult,
 } from "@/lib/api/screenGroup";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { useAuth } from "@/hooks/useAuth";
+import { getCompanyList, Company } from "@/lib/api/company";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -88,6 +98,7 @@ interface ScreenGroupTreeViewProps {
   onGroupSelect?: (group: { id: number; name: string; company_code?: string } | null) => void;
   onScreenSelectInGroup?: (group: { id: number; name: string; company_code?: string }, screenId: number) => void;
   companyCode?: string;
+  searchTerm?: string; // 검색어 (띄어쓰기로 구분된 여러 키워드)
 }
 
 interface TreeNode {
@@ -107,6 +118,7 @@ export function ScreenGroupTreeView({
   onGroupSelect,
   onScreenSelectInGroup,
   companyCode,
+  searchTerm = "",
 }: ScreenGroupTreeViewProps) {
   const [groups, setGroups] = useState<ScreenGroup[]>([]);
   const [loading, setLoading] = useState(true);
@@ -155,6 +167,24 @@ export function ScreenGroupTreeView({
   const [contextMenuGroup, setContextMenuGroup] = useState<ScreenGroup | null>(null);
   const [contextMenuGroupPosition, setContextMenuGroupPosition] = useState<{ x: number; y: number } | null>(null);
 
+  // 메뉴-화면그룹 동기화 상태
+  const [isSyncDialogOpen, setIsSyncDialogOpen] = useState(false);
+  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncDirection, setSyncDirection] = useState<"screen-to-menu" | "menu-to-screen" | "all" | null>(null);
+  
+  // 회사 선택 (최고 관리자용)
+  const { user } = useAuth();
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [selectedCompanyCode, setSelectedCompanyCode] = useState<string>("");
+  const [isSyncCompanySelectOpen, setIsSyncCompanySelectOpen] = useState(false);
+  
+  // 현재 사용자가 최고 관리자인지 확인
+  const isSuperAdmin = user?.companyCode === "*";
+  
+  // 실제 사용할 회사 코드 (props → 선택 → 사용자 기본값)
+  const effectiveCompanyCode = companyCode || selectedCompanyCode || (isSuperAdmin ? "" : user?.companyCode) || "";
+
   // 그룹 목록 및 그룹별 화면 로드
   useEffect(() => {
     loadGroupsData();
@@ -242,6 +272,124 @@ export function ScreenGroupTreeView({
     setIsGroupModalOpen(true);
   };
 
+  // 동기화 다이얼로그 열기
+  const handleOpenSyncDialog = async () => {
+    setIsSyncDialogOpen(true);
+    setSyncStatus(null);
+    setSyncDirection(null);
+    setSelectedCompanyCode("");
+    
+    // 최고 관리자일 때 회사 목록 로드
+    if (isSuperAdmin && companies.length === 0) {
+      try {
+        const companiesList = await getCompanyList();
+        // 최고 관리자(*)용 회사는 제외
+        const filteredCompanies = companiesList.filter(c => c.company_code !== "*");
+        setCompanies(filteredCompanies);
+      } catch (error) {
+        console.error("회사 목록 로드 실패:", error);
+      }
+    }
+    
+    // 최고 관리자가 아니면 바로 상태 조회
+    if (!isSuperAdmin && user?.companyCode) {
+      const response = await getMenuScreenSyncStatus(user.companyCode);
+      if (response.success && response.data) {
+        setSyncStatus(response.data);
+      }
+    }
+  };
+  
+  // 회사 선택 시 상태 조회
+  const handleCompanySelect = async (companyCode: string) => {
+    setSelectedCompanyCode(companyCode);
+    setIsSyncCompanySelectOpen(false);
+    setSyncStatus(null);
+    
+    if (companyCode) {
+      const response = await getMenuScreenSyncStatus(companyCode);
+      if (response.success && response.data) {
+        setSyncStatus(response.data);
+      } else {
+        toast.error(response.error || "동기화 상태 조회 실패");
+      }
+    }
+  };
+
+  // 동기화 실행
+  const handleSync = async (direction: "screen-to-menu" | "menu-to-screen") => {
+    // 사용할 회사 코드 결정
+    const targetCompanyCode = isSuperAdmin ? selectedCompanyCode : user?.companyCode;
+    
+    if (!targetCompanyCode) {
+      toast.error("회사를 선택해주세요.");
+      return;
+    }
+    
+    setIsSyncing(true);
+    setSyncDirection(direction);
+    
+    try {
+      const response = direction === "screen-to-menu"
+        ? await syncScreenGroupsToMenu(targetCompanyCode)
+        : await syncMenuToScreenGroups(targetCompanyCode);
+      
+      if (response.success) {
+        const data = response.data;
+        toast.success(
+          `동기화 완료: 생성 ${data?.created || 0}개, 연결 ${data?.linked || 0}개, 스킵 ${data?.skipped || 0}개`
+        );
+        // 그룹 데이터 새로고침
+        await loadGroupsData();
+        // 동기화 상태 새로고침
+        const statusResponse = await getMenuScreenSyncStatus(targetCompanyCode);
+        if (statusResponse.success && statusResponse.data) {
+          setSyncStatus(statusResponse.data);
+        }
+      } else {
+        toast.error(`동기화 실패: ${response.error || "알 수 없는 오류"}`);
+      }
+    } catch (error: any) {
+      toast.error(`동기화 실패: ${error.message}`);
+    } finally {
+      setIsSyncing(false);
+      setSyncDirection(null);
+    }
+  };
+
+  // 전체 회사 동기화 (최고 관리자만)
+  const handleSyncAll = async () => {
+    if (!isSuperAdmin) {
+      toast.error("전체 동기화는 최고 관리자만 수행할 수 있습니다.");
+      return;
+    }
+
+    setIsSyncing(true);
+    setSyncDirection("all");
+
+    try {
+      const response = await syncAllCompanies();
+
+      if (response.success && response.data) {
+        const data = response.data;
+        toast.success(
+          `전체 동기화 완료: ${data.totalCompanies}개 회사, 생성 ${data.totalCreated}개, 연결 ${data.totalLinked}개`
+        );
+        // 그룹 데이터 새로고침
+        await loadGroupsData();
+        // 동기화 다이얼로그 닫기
+        setIsSyncDialogOpen(false);
+      } else {
+        toast.error(`전체 동기화 실패: ${response.error || "알 수 없는 오류"}`);
+      }
+    } catch (error: any) {
+      toast.error(`전체 동기화 실패: ${error.message}`);
+    } finally {
+      setIsSyncing(false);
+      setSyncDirection(null);
+    }
+  };
+
   // 그룹 수정 버튼 클릭
   const handleEditGroup = (group: ScreenGroup, e: React.MouseEvent) => {
     e.stopPropagation();
@@ -596,6 +744,191 @@ export function ScreenGroupTreeView({
     return result;
   };
 
+  // 검색어로 그룹 필터링 (띄어쓰기로 구분된 여러 키워드 - 계층적 검색)
+  const getFilteredGroups = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return groups; // 검색어가 없으면 모든 그룹 반환
+    }
+
+    // 검색어를 띄어쓰기로 분리하고 빈 문자열 제거
+    const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
+    
+    if (keywords.length === 0) {
+      return groups;
+    }
+
+    // 그룹의 조상 ID들을 가져오는 함수
+    const getAncestorIds = (groupId: number): Set<number> => {
+      const ancestors = new Set<number>();
+      let current = groups.find(g => g.id === groupId);
+      while (current?.parent_group_id) {
+        ancestors.add(current.parent_group_id);
+        current = groups.find(g => g.id === current!.parent_group_id);
+      }
+      return ancestors;
+    };
+
+    // 첫 번째 키워드와 일치하는 그룹 찾기
+    let currentMatchingIds = new Set<number>();
+    for (const group of groups) {
+      const groupName = group.group_name.toLowerCase();
+      if (groupName.includes(keywords[0])) {
+        currentMatchingIds.add(group.id);
+      }
+    }
+
+    // 일치하는 그룹이 없으면 빈 배열 반환
+    if (currentMatchingIds.size === 0) {
+      return [];
+    }
+
+    // 나머지 키워드들을 순차적으로 처리 (계층적 검색)
+    for (let i = 1; i < keywords.length; i++) {
+      const keyword = keywords[i];
+      const nextMatchingIds = new Set<number>();
+      
+      for (const group of groups) {
+        const groupName = group.group_name.toLowerCase();
+        if (groupName.includes(keyword)) {
+          // 이 그룹의 조상 중에 이전 키워드와 일치하는 그룹이 있는지 확인
+          const ancestors = getAncestorIds(group.id);
+          const hasMatchingAncestor = Array.from(currentMatchingIds).some(id => 
+            ancestors.has(id) || id === group.id
+          );
+          
+          if (hasMatchingAncestor) {
+            nextMatchingIds.add(group.id);
+          }
+        }
+      }
+      
+      // 매칭되는 게 있으면 업데이트, 없으면 이전 결과 유지
+      if (nextMatchingIds.size > 0) {
+        // 이전 키워드 매칭도 유지 (상위 폴더 표시를 위해)
+        nextMatchingIds.forEach(id => currentMatchingIds.add(id));
+        currentMatchingIds = nextMatchingIds;
+      }
+    }
+
+    // 최종 매칭 결과
+    const finalMatchingIds = currentMatchingIds;
+
+    // 표시할 그룹 ID 집합
+    const groupsToShow = new Set<number>();
+    
+    // 일치하는 그룹의 상위 그룹들도 포함 (계층 유지를 위해)
+    const addParents = (groupId: number) => {
+      const group = groups.find(g => g.id === groupId);
+      if (group) {
+        groupsToShow.add(group.id);
+        if (group.parent_group_id) {
+          addParents(group.parent_group_id);
+        }
+      }
+    };
+
+    // 하위 그룹들을 추가하는 함수
+    const addChildren = (groupId: number) => {
+      const children = groups.filter(g => g.parent_group_id === groupId);
+      for (const child of children) {
+        groupsToShow.add(child.id);
+        addChildren(child.id);
+      }
+    };
+
+    // 최종 매칭 그룹들의 상위 추가
+    for (const groupId of finalMatchingIds) {
+      addParents(groupId);
+    }
+
+    // 마지막 키워드와 일치하는 그룹의 하위만 추가
+    for (const groupId of finalMatchingIds) {
+      addChildren(groupId);
+    }
+
+    // 필터링된 그룹만 반환
+    return groups.filter(g => groupsToShow.has(g.id));
+  }, [groups, searchTerm]);
+
+  // 검색 시 해당 그룹이 일치하는지 확인 (하이라이트용)
+  const isGroupMatchingSearch = (groupName: string): boolean => {
+    if (!searchTerm.trim()) return false;
+    const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
+    const name = groupName.toLowerCase();
+    return keywords.some(keyword => name.includes(keyword));
+  };
+
+  // 검색 시 해당 그룹이 자동으로 펼쳐져야 하는지 확인
+  // (검색어와 일치하는 그룹의 상위 + 마지막 검색어와 일치하는 그룹도 자동 펼침)
+  const shouldAutoExpandForSearch = useMemo(() => {
+    if (!searchTerm.trim()) return new Set<number>();
+    
+    const keywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(k => k.length > 0);
+    if (keywords.length === 0) return new Set<number>();
+
+    // 그룹의 조상 ID들을 가져오는 함수
+    const getAncestorIds = (groupId: number): Set<number> => {
+      const ancestors = new Set<number>();
+      let current = groups.find(g => g.id === groupId);
+      while (current?.parent_group_id) {
+        ancestors.add(current.parent_group_id);
+        current = groups.find(g => g.id === current!.parent_group_id);
+      }
+      return ancestors;
+    };
+
+    // 계층적 검색으로 최종 일치 그룹 찾기 (getFilteredGroups와 동일한 로직)
+    let currentMatchingIds = new Set<number>();
+    for (const group of groups) {
+      const groupName = group.group_name.toLowerCase();
+      if (groupName.includes(keywords[0])) {
+        currentMatchingIds.add(group.id);
+      }
+    }
+
+    for (let i = 1; i < keywords.length; i++) {
+      const keyword = keywords[i];
+      const nextMatchingIds = new Set<number>();
+      
+      for (const group of groups) {
+        const groupName = group.group_name.toLowerCase();
+        if (groupName.includes(keyword)) {
+          const ancestors = getAncestorIds(group.id);
+          const hasMatchingAncestor = Array.from(currentMatchingIds).some(id => 
+            ancestors.has(id) || id === group.id
+          );
+          
+          if (hasMatchingAncestor) {
+            nextMatchingIds.add(group.id);
+          }
+        }
+      }
+      
+      if (nextMatchingIds.size > 0) {
+        nextMatchingIds.forEach(id => currentMatchingIds.add(id));
+        currentMatchingIds = nextMatchingIds;
+      }
+    }
+
+    // 자동 펼침 대상: 일치 그룹의 상위 + 일치 그룹 자체
+    const autoExpandIds = new Set<number>();
+    
+    const addParents = (groupId: number) => {
+      const group = groups.find(g => g.id === groupId);
+      if (group?.parent_group_id) {
+        autoExpandIds.add(group.parent_group_id);
+        addParents(group.parent_group_id);
+      }
+    };
+
+    for (const groupId of currentMatchingIds) {
+      autoExpandIds.add(groupId); // 일치하는 그룹 자체도 펼침 (화면 표시를 위해)
+      addParents(groupId);
+    }
+
+    return autoExpandIds;
+  }, [groups, searchTerm]);
+
   // 그룹 데이터 새로고침
   const loadGroupsData = async () => {
     try {
@@ -635,8 +968,8 @@ export function ScreenGroupTreeView({
 
   return (
     <div className="h-full flex flex-col overflow-hidden">
-      {/* 그룹 추가 버튼 */}
-      <div className="flex-shrink-0 border-b p-2">
+      {/* 그룹 추가 & 동기화 버튼 */}
+      <div className="flex-shrink-0 border-b p-2 space-y-2">
         <Button
           onClick={handleAddGroup}
           variant="outline"
@@ -646,20 +979,37 @@ export function ScreenGroupTreeView({
           <Plus className="h-4 w-4" />
           그룹 추가
         </Button>
+        <Button
+          onClick={handleOpenSyncDialog}
+          variant="ghost"
+          size="sm"
+          className="w-full gap-2 text-muted-foreground"
+        >
+          <RefreshCw className="h-4 w-4" />
+          메뉴 동기화
+        </Button>
       </div>
 
       {/* 트리 목록 */}
       <div className="flex-1 overflow-auto p-2">
+        {/* 검색 결과 없음 표시 */}
+        {searchTerm.trim() && getFilteredGroups.length === 0 && (
+          <div className="py-8 text-center text-sm text-muted-foreground">
+            &quot;{searchTerm}&quot;와 일치하는 폴더가 없습니다
+          </div>
+        )}
+        
         {/* 그룹화된 화면들 (대분류만 먼저 렌더링) */}
-        {groups
+        {getFilteredGroups
           .filter((g) => !(g as any).parent_group_id) // 대분류만 (parent_group_id가 null)
           .map((group) => {
           const groupId = String(group.id);
-          const isExpanded = expandedGroups.has(groupId);
+          const isExpanded = expandedGroups.has(groupId) || shouldAutoExpandForSearch.has(group.id); // 검색 시 상위 그룹만 자동 확장
           const groupScreens = getScreensInGroup(group.id);
+          const isMatching = isGroupMatchingSearch(group.group_name); // 검색어 일치 여부
             
-            // 하위 그룹들 찾기
-            const childGroups = groups.filter((g) => (g as any).parent_group_id === group.id);
+            // 하위 그룹들 찾기 (필터링된 그룹에서만)
+            const childGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === group.id);
 
           return (
             <div key={groupId} className="mb-1">
@@ -667,7 +1017,8 @@ export function ScreenGroupTreeView({
               <div
                 className={cn(
                   "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
-                  "text-sm font-medium group/item"
+                  "text-sm font-medium group/item",
+                  isMatching && "bg-primary/5 dark:bg-primary/10" // 검색 일치 하이라이트 (연한 배경)
                 )}
                 onClick={() => toggleGroup(groupId)}
                 onContextMenu={(e) => handleGroupContextMenu(e, group)}
@@ -682,7 +1033,7 @@ export function ScreenGroupTreeView({
                 ) : (
                   <Folder className="h-4 w-4 shrink-0 text-amber-500" />
                 )}
-                <span className="truncate flex-1">{group.group_name}</span>
+                <span className={cn("truncate flex-1", isMatching && "font-medium text-primary/80")}>{group.group_name}</span>
                 <Badge variant="secondary" className="text-xs">
                   {groupScreens.length}
                 </Badge>
@@ -719,11 +1070,12 @@ export function ScreenGroupTreeView({
                 <div className="ml-6 mt-1 space-y-0.5">
                   {childGroups.map((childGroup) => {
                     const childGroupId = String(childGroup.id);
-                    const isChildExpanded = expandedGroups.has(childGroupId);
+                    const isChildExpanded = expandedGroups.has(childGroupId) || shouldAutoExpandForSearch.has(childGroup.id); // 검색 시 상위 그룹만 자동 확장
                     const childScreens = getScreensInGroup(childGroup.id);
+                    const isChildMatching = isGroupMatchingSearch(childGroup.group_name);
                     
-                    // 손자 그룹들 (3단계)
-                    const grandChildGroups = groups.filter((g) => (g as any).parent_group_id === childGroup.id);
+                    // 손자 그룹들 (3단계) - 필터링된 그룹에서만
+                    const grandChildGroups = getFilteredGroups.filter((g) => (g as any).parent_group_id === childGroup.id);
 
                     return (
                       <div key={childGroupId}>
@@ -731,7 +1083,8 @@ export function ScreenGroupTreeView({
                         <div
                           className={cn(
                             "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
-                            "text-xs font-medium group/item"
+                            "text-xs font-medium group/item",
+                            isChildMatching && "bg-primary/5 dark:bg-primary/10"
                           )}
                           onClick={() => toggleGroup(childGroupId)}
                           onContextMenu={(e) => handleGroupContextMenu(e, childGroup)}
@@ -746,7 +1099,7 @@ export function ScreenGroupTreeView({
                           ) : (
                             <Folder className="h-3 w-3 shrink-0 text-blue-500" />
                           )}
-                          <span className="truncate flex-1">{childGroup.group_name}</span>
+                          <span className={cn("truncate flex-1", isChildMatching && "font-medium text-primary/80")}>{childGroup.group_name}</span>
                           <Badge variant="secondary" className="text-[10px] h-4">
                             {childScreens.length}
                           </Badge>
@@ -782,8 +1135,9 @@ export function ScreenGroupTreeView({
                           <div className="ml-6 mt-1 space-y-0.5">
                             {grandChildGroups.map((grandChild) => {
                               const grandChildId = String(grandChild.id);
-                              const isGrandExpanded = expandedGroups.has(grandChildId);
+                              const isGrandExpanded = expandedGroups.has(grandChildId) || shouldAutoExpandForSearch.has(grandChild.id); // 검색 시 상위 그룹만 자동 확장
                               const grandScreens = getScreensInGroup(grandChild.id);
+                              const isGrandMatching = isGroupMatchingSearch(grandChild.group_name);
 
                               return (
                                 <div key={grandChildId}>
@@ -791,7 +1145,8 @@ export function ScreenGroupTreeView({
                                   <div
                                     className={cn(
                                       "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
-                                      "text-xs group/item"
+                                      "text-xs group/item",
+                                      isGrandMatching && "bg-primary/5 dark:bg-primary/10"
                                     )}
                                     onClick={() => toggleGroup(grandChildId)}
                                     onContextMenu={(e) => handleGroupContextMenu(e, grandChild)}
@@ -806,7 +1161,7 @@ export function ScreenGroupTreeView({
                                     ) : (
                                       <Folder className="h-3 w-3 shrink-0 text-green-500" />
                                     )}
-                                    <span className="truncate flex-1">{grandChild.group_name}</span>
+                                    <span className={cn("truncate flex-1", isGrandMatching && "font-medium text-primary/80")}>{grandChild.group_name}</span>
                                     <Badge variant="outline" className="text-[10px] h-4">
                                       {grandScreens.length}
                                     </Badge>
@@ -1459,6 +1814,206 @@ export function ScreenGroupTreeView({
         </>
       )}
 
+      {/* 메뉴-화면그룹 동기화 다이얼로그 */}
+      <Dialog open={isSyncDialogOpen} onOpenChange={setIsSyncDialogOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">메뉴-화면 동기화</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              화면관리의 폴더 구조와 메뉴관리를 연동합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* 최고 관리자: 회사 선택 */}
+          {isSuperAdmin && (
+            <div className="space-y-2">
+              <Label className="text-xs sm:text-sm">
+                <Building2 className="inline-block h-4 w-4 mr-1" />
+                동기화할 회사 선택
+              </Label>
+              <Popover open={isSyncCompanySelectOpen} onOpenChange={setIsSyncCompanySelectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={isSyncCompanySelectOpen}
+                    className="h-10 w-full justify-between text-sm"
+                  >
+                    {selectedCompanyCode
+                      ? companies.find((c) => c.company_code === selectedCompanyCode)?.company_name || selectedCompanyCode
+                      : "회사를 선택하세요"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0 w-full" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command>
+                    <CommandInput placeholder="회사 검색..." className="text-sm" />
+                    <CommandList>
+                      <CommandEmpty className="text-sm py-2 text-center">회사를 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {companies.map((company) => (
+                          <CommandItem
+                            key={company.company_code}
+                            value={company.company_code}
+                            onSelect={() => handleCompanySelect(company.company_code)}
+                            className="text-sm"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                selectedCompanyCode === company.company_code ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            {company.company_name}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          )}
+
+          {/* 현재 상태 표시 */}
+          {syncStatus ? (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="rounded-md border p-3">
+                  <div className="text-xs text-muted-foreground mb-1">화면관리</div>
+                  <div className="text-lg font-semibold">{syncStatus.screenGroups.total}개</div>
+                  <div className="text-xs text-muted-foreground">
+                    연결됨: {syncStatus.screenGroups.linked} / 미연결: {syncStatus.screenGroups.unlinked}
+                  </div>
+                </div>
+                <div className="rounded-md border p-3">
+                  <div className="text-xs text-muted-foreground mb-1">사용자 메뉴</div>
+                  <div className="text-lg font-semibold">{syncStatus.menuItems.total}개</div>
+                  <div className="text-xs text-muted-foreground">
+                    연결됨: {syncStatus.menuItems.linked} / 미연결: {syncStatus.menuItems.unlinked}
+                  </div>
+                </div>
+              </div>
+
+              {syncStatus.potentialMatches.length > 0 && (
+                <div className="rounded-md border p-3 bg-muted/50">
+                  <div className="text-xs font-medium mb-2">자동 매칭 가능 ({syncStatus.potentialMatches.length}개)</div>
+                  <div className="text-xs text-muted-foreground space-y-1 max-h-24 overflow-auto">
+                    {syncStatus.potentialMatches.slice(0, 5).map((match, i) => (
+                      <div key={i}>
+                        {match.menuName} = {match.groupName}
+                      </div>
+                    ))}
+                    {syncStatus.potentialMatches.length > 5 && (
+                      <div>...외 {syncStatus.potentialMatches.length - 5}개</div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* 동기화 버튼 */}
+              <div className="space-y-2">
+                <Button
+                  onClick={() => handleSync("screen-to-menu")}
+                  disabled={isSyncing}
+                  variant="outline"
+                  className="w-full justify-start gap-2 border-blue-200 bg-blue-50/50 hover:bg-blue-100/70 hover:border-blue-300"
+                >
+                  {isSyncing && syncDirection === "screen-to-menu" ? (
+                    <Loader2 className="h-4 w-4 animate-spin text-blue-600" />
+                  ) : (
+                    <FolderTree className="h-4 w-4 text-blue-600" />
+                  )}
+                  <span className="flex-1 text-left text-blue-700">화면관리 → 메뉴 동기화</span>
+                  <span className="text-xs text-blue-500/70">
+                    폴더 구조를 메뉴에 반영
+                  </span>
+                </Button>
+                <Button
+                  onClick={() => handleSync("menu-to-screen")}
+                  disabled={isSyncing}
+                  variant="outline"
+                  className="w-full justify-start gap-2 border-emerald-200 bg-emerald-50/50 hover:bg-emerald-100/70 hover:border-emerald-300"
+                >
+                  {isSyncing && syncDirection === "menu-to-screen" ? (
+                    <Loader2 className="h-4 w-4 animate-spin text-emerald-600" />
+                  ) : (
+                    <FolderInput className="h-4 w-4 text-emerald-600" />
+                  )}
+                  <span className="flex-1 text-left text-emerald-700">메뉴 → 화면관리 동기화</span>
+                  <span className="text-xs text-emerald-500/70">
+                    메뉴 구조를 폴더에 반영
+                  </span>
+                </Button>
+              </div>
+
+              {/* 전체 동기화 (최고 관리자만) */}
+              {isSuperAdmin && (
+                <div className="border-t pt-3 mt-3">
+                  <Button
+                    onClick={handleSyncAll}
+                    disabled={isSyncing}
+                    variant="default"
+                    className="w-full justify-start gap-2"
+                  >
+                    {isSyncing && syncDirection === "all" ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <RefreshCw className="h-4 w-4" />
+                    )}
+                    <span className="flex-1 text-left">전체 회사 동기화</span>
+                    <span className="text-xs text-primary-foreground/70">
+                      모든 회사 양방향 동기화
+                    </span>
+                  </Button>
+                </div>
+              )}
+            </div>
+          ) : isSuperAdmin && !selectedCompanyCode ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <Building2 className="h-10 w-10 text-muted-foreground mb-3" />
+              <p className="text-sm text-muted-foreground mb-4">
+                개별 회사 동기화를 하려면 회사를 선택해주세요.
+              </p>
+              
+              {/* 전체 회사 동기화 버튼 (회사 선택 없이도 표시) */}
+              <div className="w-full border-t pt-4">
+                <Button
+                  onClick={handleSyncAll}
+                  disabled={isSyncing}
+                  variant="default"
+                  className="w-full justify-start gap-2"
+                >
+                  {isSyncing && syncDirection === "all" ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <RefreshCw className="h-4 w-4" />
+                  )}
+                  <span className="flex-1 text-left">전체 회사 동기화</span>
+                  <span className="text-xs text-primary-foreground/70">
+                    모든 회사 양방향 동기화
+                  </span>
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setIsSyncDialogOpen(false)}
+              disabled={isSyncing}
+            >
+              닫기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
     </div>
   );
 }

frontend/components/screen/panels/DataFlowPanel.tsx

@@ -462,3 +462,4 @@ export default function DataFlowPanel({ groupId, screenId, screens = [] }: DataF
 
 
 
+

frontend/components/screen/panels/FieldJoinPanel.tsx

@@ -414,3 +414,4 @@ export default function FieldJoinPanel({ screenId, componentId, layoutId }: Fiel
 
 
 
+