feat(report): 리포트-메뉴 연결 기능 추가

backend-node/src/services/reportService.ts

@@ -234,10 +234,23 @@ export class ReportService {
     `;
     const queries = await query<ReportQuery>(queriesQuery, [reportId]);
 
+    // 메뉴 매핑 조회
+    const menuMappingQuery = `
+      SELECT menu_objid
+      FROM report_menu_mapping
+      WHERE report_id = $1
+      ORDER BY created_at
+    `;
+    const menuMappings = await query<{ menu_objid: number }>(menuMappingQuery, [
+      reportId,
+    ]);
+    const menuObjids = menuMappings?.map((m) => Number(m.menu_objid)) || [];
+
     return {
       report,
       layout,
       queries: queries || [],
+      menuObjids,
     };
   }
 
@@ -696,6 +709,43 @@ export class ReportService {
         }
       }
 
+      // 3. 메뉴 매핑 저장 (있는 경우)
+      if (data.menuObjids !== undefined) {
+        // 기존 메뉴 매핑 모두 삭제
+        await client.query(
+          `DELETE FROM report_menu_mapping WHERE report_id = $1`,
+          [reportId]
+        );
+
+        // 새 메뉴 매핑 삽입
+        if (data.menuObjids.length > 0) {
+          // 리포트의 company_code 조회
+          const reportResult = await client.query(
+            `SELECT company_code FROM report_master WHERE report_id = $1`,
+            [reportId]
+          );
+          const companyCode = reportResult.rows[0]?.company_code || "*";
+
+          const insertMappingSql = `
+            INSERT INTO report_menu_mapping (
+              report_id,
+              menu_objid,
+              company_code,
+              created_by
+            ) VALUES ($1, $2, $3, $4)
+          `;
+
+          for (const menuObjid of data.menuObjids) {
+            await client.query(insertMappingSql, [
+              reportId,
+              menuObjid,
+              companyCode,
+              userId,
+            ]);
+          }
+        }
+      }
+
       return true;
     });
   }

backend-node/src/types/report.ts

@@ -71,11 +71,12 @@ export interface ReportQuery {
   updated_by: string | null;
 }
 
-// 리포트 상세 (마스터 + 레이아웃 + 쿼리)
+// 리포트 상세 (마스터 + 레이아웃 + 쿼리 + 연결된 메뉴)
 export interface ReportDetail {
   report: ReportMaster;
   layout: ReportLayout | null;
   queries: ReportQuery[];
+  menuObjids?: number[]; // 연결된 메뉴 ID 목록
 }
 
 // 리포트 목록 조회 파라미터
@@ -166,6 +167,17 @@ export interface SaveLayoutRequest {
     parameters: string[];
     externalConnectionId?: number;
   }>;
+  menuObjids?: number[]; // 연결할 메뉴 ID 목록
+}
+
+// 리포트-메뉴 매핑
+export interface ReportMenuMapping {
+  mapping_id: number;
+  report_id: string;
+  menu_objid: number;
+  company_code: string;
+  created_at: Date;
+  created_by: string | null;
 }
 
 // 템플릿 목록 응답

frontend/components/report/designer/MenuSelectModal.tsx

@@ -0,0 +1,320 @@
+"use client";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Loader2, Search, ChevronRight, ChevronDown, FolderOpen, FileText } from "lucide-react";
+import { menuApi } from "@/lib/api/menu";
+import { MenuItem } from "@/types/menu";
+import { cn } from "@/lib/utils";
+
+interface MenuSelectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (menuObjids: number[]) => void;
+  selectedMenuObjids?: number[];
+}
+
+// 트리 구조의 메뉴 노드
+interface MenuTreeNode {
+  objid: string;
+  menuNameKor: string;
+  menuUrl: string;
+  level: number;
+  children: MenuTreeNode[];
+  parentObjId: string;
+}
+
+export function MenuSelectModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  selectedMenuObjids = [],
+}: MenuSelectModalProps) {
+  const [menus, setMenus] = useState<MenuItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set(selectedMenuObjids));
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  // 초기 선택 상태 동기화
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedIds(new Set(selectedMenuObjids));
+    }
+  }, [isOpen, selectedMenuObjids]);
+
+  // 메뉴 목록 로드
+  useEffect(() => {
+    if (isOpen) {
+      fetchMenus();
+    }
+  }, [isOpen]);
+
+  const fetchMenus = async () => {
+    setIsLoading(true);
+    try {
+      const response = await menuApi.getUserMenus();
+      if (response.success && response.data) {
+        setMenus(response.data);
+        // 처음 2레벨까지 자동 확장
+        const initialExpanded = new Set<string>();
+        response.data.forEach((menu) => {
+          const level = menu.lev || menu.LEV || 1;
+          if (level <= 2) {
+            initialExpanded.add(menu.objid || menu.OBJID || "");
+          }
+        });
+        setExpandedIds(initialExpanded);
+      }
+    } catch (error) {
+      console.error("메뉴 로드 오류:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 메뉴 트리 구조 생성
+  const menuTree = useMemo(() => {
+    const menuMap = new Map<string, MenuTreeNode>();
+    const rootMenus: MenuTreeNode[] = [];
+
+    // 모든 메뉴를 노드로 변환
+    menus.forEach((menu) => {
+      const objid = menu.objid || menu.OBJID || "";
+      const parentObjId = menu.parentObjId || menu.PARENT_OBJ_ID || "";
+      const menuNameKor = menu.menuNameKor || menu.MENU_NAME_KOR || menu.translated_name || menu.TRANSLATED_NAME || "";
+      const menuUrl = menu.menuUrl || menu.MENU_URL || "";
+      const level = menu.lev || menu.LEV || 1;
+
+      menuMap.set(objid, {
+        objid,
+        menuNameKor,
+        menuUrl,
+        level,
+        children: [],
+        parentObjId,
+      });
+    });
+
+    // 부모-자식 관계 설정
+    menus.forEach((menu) => {
+      const objid = menu.objid || menu.OBJID || "";
+      const parentObjId = menu.parentObjId || menu.PARENT_OBJ_ID || "";
+      const node = menuMap.get(objid);
+
+      if (!node) return;
+
+      // 최상위 메뉴인지 확인 (parent가 없거나, 특정 루트 ID)
+      const parent = menuMap.get(parentObjId);
+      if (parent) {
+        parent.children.push(node);
+      } else {
+        rootMenus.push(node);
+      }
+    });
+
+    // 자식 메뉴 정렬
+    const sortChildren = (nodes: MenuTreeNode[]) => {
+      nodes.sort((a, b) => a.menuNameKor.localeCompare(b.menuNameKor, "ko"));
+      nodes.forEach((node) => sortChildren(node.children));
+    };
+    sortChildren(rootMenus);
+
+    return rootMenus;
+  }, [menus]);
+
+  // 검색 필터링
+  const filteredTree = useMemo(() => {
+    if (!searchText.trim()) return menuTree;
+
+    const searchLower = searchText.toLowerCase();
+
+    // 검색어에 맞는 노드와 그 조상 노드를 포함
+    const filterNodes = (nodes: MenuTreeNode[]): MenuTreeNode[] => {
+      return nodes
+        .map((node) => {
+          const filteredChildren = filterNodes(node.children);
+          const matches = node.menuNameKor.toLowerCase().includes(searchLower);
+
+          if (matches || filteredChildren.length > 0) {
+            return {
+              ...node,
+              children: filteredChildren,
+            };
+          }
+          return null;
+        })
+        .filter((node): node is MenuTreeNode => node !== null);
+    };
+
+    return filterNodes(menuTree);
+  }, [menuTree, searchText]);
+
+  // 체크박스 토글
+  const toggleSelect = useCallback((objid: string) => {
+    const numericId = Number(objid);
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(numericId)) {
+        next.delete(numericId);
+      } else {
+        next.add(numericId);
+      }
+      return next;
+    });
+  }, []);
+
+  // 확장/축소 토글
+  const toggleExpand = useCallback((objid: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(objid)) {
+        next.delete(objid);
+      } else {
+        next.add(objid);
+      }
+      return next;
+    });
+  }, []);
+
+  // 확인 버튼 클릭
+  const handleConfirm = () => {
+    onConfirm(Array.from(selectedIds));
+    onClose();
+  };
+
+  // 메뉴 노드 렌더링
+  const renderMenuNode = (node: MenuTreeNode, depth: number = 0) => {
+    const hasChildren = node.children.length > 0;
+    const isExpanded = expandedIds.has(node.objid);
+    const isSelected = selectedIds.has(Number(node.objid));
+
+    return (
+      <div key={node.objid}>
+        <div
+          className={cn(
+            "flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-muted/50 cursor-pointer",
+            isSelected && "bg-primary/10",
+          )}
+          style={{ paddingLeft: `${depth * 20 + 8}px` }}
+          onClick={() => toggleSelect(node.objid)}
+        >
+          {/* 확장/축소 버튼 */}
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleExpand(node.objid);
+              }}
+              className="p-0.5 hover:bg-muted rounded"
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+
+          {/* 체크박스 - 모든 메뉴에서 선택 가능 */}
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={() => toggleSelect(node.objid)}
+            onClick={(e) => e.stopPropagation()}
+          />
+
+          {/* 아이콘 */}
+          {hasChildren ? (
+            <FolderOpen className="h-4 w-4 text-amber-500" />
+          ) : (
+            <FileText className="h-4 w-4 text-muted-foreground" />
+          )}
+
+          {/* 메뉴명 */}
+          <span
+            className={cn(
+              "text-sm flex-1 truncate",
+              isSelected && "font-medium text-primary",
+            )}
+          >
+            {node.menuNameKor}
+          </span>
+        </div>
+
+        {/* 자식 메뉴 */}
+        {hasChildren && isExpanded && (
+          <div>{node.children.map((child) => renderMenuNode(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-[600px] max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>사용 메뉴 선택</DialogTitle>
+          <DialogDescription>
+            이 리포트를 사용할 메뉴를 선택하세요. 선택한 메뉴에서 이 리포트를 사용할 수 있습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 검색 */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="메뉴 검색..."
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+
+        {/* 선택된 메뉴 수 */}
+        <div className="text-sm text-muted-foreground">
+          {selectedIds.size}개 메뉴 선택됨
+        </div>
+
+        {/* 메뉴 트리 */}
+        <ScrollArea className="flex-1 border rounded-md">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              <span className="ml-2 text-sm text-muted-foreground">메뉴 로드 중...</span>
+            </div>
+          ) : filteredTree.length === 0 ? (
+            <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+              {searchText ? "검색 결과가 없습니다." : "표시할 메뉴가 없습니다."}
+            </div>
+          ) : (
+            <div className="p-2">{filteredTree.map((node) => renderMenuNode(node))}</div>
+          )}
+        </ScrollArea>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            취소
+          </Button>
+          <Button onClick={handleConfirm}>
+            확인 ({selectedIds.size}개 선택)
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

frontend/components/report/designer/ReportDesignerToolbar.tsx

@@ -54,6 +54,7 @@ import {
 } from "@/components/ui/alert-dialog";
 
 import { SaveAsTemplateModal } from "./SaveAsTemplateModal";
+import { MenuSelectModal } from "./MenuSelectModal";
 import { reportApi } from "@/lib/api/reportApi";
 import { useToast } from "@/hooks/use-toast";
 import { ReportPreviewModal } from "./ReportPreviewModal";
@@ -62,7 +63,7 @@ export function ReportDesignerToolbar() {
   const router = useRouter();
   const {
     reportDetail,
-    saveLayout,
+    saveLayoutWithMenus,
     isSaving,
     loadLayout,
     components,
@@ -100,11 +101,14 @@ export function ReportDesignerToolbar() {
     setShowRuler,
     groupComponents,
     ungroupComponents,
+    menuObjids,
   } = useReportDesigner();
   const [showPreview, setShowPreview] = useState(false);
   const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false);
   const [showBackConfirm, setShowBackConfirm] = useState(false);
   const [showResetConfirm, setShowResetConfirm] = useState(false);
+  const [showMenuSelect, setShowMenuSelect] = useState(false);
+  const [pendingSaveAndClose, setPendingSaveAndClose] = useState(false);
   const { toast } = useToast();
 
   // 버튼 활성화 조건
@@ -123,13 +127,21 @@ export function ReportDesignerToolbar() {
     setShowGrid(newValue);
   };
 
-  const handleSave = async () => {
+  const handleSave = () => {
-    await saveLayout();
+    setPendingSaveAndClose(false);
+    setShowMenuSelect(true);
   };
 
-  const handleSaveAndClose = async () => {
+  const handleSaveAndClose = () => {
-    await saveLayout();
+    setPendingSaveAndClose(true);
-    router.push("/admin/report");
+    setShowMenuSelect(true);
+  };
+
+  const handleMenuSelectConfirm = async (selectedMenuObjids: number[]) => {
+    await saveLayoutWithMenus(selectedMenuObjids);
+    if (pendingSaveAndClose) {
+      router.push("/admin/report");
+    }
   };
 
   const handleResetConfirm = async () => {
@@ -501,6 +513,12 @@ export function ReportDesignerToolbar() {
         onClose={() => setShowSaveAsTemplate(false)}
         onSave={handleSaveAsTemplate}
       />
+      <MenuSelectModal
+        isOpen={showMenuSelect}
+        onClose={() => setShowMenuSelect(false)}
+        onConfirm={handleMenuSelectConfirm}
+        selectedMenuObjids={menuObjids}
+      />
 
       {/* 목록으로 돌아가기 확인 모달 */}
       <AlertDialog open={showBackConfirm} onOpenChange={setShowBackConfirm}>

frontend/contexts/ReportDesignerContext.tsx

@@ -138,6 +138,11 @@ interface ReportDesignerContextType {
   // 그룹화
   groupComponents: () => void;
   ungroupComponents: () => void;
+
+  // 메뉴 연결
+  menuObjids: number[];
+  setMenuObjids: (menuObjids: number[]) => void;
+  saveLayoutWithMenus: (menuObjids: number[]) => Promise<void>;
 }
 
 const ReportDesignerContext = createContext<ReportDesignerContextType | undefined>(undefined);
@@ -158,6 +163,7 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
   const [selectedComponentIds, setSelectedComponentIds] = useState<string[]>([]); // 다중 선택
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
+  const [menuObjids, setMenuObjids] = useState<number[]>([]); // 연결된 메뉴 ID 목록
   const { toast } = useToast();
 
   // 현재 페이지 계산
@@ -1043,6 +1049,13 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
           }));
           setQueries(loadedQueries);
         }
+
+        // 연결된 메뉴 로드
+        if (detailResponse.data.menuObjids && detailResponse.data.menuObjids.length > 0) {
+          setMenuObjids(detailResponse.data.menuObjids);
+        } else {
+          setMenuObjids([]);
+        }
       }
 
       // 레이아웃 조회
@@ -1331,6 +1344,7 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
           ...q,
           externalConnectionId: q.externalConnectionId || undefined,
         })),
+        menuObjids, // 연결된 메뉴 목록
       });
 
       toast({
@@ -1352,7 +1366,68 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     } finally {
       setIsSaving(false);
     }
-  }, [reportId, layoutConfig, queries, toast, loadLayout]);
+  }, [reportId, layoutConfig, queries, menuObjids, toast, loadLayout]);
+
+  // 메뉴를 선택하고 저장하는 함수
+  const saveLayoutWithMenus = useCallback(
+    async (selectedMenuObjids: number[]) => {
+      // 먼저 메뉴 상태 업데이트
+      setMenuObjids(selectedMenuObjids);
+
+      setIsSaving(true);
+      try {
+        let actualReportId = reportId;
+
+        // 새 리포트인 경우 먼저 리포트 생성
+        if (reportId === "new") {
+          const createResponse = await reportApi.createReport({
+            reportNameKor: "새 리포트",
+            reportType: "BASIC",
+            description: "새로 생성된 리포트입니다.",
+          });
+
+          if (!createResponse.success || !createResponse.data) {
+            throw new Error("리포트 생성에 실패했습니다.");
+          }
+
+          actualReportId = createResponse.data.reportId;
+
+          // URL 업데이트 (페이지 리로드 없이)
+          window.history.replaceState({}, "", `/admin/report/designer/${actualReportId}`);
+        }
+
+        // 레이아웃 저장 (선택된 메뉴와 함께)
+        await reportApi.saveLayout(actualReportId, {
+          layoutConfig,
+          queries: queries.map((q) => ({
+            ...q,
+            externalConnectionId: q.externalConnectionId || undefined,
+          })),
+          menuObjids: selectedMenuObjids,
+        });
+
+        toast({
+          title: "성공",
+          description: reportId === "new" ? "리포트가 생성되었습니다." : "레이아웃이 저장되었습니다.",
+        });
+
+        // 새 리포트였다면 데이터 다시 로드
+        if (reportId === "new") {
+          await loadLayout();
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "저장에 실패했습니다.";
+        toast({
+          title: "오류",
+          description: errorMessage,
+          variant: "destructive",
+        });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [reportId, layoutConfig, queries, toast, loadLayout],
+  );
 
   // 템플릿 적용
   const applyTemplate = useCallback(
@@ -1553,6 +1628,10 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     // 그룹화
     groupComponents,
     ungroupComponents,
+    // 메뉴 연결
+    menuObjids,
+    setMenuObjids,
+    saveLayoutWithMenus,
   };
 
   return <ReportDesignerContext.Provider value={value}>{children}</ReportDesignerContext.Provider>;

frontend/types/report.ts

@@ -237,6 +237,7 @@ export interface ReportDetail {
   report: ReportMaster;
   layout: ReportLayout | null;
   queries: ReportQuery[];
+  menuObjids?: number[]; // 연결된 메뉴 ID 목록
 }
 
 // 리포트 목록 응답
@@ -288,6 +289,7 @@ export interface SaveLayoutRequest {
     parameters: string[];
     externalConnectionId?: number;
   }>;
+  menuObjids?: number[]; // 연결할 메뉴 ID 목록
 
   // 하위 호환성 (deprecated)
   canvasWidth?: number;