Merge remote-tracking branch 'upstream/main'

backend-node/package-lock.json

@@ -12,6 +12,7 @@
         "@types/mssql": "^9.1.8",
         "axios": "^1.11.0",
         "bcryptjs": "^2.4.3",
+        "bwip-js": "^4.8.0",
         "compression": "^1.7.4",
         "cors": "^2.8.5",
         "docx": "^9.5.1",
@@ -4540,6 +4541,15 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/bwip-js": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/bwip-js/-/bwip-js-4.8.0.tgz",
+      "integrity": "sha512-gUDkDHSTv8/DJhomSIbO0fX/Dx0MO/sgllLxJyJfu4WixCQe9nfGJzmHm64ZCbxo+gUYQEsQcRmqcwcwPRwUkg==",
+      "license": "MIT",
+      "bin": {
+        "bwip-js": "bin/bwip-js.js"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",

backend-node/package.json

@@ -26,6 +26,7 @@
     "@types/mssql": "^9.1.8",
     "axios": "^1.11.0",
     "bcryptjs": "^2.4.3",
+    "bwip-js": "^4.8.0",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "docx": "^9.5.1",

backend-node/src/controllers/commonCodeController.ts

@@ -94,7 +94,9 @@ export class CommonCodeController {
         sortOrder: code.sort_order,
         isActive: code.is_active,
         useYn: code.is_active,
-        companyCode: code.company_code, // 추가
+        companyCode: code.company_code,
+        parentCodeValue: code.parent_code_value, // 계층구조: 부모 코드값
+        depth: code.depth, // 계층구조: 깊이
 
         // 기존 필드명도 유지 (하위 호환성)
         code_category: code.code_category,
@@ -103,7 +105,9 @@ export class CommonCodeController {
         code_name_eng: code.code_name_eng,
         sort_order: code.sort_order,
         is_active: code.is_active,
-        company_code: code.company_code, // 추가
+        company_code: code.company_code,
+        parent_code_value: code.parent_code_value, // 계층구조: 부모 코드값
+        // depth는 위에서 이미 정의됨 (snake_case와 camelCase 동일)
         created_date: code.created_date,
         created_by: code.created_by,
         updated_date: code.updated_date,
@@ -286,19 +290,17 @@ export class CommonCodeController {
         });
       }
 
-      if (!menuObjid) {
+      // menuObjid가 없으면 공통코드관리 메뉴의 기본 OBJID 사용 (전역 코드)
-        return res.status(400).json({
+      // 공통코드관리 메뉴 OBJID: 1757401858940
-          success: false,
+      const DEFAULT_CODE_MANAGEMENT_MENU_OBJID = 1757401858940;
-          message: "메뉴 OBJID는 필수입니다.",
+      const effectiveMenuObjid = menuObjid ? Number(menuObjid) : DEFAULT_CODE_MANAGEMENT_MENU_OBJID;
-        });
-      }
 
       const code = await this.commonCodeService.createCode(
         categoryCode,
         codeData,
         userId,
         companyCode,
-        Number(menuObjid)
+        effectiveMenuObjid
       );
 
       return res.status(201).json({
@@ -588,4 +590,129 @@ export class CommonCodeController {
       });
     }
   }
+
+  /**
+   * 계층구조 코드 조회
+   * GET /api/common-codes/categories/:categoryCode/hierarchy
+   * Query: parentCodeValue (optional), depth (optional), menuObjid (optional)
+   */
+  async getHierarchicalCodes(req: AuthenticatedRequest, res: Response) {
+    try {
+      const { categoryCode } = req.params;
+      const { parentCodeValue, depth, menuObjid } = req.query;
+      const userCompanyCode = req.user?.companyCode;
+      const menuObjidNum = menuObjid ? Number(menuObjid) : undefined;
+
+      // parentCodeValue가 빈 문자열이면 최상위 코드 조회
+      const parentValue = parentCodeValue === '' || parentCodeValue === undefined 
+        ? null 
+        : parentCodeValue as string;
+
+      const codes = await this.commonCodeService.getHierarchicalCodes(
+        categoryCode,
+        parentValue,
+        depth ? parseInt(depth as string) : undefined,
+        userCompanyCode,
+        menuObjidNum
+      );
+
+      // 프론트엔드 형식으로 변환
+      const transformedData = codes.map((code: any) => ({
+        codeValue: code.code_value,
+        codeName: code.code_name,
+        codeNameEng: code.code_name_eng,
+        description: code.description,
+        sortOrder: code.sort_order,
+        isActive: code.is_active,
+        parentCodeValue: code.parent_code_value,
+        depth: code.depth,
+        // 기존 필드도 유지
+        code_category: code.code_category,
+        code_value: code.code_value,
+        code_name: code.code_name,
+        code_name_eng: code.code_name_eng,
+        sort_order: code.sort_order,
+        is_active: code.is_active,
+        parent_code_value: code.parent_code_value,
+      }));
+
+      return res.json({
+        success: true,
+        data: transformedData,
+        message: `계층구조 코드 조회 성공 (${categoryCode})`,
+      });
+    } catch (error) {
+      logger.error(`계층구조 코드 조회 실패 (${req.params.categoryCode}):`, error);
+      return res.status(500).json({
+        success: false,
+        message: "계층구조 코드 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+
+  /**
+   * 코드 트리 조회
+   * GET /api/common-codes/categories/:categoryCode/tree
+   */
+  async getCodeTree(req: AuthenticatedRequest, res: Response) {
+    try {
+      const { categoryCode } = req.params;
+      const { menuObjid } = req.query;
+      const userCompanyCode = req.user?.companyCode;
+      const menuObjidNum = menuObjid ? Number(menuObjid) : undefined;
+
+      const result = await this.commonCodeService.getCodeTree(
+        categoryCode,
+        userCompanyCode,
+        menuObjidNum
+      );
+
+      return res.json({
+        success: true,
+        data: result,
+        message: `코드 트리 조회 성공 (${categoryCode})`,
+      });
+    } catch (error) {
+      logger.error(`코드 트리 조회 실패 (${req.params.categoryCode}):`, error);
+      return res.status(500).json({
+        success: false,
+        message: "코드 트리 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+
+  /**
+   * 자식 코드 존재 여부 확인
+   * GET /api/common-codes/categories/:categoryCode/codes/:codeValue/has-children
+   */
+  async hasChildren(req: AuthenticatedRequest, res: Response) {
+    try {
+      const { categoryCode, codeValue } = req.params;
+      const companyCode = req.user?.companyCode;
+
+      const hasChildren = await this.commonCodeService.hasChildren(
+        categoryCode,
+        codeValue,
+        companyCode
+      );
+
+      return res.json({
+        success: true,
+        data: { hasChildren },
+        message: "자식 코드 확인 완료",
+      });
+    } catch (error) {
+      logger.error(
+        `자식 코드 확인 실패 (${req.params.categoryCode}.${req.params.codeValue}):`,
+        error
+      );
+      return res.status(500).json({
+        success: false,
+        message: "자식 코드 확인 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
 }

backend-node/src/controllers/reportController.ts

@@ -27,7 +27,13 @@ import {
   BorderStyle,
   PageOrientation,
   convertMillimetersToTwip,
+  Header,
+  Footer,
+  HeadingLevel,
+  TableLayoutType,
 } from "docx";
+import { WatermarkConfig } from "../types/report";
+import bwipjs from "bwip-js";
 
 export class ReportController {
   /**
@@ -587,8 +593,12 @@ export class ReportController {
 
       // mm를 twip으로 변환
       const mmToTwip = (mm: number) => convertMillimetersToTwip(mm);
-      // px를 twip으로 변환 (1px = 15twip at 96DPI)
+      
-      const pxToTwip = (px: number) => Math.round(px * 15);
+      // 프론트엔드와 동일한 MM_TO_PX 상수 (캔버스에서 mm를 px로 변환할 때 사용하는 값)
+      const MM_TO_PX = 4;
+      // 1mm = 56.692913386 twip (docx 라이브러리 기준)
+      // px를 twip으로 변환: px -> mm -> twip
+      const pxToTwip = (px: number) => Math.round((px / MM_TO_PX) * 56.692913386);
 
       // 쿼리 결과 맵
       const queryResultsMap: Record<
@@ -721,6 +731,9 @@ export class ReportController {
               const base64Data =
                 component.imageBase64.split(",")[1] || component.imageBase64;
               const imageBuffer = Buffer.from(base64Data, "base64");
+              // 서명 이미지 크기: 라벨 옆에 인라인으로 표시될 수 있도록 적절한 크기로 조정
+              const sigImageHeight = 30; // 고정 높이 (약 40px)
+              const sigImageWidth = Math.round((component.width / component.height) * sigImageHeight) || 80;
               result.push(
                 new ParagraphRef({
                   children: [
@@ -728,8 +741,8 @@ export class ReportController {
                     new ImageRunRef({
                       data: imageBuffer,
                       transformation: {
-                        width: Math.round(component.width * 0.75),
+                        width: sigImageWidth,
-                        height: Math.round(component.height * 0.75),
+                        height: sigImageHeight,
                       },
                       type: "png",
                     }),
@@ -1326,6 +1339,82 @@ export class ReportController {
           );
         }
 
+        // Barcode 컴포넌트 (바코드 이미지가 미리 생성되어 전달된 경우)
+        else if (component.type === "barcode" && component.barcodeImageBase64) {
+          try {
+            const base64Data =
+              component.barcodeImageBase64.split(",")[1] || component.barcodeImageBase64;
+            const imageBuffer = Buffer.from(base64Data, "base64");
+            result.push(
+              new ParagraphRef({
+                children: [
+                  new ImageRunRef({
+                    data: imageBuffer,
+                    transformation: {
+                      width: Math.round(component.width * 0.75),
+                      height: Math.round(component.height * 0.75),
+                    },
+                    type: "png",
+                  }),
+                ],
+              })
+            );
+          } catch (e) {
+            // 바코드 이미지 생성 실패 시 텍스트로 대체
+            const barcodeValue = component.barcodeValue || "BARCODE";
+            result.push(
+              new ParagraphRef({
+                children: [
+                  new TextRunRef({
+                    text: `[${barcodeValue}]`,
+                    size: pxToHalfPtFn(12),
+                    font: "맑은 고딕",
+                  }),
+                ],
+              })
+            );
+          }
+        }
+
+        // Checkbox 컴포넌트
+        else if (component.type === "checkbox") {
+          // 체크 상태 결정 (쿼리 바인딩 또는 고정값)
+          let isChecked = component.checkboxChecked === true;
+          if (component.checkboxFieldName && component.queryId && queryResultsMapRef[component.queryId]) {
+            const qResult = queryResultsMapRef[component.queryId];
+            if (qResult.rows && qResult.rows.length > 0) {
+              const row = qResult.rows[0];
+              const val = row[component.checkboxFieldName];
+              // truthy/falsy 값 판정
+              if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
+                isChecked = true;
+              } else {
+                isChecked = false;
+              }
+            }
+          }
+          
+          const checkboxSymbol = isChecked ? "☑" : "☐";
+          const checkboxLabel = component.checkboxLabel || "";
+          const labelPosition = component.checkboxLabelPosition || "right";
+          const displayText = labelPosition === "left" 
+            ? `${checkboxLabel} ${checkboxSymbol}` 
+            : `${checkboxSymbol} ${checkboxLabel}`;
+          
+          result.push(
+            new ParagraphRef({
+              children: [
+                new TextRunRef({
+                  text: displayText.trim(),
+                  size: pxToHalfPtFn(component.fontSize || 14),
+                  font: "맑은 고딕",
+                  color: (component.fontColor || "#374151").replace("#", ""),
+                }),
+              ],
+            })
+          );
+        }
+
         // Divider - 테이블 셀로 감싸서 정확한 너비 적용
         else if (
           component.type === "divider" &&
@@ -1354,6 +1443,139 @@ export class ReportController {
         return result;
       };
 
+      // 바코드 이미지 생성 헬퍼 함수
+      const generateBarcodeImage = async (
+        component: any,
+        queryResultsMapRef: Record<string, { fields: string[]; rows: Record<string, unknown>[] }>
+      ): Promise<string | null> => {
+        try {
+          const barcodeType = component.barcodeType || "CODE128";
+          const barcodeColor = (component.barcodeColor || "#000000").replace("#", "");
+          // transparent는 bwip-js에서 지원하지 않으므로 흰색으로 변환
+          let barcodeBackground = (component.barcodeBackground || "#ffffff").replace("#", "");
+          if (barcodeBackground === "transparent" || barcodeBackground === "") {
+            barcodeBackground = "ffffff";
+          }
+          
+          // 바코드 값 결정 (쿼리 바인딩 또는 고정값)
+          let barcodeValue = component.barcodeValue || "SAMPLE123";
+          
+          // QR코드 다중 필드 모드
+          if (
+            barcodeType === "QR" &&
+            component.qrUseMultiField &&
+            component.qrDataFields &&
+            component.qrDataFields.length > 0 &&
+            component.queryId &&
+            queryResultsMapRef[component.queryId]
+          ) {
+            const qResult = queryResultsMapRef[component.queryId];
+            if (qResult.rows && qResult.rows.length > 0) {
+              // 모든 행 포함 모드
+              if (component.qrIncludeAllRows) {
+                const allRowsData: Record<string, string>[] = [];
+                qResult.rows.forEach((row) => {
+                  const rowData: Record<string, string> = {};
+                  component.qrDataFields!.forEach((field: { fieldName: string; label: string }) => {
+                    if (field.fieldName && field.label) {
+                      const val = row[field.fieldName];
+                      rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
+                    }
+                  });
+                  allRowsData.push(rowData);
+                });
+                barcodeValue = JSON.stringify(allRowsData);
+              } else {
+                // 단일 행 (첫 번째 행만)
+                const row = qResult.rows[0];
+                const jsonData: Record<string, string> = {};
+                component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
+                  if (field.fieldName && field.label) {
+                    const val = row[field.fieldName];
+                    jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
+                  }
+                });
+                barcodeValue = JSON.stringify(jsonData);
+              }
+            }
+          }
+          // 단일 필드 바인딩
+          else if (component.barcodeFieldName && component.queryId && queryResultsMapRef[component.queryId]) {
+            const qResult = queryResultsMapRef[component.queryId];
+            if (qResult.rows && qResult.rows.length > 0) {
+              // QR코드 + 모든 행 포함
+              if (barcodeType === "QR" && component.qrIncludeAllRows) {
+                const allValues = qResult.rows
+                  .map((row) => {
+                    const val = row[component.barcodeFieldName!];
+                    return val !== null && val !== undefined ? String(val) : "";
+                  })
+                  .filter((v) => v !== "");
+                barcodeValue = JSON.stringify(allValues);
+              } else {
+                // 단일 행 (첫 번째 행만)
+                const row = qResult.rows[0];
+                const val = row[component.barcodeFieldName];
+                if (val !== null && val !== undefined) {
+                  barcodeValue = String(val);
+                }
+              }
+            }
+          }
+
+          // bwip-js 바코드 타입 매핑
+          const bcidMap: Record<string, string> = {
+            "CODE128": "code128",
+            "CODE39": "code39",
+            "EAN13": "ean13",
+            "EAN8": "ean8",
+            "UPC": "upca",
+            "QR": "qrcode",
+          };
+
+          const bcid = bcidMap[barcodeType] || "code128";
+          const isQR = barcodeType === "QR";
+
+          // 바코드 옵션 설정
+          const options: any = {
+            bcid: bcid,
+            text: barcodeValue,
+            scale: 3,
+            includetext: !isQR && component.showBarcodeText !== false,
+            textxalign: "center",
+            barcolor: barcodeColor,
+            backgroundcolor: barcodeBackground,
+          };
+
+          // QR 코드 옵션
+          if (isQR) {
+            options.eclevel = component.qrErrorCorrectionLevel || "M";
+          }
+
+          // 바코드 이미지 생성
+          const png = await bwipjs.toBuffer(options);
+          const base64 = png.toString("base64");
+          return `data:image/png;base64,${base64}`;
+        } catch (error) {
+          console.error("바코드 생성 오류:", error);
+          return null;
+        }
+      };
+
+      // 모든 페이지의 바코드 컴포넌트에 대해 이미지 생성
+      for (const page of layoutConfig.pages) {
+        if (page.components) {
+          for (const component of page.components) {
+            if (component.type === "barcode") {
+              const barcodeImage = await generateBarcodeImage(component, queryResultsMap);
+              if (barcodeImage) {
+                component.barcodeImageBase64 = barcodeImage;
+              }
+            }
+          }
+        }
+      }
+
       // 섹션 생성 (페이지별)
       const sortedPages = layoutConfig.pages.sort(
         (a: any, b: any) => a.page_order - b.page_order
@@ -1529,6 +1751,7 @@ export class ReportController {
             const rowTable = new Table({
               rows: [new TableRow({ children: cells })],
               width: { size: 100, type: WidthType.PERCENTAGE },
+              layout: TableLayoutType.FIXED, // 셀 너비 고정
               borders: {
                 top: { style: BorderStyle.NONE, size: 0, color: "FFFFFF" },
                 bottom: { style: BorderStyle.NONE, size: 0, color: "FFFFFF" },
@@ -1611,6 +1834,7 @@ export class ReportController {
             const textTable = new Table({
               rows: [new TableRow({ children: [textCell] })],
               width: { size: pxToTwip(component.width), type: WidthType.DXA },
+              layout: TableLayoutType.FIXED, // 셀 너비 고정
               indent: { size: indentLeft, type: WidthType.DXA },
               borders: {
                 top: { style: BorderStyle.NONE, size: 0, color: "FFFFFF" },
@@ -1760,6 +1984,10 @@ export class ReportController {
                   component.imageBase64.split(",")[1] || component.imageBase64;
                 const imageBuffer = Buffer.from(base64Data, "base64");
 
+                // 서명 이미지 크기: 라벨 옆에 인라인으로 표시될 수 있도록 적절한 크기로 조정
+                const sigImageHeight = 30; // 고정 높이
+                const sigImageWidth = Math.round((component.width / component.height) * sigImageHeight) || 80;
+
                 const paragraph = new Paragraph({
                   spacing: { before: spacingBefore, after: 0 },
                   indent: { left: indentLeft },
@@ -1768,8 +1996,8 @@ export class ReportController {
                     new ImageRun({
                       data: imageBuffer,
                       transformation: {
-                        width: Math.round(component.width * 0.75),
+                        width: sigImageWidth,
-                        height: Math.round(component.height * 0.75),
+                        height: sigImageHeight,
                       },
                       type: "png",
                     }),
@@ -2624,6 +2852,129 @@ export class ReportController {
             lastBottomY = adjustedY + component.height;
           }
 
+          // Barcode 컴포넌트
+          else if (component.type === "barcode") {
+            if (component.barcodeImageBase64) {
+              try {
+                const base64Data =
+                  component.barcodeImageBase64.split(",")[1] || component.barcodeImageBase64;
+                const imageBuffer = Buffer.from(base64Data, "base64");
+
+                // spacing을 위한 빈 paragraph
+                if (spacingBefore > 0) {
+                  children.push(
+                    new Paragraph({
+                      spacing: { before: spacingBefore, after: 0 },
+                      children: [],
+                    })
+                  );
+                }
+
+                children.push(
+                  new Paragraph({
+                    indent: { left: indentLeft },
+                    children: [
+                      new ImageRun({
+                        data: imageBuffer,
+                        transformation: {
+                          width: Math.round(component.width * 0.75),
+                          height: Math.round(component.height * 0.75),
+                        },
+                        type: "png",
+                      }),
+                    ],
+                  })
+                );
+              } catch (imgError) {
+                console.error("바코드 이미지 오류:", imgError);
+                // 바코드 이미지 생성 실패 시 텍스트로 대체
+                const barcodeValue = component.barcodeValue || "BARCODE";
+                children.push(
+                  new Paragraph({
+                    spacing: { before: spacingBefore, after: 0 },
+                    indent: { left: indentLeft },
+                    children: [
+                      new TextRun({
+                        text: `[${barcodeValue}]`,
+                        size: pxToHalfPt(12),
+                        font: "맑은 고딕",
+                      }),
+                    ],
+                  })
+                );
+              }
+            } else {
+              // 바코드 이미지가 없는 경우 텍스트로 대체
+              const barcodeValue = component.barcodeValue || "BARCODE";
+              children.push(
+                new Paragraph({
+                  spacing: { before: spacingBefore, after: 0 },
+                  indent: { left: indentLeft },
+                  children: [
+                    new TextRun({
+                      text: `[${barcodeValue}]`,
+                      size: pxToHalfPt(12),
+                      font: "맑은 고딕",
+                    }),
+                  ],
+                })
+              );
+            }
+            lastBottomY = adjustedY + component.height;
+          }
+
+          // Checkbox 컴포넌트
+          else if (component.type === "checkbox") {
+            // 체크 상태 결정 (쿼리 바인딩 또는 고정값)
+            let isChecked = component.checkboxChecked === true;
+            if (component.checkboxFieldName && component.queryId && queryResultsMap[component.queryId]) {
+              const qResult = queryResultsMap[component.queryId];
+              if (qResult.rows && qResult.rows.length > 0) {
+                const row = qResult.rows[0];
+                const val = row[component.checkboxFieldName];
+                // truthy/falsy 값 판정
+                if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
+                  isChecked = true;
+                } else {
+                  isChecked = false;
+                }
+              }
+            }
+            
+            const checkboxSymbol = isChecked ? "☑" : "☐";
+            const checkboxLabel = component.checkboxLabel || "";
+            const labelPosition = component.checkboxLabelPosition || "right";
+            const displayText = labelPosition === "left" 
+              ? `${checkboxLabel} ${checkboxSymbol}` 
+              : `${checkboxSymbol} ${checkboxLabel}`;
+            
+            // spacing을 위한 빈 paragraph
+            if (spacingBefore > 0) {
+              children.push(
+                new Paragraph({
+                  spacing: { before: spacingBefore, after: 0 },
+                  children: [],
+                })
+              );
+            }
+            
+            children.push(
+              new Paragraph({
+                indent: { left: indentLeft },
+                children: [
+                  new TextRun({
+                    text: displayText.trim(),
+                    size: pxToHalfPt(component.fontSize || 14),
+                    font: "맑은 고딕",
+                    color: (component.fontColor || "#374151").replace("#", ""),
+                  }),
+                ],
+              })
+            );
+            
+            lastBottomY = adjustedY + component.height;
+          }
+
           // Table 컴포넌트
           else if (component.type === "table" && component.queryId) {
             const queryResult = queryResultsMap[component.queryId];
@@ -2734,6 +3085,36 @@ export class ReportController {
           children.push(new Paragraph({ children: [] }));
         }
 
+        // 워터마크 헤더 생성 (전체 페이지 공유 워터마크)
+        const watermark: WatermarkConfig | undefined = layoutConfig.watermark;
+        let headers: { default?: Header } | undefined;
+
+        if (watermark?.enabled && watermark.type === "text" && watermark.text) {
+          // 워터마크 색상을 hex로 변환 (alpha 적용)
+          const opacity = watermark.opacity ?? 0.3;
+          const fontColor = watermark.fontColor || "#CCCCCC";
+          // hex 색상에서 # 제거
+          const cleanColor = fontColor.replace("#", "");
+
+          headers = {
+            default: new Header({
+              children: [
+                new Paragraph({
+                  alignment: AlignmentType.CENTER,
+                  children: [
+                    new TextRun({
+                      text: watermark.text,
+                      size: (watermark.fontSize || 48) * 2, // Word는 half-point 사용
+                      color: cleanColor,
+                      bold: true,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          };
+        }
+
         return {
           properties: {
             page: {
@@ -2753,6 +3134,7 @@ export class ReportController {
               },
             },
           },
+          headers,
           children,
         };
       });

backend-node/src/routes/cascadingAutoFillRoutes.ts

@@ -54,3 +54,4 @@ export default router;
 
 
 
+

backend-node/src/routes/cascadingConditionRoutes.ts

@@ -50,3 +50,4 @@ export default router;
 
 
 
+

backend-node/src/routes/cascadingHierarchyRoutes.ts

@@ -66,3 +66,4 @@ export default router;
 
 
 
+

backend-node/src/routes/cascadingMutualExclusionRoutes.ts

@@ -54,3 +54,4 @@ export default router;
 
 
 
+

backend-node/src/routes/commonCodeRoutes.ts

@@ -46,6 +46,21 @@ router.put("/categories/:categoryCode/codes/reorder", (req, res) =>
   commonCodeController.reorderCodes(req, res)
 );
 
+// 계층구조 코드 조회 (구체적인 경로를 먼저 배치)
+router.get("/categories/:categoryCode/hierarchy", (req, res) =>
+  commonCodeController.getHierarchicalCodes(req, res)
+);
+
+// 코드 트리 조회
+router.get("/categories/:categoryCode/tree", (req, res) =>
+  commonCodeController.getCodeTree(req, res)
+);
+
+// 자식 코드 존재 여부 확인
+router.get("/categories/:categoryCode/codes/:codeValue/has-children", (req, res) =>
+  commonCodeController.hasChildren(req, res)
+);
+
 router.put("/categories/:categoryCode/codes/:codeValue", (req, res) =>
   commonCodeController.updateCode(req, res)
 );

backend-node/src/services/commonCodeService.ts

@@ -25,6 +25,8 @@ export interface CodeInfo {
   is_active: string;
   company_code: string;
   menu_objid?: number | null; // 메뉴 기반 코드 관리용
+  parent_code_value?: string | null; // 계층구조: 부모 코드값
+  depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
   created_date?: Date | null;
   created_by?: string | null;
   updated_date?: Date | null;
@@ -61,6 +63,8 @@ export interface CreateCodeData {
   description?: string;
   sortOrder?: number;
   isActive?: string;
+  parentCodeValue?: string; // 계층구조: 부모 코드값
+  depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
 }
 
 export class CommonCodeService {
@@ -405,11 +409,22 @@ export class CommonCodeService {
     menuObjid: number
   ) {
     try {
+      // 계층구조: depth 계산 (부모가 있으면 부모의 depth + 1, 없으면 1)
+      let depth = 1;
+      if (data.parentCodeValue) {
+        const parentCode = await queryOne<CodeInfo>(
+          `SELECT depth FROM code_info 
+           WHERE code_category = $1 AND code_value = $2 AND company_code = $3`,
+          [categoryCode, data.parentCodeValue, companyCode]
+        );
+        depth = parentCode ? (parentCode.depth || 1) + 1 : 1;
+      }
+
       const code = await queryOne<CodeInfo>(
         `INSERT INTO code_info 
          (code_category, code_value, code_name, code_name_eng, description, sort_order, 
-          is_active, menu_objid, company_code, created_by, updated_by, created_date, updated_date)
+          is_active, menu_objid, company_code, parent_code_value, depth, created_by, updated_by, created_date, updated_date)
-         VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $8, $9, $10, NOW(), NOW())
+         VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $8, $9, $10, $11, $12, NOW(), NOW())
          RETURNING *`,
         [
           categoryCode,
@@ -420,13 +435,15 @@ export class CommonCodeService {
           data.sortOrder || 0,
           menuObjid,
           companyCode,
+          data.parentCodeValue || null,
+          depth,
           createdBy,
           createdBy,
         ]
       );
 
       logger.info(
-        `코드 생성 완료: ${categoryCode}.${data.codeValue} (메뉴: ${menuObjid}, 회사: ${companyCode})`
+        `코드 생성 완료: ${categoryCode}.${data.codeValue} (메뉴: ${menuObjid}, 회사: ${companyCode}, 부모: ${data.parentCodeValue || '없음'}, 깊이: ${depth})`
       );
       return code;
     } catch (error) {
@@ -491,6 +508,24 @@ export class CommonCodeService {
         updateFields.push(`is_active = $${paramIndex++}`);
         values.push(activeValue);
       }
+      // 계층구조: 부모 코드값 수정
+      if (data.parentCodeValue !== undefined) {
+        updateFields.push(`parent_code_value = $${paramIndex++}`);
+        values.push(data.parentCodeValue || null);
+        
+        // depth도 함께 업데이트
+        let newDepth = 1;
+        if (data.parentCodeValue) {
+          const parentCode = await queryOne<CodeInfo>(
+            `SELECT depth FROM code_info 
+             WHERE code_category = $1 AND code_value = $2`,
+            [categoryCode, data.parentCodeValue]
+          );
+          newDepth = parentCode ? (parentCode.depth || 1) + 1 : 1;
+        }
+        updateFields.push(`depth = $${paramIndex++}`);
+        values.push(newDepth);
+      }
 
       // WHERE 절 구성
       let whereClause = `WHERE code_category = $${paramIndex++} AND code_value = $${paramIndex}`;
@@ -847,4 +882,170 @@ export class CommonCodeService {
       throw error;
     }
   }
+
+  /**
+   * 계층구조 코드 조회 (특정 depth 또는 부모코드 기준)
+   * @param categoryCode 카테고리 코드
+   * @param parentCodeValue 부모 코드값 (없으면 최상위 코드만 조회)
+   * @param depth 특정 깊이만 조회 (선택)
+   */
+  async getHierarchicalCodes(
+    categoryCode: string,
+    parentCodeValue?: string | null,
+    depth?: number,
+    userCompanyCode?: string,
+    menuObjid?: number
+  ) {
+    try {
+      const whereConditions: string[] = ["code_category = $1", "is_active = 'Y'"];
+      const values: any[] = [categoryCode];
+      let paramIndex = 2;
+
+      // 부모 코드값 필터링
+      if (parentCodeValue === null || parentCodeValue === undefined) {
+        // 최상위 코드 (부모가 없는 코드)
+        whereConditions.push("(parent_code_value IS NULL OR parent_code_value = '')");
+      } else if (parentCodeValue !== '') {
+        whereConditions.push(`parent_code_value = $${paramIndex}`);
+        values.push(parentCodeValue);
+        paramIndex++;
+      }
+
+      // 특정 깊이 필터링
+      if (depth !== undefined) {
+        whereConditions.push(`depth = $${paramIndex}`);
+        values.push(depth);
+        paramIndex++;
+      }
+
+      // 메뉴별 필터링 (형제 메뉴 포함)
+      if (menuObjid) {
+        const { getSiblingMenuObjids } = await import('./menuService');
+        const siblingMenuObjids = await getSiblingMenuObjids(menuObjid);
+        whereConditions.push(`menu_objid = ANY($${paramIndex})`);
+        values.push(siblingMenuObjids);
+        paramIndex++;
+      }
+
+      // 회사별 필터링
+      if (userCompanyCode && userCompanyCode !== "*") {
+        whereConditions.push(`company_code = $${paramIndex}`);
+        values.push(userCompanyCode);
+        paramIndex++;
+      }
+
+      const whereClause = `WHERE ${whereConditions.join(" AND ")}`;
+
+      const codes = await query<CodeInfo>(
+        `SELECT * FROM code_info
+         ${whereClause}
+         ORDER BY sort_order ASC, code_value ASC`,
+        values
+      );
+
+      logger.info(
+        `계층구조 코드 조회: ${categoryCode}, 부모: ${parentCodeValue || '최상위'}, 깊이: ${depth || '전체'} - ${codes.length}개`
+      );
+
+      return codes;
+    } catch (error) {
+      logger.error(`계층구조 코드 조회 중 오류 (${categoryCode}):`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 계층구조 코드 트리 전체 조회 (카테고리 기준)
+   */
+  async getCodeTree(
+    categoryCode: string,
+    userCompanyCode?: string,
+    menuObjid?: number
+  ) {
+    try {
+      const whereConditions: string[] = ["code_category = $1", "is_active = 'Y'"];
+      const values: any[] = [categoryCode];
+      let paramIndex = 2;
+
+      // 메뉴별 필터링 (형제 메뉴 포함)
+      if (menuObjid) {
+        const { getSiblingMenuObjids } = await import('./menuService');
+        const siblingMenuObjids = await getSiblingMenuObjids(menuObjid);
+        whereConditions.push(`menu_objid = ANY($${paramIndex})`);
+        values.push(siblingMenuObjids);
+        paramIndex++;
+      }
+
+      // 회사별 필터링
+      if (userCompanyCode && userCompanyCode !== "*") {
+        whereConditions.push(`company_code = $${paramIndex}`);
+        values.push(userCompanyCode);
+        paramIndex++;
+      }
+
+      const whereClause = `WHERE ${whereConditions.join(" AND ")}`;
+
+      const allCodes = await query<CodeInfo>(
+        `SELECT * FROM code_info
+         ${whereClause}
+         ORDER BY depth ASC, sort_order ASC, code_value ASC`,
+        values
+      );
+
+      // 트리 구조로 변환
+      const buildTree = (codes: CodeInfo[], parentValue: string | null = null): any[] => {
+        return codes
+          .filter(code => {
+            const codeParent = code.parent_code_value || null;
+            return codeParent === parentValue;
+          })
+          .map(code => ({
+            ...code,
+            children: buildTree(codes, code.code_value)
+          }));
+      };
+
+      const tree = buildTree(allCodes);
+
+      logger.info(
+        `코드 트리 조회 완료: ${categoryCode} - 전체 ${allCodes.length}개`
+      );
+
+      return {
+        flat: allCodes,
+        tree
+      };
+    } catch (error) {
+      logger.error(`코드 트리 조회 중 오류 (${categoryCode}):`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 자식 코드가 있는지 확인
+   */
+  async hasChildren(
+    categoryCode: string,
+    codeValue: string,
+    companyCode?: string
+  ): Promise<boolean> {
+    try {
+      let sql = `SELECT COUNT(*) as count FROM code_info 
+                 WHERE code_category = $1 AND parent_code_value = $2`;
+      const values: any[] = [categoryCode, codeValue];
+
+      if (companyCode && companyCode !== "*") {
+        sql += ` AND company_code = $3`;
+        values.push(companyCode);
+      }
+
+      const result = await queryOne<{ count: string }>(sql, values);
+      const count = parseInt(result?.count || "0");
+
+      return count > 0;
+    } catch (error) {
+      logger.error(`자식 코드 확인 중 오류 (${categoryCode}.${codeValue}):`, error);
+      throw error;
+    }
+  }
 }

backend-node/src/services/menuCopyService.ts

@@ -279,11 +279,90 @@ export class MenuCopyService {
           logger.debug(`    📐 분할 패널 우측 화면 참조 발견: ${numId}`);
         }
       }
+
+      // 5) 모달 화면 ID (addModalScreenId, editModalScreenId, modalScreenId)
+      if (props?.componentConfig?.addModalScreenId) {
+        const addModalScreenId = props.componentConfig.addModalScreenId;
+        const numId =
+          typeof addModalScreenId === "number"
+            ? addModalScreenId
+            : parseInt(addModalScreenId);
+        if (!isNaN(numId) && numId > 0) {
+          referenced.push(numId);
+          logger.debug(`    📋 추가 모달 화면 참조 발견: ${numId}`);
+        }
+      }
+
+      if (props?.componentConfig?.editModalScreenId) {
+        const editModalScreenId = props.componentConfig.editModalScreenId;
+        const numId =
+          typeof editModalScreenId === "number"
+            ? editModalScreenId
+            : parseInt(editModalScreenId);
+        if (!isNaN(numId) && numId > 0) {
+          referenced.push(numId);
+          logger.debug(`    📝 수정 모달 화면 참조 발견: ${numId}`);
+        }
+      }
+
+      if (props?.componentConfig?.modalScreenId) {
+        const modalScreenId = props.componentConfig.modalScreenId;
+        const numId =
+          typeof modalScreenId === "number"
+            ? modalScreenId
+            : parseInt(modalScreenId);
+        if (!isNaN(numId) && numId > 0) {
+          referenced.push(numId);
+          logger.debug(`    🔲 모달 화면 참조 발견: ${numId}`);
+        }
+      }
+
+      // 6) 재귀적으로 모든 properties에서 화면 ID 추출 (깊은 탐색)
+      this.extractScreenIdsFromObject(props, referenced);
     }
 
     return referenced;
   }
 
+  /**
+   * 객체 내부에서 화면 ID를 재귀적으로 추출
+   */
+  private extractScreenIdsFromObject(obj: any, referenced: number[]): void {
+    if (!obj || typeof obj !== "object") return;
+
+    if (Array.isArray(obj)) {
+      for (const item of obj) {
+        this.extractScreenIdsFromObject(item, referenced);
+      }
+      return;
+    }
+
+    for (const key of Object.keys(obj)) {
+      const value = obj[key];
+
+      // 화면 ID 키 패턴 확인
+      if (
+        key === "screenId" ||
+        key === "targetScreenId" ||
+        key === "leftScreenId" ||
+        key === "rightScreenId" ||
+        key === "addModalScreenId" ||
+        key === "editModalScreenId" ||
+        key === "modalScreenId"
+      ) {
+        const numId = typeof value === "number" ? value : parseInt(value);
+        if (!isNaN(numId) && numId > 0 && !referenced.includes(numId)) {
+          referenced.push(numId);
+        }
+      }
+
+      // 재귀 탐색
+      if (typeof value === "object" && value !== null) {
+        this.extractScreenIdsFromObject(value, referenced);
+      }
+    }
+  }
+
   /**
    * 화면 수집 (중복 제거, 재귀적 참조 추적)
    */
@@ -483,7 +562,8 @@ export class MenuCopyService {
     properties: any,
     screenIdMap: Map<number, number>,
     flowIdMap: Map<number, number>,
-    numberingRuleIdMap?: Map<string, string>
+    numberingRuleIdMap?: Map<string, string>,
+    menuIdMap?: Map<number, number>
   ): any {
     if (!properties) return properties;
 
@@ -496,7 +576,8 @@ export class MenuCopyService {
       screenIdMap,
       flowIdMap,
       "",
-      numberingRuleIdMap
+      numberingRuleIdMap,
+      menuIdMap
     );
 
     return updated;
@@ -510,7 +591,8 @@ export class MenuCopyService {
     screenIdMap: Map<number, number>,
     flowIdMap: Map<number, number>,
     path: string = "",
-    numberingRuleIdMap?: Map<string, string>
+    numberingRuleIdMap?: Map<string, string>,
+    menuIdMap?: Map<number, number>
   ): void {
     if (!obj || typeof obj !== "object") return;
 
@@ -522,7 +604,8 @@ export class MenuCopyService {
           screenIdMap,
           flowIdMap,
           `${path}[${index}]`,
-          numberingRuleIdMap
+          numberingRuleIdMap,
+          menuIdMap
         );
       });
       return;
@@ -533,13 +616,16 @@ export class MenuCopyService {
       const value = obj[key];
       const currentPath = path ? `${path}.${key}` : key;
 
-      // screen_id, screenId, targetScreenId, leftScreenId, rightScreenId 매핑 (숫자 또는 숫자 문자열)
+      // screen_id, screenId, targetScreenId, leftScreenId, rightScreenId, addModalScreenId, editModalScreenId, modalScreenId 매핑 (숫자 또는 숫자 문자열)
       if (
         key === "screen_id" ||
         key === "screenId" ||
         key === "targetScreenId" ||
         key === "leftScreenId" ||
-        key === "rightScreenId"
+        key === "rightScreenId" ||
+        key === "addModalScreenId" ||
+        key === "editModalScreenId" ||
+        key === "modalScreenId"
       ) {
         const numValue = typeof value === "number" ? value : parseInt(value);
         if (!isNaN(numValue) && numValue > 0) {
@@ -549,6 +635,11 @@ export class MenuCopyService {
             logger.info(
               `    🔗 화면 참조 업데이트 (${currentPath}): ${value} → ${newId}`
             );
+          } else {
+            // 매핑이 없으면 경고 로그 (복사되지 않은 화면 참조)
+            logger.warn(
+              `    ⚠️ 화면 매핑 없음 (${currentPath}): ${value} - 원본 화면이 복사되지 않았을 수 있음`
+            );
           }
         }
       }
@@ -573,9 +664,9 @@ export class MenuCopyService {
         }
       }
 
-      // numberingRuleId 매핑 (문자열)
+      // numberingRuleId, ruleId 매핑 (문자열) - 채번규칙 참조
       if (
-        key === "numberingRuleId" &&
+        (key === "numberingRuleId" || key === "ruleId") &&
         numberingRuleIdMap &&
         typeof value === "string" &&
         value
@@ -595,6 +686,25 @@ export class MenuCopyService {
         }
       }
 
+      // selectedMenuObjid 매핑 (메뉴 objid 참조)
+      if (key === "selectedMenuObjid" && menuIdMap) {
+        const numValue = typeof value === "number" ? value : parseInt(value);
+        if (!isNaN(numValue) && numValue > 0) {
+          const newId = menuIdMap.get(numValue);
+          if (newId) {
+            obj[key] = typeof value === "number" ? newId : String(newId);
+            logger.info(
+              `    🔗 메뉴 참조 업데이트 (${currentPath}): ${value} → ${newId}`
+            );
+          } else {
+            // 매핑이 없으면 경고 로그 (복사되지 않은 메뉴 참조)
+            logger.warn(
+              `    ⚠️ 메뉴 매핑 없음 (${currentPath}): ${value} - 원본 메뉴가 복사되지 않았을 수 있음`
+            );
+          }
+        }
+      }
+
       // 재귀 호출
       if (typeof value === "object" && value !== null) {
         this.recursiveUpdateReferences(
@@ -602,7 +712,8 @@ export class MenuCopyService {
           screenIdMap,
           flowIdMap,
           currentPath,
-          numberingRuleIdMap
+          numberingRuleIdMap,
+          menuIdMap
         );
       }
     }
@@ -938,7 +1049,9 @@ export class MenuCopyService {
         copiedCategoryMappings = await this.copyCategoryMappingsAndValues(
           menuObjids,
           menuIdMap,
+          sourceCompanyCode,
           targetCompanyCode,
+          Array.from(screenIds),
           userId,
           client
         );
@@ -979,7 +1092,8 @@ export class MenuCopyService {
         userId,
         client,
         screenNameConfig,
-        numberingRuleIdMap
+        numberingRuleIdMap,
+        menuIdMap
       );
 
       // === 6단계: 화면-메뉴 할당 ===
@@ -1313,7 +1427,8 @@ export class MenuCopyService {
       removeText?: string;
       addPrefix?: string;
     },
-    numberingRuleIdMap?: Map<string, string>
+    numberingRuleIdMap?: Map<string, string>,
+    menuIdMap?: Map<number, number>
   ): Promise<Map<number, number>> {
     const screenIdMap = new Map<number, number>();
 
@@ -1599,7 +1714,8 @@ export class MenuCopyService {
               layout.properties,
               screenIdMap,
               flowIdMap,
-              numberingRuleIdMap
+              numberingRuleIdMap,
+              menuIdMap
             );
 
             layoutValues.push(
@@ -2445,6 +2561,24 @@ export class MenuCopyService {
 
       const ruleParams = rulesToCopy.flatMap((r) => {
         const newMenuObjid = menuIdMap.get(r.menu_objid);
+        // scope_type = 'menu'인 경우 menu_objid가 반드시 필요함 (check 제약조건)
+        // menuIdMap에 없으면 원본 menu_objid가 복사된 메뉴 범위 밖이므로
+        // scope_type을 'table'로 변경하거나, 매핑이 없으면 null 처리
+        const finalMenuObjid = newMenuObjid !== undefined ? newMenuObjid : null;
+        // scope_type 결정 로직:
+        // 1. menu 스코프인데 menu_objid 매핑이 없는 경우
+        //    - table_name이 있으면 'table' 스코프로 변경
+        //    - table_name이 없으면 'global' 스코프로 변경
+        // 2. 그 외에는 원본 scope_type 유지
+        let finalScopeType = r.scope_type;
+        if (r.scope_type === "menu" && finalMenuObjid === null) {
+          if (r.table_name) {
+            finalScopeType = "table"; // table_name이 있으면 table 스코프
+          } else {
+            finalScopeType = "global"; // table_name도 없으면 global 스코프
+          }
+        }
+
         return [
           r.newRuleId,
           r.rule_name,
@@ -2456,8 +2590,8 @@ export class MenuCopyService {
           r.column_name,
           targetCompanyCode,
           userId,
-          newMenuObjid,
+          finalMenuObjid,
-          r.scope_type,
+          finalScopeType,
           null,
         ];
       });
@@ -2478,8 +2612,11 @@ export class MenuCopyService {
     // 4-1. 기존 채번 규칙의 menu_objid 업데이트 (새 메뉴와 연결) - 배치 처리
     if (rulesToUpdate.length > 0) {
       // CASE WHEN을 사용한 배치 업데이트
+      // menu_objid는 numeric 타입이므로 ::numeric 캐스팅 필요
       const caseWhen = rulesToUpdate
-        .map((_, i) => `WHEN rule_id = $${i * 2 + 1} THEN $${i * 2 + 2}`)
+        .map(
+          (_, i) => `WHEN rule_id = $${i * 2 + 1} THEN $${i * 2 + 2}::numeric`
+        )
         .join(" ");
       const ruleIdsForUpdate = rulesToUpdate.map((r) => r.ruleId);
       const params = rulesToUpdate.flatMap((r) => [r.ruleId, r.newMenuObjid]);
@@ -2548,11 +2685,16 @@ export class MenuCopyService {
 
   /**
    * 카테고리 매핑 + 값 복사 (최적화: 배치 조회)
+   *
+   * 화면에서 사용하는 table_name + column_name 조합을 기준으로 카테고리 값 복사
+   * menu_objid 기준이 아닌 화면 컴포넌트 기준으로 복사하여 누락 방지
    */
   private async copyCategoryMappingsAndValues(
     menuObjids: number[],
     menuIdMap: Map<number, number>,
+    sourceCompanyCode: string,
     targetCompanyCode: string,
+    screenIds: number[],
     userId: string,
     client: PoolClient
   ): Promise<number> {
@@ -2676,12 +2818,70 @@ export class MenuCopyService {
       );
     }
 
-    // 4. 모든 원본 카테고리 값 한 번에 조회
+    // 4. 화면에서 사용하는 카테고리 컬럼 조합 수집
+    // 복사된 화면의 레이아웃에서 webType='category'인 컴포넌트의 tableName, columnName 추출
+    const categoryColumnsResult = await client.query(
+      `SELECT DISTINCT 
+         sl.properties->>'tableName' as table_name,
+         sl.properties->>'columnName' as column_name
+       FROM screen_layouts sl
+       JOIN screen_definitions sd ON sl.screen_id = sd.screen_id
+       WHERE sd.screen_id = ANY($1)
+         AND sl.properties->'componentConfig'->>'webType' = 'category'
+         AND sl.properties->>'tableName' IS NOT NULL
+         AND sl.properties->>'columnName' IS NOT NULL`,
+      [screenIds]
+    );
+
+    // 카테고리 매핑에서 사용하는 table_name, column_name도 추가
+    const mappingColumnsResult = await client.query(
+      `SELECT DISTINCT table_name, logical_column_name as column_name
+       FROM category_column_mapping
+       WHERE menu_objid = ANY($1)`,
+      [menuObjids]
+    );
+
+    // 두 결과 합치기
+    const categoryColumns = new Set<string>();
+    for (const row of categoryColumnsResult.rows) {
+      if (row.table_name && row.column_name) {
+        categoryColumns.add(`${row.table_name}|${row.column_name}`);
+      }
+    }
+    for (const row of mappingColumnsResult.rows) {
+      if (row.table_name && row.column_name) {
+        categoryColumns.add(`${row.table_name}|${row.column_name}`);
+      }
+    }
+
+    logger.info(
+      `  📋 화면에서 사용하는 카테고리 컬럼: ${categoryColumns.size}개`
+    );
+
+    if (categoryColumns.size === 0) {
+      logger.info(`✅ 카테고리 매핑 + 값 복사 완료: ${copiedCount}개`);
+      return copiedCount;
+    }
+
+    // 5. 원본 회사의 카테고리 값 조회 (table_name + column_name 기준)
+    // menu_objid 조건 대신 table_name + column_name + 원본 회사 코드로 조회
+    const columnConditions = Array.from(categoryColumns).map((col, i) => {
+      const [tableName, columnName] = col.split("|");
+      return `(table_name = $${i * 2 + 2} AND column_name = $${i * 2 + 3})`;
+    });
+
+    const columnParams: string[] = [];
+    for (const col of categoryColumns) {
+      const [tableName, columnName] = col.split("|");
+      columnParams.push(tableName, columnName);
+    }
+
     const allValuesResult = await client.query(
       `SELECT * FROM table_column_category_values 
-       WHERE menu_objid = ANY($1)
+       WHERE company_code = $1
+         AND (${columnConditions.join(" OR ")})
        ORDER BY depth NULLS FIRST, parent_value_id NULLS FIRST, value_order`,
-      [menuObjids]
+      [sourceCompanyCode, ...columnParams]
     );
 
     if (allValuesResult.rows.length === 0) {
@@ -2689,6 +2889,8 @@ export class MenuCopyService {
       return copiedCount;
     }
 
+    logger.info(`  📋 원본 카테고리 값: ${allValuesResult.rows.length}개 발견`);
+
     // 5. 대상 회사에 이미 존재하는 값 한 번에 조회
     const existingValuesResult = await client.query(
       `SELECT value_id, table_name, column_name, value_code 
@@ -2742,8 +2944,12 @@ export class MenuCopyService {
         )
         .join(", ");
 
+      // 기본 menu_objid: 매핑이 없을 경우 첫 번째 복사된 메뉴 사용
+      const defaultMenuObjid = menuIdMap.values().next().value || 0;
+
       const valueParams = values.flatMap((v) => {
-        const newMenuObjid = menuIdMap.get(v.menu_objid);
+        // 원본 menu_objid가 매핑에 있으면 사용, 없으면 기본값 사용
+        const newMenuObjid = menuIdMap.get(v.menu_objid) ?? defaultMenuObjid;
         const newParentId = v.parent_value_id
           ? valueIdMap.get(v.parent_value_id) || null
           : null;

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 목록
 }
 
 // 리포트 목록 조회 파라미터
@@ -116,6 +117,22 @@ export interface UpdateReportRequest {
   useYn?: string;
 }
 
+// 워터마크 설정
+export interface WatermarkConfig {
+  enabled: boolean;
+  type: "text" | "image";
+  // 텍스트 워터마크
+  text?: string;
+  fontSize?: number;
+  fontColor?: string;
+  // 이미지 워터마크
+  imageUrl?: string;
+  // 공통 설정
+  opacity: number; // 0~1
+  style: "diagonal" | "center" | "tile";
+  rotation?: number; // 대각선일 때 각도 (기본 -45)
+}
+
 // 페이지 설정
 export interface PageConfig {
   page_id: string;
@@ -136,6 +153,7 @@ export interface PageConfig {
 // 레이아웃 설정
 export interface ReportLayoutConfig {
   pages: PageConfig[];
+  watermark?: WatermarkConfig; // 전체 페이지 공유 워터마크
 }
 
 // 레이아웃 저장 요청
@@ -149,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;
 }
 
 // 템플릿 목록 응답
@@ -166,3 +195,113 @@ export interface CreateTemplateRequest {
   layoutConfig?: any;
   defaultQueries?: any;
 }
+
+// 컴포넌트 설정 (프론트엔드와 동기화)
+export interface ComponentConfig {
+  id: string;
+  type: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+  fontColor?: string;
+  backgroundColor?: string;
+  borderWidth?: number;
+  borderColor?: string;
+  borderRadius?: number;
+  textAlign?: string;
+  padding?: number;
+  queryId?: string;
+  fieldName?: string;
+  defaultValue?: string;
+  format?: string;
+  visible?: boolean;
+  printable?: boolean;
+  conditional?: string;
+  locked?: boolean;
+  groupId?: string;
+  // 이미지 전용
+  imageUrl?: string;
+  objectFit?: "contain" | "cover" | "fill" | "none";
+  // 구분선 전용
+  orientation?: "horizontal" | "vertical";
+  lineStyle?: "solid" | "dashed" | "dotted" | "double";
+  lineWidth?: number;
+  lineColor?: string;
+  // 서명/도장 전용
+  showLabel?: boolean;
+  labelText?: string;
+  labelPosition?: "top" | "left" | "bottom" | "right";
+  showUnderline?: boolean;
+  personName?: string;
+  // 테이블 전용
+  tableColumns?: Array<{
+    field: string;
+    header: string;
+    width?: number;
+    align?: "left" | "center" | "right";
+  }>;
+  headerBackgroundColor?: string;
+  headerTextColor?: string;
+  showBorder?: boolean;
+  rowHeight?: number;
+  // 페이지 번호 전용
+  pageNumberFormat?: "number" | "numberTotal" | "koreanNumber";
+  // 카드 컴포넌트 전용
+  cardTitle?: string;
+  cardItems?: Array<{
+    label: string;
+    value: string;
+    fieldName?: string;
+  }>;
+  labelWidth?: number;
+  showCardBorder?: boolean;
+  showCardTitle?: boolean;
+  titleFontSize?: number;
+  labelFontSize?: number;
+  valueFontSize?: number;
+  titleColor?: string;
+  labelColor?: string;
+  valueColor?: string;
+  // 계산 컴포넌트 전용
+  calcItems?: Array<{
+    label: string;
+    value: number | string;
+    operator: "+" | "-" | "x" | "÷";
+    fieldName?: string;
+  }>;
+  resultLabel?: string;
+  resultColor?: string;
+  resultFontSize?: number;
+  showCalcBorder?: boolean;
+  numberFormat?: "none" | "comma" | "currency";
+  currencySuffix?: string;
+  // 바코드 컴포넌트 전용
+  barcodeType?: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "QR";
+  barcodeValue?: string;
+  barcodeFieldName?: string;
+  showBarcodeText?: boolean;
+  barcodeColor?: string;
+  barcodeBackground?: string;
+  barcodeMargin?: number;
+  qrErrorCorrectionLevel?: "L" | "M" | "Q" | "H";
+  // QR코드 다중 필드 (JSON 형식)
+  qrDataFields?: Array<{
+    fieldName: string;
+    label: string;
+  }>;
+  qrUseMultiField?: boolean;
+  qrIncludeAllRows?: boolean;
+  // 체크박스 컴포넌트 전용
+  checkboxChecked?: boolean; // 체크 상태 (고정값)
+  checkboxFieldName?: string; // 쿼리 필드 바인딩 (truthy/falsy 값)
+  checkboxLabel?: string; // 체크박스 옆 레이블 텍스트
+  checkboxSize?: number; // 체크박스 크기 (px)
+  checkboxColor?: string; // 체크 색상
+  checkboxBorderColor?: string; // 테두리 색상
+  checkboxLabelPosition?: "left" | "right"; // 레이블 위치
+}

docs/노드플로우_개선사항.md

@@ -586,3 +586,4 @@ const result = await executeNodeFlow(flowId, {
 
 
 
+

docs/메일발송_기능_사용_가이드.md

@@ -359,3 +359,4 @@
 
 
 
+

docs/즉시저장_버튼_액션_구현_계획서.md

@@ -345,3 +345,4 @@ const getComponentValue = (componentId: string) => {
 
 
 
+

frontend/app/(main)/admin/cascading-management/page.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Link2, Layers, Filter, FormInput, Ban, Tags } from "lucide-react";
+import { Link2, Layers, Filter, FormInput, Ban, Tags, Columns } from "lucide-react";
 
 // 탭별 컴포넌트
 import CascadingRelationsTab from "./tabs/CascadingRelationsTab";
@@ -12,6 +12,7 @@ import HierarchyTab from "./tabs/HierarchyTab";
 import ConditionTab from "./tabs/ConditionTab";
 import MutualExclusionTab from "./tabs/MutualExclusionTab";
 import CategoryValueCascadingTab from "./tabs/CategoryValueCascadingTab";
+import HierarchyColumnTab from "./tabs/HierarchyColumnTab";
 
 export default function CascadingManagementPage() {
   const searchParams = useSearchParams();
@@ -21,7 +22,7 @@ export default function CascadingManagementPage() {
   // URL 쿼리 파라미터에서 탭 설정
   useEffect(() => {
     const tab = searchParams.get("tab");
-    if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value"].includes(tab)) {
+    if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value", "hierarchy-column"].includes(tab)) {
       setActiveTab(tab);
     }
   }, [searchParams]);

frontend/app/(main)/admin/cascading-management/tabs/HierarchyColumnTab.tsx

@@ -0,0 +1,626 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Plus, Pencil, Trash2, Database, RefreshCw, Layers } from "lucide-react";
+import { toast } from "sonner";
+import { LoadingSpinner } from "@/components/common/LoadingSpinner";
+import {
+  hierarchyColumnApi,
+  HierarchyColumnGroup,
+  CreateHierarchyGroupRequest,
+} from "@/lib/api/hierarchyColumn";
+import { commonCodeApi } from "@/lib/api/commonCode";
+import apiClient from "@/lib/api/client";
+
+interface TableInfo {
+  tableName: string;
+  displayName?: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  displayName?: string;
+  dataType?: string;
+}
+
+interface CategoryInfo {
+  categoryCode: string;
+  categoryName: string;
+}
+
+export default function HierarchyColumnTab() {
+  // 상태
+  const [groups, setGroups] = useState<HierarchyColumnGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedGroup, setSelectedGroup] = useState<HierarchyColumnGroup | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+
+  // 폼 상태
+  const [formData, setFormData] = useState({
+    groupCode: "",
+    groupName: "",
+    description: "",
+    codeCategory: "",
+    tableName: "",
+    maxDepth: 3,
+    mappings: [
+      { depth: 1, levelLabel: "대분류", columnName: "", placeholder: "대분류 선택", isRequired: true },
+      { depth: 2, levelLabel: "중분류", columnName: "", placeholder: "중분류 선택", isRequired: false },
+      { depth: 3, levelLabel: "소분류", columnName: "", placeholder: "소분류 선택", isRequired: false },
+    ],
+  });
+
+  // 참조 데이터
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [categories, setCategories] = useState<CategoryInfo[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [loadingCategories, setLoadingCategories] = useState(false);
+
+  // 그룹 목록 로드
+  const loadGroups = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await hierarchyColumnApi.getAll();
+      if (response.success && response.data) {
+        setGroups(response.data);
+      } else {
+        toast.error(response.error || "계층구조 그룹 로드 실패");
+      }
+    } catch (error) {
+      console.error("계층구조 그룹 로드 에러:", error);
+      toast.error("계층구조 그룹을 로드하는 중 오류가 발생했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 테이블 목록 로드
+  const loadTables = useCallback(async () => {
+    setLoadingTables(true);
+    try {
+      const response = await apiClient.get("/table-management/tables");
+      if (response.data?.success && response.data?.data) {
+        setTables(response.data.data);
+      }
+    } catch (error) {
+      console.error("테이블 로드 에러:", error);
+    } finally {
+      setLoadingTables(false);
+    }
+  }, []);
+
+  // 카테고리 목록 로드
+  const loadCategories = useCallback(async () => {
+    setLoadingCategories(true);
+    try {
+      const response = await commonCodeApi.categories.getList();
+      if (response.success && response.data) {
+        setCategories(
+          response.data.map((cat: any) => ({
+            categoryCode: cat.categoryCode || cat.category_code,
+            categoryName: cat.categoryName || cat.category_name,
+          }))
+        );
+      }
+    } catch (error) {
+      console.error("카테고리 로드 에러:", error);
+    } finally {
+      setLoadingCategories(false);
+    }
+  }, []);
+
+  // 테이블 선택 시 컬럼 로드
+  const loadColumns = useCallback(async (tableName: string) => {
+    if (!tableName) {
+      setColumns([]);
+      return;
+    }
+    setLoadingColumns(true);
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      if (response.data?.success && response.data?.data) {
+        setColumns(response.data.data);
+      }
+    } catch (error) {
+      console.error("컬럼 로드 에러:", error);
+    } finally {
+      setLoadingColumns(false);
+    }
+  }, []);
+
+  // 초기 로드
+  useEffect(() => {
+    loadGroups();
+    loadTables();
+    loadCategories();
+  }, [loadGroups, loadTables, loadCategories]);
+
+  // 테이블 선택 변경 시 컬럼 로드
+  useEffect(() => {
+    if (formData.tableName) {
+      loadColumns(formData.tableName);
+    }
+  }, [formData.tableName, loadColumns]);
+
+  // 폼 초기화
+  const resetForm = () => {
+    setFormData({
+      groupCode: "",
+      groupName: "",
+      description: "",
+      codeCategory: "",
+      tableName: "",
+      maxDepth: 3,
+      mappings: [
+        { depth: 1, levelLabel: "대분류", columnName: "", placeholder: "대분류 선택", isRequired: true },
+        { depth: 2, levelLabel: "중분류", columnName: "", placeholder: "중분류 선택", isRequired: false },
+        { depth: 3, levelLabel: "소분류", columnName: "", placeholder: "소분류 선택", isRequired: false },
+      ],
+    });
+    setSelectedGroup(null);
+    setIsEditing(false);
+  };
+
+  // 모달 열기 (신규)
+  const openCreateModal = () => {
+    resetForm();
+    setModalOpen(true);
+  };
+
+  // 모달 열기 (수정)
+  const openEditModal = (group: HierarchyColumnGroup) => {
+    setSelectedGroup(group);
+    setIsEditing(true);
+
+    // 매핑 데이터 변환
+    const mappings = [1, 2, 3].map((depth) => {
+      const existing = group.mappings?.find((m) => m.depth === depth);
+      return {
+        depth,
+        levelLabel: existing?.level_label || (depth === 1 ? "대분류" : depth === 2 ? "중분류" : "소분류"),
+        columnName: existing?.column_name || "",
+        placeholder: existing?.placeholder || `${depth === 1 ? "대분류" : depth === 2 ? "중분류" : "소분류"} 선택`,
+        isRequired: existing?.is_required === "Y",
+      };
+    });
+
+    setFormData({
+      groupCode: group.group_code,
+      groupName: group.group_name,
+      description: group.description || "",
+      codeCategory: group.code_category,
+      tableName: group.table_name,
+      maxDepth: group.max_depth,
+      mappings,
+    });
+
+    // 컬럼 로드
+    loadColumns(group.table_name);
+    setModalOpen(true);
+  };
+
+  // 삭제 확인 열기
+  const openDeleteDialog = (group: HierarchyColumnGroup) => {
+    setSelectedGroup(group);
+    setDeleteDialogOpen(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    // 필수 필드 검증
+    if (!formData.groupCode || !formData.groupName || !formData.codeCategory || !formData.tableName) {
+      toast.error("필수 필드를 모두 입력해주세요.");
+      return;
+    }
+
+    // 최소 1개 컬럼 매핑 검증
+    const validMappings = formData.mappings
+      .filter((m) => m.depth <= formData.maxDepth && m.columnName)
+      .map((m) => ({
+        depth: m.depth,
+        levelLabel: m.levelLabel,
+        columnName: m.columnName,
+        placeholder: m.placeholder,
+        isRequired: m.isRequired,
+      }));
+
+    if (validMappings.length === 0) {
+      toast.error("최소 하나의 컬럼 매핑이 필요합니다.");
+      return;
+    }
+
+    try {
+      if (isEditing && selectedGroup) {
+        // 수정
+        const response = await hierarchyColumnApi.update(selectedGroup.group_id, {
+          groupName: formData.groupName,
+          description: formData.description,
+          maxDepth: formData.maxDepth,
+          mappings: validMappings,
+        });
+
+        if (response.success) {
+          toast.success("계층구조 그룹이 수정되었습니다.");
+          setModalOpen(false);
+          loadGroups();
+        } else {
+          toast.error(response.error || "수정 실패");
+        }
+      } else {
+        // 생성
+        const request: CreateHierarchyGroupRequest = {
+          groupCode: formData.groupCode,
+          groupName: formData.groupName,
+          description: formData.description,
+          codeCategory: formData.codeCategory,
+          tableName: formData.tableName,
+          maxDepth: formData.maxDepth,
+          mappings: validMappings,
+        };
+
+        const response = await hierarchyColumnApi.create(request);
+
+        if (response.success) {
+          toast.success("계층구조 그룹이 생성되었습니다.");
+          setModalOpen(false);
+          loadGroups();
+        } else {
+          toast.error(response.error || "생성 실패");
+        }
+      }
+    } catch (error) {
+      console.error("저장 에러:", error);
+      toast.error("저장 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (!selectedGroup) return;
+
+    try {
+      const response = await hierarchyColumnApi.delete(selectedGroup.group_id);
+      if (response.success) {
+        toast.success("계층구조 그룹이 삭제되었습니다.");
+        setDeleteDialogOpen(false);
+        loadGroups();
+      } else {
+        toast.error(response.error || "삭제 실패");
+      }
+    } catch (error) {
+      console.error("삭제 에러:", error);
+      toast.error("삭제 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 매핑 컬럼 변경
+  const handleMappingChange = (depth: number, field: string, value: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      mappings: prev.mappings.map((m) =>
+        m.depth === depth ? { ...m, [field]: value } : m
+      ),
+    }));
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-semibold">계층구조 컬럼 그룹</h2>
+          <p className="text-sm text-muted-foreground">
+            공통코드 계층구조를 테이블 컬럼에 매핑하여 대분류/중분류/소분류를 각각 별도 컬럼에 저장합니다.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={loadGroups} disabled={loading}>
+            <RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+            새로고침
+          </Button>
+          <Button size="sm" onClick={openCreateModal}>
+            <Plus className="mr-2 h-4 w-4" />
+            새 그룹 추가
+          </Button>
+        </div>
+      </div>
+
+      {/* 그룹 목록 */}
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <LoadingSpinner />
+          <span className="ml-2 text-muted-foreground">로딩 중...</span>
+        </div>
+      ) : groups.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Layers className="h-12 w-12 text-muted-foreground" />
+            <p className="mt-4 text-muted-foreground">계층구조 컬럼 그룹이 없습니다.</p>
+            <Button className="mt-4" onClick={openCreateModal}>
+              <Plus className="mr-2 h-4 w-4" />
+              첫 번째 그룹 만들기
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {groups.map((group) => (
+            <Card key={group.group_id} className="hover:shadow-md transition-shadow">
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle className="text-base">{group.group_name}</CardTitle>
+                    <CardDescription className="text-xs">{group.group_code}</CardDescription>
+                  </div>
+                  <div className="flex gap-1">
+                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEditModal(group)}>
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => openDeleteDialog(group)}>
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex items-center gap-2 text-sm">
+                  <Database className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">{group.table_name}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge variant="outline">{group.code_category}</Badge>
+                  <Badge variant="secondary">{group.max_depth}단계</Badge>
+                </div>
+                {group.mappings && group.mappings.length > 0 && (
+                  <div className="space-y-1">
+                    {group.mappings.map((mapping) => (
+                      <div key={mapping.depth} className="flex items-center gap-2 text-xs">
+                        <Badge variant="outline" className="w-14 justify-center">
+                          {mapping.level_label}
+                        </Badge>
+                        <span className="font-mono text-muted-foreground">{mapping.column_name}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* 생성/수정 모달 */}
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>{isEditing ? "계층구조 그룹 수정" : "계층구조 그룹 생성"}</DialogTitle>
+            <DialogDescription>
+              공통코드 계층구조를 테이블 컬럼에 매핑합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            {/* 기본 정보 */}
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>그룹 코드 *</Label>
+                <Input
+                  value={formData.groupCode}
+                  onChange={(e) => setFormData({ ...formData, groupCode: e.target.value.toUpperCase() })}
+                  placeholder="예: ITEM_CAT_HIERARCHY"
+                  disabled={isEditing}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>그룹명 *</Label>
+                <Input
+                  value={formData.groupName}
+                  onChange={(e) => setFormData({ ...formData, groupName: e.target.value })}
+                  placeholder="예: 품목분류 계층"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>설명</Label>
+              <Input
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder="계층구조에 대한 설명"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>공통코드 카테고리 *</Label>
+                <Select
+                  value={formData.codeCategory}
+                  onValueChange={(value) => setFormData({ ...formData, codeCategory: value })}
+                  disabled={isEditing}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="카테고리 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {loadingCategories ? (
+                      <SelectItem value="_loading" disabled>로딩 중...</SelectItem>
+                    ) : (
+                      categories.map((cat) => (
+                        <SelectItem key={cat.categoryCode} value={cat.categoryCode}>
+                          {cat.categoryName} ({cat.categoryCode})
+                        </SelectItem>
+                      ))
+                    )}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>적용 테이블 *</Label>
+                <Select
+                  value={formData.tableName}
+                  onValueChange={(value) => setFormData({ ...formData, tableName: value })}
+                  disabled={isEditing}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="테이블 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {loadingTables ? (
+                      <SelectItem value="_loading" disabled>로딩 중...</SelectItem>
+                    ) : (
+                      tables.map((table) => (
+                        <SelectItem key={table.tableName} value={table.tableName}>
+                          {table.displayName || table.tableName}
+                        </SelectItem>
+                      ))
+                    )}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>최대 깊이</Label>
+              <Select
+                value={String(formData.maxDepth)}
+                onValueChange={(value) => setFormData({ ...formData, maxDepth: Number(value) })}
+              >
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">1단계 (대분류만)</SelectItem>
+                  <SelectItem value="2">2단계 (대/중분류)</SelectItem>
+                  <SelectItem value="3">3단계 (대/중/소분류)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 컬럼 매핑 */}
+            <div className="space-y-3 border-t pt-4">
+              <Label className="text-base font-medium">컬럼 매핑</Label>
+              <p className="text-xs text-muted-foreground">
+                각 계층 레벨에 저장할 컬럼을 선택합니다.
+              </p>
+
+              {formData.mappings
+                .filter((m) => m.depth <= formData.maxDepth)
+                .map((mapping) => (
+                  <div key={mapping.depth} className="grid grid-cols-4 gap-2 items-center">
+                    <div className="flex items-center gap-2">
+                      <Badge variant={mapping.depth === 1 ? "default" : "outline"}>
+                        {mapping.depth}단계
+                      </Badge>
+                      <Input
+                        value={mapping.levelLabel}
+                        onChange={(e) => handleMappingChange(mapping.depth, "levelLabel", e.target.value)}
+                        className="h-8 text-xs"
+                        placeholder="라벨"
+                      />
+                    </div>
+                    <Select
+                      value={mapping.columnName || "_none"}
+                      onValueChange={(value) => handleMappingChange(mapping.depth, "columnName", value === "_none" ? "" : value)}
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue placeholder="컬럼 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="_none">컬럼 선택</SelectItem>
+                        {loadingColumns ? (
+                          <SelectItem value="_loading" disabled>로딩 중...</SelectItem>
+                        ) : (
+                          columns.map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.displayName || col.columnName}
+                            </SelectItem>
+                          ))
+                        )}
+                      </SelectContent>
+                    </Select>
+                    <Input
+                      value={mapping.placeholder}
+                      onChange={(e) => handleMappingChange(mapping.depth, "placeholder", e.target.value)}
+                      className="h-8 text-xs"
+                      placeholder="플레이스홀더"
+                    />
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        checked={mapping.isRequired}
+                        onChange={(e) => handleMappingChange(mapping.depth, "isRequired", e.target.checked)}
+                        className="h-4 w-4"
+                      />
+                      <span className="text-xs text-muted-foreground">필수</span>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSave}>
+              {isEditing ? "수정" : "생성"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 다이얼로그 */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>계층구조 그룹 삭제</DialogTitle>
+            <DialogDescription>
+              "{selectedGroup?.group_name}" 그룹을 삭제하시겠습니까?
+              <br />
+              이 작업은 되돌릴 수 없습니다.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              취소
+            </Button>
+            <Button variant="destructive" onClick={handleDelete}>
+              삭제
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+

frontend/app/(main)/admin/tableMng/page.tsx

@@ -56,6 +56,7 @@ interface ColumnTypeInfo {
   referenceColumn?: string;
   displayColumn?: string; // 🎯 Entity 조인에서 표시할 컬럼명
   categoryMenus?: number[]; // 🆕 Category 타입: 선택된 2레벨 메뉴 OBJID 배열
+  hierarchyRole?: "large" | "medium" | "small"; // 🆕 계층구조 역할
 }
 
 interface SecondLevelMenu {
@@ -292,11 +293,27 @@ export default function TableManagementPage() {
         });
 
         // 컬럼 데이터에 기본값 설정
-        const processedColumns = (data.columns || data).map((col: any) => ({
+        const processedColumns = (data.columns || data).map((col: any) => {
+          // detailSettings에서 hierarchyRole 추출
+          let hierarchyRole: "large" | "medium" | "small" | undefined = undefined;
+          if (col.detailSettings && typeof col.detailSettings === "string") {
+            try {
+              const parsed = JSON.parse(col.detailSettings);
+              if (parsed.hierarchyRole === "large" || parsed.hierarchyRole === "medium" || parsed.hierarchyRole === "small") {
+                hierarchyRole = parsed.hierarchyRole;
+              }
+            } catch {
+              // JSON 파싱 실패 시 무시
+            }
+          }
+
+          return {
             ...col,
             inputType: col.inputType || "text", // 기본값: text
             categoryMenus: col.categoryMenus || [], // 카테고리 메뉴 매핑 정보
-        }));
+            hierarchyRole, // 계층구조 역할
+          };
+        });
 
         if (page === 1) {
           setColumns(processedColumns);
@@ -367,18 +384,40 @@ export default function TableManagementPage() {
             let referenceTable = col.referenceTable;
             let referenceColumn = col.referenceColumn;
             let displayColumn = col.displayColumn;
+            let hierarchyRole = col.hierarchyRole;
 
             if (settingType === "code") {
               if (value === "none") {
                 newDetailSettings = "";
                 codeCategory = undefined;
                 codeValue = undefined;
+                hierarchyRole = undefined; // 코드 선택 해제 시 계층 역할도 초기화
               } else {
-                const codeOption = commonCodeOptions.find((option) => option.value === value);
+                // 기존 hierarchyRole 유지하면서 JSON 형식으로 저장
-                newDetailSettings = codeOption ? `공통코드: ${codeOption.label}` : "";
+                const existingHierarchyRole = hierarchyRole;
+                newDetailSettings = JSON.stringify({ 
+                  codeCategory: value,
+                  hierarchyRole: existingHierarchyRole 
+                });
                 codeCategory = value;
                 codeValue = value;
               }
+            } else if (settingType === "hierarchy_role") {
+              // 계층구조 역할 변경 - JSON 형식으로 저장
+              hierarchyRole = value === "none" ? undefined : (value as "large" | "medium" | "small");
+              // detailSettings를 JSON으로 업데이트
+              let existingSettings: Record<string, any> = {};
+              if (typeof col.detailSettings === "string" && col.detailSettings.trim().startsWith("{")) {
+                try {
+                  existingSettings = JSON.parse(col.detailSettings);
+                } catch {
+                  existingSettings = {};
+                }
+              }
+              newDetailSettings = JSON.stringify({
+                ...existingSettings,
+                hierarchyRole: hierarchyRole,
+              });
             } else if (settingType === "entity") {
               if (value === "none") {
                 newDetailSettings = "";
@@ -415,6 +454,7 @@ export default function TableManagementPage() {
               referenceTable,
               referenceColumn,
               displayColumn,
+              hierarchyRole,
             };
           }
           return col;
@@ -487,6 +527,26 @@ export default function TableManagementPage() {
         console.log("🔧 Entity 설정 JSON 생성:", entitySettings);
       }
 
+      // 🎯 Code 타입인 경우 hierarchyRole을 detailSettings에 포함
+      if (column.inputType === "code" && column.hierarchyRole) {
+        let existingSettings: Record<string, unknown> = {};
+        if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
+          try {
+            existingSettings = JSON.parse(finalDetailSettings);
+          } catch {
+            existingSettings = {};
+          }
+        }
+
+        const codeSettings = {
+          ...existingSettings,
+          hierarchyRole: column.hierarchyRole,
+        };
+
+        finalDetailSettings = JSON.stringify(codeSettings);
+        console.log("🔧 Code 계층 역할 설정 JSON 생성:", codeSettings);
+      }
+
       const columnSetting = {
         columnName: column.columnName, // 실제 DB 컬럼명 (변경 불가)
         columnLabel: column.displayName, // 사용자가 입력한 표시명
@@ -1229,6 +1289,7 @@ export default function TableManagementPage() {
                                 </Select>
                                 {/* 입력 타입이 'code'인 경우 공통코드 선택 */}
                                 {column.inputType === "code" && (
+                                  <>
                                     <Select
                                       value={column.codeCategory || "none"}
                                       onValueChange={(value) =>
@@ -1246,6 +1307,26 @@ export default function TableManagementPage() {
                                         ))}
                                       </SelectContent>
                                     </Select>
+                                    {/* 계층구조 역할 선택 */}
+                                    {column.codeCategory && column.codeCategory !== "none" && (
+                                      <Select
+                                        value={column.hierarchyRole || "none"}
+                                        onValueChange={(value) =>
+                                          handleDetailSettingsChange(column.columnName, "hierarchy_role", value)
+                                        }
+                                      >
+                                        <SelectTrigger className="h-8 text-xs">
+                                          <SelectValue placeholder="계층 역할" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                          <SelectItem value="none">일반</SelectItem>
+                                          <SelectItem value="large">대분류</SelectItem>
+                                          <SelectItem value="medium">중분류</SelectItem>
+                                          <SelectItem value="small">소분류</SelectItem>
+                                        </SelectContent>
+                                      </Select>
+                                    )}
+                                  </>
                                 )}
                                 {/* 입력 타입이 'category'인 경우 2레벨 메뉴 다중 선택 */}
                                 {column.inputType === "category" && (

frontend/app/(main)/multilang/page.tsx

@@ -317,12 +317,16 @@ export default function MultiLangPage() {
 
                   <div>
                     <Label htmlFor="menu">메뉴</Label>
-                    <Select value={selectedMenu} onValueChange={setSelectedMenu}>
+                    {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
+                    <Select 
+                      value={selectedMenu || "__all__"} 
+                      onValueChange={(value) => setSelectedMenu(value === "__all__" ? "" : value)}
+                    >
                       <SelectTrigger>
                         <SelectValue placeholder="전체 메뉴" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="">전체 메뉴</SelectItem>
+                        <SelectItem value="__all__">전체 메뉴</SelectItem>
                         {menus.map((menu) => (
                           <SelectItem key={menu.code} value={menu.code}>
                             {menu.name}
@@ -334,12 +338,16 @@ export default function MultiLangPage() {
 
                   <div>
                     <Label htmlFor="keyType">키 타입</Label>
-                    <Select value={selectedKeyType} onValueChange={setSelectedKeyType}>
+                    {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
+                    <Select 
+                      value={selectedKeyType || "__all__"} 
+                      onValueChange={(value) => setSelectedKeyType(value === "__all__" ? "" : value)}
+                    >
                       <SelectTrigger>
                         <SelectValue placeholder="전체 타입" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="">전체 타입</SelectItem>
+                        <SelectItem value="__all__">전체 타입</SelectItem>
                         {keyTypes.map((type) => (
                           <SelectItem key={type.code} value={type.code}>
                             {type.name}

frontend/app/globals.css

@@ -1,5 +1,5 @@
-/* ===== 서명용 손글씨 폰트 ===== */
+/* ===== 서명용 손글씨 폰트 (완전한 한글 지원 폰트) ===== */
-@import url("https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@700&family=Great+Vibes&family=Pacifico&family=Satisfy&family=Caveat:wght@700&family=Permanent+Marker&family=Shadows+Into+Light&family=Kalam:wght@700&family=Patrick+Hand&family=Indie+Flower&family=Amatic+SC:wght@700&family=Covered+By+Your+Grace&family=Nanum+Brush+Script&family=Nanum+Pen+Script&family=Gaegu:wght@700&family=Gugi&family=Single+Day&family=Stylish&family=Sunflower:wght@700&family=Dokdo&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@700&family=Great+Vibes&family=Pacifico&family=Satisfy&family=Caveat:wght@700&family=Permanent+Marker&family=Shadows+Into+Light&family=Kalam:wght@700&family=Patrick+Hand&family=Indie+Flower&family=Amatic+SC:wght@700&family=Covered+By+Your+Grace&family=Nanum+Brush+Script&family=Nanum+Pen+Script&family=Gaegu:wght@700&family=Hi+Melody&family=Gamja+Flower&family=Poor+Story&family=Do+Hyeon&family=Jua&display=swap");
 
 /* ===== Tailwind CSS & Animations ===== */
 @import "tailwindcss";

frontend/components/admin/CodeDetailPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -45,15 +45,124 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   const reorderCodesMutation = useReorderCodes();
 
   // 드래그앤드롭을 위해 필터링된 코드 목록 사용
-  const { filteredItems: filteredCodes } = useSearchAndFilter(codes, {
+  const { filteredItems: filteredCodesRaw } = useSearchAndFilter(codes, {
     searchFields: ["code_name", "code_value"],
   });
 
+  // 계층 구조로 정렬 (부모 → 자식 순서)
+  const filteredCodes = useMemo(() => {
+    if (!filteredCodesRaw || filteredCodesRaw.length === 0) return [];
+
+    // 코드를 계층 순서로 정렬하는 함수
+    const sortHierarchically = (codes: CodeInfo[]): CodeInfo[] => {
+      const result: CodeInfo[] = [];
+      const codeMap = new Map<string, CodeInfo>();
+      const childrenMap = new Map<string, CodeInfo[]>();
+
+      // 코드 맵 생성
+      codes.forEach((code) => {
+        const codeValue = code.codeValue || code.code_value || "";
+        const parentValue = code.parentCodeValue || code.parent_code_value;
+        codeMap.set(codeValue, code);
+
+        if (parentValue) {
+          if (!childrenMap.has(parentValue)) {
+            childrenMap.set(parentValue, []);
+          }
+          childrenMap.get(parentValue)!.push(code);
+        }
+      });
+
+      // 재귀적으로 트리 구조 순회
+      const traverse = (parentValue: string | null, depth: number) => {
+        const children = parentValue
+          ? childrenMap.get(parentValue) || []
+          : codes.filter((c) => !c.parentCodeValue && !c.parent_code_value);
+
+        // 정렬 순서로 정렬
+        children
+          .sort((a, b) => (a.sortOrder || a.sort_order || 0) - (b.sortOrder || b.sort_order || 0))
+          .forEach((code) => {
+            result.push(code);
+            const codeValue = code.codeValue || code.code_value || "";
+            traverse(codeValue, depth + 1);
+          });
+      };
+
+      traverse(null, 1);
+
+      // 트리에 포함되지 않은 코드들도 추가 (orphan 코드)
+      codes.forEach((code) => {
+        if (!result.includes(code)) {
+          result.push(code);
+        }
+      });
+
+      return result;
+    };
+
+    return sortHierarchically(filteredCodesRaw);
+  }, [filteredCodesRaw]);
+
   // 모달 상태
   const [showFormModal, setShowFormModal] = useState(false);
   const [editingCode, setEditingCode] = useState<CodeInfo | null>(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deletingCode, setDeletingCode] = useState<CodeInfo | null>(null);
+  const [defaultParentCode, setDefaultParentCode] = useState<string | undefined>(undefined);
+
+  // 트리 접기/펼치기 상태 (코드값 Set)
+  const [collapsedCodes, setCollapsedCodes] = useState<Set<string>>(new Set());
+
+  // 자식 정보 계산
+  const childrenMap = useMemo(() => {
+    const map = new Map<string, CodeInfo[]>();
+    codes.forEach((code) => {
+      const parentValue = code.parentCodeValue || code.parent_code_value;
+      if (parentValue) {
+        if (!map.has(parentValue)) {
+          map.set(parentValue, []);
+        }
+        map.get(parentValue)!.push(code);
+      }
+    });
+    return map;
+  }, [codes]);
+
+  // 접기/펼치기 토글
+  const toggleExpand = (codeValue: string) => {
+    setCollapsedCodes((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(codeValue)) {
+        newSet.delete(codeValue);
+      } else {
+        newSet.add(codeValue);
+      }
+      return newSet;
+    });
+  };
+
+  // 특정 코드가 표시되어야 하는지 확인 (부모가 접혀있으면 숨김)
+  const isCodeVisible = (code: CodeInfo): boolean => {
+    const parentValue = code.parentCodeValue || code.parent_code_value;
+    if (!parentValue) return true; // 최상위 코드는 항상 표시
+
+    // 부모가 접혀있으면 숨김
+    if (collapsedCodes.has(parentValue)) return false;
+
+    // 부모의 부모도 확인 (재귀적으로)
+    const parentCode = codes.find((c) => (c.codeValue || c.code_value) === parentValue);
+    if (parentCode) {
+      return isCodeVisible(parentCode);
+    }
+
+    return true;
+  };
+
+  // 표시할 코드 목록 (접힌 상태 반영)
+  const visibleCodes = useMemo(() => {
+    return filteredCodes.filter(isCodeVisible);
+  }, [filteredCodes, collapsedCodes, codes]);
 
   // 드래그 앤 드롭 훅 사용
   const dragAndDrop = useDragAndDrop<CodeInfo>({
@@ -73,12 +182,21 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   // 새 코드 생성
   const handleNewCode = () => {
     setEditingCode(null);
+    setDefaultParentCode(undefined);
     setShowFormModal(true);
   };
 
   // 코드 수정
   const handleEditCode = (code: CodeInfo) => {
     setEditingCode(code);
+    setDefaultParentCode(undefined);
+    setShowFormModal(true);
+  };
+
+  // 하위 코드 추가
+  const handleAddChild = (parentCode: CodeInfo) => {
+    setEditingCode(null);
+    setDefaultParentCode(parentCode.codeValue || parentCode.code_value || "");
     setShowFormModal(true);
   };
 
@@ -110,7 +228,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   if (!categoryCode) {
     return (
       <div className="flex h-96 items-center justify-center">
-        <p className="text-sm text-muted-foreground">카테고리를 선택하세요</p>
+        <p className="text-muted-foreground text-sm">카테고리를 선택하세요</p>
       </div>
     );
   }
@@ -119,7 +237,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
     return (
       <div className="flex h-96 items-center justify-center">
         <div className="text-center">
-          <p className="text-sm font-semibold text-destructive">코드를 불러오는 중 오류가 발생했습니다.</p>
+          <p className="text-destructive text-sm font-semibold">코드를 불러오는 중 오류가 발생했습니다.</p>
           <Button variant="outline" onClick={() => window.location.reload()} className="mt-4 h-10 text-sm font-medium">
             다시 시도
           </Button>
@@ -135,7 +253,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
         {/* 검색 + 버튼 */}
         <div className="flex items-center gap-2">
           <div className="relative w-full sm:w-[300px]">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
             <Input
               placeholder="코드 검색..."
               value={searchTerm}
@@ -156,9 +274,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
             id="activeOnlyCodes"
             checked={showActiveOnly}
             onChange={(e) => setShowActiveOnly(e.target.checked)}
-            className="h-4 w-4 rounded border-input"
+            className="border-input h-4 w-4 rounded"
           />
-          <label htmlFor="activeOnlyCodes" className="text-sm text-muted-foreground">
+          <label htmlFor="activeOnlyCodes" className="text-muted-foreground text-sm">
             활성만 표시
           </label>
         </div>
@@ -170,9 +288,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           <div className="flex h-32 items-center justify-center">
             <LoadingSpinner />
           </div>
-        ) : filteredCodes.length === 0 ? (
+        ) : visibleCodes.length === 0 ? (
           <div className="flex h-32 items-center justify-center">
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground text-sm">
               {codes.length === 0 ? "코드가 없습니다." : "검색 결과가 없습니다."}
             </p>
           </div>
@@ -180,23 +298,35 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           <>
             <DndContext {...dragAndDrop.dndContextProps}>
               <SortableContext
-                items={filteredCodes.map((code) => code.codeValue || code.code_value)}
+                items={visibleCodes.map((code) => code.codeValue || code.code_value)}
                 strategy={verticalListSortingStrategy}
               >
-                {filteredCodes.map((code, index) => (
+                {visibleCodes.map((code, index) => {
+                  const codeValue = code.codeValue || code.code_value || "";
+                  const children = childrenMap.get(codeValue) || [];
+                  const hasChildren = children.length > 0;
+                  const isExpanded = !collapsedCodes.has(codeValue);
+
+                  return (
                     <SortableCodeItem
-                    key={`${code.codeValue || code.code_value}-${index}`}
+                      key={`${codeValue}-${index}`}
                       code={code}
                       categoryCode={categoryCode}
                       onEdit={() => handleEditCode(code)}
                       onDelete={() => handleDeleteCode(code)}
+                      onAddChild={() => handleAddChild(code)}
+                      hasChildren={hasChildren}
+                      childCount={children.length}
+                      isExpanded={isExpanded}
+                      onToggleExpand={() => toggleExpand(codeValue)}
                     />
-                ))}
+                  );
+                })}
               </SortableContext>
 
               <DragOverlay dropAnimation={null}>
                 {dragAndDrop.activeItem ? (
-                  <div className="cursor-grabbing rounded-lg border bg-card p-4 shadow-lg">
+                  <div className="bg-card cursor-grabbing rounded-lg border p-4 shadow-lg">
                     {(() => {
                       const activeCode = dragAndDrop.activeItem;
                       if (!activeCode) return null;
@@ -204,24 +334,20 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
                         <div className="flex items-start justify-between">
                           <div className="min-w-0 flex-1">
                             <div className="flex items-center gap-2">
-                              <h4 className="text-sm font-semibold">
+                              <h4 className="text-sm font-semibold">{activeCode.codeName || activeCode.code_name}</h4>
-                                {activeCode.codeName || activeCode.code_name}
-                              </h4>
                               <Badge
                                 variant={
-                                  activeCode.isActive === "Y" || activeCode.is_active === "Y"
+                                  activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "default" : "secondary"
-                                    ? "default"
-                                    : "secondary"
                                 }
                               >
                                 {activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "활성" : "비활성"}
                               </Badge>
                             </div>
-                            <p className="mt-1 text-xs text-muted-foreground">
+                            <p className="text-muted-foreground mt-1 text-xs">
                               {activeCode.codeValue || activeCode.code_value}
                             </p>
                             {activeCode.description && (
-                              <p className="mt-1 text-xs text-muted-foreground">{activeCode.description}</p>
+                              <p className="text-muted-foreground mt-1 text-xs">{activeCode.description}</p>
                             )}
                           </div>
                         </div>
@@ -236,13 +362,13 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
             {isFetchingNextPage && (
               <div className="flex items-center justify-center py-4">
                 <LoadingSpinner size="sm" />
-                <span className="ml-2 text-sm text-muted-foreground">코드를 더 불러오는 중...</span>
+                <span className="text-muted-foreground ml-2 text-sm">코드를 더 불러오는 중...</span>
               </div>
             )}
 
             {/* 모든 코드 로드 완료 메시지 */}
             {!hasNextPage && codes.length > 0 && (
-              <div className="py-4 text-center text-sm text-muted-foreground">모든 코드를 불러왔습니다.</div>
+              <div className="text-muted-foreground py-4 text-center text-sm">모든 코드를 불러왔습니다.</div>
             )}
           </>
         )}
@@ -255,10 +381,12 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           onClose={() => {
             setShowFormModal(false);
             setEditingCode(null);
+            setDefaultParentCode(undefined);
           }}
           categoryCode={categoryCode}
           editingCode={editingCode}
           codes={codes}
+          defaultParentCode={defaultParentCode}
         />
       )}
 

frontend/components/admin/CodeFormModal.tsx

@@ -24,6 +24,7 @@ interface CodeFormModalProps {
   categoryCode: string;
   editingCode?: CodeInfo | null;
   codes: CodeInfo[];
+  defaultParentCode?: string; // 하위 코드 추가 시 기본 부모 코드
 }
 
 // 에러 메시지를 안전하게 문자열로 변환하는 헬퍼 함수
@@ -33,28 +34,32 @@ const getErrorMessage = (error: FieldError | undefined): string => {
   return error.message || "";
 };
 
-export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, codes }: CodeFormModalProps) {
+// 코드값 자동 생성 함수 (UUID 기반 짧은 코드)
+const generateCodeValue = (): string => {
+  const timestamp = Date.now().toString(36).toUpperCase();
+  const random = Math.random().toString(36).substring(2, 6).toUpperCase();
+  return `${timestamp}${random}`;
+};
+
+export function CodeFormModal({
+  isOpen,
+  onClose,
+  categoryCode,
+  editingCode,
+  codes,
+  defaultParentCode,
+}: CodeFormModalProps) {
   const createCodeMutation = useCreateCode();
   const updateCodeMutation = useUpdateCode();
 
   const isEditing = !!editingCode;
 
-  // 검증 상태 관리
+  // 검증 상태 관리 (코드명만 중복 검사)
   const [validationStates, setValidationStates] = useState({
-    codeValue: { enabled: false, value: "" },
     codeName: { enabled: false, value: "" },
-    codeNameEng: { enabled: false, value: "" },
   });
 
-  // 중복 검사 훅들
+  // 코드명 중복 검사
-  const codeValueCheck = useCheckCodeDuplicate(
-    categoryCode,
-    "codeValue",
-    validationStates.codeValue.value,
-    isEditing ? editingCode?.codeValue || editingCode?.code_value : undefined,
-    validationStates.codeValue.enabled,
-  );
-
   const codeNameCheck = useCheckCodeDuplicate(
     categoryCode,
     "codeName",
@@ -63,22 +68,11 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
     validationStates.codeName.enabled,
   );
 
-  const codeNameEngCheck = useCheckCodeDuplicate(
-    categoryCode,
-    "codeNameEng",
-    validationStates.codeNameEng.value,
-    isEditing ? editingCode?.codeValue || editingCode?.code_value : undefined,
-    validationStates.codeNameEng.enabled,
-  );
-
   // 중복 검사 결과 확인
-  const hasDuplicateErrors =
+  const hasDuplicateErrors = codeNameCheck.data?.isDuplicate && validationStates.codeName.enabled;
-    (codeValueCheck.data?.isDuplicate && validationStates.codeValue.enabled) ||
-    (codeNameCheck.data?.isDuplicate && validationStates.codeName.enabled) ||
-    (codeNameEngCheck.data?.isDuplicate && validationStates.codeNameEng.enabled);
 
   // 중복 검사 로딩 중인지 확인
-  const isDuplicateChecking = codeValueCheck.isLoading || codeNameCheck.isLoading || codeNameEngCheck.isLoading;
+  const isDuplicateChecking = codeNameCheck.isLoading;
 
   // 폼 스키마 선택 (생성/수정에 따라)
   const schema = isEditing ? updateCodeSchema : createCodeSchema;
@@ -92,6 +86,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
       codeNameEng: "",
       description: "",
       sortOrder: 1,
+      parentCodeValue: "" as string | undefined,
       ...(isEditing && { isActive: "Y" as const }),
     },
   });
@@ -101,30 +96,40 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
     if (isOpen) {
       if (isEditing && editingCode) {
         // 수정 모드: 기존 데이터 로드 (codeValue는 표시용으로만 설정)
+        const parentValue = editingCode.parentCodeValue || editingCode.parent_code_value || "";
+
         form.reset({
           codeName: editingCode.codeName || editingCode.code_name,
           codeNameEng: editingCode.codeNameEng || editingCode.code_name_eng || "",
           description: editingCode.description || "",
           sortOrder: editingCode.sortOrder || editingCode.sort_order,
-          isActive: (editingCode.isActive || editingCode.is_active) as "Y" | "N", // 타입 캐스팅
+          isActive: (editingCode.isActive || editingCode.is_active) as "Y" | "N",
+          parentCodeValue: parentValue,
         });
 
         // codeValue는 별도로 설정 (표시용)
         form.setValue("codeValue" as any, editingCode.codeValue || editingCode.code_value);
       } else {
         // 새 코드 모드: 자동 순서 계산
-        const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sortOrder || c.sort_order)) : 0;
+        const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sortOrder || c.sort_order || 0)) : 0;
+
+        // 기본 부모 코드가 있으면 설정 (하위 코드 추가 시)
+        const parentValue = defaultParentCode || "";
+
+        // 코드값 자동 생성
+        const autoCodeValue = generateCodeValue();
 
         form.reset({
-          codeValue: "",
+          codeValue: autoCodeValue,
           codeName: "",
           codeNameEng: "",
           description: "",
           sortOrder: maxSortOrder + 1,
+          parentCodeValue: parentValue,
         });
       }
     }
-  }, [isOpen, isEditing, editingCode, codes]);
+  }, [isOpen, isEditing, editingCode, codes, defaultParentCode]);
 
   const handleSubmit = form.handleSubmit(async (data) => {
     try {
@@ -132,7 +137,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
         // 수정
         await updateCodeMutation.mutateAsync({
           categoryCode,
-          codeValue: editingCode.codeValue || editingCode.code_value,
+          codeValue: editingCode.codeValue || editingCode.code_value || "",
           data: data as UpdateCodeData,
         });
       } else {
@@ -156,50 +161,38 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle className="text-base sm:text-lg">{isEditing ? "코드 수정" : "새 코드"}</DialogTitle>
+          <DialogTitle className="text-base sm:text-lg">
+            {isEditing ? "코드 수정" : defaultParentCode ? "하위 코드 추가" : "새 코드"}
+          </DialogTitle>
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
-          {/* 코드값 */}
+          {/* 코드값 (자동 생성, 수정 시에만 표시) */}
+          {isEditing && (
             <div className="space-y-2">
-            <Label htmlFor="codeValue" className="text-xs sm:text-sm">코드값 *</Label>
+              <Label className="text-xs sm:text-sm">코드값</Label>
-            <Input
+              <div className="bg-muted h-8 rounded-md border px-3 py-1.5 text-xs sm:h-10 sm:py-2 sm:text-sm">
-              id="codeValue"
+                {form.watch("codeValue")}
-              {...form.register("codeValue")}
-              disabled={isLoading || isEditing}
-              placeholder="코드값을 입력하세요"
-              className={(form.formState.errors as any)?.codeValue ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
-              onBlur={(e) => {
-                const value = e.target.value.trim();
-                if (value && !isEditing) {
-                  setValidationStates((prev) => ({
-                    ...prev,
-                    codeValue: { enabled: true, value },
-                  }));
-                }
-              }}
-            />
-            {(form.formState.errors as any)?.codeValue && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
-            )}
-            {!isEditing && !(form.formState.errors as any)?.codeValue && (
-              <ValidationMessage
-                message={codeValueCheck.data?.message}
-                isValid={!codeValueCheck.data?.isDuplicate}
-                isLoading={codeValueCheck.isLoading}
-              />
-            )}
               </div>
+              <p className="text-muted-foreground text-[10px] sm:text-xs">코드값은 변경할 수 없습니다</p>
+            </div>
+          )}
 
           {/* 코드명 */}
           <div className="space-y-2">
-            <Label htmlFor="codeName" className="text-xs sm:text-sm">코드명 *</Label>
+            <Label htmlFor="codeName" className="text-xs sm:text-sm">
+              코드명 *
+            </Label>
             <Input
               id="codeName"
               {...form.register("codeName")}
               disabled={isLoading}
               placeholder="코드명을 입력하세요"
-              className={form.formState.errors.codeName ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+              className={
+                form.formState.errors.codeName
+                  ? "border-destructive h-8 text-xs sm:h-10 sm:text-sm"
+                  : "h-8 text-xs sm:h-10 sm:text-sm"
+              }
               onBlur={(e) => {
                 const value = e.target.value.trim();
                 if (value) {
@@ -211,7 +204,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               }}
             />
             {form.formState.errors.codeName && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
+              <p className="text-destructive text-[10px] sm:text-xs">
+                {getErrorMessage(form.formState.errors.codeName)}
+              </p>
             )}
             {!form.formState.errors.codeName && (
               <ValidationMessage
@@ -222,66 +217,72 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
             )}
           </div>
 
-          {/* 영문명 */}
+          {/* 영문명 (선택) */}
           <div className="space-y-2">
-            <Label htmlFor="codeNameEng" className="text-xs sm:text-sm">코드 영문명 *</Label>
+            <Label htmlFor="codeNameEng" className="text-xs sm:text-sm">
+              코드 영문명
+            </Label>
             <Input
               id="codeNameEng"
               {...form.register("codeNameEng")}
               disabled={isLoading}
-              placeholder="코드 영문명을 입력하세요"
+              placeholder="코드 영문명을 입력하세요 (선택사항)"
-              className={form.formState.errors.codeNameEng ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+              className="h-8 text-xs sm:h-10 sm:text-sm"
-              onBlur={(e) => {
-                const value = e.target.value.trim();
-                if (value) {
-                  setValidationStates((prev) => ({
-                    ...prev,
-                    codeNameEng: { enabled: true, value },
-                  }));
-                }
-              }}
             />
-            {form.formState.errors.codeNameEng && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
-            )}
-            {!form.formState.errors.codeNameEng && (
-              <ValidationMessage
-                message={codeNameEngCheck.data?.message}
-                isValid={!codeNameEngCheck.data?.isDuplicate}
-                isLoading={codeNameEngCheck.isLoading}
-              />
-            )}
           </div>
 
-          {/* 설명 */}
+          {/* 설명 (선택) */}
           <div className="space-y-2">
-            <Label htmlFor="description" className="text-xs sm:text-sm">설명 *</Label>
+            <Label htmlFor="description" className="text-xs sm:text-sm">
+              설명
+            </Label>
             <Textarea
               id="description"
               {...form.register("description")}
               disabled={isLoading}
-              placeholder="설명을 입력하세요"
+              placeholder="설명을 입력하세요 (선택사항)"
-              rows={3}
+              rows={2}
-              className={form.formState.errors.description ? "text-xs sm:text-sm border-destructive" : "text-xs sm:text-sm"}
+              className="text-xs sm:text-sm"
             />
-            {form.formState.errors.description && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
-            )}
           </div>
 
+          {/* 부모 코드 표시 (하위 코드 추가 시에만 표시, 읽기 전용) */}
+          {defaultParentCode && (
+            <div className="space-y-2">
+              <Label className="text-xs sm:text-sm">상위 코드</Label>
+              <div className="bg-muted h-8 rounded-md border px-3 py-1.5 text-xs sm:h-10 sm:py-2 sm:text-sm">
+                {(() => {
+                  const parentCode = codes.find((c) => (c.codeValue || c.code_value) === defaultParentCode);
+                  return parentCode
+                    ? `${parentCode.codeName || parentCode.code_name} (${defaultParentCode})`
+                    : defaultParentCode;
+                })()}
+              </div>
+              <p className="text-muted-foreground text-[10px] sm:text-xs">이 코드는 위 코드의 하위로 추가됩니다</p>
+            </div>
+          )}
+
           {/* 정렬 순서 */}
           <div className="space-y-2">
-            <Label htmlFor="sortOrder" className="text-xs sm:text-sm">정렬 순서</Label>
+            <Label htmlFor="sortOrder" className="text-xs sm:text-sm">
+              정렬 순서
+            </Label>
             <Input
               id="sortOrder"
               type="number"
               {...form.register("sortOrder", { valueAsNumber: true })}
               disabled={isLoading}
               min={1}
-              className={form.formState.errors.sortOrder ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
+              className={
+                form.formState.errors.sortOrder
+                  ? "border-destructive h-8 text-xs sm:h-10 sm:text-sm"
+                  : "h-8 text-xs sm:h-10 sm:text-sm"
+              }
             />
             {form.formState.errors.sortOrder && (
-              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
+              <p className="text-destructive text-[10px] sm:text-xs">
+                {getErrorMessage(form.formState.errors.sortOrder)}
+              </p>
             )}
           </div>
 
@@ -295,7 +296,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
                 disabled={isLoading}
                 aria-label="활성 상태"
               />
-              <Label htmlFor="isActive" className="text-xs sm:text-sm">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
+              <Label htmlFor="isActive" className="text-xs sm:text-sm">
+                {form.watch("isActive") === "Y" ? "활성" : "비활성"}
+              </Label>
             </div>
           )}
 

frontend/components/admin/ScreenAssignmentTab.tsx

@@ -172,8 +172,9 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
     // });
 
     if (!menuList || menuList.length === 0) {
+      // Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용
       return [
-        <SelectItem key="no-menu" value="" disabled>
+        <SelectItem key="no-menu" value="__placeholder__" disabled>
           메뉴가 없습니다
         </SelectItem>,
       ];

frontend/components/admin/SortableCodeItem.tsx

@@ -5,7 +5,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Edit, Trash2 } from "lucide-react";
+import { Edit, Trash2, CornerDownRight, Plus, ChevronRight, ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useUpdateCode } from "@/hooks/queries/useCodes";
 import type { CodeInfo } from "@/types/commonCode";
@@ -15,7 +15,13 @@ interface SortableCodeItemProps {
   categoryCode: string;
   onEdit: () => void;
   onDelete: () => void;
+  onAddChild: () => void; // 하위 코드 추가
   isDragOverlay?: boolean;
+  maxDepth?: number; // 최대 깊이 (기본값 3)
+  hasChildren?: boolean; // 자식이 있는지 여부
+  childCount?: number; // 자식 개수
+  isExpanded?: boolean; // 펼쳐진 상태
+  onToggleExpand?: () => void; // 접기/펼치기 토글
 }
 
 export function SortableCodeItem({
@@ -23,10 +29,16 @@ export function SortableCodeItem({
   categoryCode,
   onEdit,
   onDelete,
+  onAddChild,
   isDragOverlay = false,
+  maxDepth = 3,
+  hasChildren = false,
+  childCount = 0,
+  isExpanded = true,
+  onToggleExpand,
 }: SortableCodeItemProps) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: code.codeValue || code.code_value,
+    id: code.codeValue || code.code_value || "",
     disabled: isDragOverlay,
   });
   const updateCodeMutation = useUpdateCode();
@@ -39,7 +51,6 @@ export function SortableCodeItem({
   // 활성/비활성 토글 핸들러
   const handleToggleActive = async (checked: boolean) => {
     try {
-      // codeValue 또는 code_value가 없으면 에러 처리
       const codeValue = code.codeValue || code.code_value;
       if (!codeValue) {
         return;
@@ -61,21 +72,83 @@ export function SortableCodeItem({
     }
   };
 
+  // 계층구조 깊이에 따른 들여쓰기
+  const depth = code.depth || 1;
+  const indentLevel = (depth - 1) * 28; // 28px per level
+  const hasParent = !!(code.parentCodeValue || code.parent_code_value);
+
   return (
+    <div className="flex items-stretch">
+      {/* 계층구조 들여쓰기 영역 */}
+      {depth > 1 && (
+        <div
+          className="flex items-center justify-end pr-2"
+          style={{ width: `${indentLevel}px`, minWidth: `${indentLevel}px` }}
+        >
+          <CornerDownRight className="text-muted-foreground/50 h-4 w-4" />
+        </div>
+      )}
+
       <div
         ref={setNodeRef}
         style={style}
         {...attributes}
         {...listeners}
         className={cn(
-        "group cursor-grab rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md",
+          "group bg-card flex-1 cursor-grab rounded-lg border p-4 shadow-sm transition-all hover:shadow-md",
           isDragging && "cursor-grabbing opacity-50",
+          depth === 1 && "border-l-primary border-l-4",
+          depth === 2 && "border-l-4 border-l-blue-400",
+          depth === 3 && "border-l-4 border-l-green-400",
         )}
       >
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              {/* 접기/펼치기 버튼 (자식이 있을 때만 표시) */}
+              {hasChildren && onToggleExpand && (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onToggleExpand();
+                  }}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-gray-100"
+                  title={isExpanded ? "접기" : "펼치기"}
+                >
+                  {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                </button>
+              )}
               <h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
+              {/* 접힌 상태에서 자식 개수 표시 */}
+              {hasChildren && !isExpanded && <span className="text-muted-foreground text-[10px]">({childCount})</span>}
+              {/* 깊이 표시 배지 */}
+              {depth === 1 && (
+                <Badge
+                  variant="outline"
+                  className="border-primary/30 bg-primary/10 text-primary px-1.5 py-0 text-[10px]"
+                >
+                  대분류
+                </Badge>
+              )}
+              {depth === 2 && (
+                <Badge variant="outline" className="bg-blue-50 px-1.5 py-0 text-[10px] text-blue-600">
+                  중분류
+                </Badge>
+              )}
+              {depth === 3 && (
+                <Badge variant="outline" className="bg-green-50 px-1.5 py-0 text-[10px] text-green-600">
+                  소분류
+                </Badge>
+              )}
+              {depth > 3 && (
+                <Badge variant="outline" className="bg-muted px-1.5 py-0 text-[10px]">
+                  {depth}단계
+                </Badge>
+              )}
               <Badge
                 variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
                 className={cn(
@@ -96,8 +169,14 @@ export function SortableCodeItem({
                 {code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
               </Badge>
             </div>
-          <p className="mt-1 text-xs text-muted-foreground">{code.codeValue || code.code_value}</p>
+            <p className="text-muted-foreground mt-1 text-xs">{code.codeValue || code.code_value}</p>
-          {code.description && <p className="mt-1 text-xs text-muted-foreground">{code.description}</p>}
+            {/* 부모 코드 표시 */}
+            {hasParent && (
+              <p className="text-muted-foreground mt-0.5 text-[10px]">
+                상위: {code.parentCodeValue || code.parent_code_value}
+              </p>
+            )}
+            {code.description && <p className="text-muted-foreground mt-1 text-xs">{code.description}</p>}
           </div>
 
           {/* 액션 버튼 */}
@@ -106,6 +185,22 @@ export function SortableCodeItem({
             onPointerDown={(e) => e.stopPropagation()}
             onMouseDown={(e) => e.stopPropagation()}
           >
+            {/* 하위 코드 추가 버튼 (최대 깊이 미만일 때만 표시) */}
+            {depth < maxDepth && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onAddChild();
+                }}
+                title="하위 코드 추가"
+                className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+              >
+                <Plus className="h-3 w-3" />
+              </Button>
+            )}
             <Button
               variant="ghost"
               size="sm"
@@ -131,5 +226,6 @@ export function SortableCodeItem({
           </div>
         </div>
       </div>
+    </div>
   );
 }

frontend/components/admin/TableLogViewer.tsx

@@ -151,12 +151,16 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
           <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
             <div>
               <label className="mb-1 block text-sm text-gray-600">작업 유형</label>
-              <Select value={operationType} onValueChange={setOperationType}>
+              {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
+              <Select 
+                value={operationType || "__all__"} 
+                onValueChange={(value) => setOperationType(value === "__all__" ? "" : value)}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="전체" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="">전체</SelectItem>
+                  <SelectItem value="__all__">전체</SelectItem>
                   <SelectItem value="INSERT">추가</SelectItem>
                   <SelectItem value="UPDATE">수정</SelectItem>
                   <SelectItem value="DELETE">삭제</SelectItem>

frontend/components/common/HierarchicalCodeSelect.tsx

@@ -0,0 +1,457 @@
+"use client";
+
+/**
+ * 계층구조 코드 선택 컴포넌트 (1단계, 2단계, 3단계 셀렉트박스)
+ * 
+ * @example
+ * // 기본 사용
+ * <HierarchicalCodeSelect
+ *   categoryCode="PRODUCT_CATEGORY"
+ *   maxDepth={3}
+ *   value={selectedCode}
+ *   onChange={(code) => setSelectedCode(code)}
+ * />
+ * 
+ * @example
+ * // 특정 depth까지만 선택
+ * <HierarchicalCodeSelect
+ *   categoryCode="LOCATION"
+ *   maxDepth={2}
+ *   value={selectedCode}
+ *   onChange={(code) => setSelectedCode(code)}
+ * />
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { commonCodeApi } from "@/lib/api/commonCode";
+import { Loader2 } from "lucide-react";
+import type { CodeInfo } from "@/types/commonCode";
+
+export interface HierarchicalCodeSelectProps {
+  /** 코드 카테고리 */
+  categoryCode: string;
+  
+  /** 최대 깊이 (1, 2, 3) */
+  maxDepth?: 1 | 2 | 3;
+  
+  /** 현재 선택된 값 (최종 선택된 코드값) */
+  value?: string;
+  
+  /** 값 변경 핸들러 */
+  onChange?: (codeValue: string, codeInfo?: CodeInfo, fullPath?: CodeInfo[]) => void;
+  
+  /** 각 단계별 라벨 */
+  labels?: [string, string?, string?];
+  
+  /** 각 단계별 placeholder */
+  placeholders?: [string, string?, string?];
+  
+  /** 비활성화 */
+  disabled?: boolean;
+  
+  /** 필수 입력 */
+  required?: boolean;
+  
+  /** 메뉴 OBJID (메뉴 기반 필터링) */
+  menuObjid?: number;
+  
+  /** 추가 클래스 */
+  className?: string;
+  
+  /** 인라인 표시 (가로 배열) */
+  inline?: boolean;
+}
+
+interface LoadingState {
+  level1: boolean;
+  level2: boolean;
+  level3: boolean;
+}
+
+export function HierarchicalCodeSelect({
+  categoryCode,
+  maxDepth = 3,
+  value,
+  onChange,
+  labels = ["1단계", "2단계", "3단계"],
+  placeholders = ["선택하세요", "선택하세요", "선택하세요"],
+  disabled = false,
+  required = false,
+  menuObjid,
+  className = "",
+  inline = false,
+}: HierarchicalCodeSelectProps) {
+  // 각 단계별 옵션
+  const [level1Options, setLevel1Options] = useState<CodeInfo[]>([]);
+  const [level2Options, setLevel2Options] = useState<CodeInfo[]>([]);
+  const [level3Options, setLevel3Options] = useState<CodeInfo[]>([]);
+  
+  // 각 단계별 선택값
+  const [selectedLevel1, setSelectedLevel1] = useState<string>("");
+  const [selectedLevel2, setSelectedLevel2] = useState<string>("");
+  const [selectedLevel3, setSelectedLevel3] = useState<string>("");
+  
+  // 로딩 상태
+  const [loading, setLoading] = useState<LoadingState>({
+    level1: false,
+    level2: false,
+    level3: false,
+  });
+  
+  // 모든 코드 데이터 (경로 추적용)
+  const [allCodes, setAllCodes] = useState<CodeInfo[]>([]);
+
+  // 1단계 코드 로드 (최상위)
+  const loadLevel1Codes = useCallback(async () => {
+    if (!categoryCode) return;
+    
+    setLoading(prev => ({ ...prev, level1: true }));
+    try {
+      const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
+        categoryCode,
+        null, // 부모 없음 (최상위)
+        1,    // depth = 1
+        menuObjid
+      );
+      
+      if (response.success && response.data) {
+        setLevel1Options(response.data);
+        setAllCodes(prev => {
+          const filtered = prev.filter(c => c.depth !== 1);
+          return [...filtered, ...response.data];
+        });
+      }
+    } catch (error) {
+      console.error("1단계 코드 로드 실패:", error);
+    } finally {
+      setLoading(prev => ({ ...prev, level1: false }));
+    }
+  }, [categoryCode, menuObjid]);
+
+  // 2단계 코드 로드 (1단계 선택값 기준)
+  const loadLevel2Codes = useCallback(async (parentCodeValue: string) => {
+    if (!categoryCode || !parentCodeValue) {
+      setLevel2Options([]);
+      return;
+    }
+    
+    setLoading(prev => ({ ...prev, level2: true }));
+    try {
+      const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
+        categoryCode,
+        parentCodeValue,
+        undefined,
+        menuObjid
+      );
+      
+      if (response.success && response.data) {
+        setLevel2Options(response.data);
+        setAllCodes(prev => {
+          const filtered = prev.filter(c => c.depth !== 2 || (c.parentCodeValue || c.parent_code_value) !== parentCodeValue);
+          return [...filtered, ...response.data];
+        });
+      }
+    } catch (error) {
+      console.error("2단계 코드 로드 실패:", error);
+    } finally {
+      setLoading(prev => ({ ...prev, level2: false }));
+    }
+  }, [categoryCode, menuObjid]);
+
+  // 3단계 코드 로드 (2단계 선택값 기준)
+  const loadLevel3Codes = useCallback(async (parentCodeValue: string) => {
+    if (!categoryCode || !parentCodeValue) {
+      setLevel3Options([]);
+      return;
+    }
+    
+    setLoading(prev => ({ ...prev, level3: true }));
+    try {
+      const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
+        categoryCode,
+        parentCodeValue,
+        undefined,
+        menuObjid
+      );
+      
+      if (response.success && response.data) {
+        setLevel3Options(response.data);
+        setAllCodes(prev => {
+          const filtered = prev.filter(c => c.depth !== 3 || (c.parentCodeValue || c.parent_code_value) !== parentCodeValue);
+          return [...filtered, ...response.data];
+        });
+      }
+    } catch (error) {
+      console.error("3단계 코드 로드 실패:", error);
+    } finally {
+      setLoading(prev => ({ ...prev, level3: false }));
+    }
+  }, [categoryCode, menuObjid]);
+
+  // 초기 로드 및 카테고리 변경 시
+  useEffect(() => {
+    loadLevel1Codes();
+    setSelectedLevel1("");
+    setSelectedLevel2("");
+    setSelectedLevel3("");
+    setLevel2Options([]);
+    setLevel3Options([]);
+  }, [loadLevel1Codes]);
+
+  // value prop 변경 시 역추적 (외부에서 값이 설정된 경우)
+  useEffect(() => {
+    if (!value || allCodes.length === 0) return;
+    
+    // 선택된 코드 찾기
+    const selectedCode = allCodes.find(c => 
+      (c.codeValue || c.code_value) === value
+    );
+    
+    if (!selectedCode) return;
+    
+    const depth = selectedCode.depth || 1;
+    
+    if (depth === 1) {
+      setSelectedLevel1(value);
+      setSelectedLevel2("");
+      setSelectedLevel3("");
+    } else if (depth === 2) {
+      const parentValue = selectedCode.parentCodeValue || selectedCode.parent_code_value || "";
+      setSelectedLevel1(parentValue);
+      setSelectedLevel2(value);
+      setSelectedLevel3("");
+      loadLevel2Codes(parentValue);
+    } else if (depth === 3) {
+      const parentValue = selectedCode.parentCodeValue || selectedCode.parent_code_value || "";
+      
+      // 2단계 부모 찾기
+      const level2Code = allCodes.find(c => (c.codeValue || c.code_value) === parentValue);
+      const level1Value = level2Code?.parentCodeValue || level2Code?.parent_code_value || "";
+      
+      setSelectedLevel1(level1Value);
+      setSelectedLevel2(parentValue);
+      setSelectedLevel3(value);
+      
+      loadLevel2Codes(level1Value);
+      loadLevel3Codes(parentValue);
+    }
+  }, [value, allCodes]);
+
+  // 1단계 선택 변경
+  const handleLevel1Change = (codeValue: string) => {
+    setSelectedLevel1(codeValue);
+    setSelectedLevel2("");
+    setSelectedLevel3("");
+    setLevel2Options([]);
+    setLevel3Options([]);
+    
+    if (codeValue && maxDepth > 1) {
+      loadLevel2Codes(codeValue);
+    }
+    
+    // 최대 깊이가 1이면 즉시 onChange 호출
+    if (maxDepth === 1 && onChange) {
+      const selectedCodeInfo = level1Options.find(c => (c.codeValue || c.code_value) === codeValue);
+      onChange(codeValue, selectedCodeInfo, selectedCodeInfo ? [selectedCodeInfo] : []);
+    }
+  };
+
+  // 2단계 선택 변경
+  const handleLevel2Change = (codeValue: string) => {
+    setSelectedLevel2(codeValue);
+    setSelectedLevel3("");
+    setLevel3Options([]);
+    
+    if (codeValue && maxDepth > 2) {
+      loadLevel3Codes(codeValue);
+    }
+    
+    // 최대 깊이가 2이면 onChange 호출
+    if (maxDepth === 2 && onChange) {
+      const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
+      const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === codeValue);
+      const fullPath = [level1Code, level2Code].filter(Boolean) as CodeInfo[];
+      onChange(codeValue, level2Code, fullPath);
+    }
+  };
+
+  // 3단계 선택 변경
+  const handleLevel3Change = (codeValue: string) => {
+    setSelectedLevel3(codeValue);
+    
+    if (onChange) {
+      const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
+      const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === selectedLevel2);
+      const level3Code = level3Options.find(c => (c.codeValue || c.code_value) === codeValue);
+      const fullPath = [level1Code, level2Code, level3Code].filter(Boolean) as CodeInfo[];
+      onChange(codeValue, level3Code, fullPath);
+    }
+  };
+
+  // 최종 선택값 계산
+  const finalValue = useMemo(() => {
+    if (maxDepth >= 3 && selectedLevel3) return selectedLevel3;
+    if (maxDepth >= 2 && selectedLevel2) return selectedLevel2;
+    if (selectedLevel1) return selectedLevel1;
+    return "";
+  }, [maxDepth, selectedLevel1, selectedLevel2, selectedLevel3]);
+
+  // 최종 선택값이 변경되면 onChange 호출 (maxDepth 제한 없이)
+  useEffect(() => {
+    if (!onChange) return;
+    
+    // 현재 선택된 깊이 확인
+    if (selectedLevel3 && maxDepth >= 3) {
+      // 3단계까지 선택됨
+      return; // handleLevel3Change에서 처리
+    }
+    if (selectedLevel2 && maxDepth >= 2 && !selectedLevel3 && level3Options.length === 0) {
+      // 2단계까지 선택되고 3단계 옵션이 없음
+      const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
+      const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === selectedLevel2);
+      const fullPath = [level1Code, level2Code].filter(Boolean) as CodeInfo[];
+      onChange(selectedLevel2, level2Code, fullPath);
+    } else if (selectedLevel1 && maxDepth >= 1 && !selectedLevel2 && level2Options.length === 0) {
+      // 1단계까지 선택되고 2단계 옵션이 없음
+      const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
+      onChange(selectedLevel1, level1Code, level1Code ? [level1Code] : []);
+    }
+  }, [level2Options, level3Options]);
+
+  const containerClass = inline 
+    ? "flex flex-wrap gap-4 items-end" 
+    : "space-y-4";
+
+  const selectItemClass = inline 
+    ? "flex-1 min-w-[150px] space-y-1" 
+    : "space-y-1";
+
+  return (
+    <div className={`${containerClass} ${className}`}>
+      {/* 1단계 선택 */}
+      <div className={selectItemClass}>
+        <Label className="text-xs font-medium">
+          {labels[0]}
+          {required && <span className="ml-1 text-destructive">*</span>}
+        </Label>
+        <Select
+          value={selectedLevel1}
+          onValueChange={handleLevel1Change}
+          disabled={disabled || loading.level1}
+        >
+          <SelectTrigger className="h-9 text-sm">
+            {loading.level1 ? (
+              <div className="flex items-center gap-2">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                <span className="text-muted-foreground">로딩 중...</span>
+              </div>
+            ) : (
+              <SelectValue placeholder={placeholders[0]} />
+            )}
+          </SelectTrigger>
+          <SelectContent>
+            {level1Options.map((code) => {
+              const codeValue = code.codeValue || code.code_value || "";
+              const codeName = code.codeName || code.code_name || "";
+              return (
+                <SelectItem key={codeValue} value={codeValue}>
+                  {codeName}
+                </SelectItem>
+              );
+            })}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 2단계 선택 */}
+      {maxDepth >= 2 && (
+        <div className={selectItemClass}>
+          <Label className="text-xs font-medium">
+            {labels[1] || "2단계"}
+          </Label>
+          <Select
+            value={selectedLevel2}
+            onValueChange={handleLevel2Change}
+            disabled={disabled || loading.level2 || !selectedLevel1}
+          >
+            <SelectTrigger className="h-9 text-sm">
+              {loading.level2 ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  <span className="text-muted-foreground">로딩 중...</span>
+                </div>
+              ) : (
+                <SelectValue placeholder={selectedLevel1 ? (placeholders[1] || "선택하세요") : "1단계를 먼저 선택하세요"} />
+              )}
+            </SelectTrigger>
+            <SelectContent>
+              {level2Options.length === 0 && selectedLevel1 && !loading.level2 ? (
+                <div className="px-2 py-1.5 text-sm text-muted-foreground">
+                  하위 항목이 없습니다
+                </div>
+              ) : (
+                level2Options.map((code) => {
+                  const codeValue = code.codeValue || code.code_value || "";
+                  const codeName = code.codeName || code.code_name || "";
+                  return (
+                    <SelectItem key={codeValue} value={codeValue}>
+                      {codeName}
+                    </SelectItem>
+                  );
+                })
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* 3단계 선택 */}
+      {maxDepth >= 3 && (
+        <div className={selectItemClass}>
+          <Label className="text-xs font-medium">
+            {labels[2] || "3단계"}
+          </Label>
+          <Select
+            value={selectedLevel3}
+            onValueChange={handleLevel3Change}
+            disabled={disabled || loading.level3 || !selectedLevel2}
+          >
+            <SelectTrigger className="h-9 text-sm">
+              {loading.level3 ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  <span className="text-muted-foreground">로딩 중...</span>
+                </div>
+              ) : (
+                <SelectValue placeholder={selectedLevel2 ? (placeholders[2] || "선택하세요") : "2단계를 먼저 선택하세요"} />
+              )}
+            </SelectTrigger>
+            <SelectContent>
+              {level3Options.length === 0 && selectedLevel2 && !loading.level3 ? (
+                <div className="px-2 py-1.5 text-sm text-muted-foreground">
+                  하위 항목이 없습니다
+                </div>
+              ) : (
+                level3Options.map((code) => {
+                  const codeValue = code.codeValue || code.code_value || "";
+                  const codeName = code.codeName || code.code_name || "";
+                  return (
+                    <SelectItem key={codeValue} value={codeValue}>
+                      {codeName}
+                    </SelectItem>
+                  );
+                })
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default HierarchicalCodeSelect;
+
+

frontend/components/common/MultiColumnHierarchySelect.tsx

@@ -0,0 +1,389 @@
+"use client";
+
+/**
+ * 멀티 컬럼 계층구조 선택 컴포넌트
+ * 
+ * 대분류, 중분류, 소분류를 각각 다른 컬럼에 저장하는 계층구조 선택 컴포넌트
+ * 
+ * @example
+ * <MultiColumnHierarchySelect
+ *   categoryCode="PRODUCT_CATEGORY"
+ *   columns={{
+ *     large: { columnName: "category_large", label: "대분류" },
+ *     medium: { columnName: "category_medium", label: "중분류" },
+ *     small: { columnName: "category_small", label: "소분류" },
+ *   }}
+ *   values={{
+ *     large: formData.category_large,
+ *     medium: formData.category_medium,
+ *     small: formData.category_small,
+ *   }}
+ *   onChange={(role, columnName, value) => {
+ *     setFormData(prev => ({ ...prev, [columnName]: value }));
+ *   }}
+ * />
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { commonCodeApi } from "@/lib/api/commonCode";
+import { Loader2 } from "lucide-react";
+import type { CodeInfo } from "@/types/commonCode";
+
+export type HierarchyRole = "large" | "medium" | "small";
+
+export interface HierarchyColumnConfig {
+  columnName: string;
+  label?: string;
+  placeholder?: string;
+}
+
+export interface MultiColumnHierarchySelectProps {
+  /** 코드 카테고리 */
+  categoryCode: string;
+  
+  /** 각 계층별 컬럼 설정 */
+  columns: {
+    large?: HierarchyColumnConfig;
+    medium?: HierarchyColumnConfig;
+    small?: HierarchyColumnConfig;
+  };
+  
+  /** 현재 값들 */
+  values?: {
+    large?: string;
+    medium?: string;
+    small?: string;
+  };
+  
+  /** 값 변경 핸들러 (역할, 컬럼명, 값) */
+  onChange?: (role: HierarchyRole, columnName: string, value: string) => void;
+  
+  /** 비활성화 */
+  disabled?: boolean;
+  
+  /** 메뉴 OBJID */
+  menuObjid?: number;
+  
+  /** 추가 클래스 */
+  className?: string;
+  
+  /** 인라인 표시 (가로 배열) */
+  inline?: boolean;
+}
+
+interface LoadingState {
+  large: boolean;
+  medium: boolean;
+  small: boolean;
+}
+
+export function MultiColumnHierarchySelect({
+  categoryCode,
+  columns,
+  values = {},
+  onChange,
+  disabled = false,
+  menuObjid,
+  className = "",
+  inline = false,
+}: MultiColumnHierarchySelectProps) {
+  // 각 단계별 옵션
+  const [largeOptions, setLargeOptions] = useState<CodeInfo[]>([]);
+  const [mediumOptions, setMediumOptions] = useState<CodeInfo[]>([]);
+  const [smallOptions, setSmallOptions] = useState<CodeInfo[]>([]);
+  
+  // 로딩 상태
+  const [loading, setLoading] = useState<LoadingState>({
+    large: false,
+    medium: false,
+    small: false,
+  });
+
+  // 대분류 로드 (depth = 1)
+  const loadLargeOptions = useCallback(async () => {
+    if (!categoryCode) return;
+    
+    setLoading(prev => ({ ...prev, large: true }));
+    try {
+      const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
+        categoryCode,
+        null, // 부모 없음
+        1,    // depth = 1
+        menuObjid
+      );
+      
+      if (response.success && response.data) {
+        setLargeOptions(response.data);
+      }
+    } catch (error) {
+      console.error("대분류 로드 실패:", error);
+    } finally {
+      setLoading(prev => ({ ...prev, large: false }));
+    }
+  }, [categoryCode, menuObjid]);
+
+  // 중분류 로드 (대분류 선택 기준)
+  const loadMediumOptions = useCallback(async (parentCodeValue: string) => {
+    if (!categoryCode || !parentCodeValue) {
+      setMediumOptions([]);
+      return;
+    }
+    
+    setLoading(prev => ({ ...prev, medium: true }));
+    try {
+      const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
+        categoryCode,
+        parentCodeValue,
+        undefined,
+        menuObjid
+      );
+      
+      if (response.success && response.data) {
+        setMediumOptions(response.data);
+      }
+    } catch (error) {
+      console.error("중분류 로드 실패:", error);
+    } finally {
+      setLoading(prev => ({ ...prev, medium: false }));
+    }
+  }, [categoryCode, menuObjid]);
+
+  // 소분류 로드 (중분류 선택 기준)
+  const loadSmallOptions = useCallback(async (parentCodeValue: string) => {
+    if (!categoryCode || !parentCodeValue) {
+      setSmallOptions([]);
+      return;
+    }
+    
+    setLoading(prev => ({ ...prev, small: true }));
+    try {
+      const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
+        categoryCode,
+        parentCodeValue,
+        undefined,
+        menuObjid
+      );
+      
+      if (response.success && response.data) {
+        setSmallOptions(response.data);
+      }
+    } catch (error) {
+      console.error("소분류 로드 실패:", error);
+    } finally {
+      setLoading(prev => ({ ...prev, small: false }));
+    }
+  }, [categoryCode, menuObjid]);
+
+  // 초기 로드
+  useEffect(() => {
+    loadLargeOptions();
+  }, [loadLargeOptions]);
+
+  // 대분류 값이 있으면 중분류 로드
+  useEffect(() => {
+    if (values.large) {
+      loadMediumOptions(values.large);
+    } else {
+      setMediumOptions([]);
+      setSmallOptions([]);
+    }
+  }, [values.large, loadMediumOptions]);
+
+  // 중분류 값이 있으면 소분류 로드
+  useEffect(() => {
+    if (values.medium) {
+      loadSmallOptions(values.medium);
+    } else {
+      setSmallOptions([]);
+    }
+  }, [values.medium, loadSmallOptions]);
+
+  // 대분류 변경
+  const handleLargeChange = (codeValue: string) => {
+    const columnName = columns.large?.columnName || "";
+    if (onChange && columnName) {
+      onChange("large", columnName, codeValue);
+    }
+    
+    // 하위 값 초기화
+    if (columns.medium?.columnName && onChange) {
+      onChange("medium", columns.medium.columnName, "");
+    }
+    if (columns.small?.columnName && onChange) {
+      onChange("small", columns.small.columnName, "");
+    }
+  };
+
+  // 중분류 변경
+  const handleMediumChange = (codeValue: string) => {
+    const columnName = columns.medium?.columnName || "";
+    if (onChange && columnName) {
+      onChange("medium", columnName, codeValue);
+    }
+    
+    // 하위 값 초기화
+    if (columns.small?.columnName && onChange) {
+      onChange("small", columns.small.columnName, "");
+    }
+  };
+
+  // 소분류 변경
+  const handleSmallChange = (codeValue: string) => {
+    const columnName = columns.small?.columnName || "";
+    if (onChange && columnName) {
+      onChange("small", columnName, codeValue);
+    }
+  };
+
+  const containerClass = inline 
+    ? "flex flex-wrap gap-4 items-end" 
+    : "space-y-4";
+
+  const selectItemClass = inline 
+    ? "flex-1 min-w-[150px] space-y-1" 
+    : "space-y-1";
+
+  // 설정된 컬럼만 렌더링
+  const hasLarge = !!columns.large;
+  const hasMedium = !!columns.medium;
+  const hasSmall = !!columns.small;
+
+  return (
+    <div className={`${containerClass} ${className}`}>
+      {/* 대분류 */}
+      {hasLarge && (
+        <div className={selectItemClass}>
+          <Label className="text-xs font-medium">
+            {columns.large?.label || "대분류"}
+          </Label>
+          <Select
+            value={values.large || ""}
+            onValueChange={handleLargeChange}
+            disabled={disabled || loading.large}
+          >
+            <SelectTrigger className="h-9 text-sm">
+              {loading.large ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  <span className="text-muted-foreground">로딩 중...</span>
+                </div>
+              ) : (
+                <SelectValue placeholder={columns.large?.placeholder || "대분류 선택"} />
+              )}
+            </SelectTrigger>
+            <SelectContent>
+              {largeOptions.map((code) => {
+                const codeValue = code.codeValue || code.code_value || "";
+                const codeName = code.codeName || code.code_name || "";
+                return (
+                  <SelectItem key={codeValue} value={codeValue}>
+                    {codeName}
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* 중분류 */}
+      {hasMedium && (
+        <div className={selectItemClass}>
+          <Label className="text-xs font-medium">
+            {columns.medium?.label || "중분류"}
+          </Label>
+          <Select
+            value={values.medium || ""}
+            onValueChange={handleMediumChange}
+            disabled={disabled || loading.medium || !values.large}
+          >
+            <SelectTrigger className="h-9 text-sm">
+              {loading.medium ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  <span className="text-muted-foreground">로딩 중...</span>
+                </div>
+              ) : (
+                <SelectValue 
+                  placeholder={values.large 
+                    ? (columns.medium?.placeholder || "중분류 선택") 
+                    : "대분류를 먼저 선택하세요"
+                  } 
+                />
+              )}
+            </SelectTrigger>
+            <SelectContent>
+              {mediumOptions.length === 0 && values.large && !loading.medium ? (
+                <div className="px-2 py-1.5 text-sm text-muted-foreground">
+                  하위 항목이 없습니다
+                </div>
+              ) : (
+                mediumOptions.map((code) => {
+                  const codeValue = code.codeValue || code.code_value || "";
+                  const codeName = code.codeName || code.code_name || "";
+                  return (
+                    <SelectItem key={codeValue} value={codeValue}>
+                      {codeName}
+                    </SelectItem>
+                  );
+                })
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* 소분류 */}
+      {hasSmall && (
+        <div className={selectItemClass}>
+          <Label className="text-xs font-medium">
+            {columns.small?.label || "소분류"}
+          </Label>
+          <Select
+            value={values.small || ""}
+            onValueChange={handleSmallChange}
+            disabled={disabled || loading.small || !values.medium}
+          >
+            <SelectTrigger className="h-9 text-sm">
+              {loading.small ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  <span className="text-muted-foreground">로딩 중...</span>
+                </div>
+              ) : (
+                <SelectValue 
+                  placeholder={values.medium 
+                    ? (columns.small?.placeholder || "소분류 선택") 
+                    : "중분류를 먼저 선택하세요"
+                  } 
+                />
+              )}
+            </SelectTrigger>
+            <SelectContent>
+              {smallOptions.length === 0 && values.medium && !loading.small ? (
+                <div className="px-2 py-1.5 text-sm text-muted-foreground">
+                  하위 항목이 없습니다
+                </div>
+              ) : (
+                smallOptions.map((code) => {
+                  const codeValue = code.codeValue || code.code_value || "";
+                  const codeName = code.codeName || code.code_name || "";
+                  return (
+                    <SelectItem key={codeValue} value={codeValue}>
+                      {codeName}
+                    </SelectItem>
+                  );
+                })
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MultiColumnHierarchySelect;
+

frontend/components/dataflow/external-call/DataMappingSettings.tsx

@@ -236,12 +236,13 @@ export const DataMappingSettings: React.FC<DataMappingSettingsProps> = ({
                         <SelectValue placeholder={tablesLoading ? "테이블 목록 로딩 중..." : "저장할 테이블을 선택하세요"} />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용 */}
                         {tablesLoading ? (
-                          <SelectItem value="" disabled>
+                          <SelectItem value="__placeholder__" disabled>
                             테이블 목록 로딩 중...
                           </SelectItem>
                         ) : availableTables.length === 0 ? (
-                          <SelectItem value="" disabled>
+                          <SelectItem value="__placeholder__" disabled>
                             사용 가능한 테이블이 없습니다
                           </SelectItem>
                         ) : (

frontend/components/flow/FlowStepPanel.tsx

@@ -1173,7 +1173,8 @@ export function FlowStepPanel({
                           기본 REST API 연결
                         </SelectItem>
                       ) : (
-                        <SelectItem value="" disabled>
+                        // Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용
+                        <SelectItem value="__placeholder__" disabled>
                           연결된 REST API가 없습니다
                         </SelectItem>
                       )}

frontend/components/report/designer/CanvasComponent.tsx

@@ -4,6 +4,159 @@ import { useRef, useState, useEffect } from "react";
 import { ComponentConfig } from "@/types/report";
 import { useReportDesigner } from "@/contexts/ReportDesignerContext";
 import { getFullImageUrl } from "@/lib/api/client";
+import JsBarcode from "jsbarcode";
+import QRCode from "qrcode";
+
+// 고정 스케일 팩터 (화면 해상도와 무관)
+const MM_TO_PX = 4;
+
+// 1D 바코드 렌더러 컴포넌트
+interface BarcodeRendererProps {
+  value: string;
+  format: string;
+  width: number;
+  height: number;
+  displayValue: boolean;
+  lineColor: string;
+  background: string;
+  margin: number;
+}
+
+function BarcodeRenderer({
+  value,
+  format,
+  width,
+  height,
+  displayValue,
+  lineColor,
+  background,
+  margin,
+}: BarcodeRendererProps) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!svgRef.current || !value) return;
+
+    // 매번 에러 상태 초기화 후 재검사
+    setError(null);
+
+    try {
+      // 바코드 형식에 따른 유효성 검사
+      let isValid = true;
+      let errorMsg = "";
+      const trimmedValue = value.trim();
+
+      if (format === "EAN13" && !/^\d{12,13}$/.test(trimmedValue)) {
+        isValid = false;
+        errorMsg = "EAN-13: 12~13자리 숫자 필요";
+      } else if (format === "EAN8" && !/^\d{7,8}$/.test(trimmedValue)) {
+        isValid = false;
+        errorMsg = "EAN-8: 7~8자리 숫자 필요";
+      } else if (format === "UPC" && !/^\d{11,12}$/.test(trimmedValue)) {
+        isValid = false;
+        errorMsg = "UPC: 11~12자리 숫자 필요";
+      }
+
+      if (!isValid) {
+        setError(errorMsg);
+        return;
+      }
+
+      // JsBarcode는 format을 소문자로 받음
+      const barcodeFormat = format.toLowerCase();
+      // transparent는 빈 문자열로 변환 (SVG 배경 없음)
+      const bgColor = background === "transparent" ? "" : background;
+
+      JsBarcode(svgRef.current, trimmedValue, {
+        format: barcodeFormat,
+        width: 2,
+        height: Math.max(30, height - (displayValue ? 30 : 10)),
+        displayValue: displayValue,
+        lineColor: lineColor,
+        background: bgColor,
+        margin: margin,
+        fontSize: 12,
+        textMargin: 2,
+      });
+    } catch (err: any) {
+      // JsBarcode 체크섬 오류 등
+      setError(err?.message || "바코드 생성 실패");
+    }
+  }, [value, format, width, height, displayValue, lineColor, background, margin]);
+
+  return (
+    <div className="relative h-full w-full">
+      {/* SVG는 항상 렌더링 (에러 시 숨김) */}
+      <svg ref={svgRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
+      {/* 에러 메시지 오버레이 */}
+      {error && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
+          <span>{error}</span>
+          <span className="mt-1 text-gray-400">{value}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// QR코드 렌더러 컴포넌트
+interface QRCodeRendererProps {
+  value: string;
+  size: number;
+  fgColor: string;
+  bgColor: string;
+  level: "L" | "M" | "Q" | "H";
+}
+
+function QRCodeRenderer({ value, size, fgColor, bgColor, level }: QRCodeRendererProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current || !value) return;
+
+    // 매번 에러 상태 초기화 후 재시도
+    setError(null);
+
+    // qrcode 라이브러리는 hex 색상만 지원, transparent는 흰색으로 대체
+    const lightColor = bgColor === "transparent" ? "#ffffff" : bgColor;
+
+    QRCode.toCanvas(
+      canvasRef.current,
+      value,
+      {
+        width: Math.max(50, size),
+        margin: 2,
+        color: {
+          dark: fgColor,
+          light: lightColor,
+        },
+        errorCorrectionLevel: level,
+      },
+      (err) => {
+        if (err) {
+          // 실제 에러 메시지 표시
+          setError(err.message || "QR코드 생성 실패");
+        }
+      },
+    );
+  }, [value, size, fgColor, bgColor, level]);
+
+  return (
+    <div className="relative h-full w-full">
+      {/* Canvas는 항상 렌더링 (에러 시 숨김) */}
+      <canvas ref={canvasRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
+      {/* 에러 메시지 오버레이 */}
+      {error && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
+          <span>{error}</span>
+          <span className="mt-1 text-gray-400">{value}</span>
+        </div>
+      )}
+    </div>
+  );
+}
 
 interface CanvasComponentProps {
   component: ComponentConfig;
@@ -102,15 +255,15 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         const newX = Math.max(0, e.clientX - dragStart.x);
         const newY = Math.max(0, e.clientY - dragStart.y);
 
-        // 여백을 px로 변환 (1mm ≈ 3.7795px)
+        // 여백을 px로 변환
-        const marginTopPx = margins.top * 3.7795;
+        const marginTopPx = margins.top * MM_TO_PX;
-        const marginBottomPx = margins.bottom * 3.7795;
+        const marginBottomPx = margins.bottom * MM_TO_PX;
-        const marginLeftPx = margins.left * 3.7795;
+        const marginLeftPx = margins.left * MM_TO_PX;
-        const marginRightPx = margins.right * 3.7795;
+        const marginRightPx = margins.right * MM_TO_PX;
 
         // 캔버스 경계 체크 (mm를 px로 변환)
-        const canvasWidthPx = canvasWidth * 3.7795;
+        const canvasWidthPx = canvasWidth * MM_TO_PX;
-        const canvasHeightPx = canvasHeight * 3.7795;
+        const canvasHeightPx = canvasHeight * MM_TO_PX;
 
         // 컴포넌트가 여백 안에 있도록 제한
         const minX = marginLeftPx;
@@ -162,12 +315,12 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         const newHeight = Math.max(30, resizeStart.height + deltaY);
 
         // 여백을 px로 변환
-        const marginRightPx = margins.right * 3.7795;
+        const marginRightPx = margins.right * MM_TO_PX;
-        const marginBottomPx = margins.bottom * 3.7795;
+        const marginBottomPx = margins.bottom * MM_TO_PX;
 
         // 캔버스 경계 체크
-        const canvasWidthPx = canvasWidth * 3.7795;
+        const canvasWidthPx = canvasWidth * MM_TO_PX;
-        const canvasHeightPx = canvasHeight * 3.7795;
+        const canvasHeightPx = canvasHeight * MM_TO_PX;
 
         // 컴포넌트가 여백을 벗어나지 않도록 최대 크기 제한
         const maxWidth = canvasWidthPx - marginRightPx - component.x;
@@ -176,12 +329,41 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         const boundedWidth = Math.min(newWidth, maxWidth);
         const boundedHeight = Math.min(newHeight, maxHeight);
 
+        // 구분선은 방향에 따라 한 축만 조절 가능
+        if (component.type === "divider") {
+          if (component.orientation === "vertical") {
+            // 세로 구분선: 높이만 조절
+            updateComponent(component.id, {
+              height: snapValueToGrid(boundedHeight),
+            });
+          } else {
+            // 가로 구분선: 너비만 조절
+            updateComponent(component.id, {
+              width: snapValueToGrid(boundedWidth),
+            });
+          }
+        } else if (component.type === "barcode" && component.barcodeType === "QR") {
+          // QR코드는 정사각형 유지: 더 큰 변화량 기준으로 동기화
+          const maxDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;
+          const newSize = Math.max(50, resizeStart.width + maxDelta);
+          const maxSize = Math.min(
+            canvasWidthPx - marginRightPx - component.x,
+            canvasHeightPx - marginBottomPx - component.y,
+          );
+          const boundedSize = Math.min(newSize, maxSize);
+          const snappedSize = snapValueToGrid(boundedSize);
+          updateComponent(component.id, {
+            width: snappedSize,
+            height: snappedSize,
+          });
+        } else {
         // Grid Snap 적용
         updateComponent(component.id, {
           width: snapValueToGrid(boundedWidth),
           height: snapValueToGrid(boundedHeight),
         });
         }
+      }
     };
 
     const handleMouseUp = () => {
@@ -260,35 +442,10 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
     switch (component.type) {
       case "text":
-        return (
-          <div className="h-full w-full">
-            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
-              <span>텍스트 필드</span>
-              {hasBinding && <span className="text-blue-600">● 연결됨</span>}
-            </div>
-            <div
-              style={{
-                fontSize: `${component.fontSize}px`,
-                color: component.fontColor,
-                fontWeight: component.fontWeight,
-                textAlign: component.textAlign as "left" | "center" | "right",
-                whiteSpace: "pre-wrap",
-              }}
-              className="w-full"
-            >
-              {displayValue}
-            </div>
-          </div>
-        );
-
       case "label":
         return (
-          <div className="h-full w-full">
-            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
-              <span>레이블</span>
-              {hasBinding && <span className="text-blue-600">● 연결됨</span>}
-            </div>
             <div
+            className="h-full w-full"
               style={{
                 fontSize: `${component.fontSize}px`,
                 color: component.fontColor,
@@ -299,7 +456,6 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
             >
               {displayValue}
           </div>
-          </div>
         );
 
       case "table":
@@ -321,10 +477,6 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
             return (
               <div className="h-full w-full overflow-auto">
-                <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
-                  <span>테이블</span>
-                  <span className="text-blue-600">● 연결됨 ({queryResult.rows.length}행)</span>
-                </div>
                 <table
                   className="w-full border-collapse text-xs"
                   style={{
@@ -381,30 +533,26 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
         // 기본 테이블 (데이터 없을 때)
         return (
-          <div className="h-full w-full">
+          <div className="flex h-full w-full items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
-            <div className="mb-1 text-xs text-gray-500">테이블</div>
-            <div className="flex h-[calc(100%-20px)] items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
               쿼리를 연결하세요
           </div>
-          </div>
         );
 
       case "image":
         return (
           <div className="h-full w-full overflow-hidden">
-            <div className="mb-1 text-xs text-gray-500">이미지</div>
             {component.imageUrl ? (
               <img
                 src={getFullImageUrl(component.imageUrl)}
                 alt="이미지"
                 style={{
                   width: "100%",
-                  height: "calc(100% - 20px)",
+                  height: "100%",
                   objectFit: component.objectFit || "contain",
                 }}
               />
             ) : (
-              <div className="flex h-[calc(100%-20px)] w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
+              <div className="flex h-full w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
                 이미지를 업로드하세요
               </div>
             )}
@@ -412,21 +560,23 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         );
 
       case "divider":
-        const lineWidth = component.lineWidth || 1;
+        // 구분선 (가로: 너비만 조절, 세로: 높이만 조절)
-        const lineColor = component.lineColor || "#000000";
+        const dividerLineWidth = component.lineWidth || 1;
+        const dividerLineColor = component.lineColor || "#000000";
+        const isHorizontal = component.orientation !== "vertical";
 
         return (
-          <div className="flex h-full w-full items-center justify-center">
+          <div className={`flex h-full w-full ${isHorizontal ? "items-center" : "justify-center"}`}>
             <div
               style={{
-                width: component.orientation === "horizontal" ? "100%" : `${lineWidth}px`,
+                width: isHorizontal ? "100%" : `${dividerLineWidth}px`,
-                height: component.orientation === "vertical" ? "100%" : `${lineWidth}px`,
+                height: isHorizontal ? `${dividerLineWidth}px` : "100%",
-                backgroundColor: lineColor,
+                backgroundColor: dividerLineColor,
                 ...(component.lineStyle === "dashed" && {
                   backgroundImage: `repeating-linear-gradient(
-                    ${component.orientation === "horizontal" ? "90deg" : "0deg"},
+                    ${isHorizontal ? "90deg" : "0deg"},
-                    ${lineColor} 0px,
+                    ${dividerLineColor} 0px,
-                    ${lineColor} 10px,
+                    ${dividerLineColor} 10px,
                     transparent 10px,
                     transparent 20px
                   )`,
@@ -434,19 +584,18 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                 }),
                 ...(component.lineStyle === "dotted" && {
                   backgroundImage: `repeating-linear-gradient(
-                    ${component.orientation === "horizontal" ? "90deg" : "0deg"},
+                    ${isHorizontal ? "90deg" : "0deg"},
-                    ${lineColor} 0px,
+                    ${dividerLineColor} 0px,
-                    ${lineColor} 3px,
+                    ${dividerLineColor} 3px,
                     transparent 3px,
                     transparent 10px
                   )`,
                   backgroundColor: "transparent",
                 }),
                 ...(component.lineStyle === "double" && {
-                  boxShadow:
+                  boxShadow: isHorizontal
-                    component.orientation === "horizontal"
+                    ? `0 ${dividerLineWidth * 2}px 0 0 ${dividerLineColor}`
-                      ? `0 ${lineWidth * 2}px 0 0 ${lineColor}`
+                    : `${dividerLineWidth * 2}px 0 0 0 ${dividerLineColor}`,
-                      : `${lineWidth * 2}px 0 0 0 ${lineColor}`,
                 }),
               }}
             />
@@ -457,13 +606,11 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         const sigLabelPos = component.labelPosition || "left";
         const sigShowLabel = component.showLabel !== false;
         const sigLabelText = component.labelText || "서명:";
-        const sigShowUnderline = component.showUnderline !== false;
 
         return (
           <div className="h-full w-full">
-            <div className="mb-1 text-xs text-gray-500">서명란</div>
             <div
-              className={`flex h-[calc(100%-20px)] gap-2 ${
+              className={`flex h-full gap-2 ${
                 sigLabelPos === "top"
                   ? "flex-col"
                   : sigLabelPos === "bottom"
@@ -505,14 +652,6 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                     서명 이미지
                   </div>
                 )}
-                {sigShowUnderline && (
-                  <div
-                    className="absolute right-0 bottom-0 left-0"
-                    style={{
-                      borderBottom: "2px solid #000000",
-                    }}
-                  />
-                )}
               </div>
             </div>
           </div>
@@ -525,8 +664,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
         return (
           <div className="h-full w-full">
-            <div className="mb-1 text-xs text-gray-500">도장란</div>
+            <div className="flex h-full gap-2">
-            <div className="flex h-[calc(100%-20px)] gap-2">
               {stampPersonName && <div className="flex items-center text-xs font-medium">{stampPersonName}</div>}
               <div className="relative flex-1">
                 {component.imageUrl ? (
@@ -700,7 +838,12 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         };
 
         // 쿼리 바인딩된 값 가져오기
-        const getCalcItemValue = (item: { label: string; value: number | string; operator: string; fieldName?: string }): number => {
+        const getCalcItemValue = (item: {
+          label: string;
+          value: number | string;
+          operator: string;
+          fieldName?: string;
+        }): number => {
           if (item.fieldName && component.queryId) {
             const queryResult = getQueryResult(component.queryId);
             if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
@@ -717,12 +860,16 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
           if (calcItems.length === 0) return 0;
           
           // 첫 번째 항목은 기준값
-          let result = getCalcItemValue(calcItems[0] as { label: string; value: number | string; operator: string; fieldName?: string });
+          let result = getCalcItemValue(
+            calcItems[0] as { label: string; value: number | string; operator: string; fieldName?: string },
+          );
           
           // 두 번째 항목부터 연산자 적용
           for (let i = 1; i < calcItems.length; i++) {
             const item = calcItems[i];
-            const val = getCalcItemValue(item as { label: string; value: number | string; operator: string; fieldName?: string });
+            const val = getCalcItemValue(
+              item as { label: string; value: number | string; operator: string; fieldName?: string },
+            );
             switch (item.operator) {
               case "+":
                 result += val;
@@ -747,7 +894,11 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
           <div className="flex h-full w-full flex-col overflow-hidden">
             {/* 항목 목록 */}
             <div className="flex-1 overflow-auto px-2 py-1">
-              {calcItems.map((item: { label: string; value: number | string; operator: string; fieldName?: string }, index: number) => {
+              {calcItems.map(
+                (
+                  item: { label: string; value: number | string; operator: string; fieldName?: string },
+                  index: number,
+                ) => {
                 const itemValue = getCalcItemValue(item);
                 return (
                   <div key={index} className="flex items-center justify-between py-1">
@@ -772,13 +923,11 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                     </span>
                   </div>
                 );
-              })}
+                },
+              )}
             </div>
             {/* 구분선 */}
-            <div
+            <div className="mx-1 flex-shrink-0 border-t" style={{ borderColor: component.borderColor || "#374151" }} />
-              className="mx-1 flex-shrink-0 border-t"
-              style={{ borderColor: component.borderColor || "#374151" }}
-            />
             {/* 결과 */}
             <div className="flex items-center justify-between px-2 py-2">
               <span
@@ -804,6 +953,204 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
           </div>
         );
 
+      case "barcode":
+        // 바코드/QR코드 컴포넌트 렌더링
+        const barcodeType = component.barcodeType || "CODE128";
+        const showBarcodeText = component.showBarcodeText !== false;
+        const barcodeColor = component.barcodeColor || "#000000";
+        const barcodeBackground = component.barcodeBackground || "transparent";
+        const barcodeMargin = component.barcodeMargin ?? 10;
+        const qrErrorLevel = component.qrErrorCorrectionLevel || "M";
+
+        // 바코드 값 결정 (쿼리 바인딩 또는 고정값)
+        const getBarcodeValue = (): string => {
+          // QR코드 다중 필드 모드
+          if (
+            barcodeType === "QR" &&
+            component.qrUseMultiField &&
+            component.qrDataFields &&
+            component.qrDataFields.length > 0 &&
+            component.queryId
+          ) {
+            const queryResult = getQueryResult(component.queryId);
+            if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
+              // 모든 행 포함 모드
+              if (component.qrIncludeAllRows) {
+                const allRowsData: Record<string, string>[] = [];
+                queryResult.rows.forEach((row) => {
+                  const rowData: Record<string, string> = {};
+                  component.qrDataFields!.forEach((field) => {
+                    if (field.fieldName && field.label) {
+                      const val = row[field.fieldName];
+                      rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
+                    }
+                  });
+                  allRowsData.push(rowData);
+                });
+                return JSON.stringify(allRowsData);
+              }
+
+              // 단일 행 (첫 번째 행만)
+              const row = queryResult.rows[0];
+              const jsonData: Record<string, string> = {};
+              component.qrDataFields.forEach((field) => {
+                if (field.fieldName && field.label) {
+                  const val = row[field.fieldName];
+                  jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
+                }
+              });
+              return JSON.stringify(jsonData);
+            }
+            // 쿼리 결과가 없으면 플레이스홀더 표시
+            const placeholderData: Record<string, string> = {};
+            component.qrDataFields.forEach((field) => {
+              if (field.label) {
+                placeholderData[field.label] = `{${field.fieldName || "field"}}`;
+              }
+            });
+            return component.qrIncludeAllRows
+              ? JSON.stringify([placeholderData, { "...": "..." }])
+              : JSON.stringify(placeholderData);
+          }
+
+          // 단일 필드 바인딩
+          if (component.barcodeFieldName && component.queryId) {
+            const queryResult = getQueryResult(component.queryId);
+            if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
+              // QR코드 + 모든 행 포함
+              if (barcodeType === "QR" && component.qrIncludeAllRows) {
+                const allValues = queryResult.rows
+                  .map((row) => {
+                    const val = row[component.barcodeFieldName!];
+                    return val !== null && val !== undefined ? String(val) : "";
+                  })
+                  .filter((v) => v !== "");
+                return JSON.stringify(allValues);
+              }
+
+              // 단일 행 (첫 번째 행만)
+              const row = queryResult.rows[0];
+              const val = row[component.barcodeFieldName];
+              if (val !== null && val !== undefined) {
+                return String(val);
+              }
+            }
+            // 플레이스홀더
+            if (barcodeType === "QR" && component.qrIncludeAllRows) {
+              return JSON.stringify([`{${component.barcodeFieldName}}`, "..."]);
+            }
+            return `{${component.barcodeFieldName}}`;
+          }
+          return component.barcodeValue || "SAMPLE123";
+        };
+
+        const barcodeValue = getBarcodeValue();
+        const isQR = barcodeType === "QR";
+
+        return (
+          <div
+            className="flex h-full w-full items-center justify-center overflow-hidden"
+            style={{ backgroundColor: barcodeBackground }}
+          >
+            {isQR ? (
+              <QRCodeRenderer
+                value={barcodeValue}
+                size={Math.min(component.width, component.height) - 10}
+                fgColor={barcodeColor}
+                bgColor={barcodeBackground}
+                level={qrErrorLevel}
+              />
+            ) : (
+              <BarcodeRenderer
+                value={barcodeValue}
+                format={barcodeType}
+                width={component.width}
+                height={component.height}
+                displayValue={showBarcodeText}
+                lineColor={barcodeColor}
+                background={barcodeBackground}
+                margin={barcodeMargin}
+              />
+            )}
+          </div>
+        );
+
+      case "checkbox":
+        // 체크박스 컴포넌트 렌더링
+        const checkboxSize = component.checkboxSize || 18;
+        const checkboxColor = component.checkboxColor || "#2563eb";
+        const checkboxBorderColor = component.checkboxBorderColor || "#6b7280";
+        const checkboxLabelPosition = component.checkboxLabelPosition || "right";
+        const checkboxLabel = component.checkboxLabel || "";
+
+        // 체크 상태 결정 (쿼리 바인딩 또는 고정값)
+        const getCheckboxValue = (): boolean => {
+          if (component.checkboxFieldName && component.queryId) {
+            const queryResult = getQueryResult(component.queryId);
+            if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
+              const row = queryResult.rows[0];
+              const val = row[component.checkboxFieldName];
+              // truthy/falsy 값 판정
+              if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
+                return true;
+              }
+              return false;
+            }
+            return false;
+          }
+          return component.checkboxChecked === true;
+        };
+
+        const isChecked = getCheckboxValue();
+
+        return (
+          <div
+            className={`flex h-full w-full items-center gap-2 ${
+              checkboxLabelPosition === "left" ? "flex-row-reverse justify-end" : ""
+            }`}
+          >
+            {/* 체크박스 */}
+            <div
+              className="flex items-center justify-center rounded-sm border-2 transition-colors"
+              style={{
+                width: `${checkboxSize}px`,
+                height: `${checkboxSize}px`,
+                borderColor: isChecked ? checkboxColor : checkboxBorderColor,
+                backgroundColor: isChecked ? checkboxColor : "transparent",
+              }}
+            >
+              {isChecked && (
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="white"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{
+                    width: `${checkboxSize * 0.7}px`,
+                    height: `${checkboxSize * 0.7}px`,
+                  }}
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              )}
+            </div>
+            {/* 레이블 */}
+            {/* 레이블 */}
+            {checkboxLabel && (
+              <span
+                style={{
+                  fontSize: `${component.fontSize || 14}px`,
+                  color: component.fontColor || "#374151",
+                }}
+              >
+                {checkboxLabel}
+              </span>
+            )}
+          </div>
+        );
+
       default:
         return <div>알 수 없는 컴포넌트</div>;
     }
@@ -812,7 +1159,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
   return (
     <div
       ref={componentRef}
-      className={`absolute p-2 shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
+      className={`absolute ${component.type === "divider" ? "p-0" : "p-2"} shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
         isSelected
           ? isLocked
             ? "ring-2 ring-red-500"
@@ -851,8 +1198,21 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
       {/* 리사이즈 핸들 (선택된 경우만, 잠금 안 된 경우만) */}
       {isSelected && !isLocked && (
         <div
-          className="resize-handle absolute right-0 bottom-0 h-3 w-3 cursor-se-resize rounded-full bg-blue-500"
+          className={`resize-handle absolute h-3 w-3 rounded-full bg-blue-500 ${
-          style={{ transform: "translate(50%, 50%)" }}
+            component.type === "divider"
+              ? component.orientation === "vertical"
+                ? "bottom-0 left-1/2 cursor-s-resize" // 세로 구분선: 하단 중앙
+                : "top-1/2 right-0 cursor-e-resize" // 가로 구분선: 우측 중앙
+              : "right-0 bottom-0 cursor-se-resize" // 일반 컴포넌트: 우하단
+          }`}
+          style={{
+            transform:
+              component.type === "divider"
+                ? component.orientation === "vertical"
+                  ? "translate(-50%, 50%)" // 세로 구분선
+                  : "translate(50%, -50%)" // 가로 구분선
+                : "translate(50%, 50%)", // 일반 컴포넌트
+          }}
           onMouseDown={handleResizeStart}
         />
       )}

frontend/components/report/designer/ComponentPalette.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useDrag } from "react-dnd";
-import { Type, Table, Image, Minus, PenLine, Stamp as StampIcon, Hash, CreditCard, Calculator } from "lucide-react";
+import { Type, Table, Image, Minus, PenLine, Stamp as StampIcon, Hash, CreditCard, Calculator, Barcode, CheckSquare } from "lucide-react";
 
 interface ComponentItem {
   type: string;
@@ -19,6 +19,8 @@ const COMPONENTS: ComponentItem[] = [
   { type: "pageNumber", label: "페이지번호", icon: <Hash className="h-4 w-4" /> },
   { type: "card", label: "정보카드", icon: <CreditCard className="h-4 w-4" /> },
   { type: "calculation", label: "계산", icon: <Calculator className="h-4 w-4" /> },
+  { type: "barcode", label: "바코드/QR", icon: <Barcode className="h-4 w-4" /> },
+  { type: "checkbox", label: "체크박스", icon: <CheckSquare className="h-4 w-4" /> },
 ];
 
 function DraggableComponentItem({ type, label, icon }: ComponentItem) {

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/ReportDesignerCanvas.tsx

@@ -3,10 +3,191 @@
 import { useRef, useEffect } from "react";
 import { useDrop } from "react-dnd";
 import { useReportDesigner } from "@/contexts/ReportDesignerContext";
-import { ComponentConfig } from "@/types/report";
+import { ComponentConfig, WatermarkConfig } from "@/types/report";
 import { CanvasComponent } from "./CanvasComponent";
 import { Ruler } from "./Ruler";
 import { v4 as uuidv4 } from "uuid";
+import { getFullImageUrl } from "@/lib/api/client";
+
+// mm를 px로 변환하는 고정 스케일 팩터 (화면 해상도와 무관하게 일정)
+// A4 기준: 210mm x 297mm → 840px x 1188px
+export const MM_TO_PX = 4;
+
+// 워터마크 레이어 컴포넌트
+interface WatermarkLayerProps {
+  watermark: WatermarkConfig;
+  canvasWidth: number;
+  canvasHeight: number;
+}
+
+function WatermarkLayer({ watermark, canvasWidth, canvasHeight }: WatermarkLayerProps) {
+  // 공통 스타일
+  const baseStyle: React.CSSProperties = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    overflow: "hidden",
+    zIndex: 1, // 컴포넌트보다 낮은 z-index
+  };
+
+  // 대각선 스타일
+  if (watermark.style === "diagonal") {
+    const rotation = watermark.rotation ?? -45;
+    return (
+      <div style={baseStyle}>
+        <div
+          className="absolute flex items-center justify-center"
+          style={{
+            top: "50%",
+            left: "50%",
+            transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+            opacity: watermark.opacity,
+            whiteSpace: "nowrap",
+          }}
+        >
+          {watermark.type === "text" ? (
+            <span
+              style={{
+                fontSize: `${watermark.fontSize || 48}px`,
+                color: watermark.fontColor || "#cccccc",
+                fontWeight: "bold",
+                userSelect: "none",
+              }}
+            >
+              {watermark.text || "WATERMARK"}
+            </span>
+          ) : (
+            watermark.imageUrl && (
+              <img
+                src={getFullImageUrl(watermark.imageUrl)}
+                alt="watermark"
+                style={{
+                  maxWidth: "50%",
+                  maxHeight: "50%",
+                  objectFit: "contain",
+                }}
+              />
+            )
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // 중앙 스타일
+  if (watermark.style === "center") {
+    return (
+      <div style={baseStyle}>
+        <div
+          className="absolute flex items-center justify-center"
+          style={{
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            opacity: watermark.opacity,
+          }}
+        >
+          {watermark.type === "text" ? (
+            <span
+              style={{
+                fontSize: `${watermark.fontSize || 48}px`,
+                color: watermark.fontColor || "#cccccc",
+                fontWeight: "bold",
+                userSelect: "none",
+              }}
+            >
+              {watermark.text || "WATERMARK"}
+            </span>
+          ) : (
+            watermark.imageUrl && (
+              <img
+                src={getFullImageUrl(watermark.imageUrl)}
+                alt="watermark"
+                style={{
+                  maxWidth: "50%",
+                  maxHeight: "50%",
+                  objectFit: "contain",
+                }}
+              />
+            )
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // 타일 스타일
+  if (watermark.style === "tile") {
+    const rotation = watermark.rotation ?? -30;
+    // 타일 간격 계산
+    const tileSize = watermark.type === "text" ? (watermark.fontSize || 48) * 4 : 150;
+    const cols = Math.ceil(canvasWidth / tileSize) + 2;
+    const rows = Math.ceil(canvasHeight / tileSize) + 2;
+
+    return (
+      <div style={baseStyle}>
+        <div
+          style={{
+            position: "absolute",
+            top: "-50%",
+            left: "-50%",
+            width: "200%",
+            height: "200%",
+            display: "flex",
+            flexWrap: "wrap",
+            alignContent: "flex-start",
+            transform: `rotate(${rotation}deg)`,
+            opacity: watermark.opacity,
+          }}
+        >
+          {Array.from({ length: rows * cols }).map((_, index) => (
+            <div
+              key={index}
+              style={{
+                width: `${tileSize}px`,
+                height: `${tileSize}px`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {watermark.type === "text" ? (
+                <span
+                  style={{
+                    fontSize: `${watermark.fontSize || 24}px`,
+                    color: watermark.fontColor || "#cccccc",
+                    fontWeight: "bold",
+                    userSelect: "none",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {watermark.text || "WATERMARK"}
+                </span>
+              ) : (
+                watermark.imageUrl && (
+                  <img
+                    src={getFullImageUrl(watermark.imageUrl)}
+                    alt="watermark"
+                    style={{
+                      width: `${tileSize * 0.6}px`,
+                      height: `${tileSize * 0.6}px`,
+                      objectFit: "contain",
+                    }}
+                  />
+                )
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
 
 export function ReportDesignerCanvas() {
   const canvasRef = useRef<HTMLDivElement>(null);
@@ -32,6 +213,7 @@ export function ReportDesignerCanvas() {
     undo,
     redo,
     showRuler,
+    layoutConfig,
   } = useReportDesigner();
 
   const [{ isOver }, drop] = useDrop(() => ({
@@ -58,7 +240,7 @@ export function ReportDesignerCanvas() {
         height = 150;
       } else if (item.componentType === "divider") {
         width = 300;
-        height = 2;
+        height = 10; // 선 두께 + 여백 (선택/드래그를 위한 최소 높이)
       } else if (item.componentType === "signature") {
         width = 120;
         height = 70;
@@ -68,17 +250,23 @@ export function ReportDesignerCanvas() {
       } else if (item.componentType === "pageNumber") {
         width = 100;
         height = 30;
+      } else if (item.componentType === "barcode") {
+        width = 200;
+        height = 80;
+      } else if (item.componentType === "checkbox") {
+        width = 150;
+        height = 30;
       }
 
-      // 여백을 px로 변환 (1mm ≈ 3.7795px)
+      // 여백을 px로 변환
-      const marginTopPx = margins.top * 3.7795;
+      const marginTopPx = margins.top * MM_TO_PX;
-      const marginLeftPx = margins.left * 3.7795;
+      const marginLeftPx = margins.left * MM_TO_PX;
-      const marginRightPx = margins.right * 3.7795;
+      const marginRightPx = margins.right * MM_TO_PX;
-      const marginBottomPx = margins.bottom * 3.7795;
+      const marginBottomPx = margins.bottom * MM_TO_PX;
 
       // 캔버스 경계 (px)
-      const canvasWidthPx = canvasWidth * 3.7795;
+      const canvasWidthPx = canvasWidth * MM_TO_PX;
-      const canvasHeightPx = canvasHeight * 3.7795;
+      const canvasHeightPx = canvasHeight * MM_TO_PX;
 
       // 드롭 위치 계산 (여백 내부로 제한)
       const rawX = x - 100;
@@ -131,7 +319,6 @@ export function ReportDesignerCanvas() {
           showLabel: true,
           labelText: "서명:",
           labelPosition: "left" as const,
-          showUnderline: true,
           borderWidth: 0,
           borderColor: "#cccccc",
         }),
@@ -204,6 +391,26 @@ export function ReportDesignerCanvas() {
           showBorder: true,
           rowHeight: 32,
         }),
+        // 바코드 컴포넌트 전용
+        ...(item.componentType === "barcode" && {
+          barcodeType: "CODE128" as const,
+          barcodeValue: "SAMPLE123",
+          barcodeFieldName: "",
+          showBarcodeText: true,
+          barcodeColor: "#000000",
+          barcodeBackground: "transparent",
+          barcodeMargin: 10,
+          qrErrorCorrectionLevel: "M" as const,
+        }),
+        // 체크박스 컴포넌트 전용
+        ...(item.componentType === "checkbox" && {
+          checkboxChecked: false,
+          checkboxLabel: "항목",
+          checkboxSize: 18,
+          checkboxColor: "#2563eb",
+          checkboxBorderColor: "#6b7280",
+          checkboxLabelPosition: "right" as const,
+        }),
       };
 
       addComponent(newComponent);
@@ -376,8 +583,8 @@ export function ReportDesignerCanvas() {
               }}
               className={`relative bg-white shadow-lg ${isOver ? "ring-2 ring-blue-500" : ""}`}
               style={{
-                width: `${canvasWidth}mm`,
+                width: `${canvasWidth * MM_TO_PX}px`,
-                minHeight: `${canvasHeight}mm`,
+                minHeight: `${canvasHeight * MM_TO_PX}px`,
                 backgroundImage: showGrid
                   ? `
                     linear-gradient(to right, #e5e7eb 1px, transparent 1px),
@@ -393,14 +600,23 @@ export function ReportDesignerCanvas() {
                 <div
                   className="pointer-events-none absolute border-2 border-dashed border-blue-300/50"
                   style={{
-                    top: `${currentPage.margins.top}mm`,
+                    top: `${currentPage.margins.top * MM_TO_PX}px`,
-                    left: `${currentPage.margins.left}mm`,
+                    left: `${currentPage.margins.left * MM_TO_PX}px`,
-                    right: `${currentPage.margins.right}mm`,
+                    right: `${currentPage.margins.right * MM_TO_PX}px`,
-                    bottom: `${currentPage.margins.bottom}mm`,
+                    bottom: `${currentPage.margins.bottom * MM_TO_PX}px`,
                   }}
                 />
               )}
 
+              {/* 워터마크 렌더링 (전체 페이지 공유) */}
+              {layoutConfig.watermark?.enabled && (
+                <WatermarkLayer
+                  watermark={layoutConfig.watermark}
+                  canvasWidth={canvasWidth * MM_TO_PX}
+                  canvasHeight={canvasHeight * MM_TO_PX}
+                />
+              )}
+
               {/* 정렬 가이드라인 렌더링 */}
               {alignmentGuides.vertical.map((x, index) => (
                 <div

frontend/components/report/designer/ReportDesignerToolbar.tsx

@@ -42,8 +42,19 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} 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";
@@ -52,7 +63,7 @@ export function ReportDesignerToolbar() {
   const router = useRouter();
   const {
     reportDetail,
-    saveLayout,
+    saveLayoutWithMenus,
     isSaving,
     loadLayout,
     components,
@@ -90,9 +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();
 
   // 버튼 활성화 조건
@@ -111,25 +127,31 @@ 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);
+    setShowMenuSelect(true);
+  };
+
+  const handleMenuSelectConfirm = async (selectedMenuObjids: number[]) => {
+    await saveLayoutWithMenus(selectedMenuObjids);
+    if (pendingSaveAndClose) {
       router.push("/admin/report");
+    }
   };
 
-  const handleReset = async () => {
+  const handleResetConfirm = async () => {
-    if (confirm("현재 변경사항을 모두 취소하고 마지막 저장 상태로 되돌리시겠습니까?")) {
+    setShowResetConfirm(false);
     await loadLayout();
-    }
   };
 
-  const handleBack = () => {
+  const handleBackConfirm = () => {
-    if (confirm("저장하지 않은 변경사항이 있을 수 있습니다. 목록으로 돌아가시겠습니까?")) {
+    setShowBackConfirm(false);
     router.push("/admin/report");
-    }
   };
 
   const handleSaveAsTemplate = async (data: {
@@ -193,7 +215,7 @@ export function ReportDesignerToolbar() {
     <>
       <div className="flex items-center justify-between border-b bg-white px-4 py-3 shadow-sm">
         <div className="flex items-center gap-4">
-          <Button variant="ghost" size="sm" onClick={handleBack} className="gap-2">
+          <Button variant="ghost" size="sm" onClick={() => setShowBackConfirm(true)} className="gap-2">
             <ArrowLeft className="h-4 w-4" />
             목록으로
           </Button>
@@ -437,7 +459,7 @@ export function ReportDesignerToolbar() {
             </DropdownMenuContent>
           </DropdownMenu>
 
-          <Button variant="outline" size="sm" onClick={handleReset} className="gap-2">
+          <Button variant="outline" size="sm" onClick={() => setShowResetConfirm(true)} className="gap-2">
             <RotateCcw className="h-4 w-4" />
             초기화
           </Button>
@@ -491,6 +513,46 @@ export function ReportDesignerToolbar() {
         onClose={() => setShowSaveAsTemplate(false)}
         onSave={handleSaveAsTemplate}
       />
+      <MenuSelectModal
+        isOpen={showMenuSelect}
+        onClose={() => setShowMenuSelect(false)}
+        onConfirm={handleMenuSelectConfirm}
+        selectedMenuObjids={menuObjids}
+      />
+
+      {/* 목록으로 돌아가기 확인 모달 */}
+      <AlertDialog open={showBackConfirm} onOpenChange={setShowBackConfirm}>
+        <AlertDialogContent className="max-w-[400px]">
+          <AlertDialogHeader>
+            <AlertDialogTitle>목록으로 돌아가기</AlertDialogTitle>
+            <AlertDialogDescription>
+              저장하지 않은 변경사항이 있을 수 있습니다.
+              <br />
+              목록으로 돌아가시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleBackConfirm}>확인</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* 초기화 확인 모달 */}
+      <AlertDialog open={showResetConfirm} onOpenChange={setShowResetConfirm}>
+        <AlertDialogContent className="max-w-[400px]">
+          <AlertDialogHeader>
+            <AlertDialogTitle>초기화</AlertDialogTitle>
+            <AlertDialogDescription>
+              현재 변경사항을 모두 취소하고 마지막 저장 상태로 되돌리시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleResetConfirm}>확인</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   );
 }

frontend/components/report/designer/ReportPreviewModal.tsx

@@ -11,15 +11,361 @@ import {
 import { Button } from "@/components/ui/button";
 import { Printer, FileDown, FileText } from "lucide-react";
 import { useReportDesigner } from "@/contexts/ReportDesignerContext";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { getFullImageUrl } from "@/lib/api/client";
+import JsBarcode from "jsbarcode";
+import QRCode from "qrcode";
+
+// mm -> px 변환 상수
+const MM_TO_PX = 4;
 
 interface ReportPreviewModalProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
+// 미리보기용 워터마크 레이어 컴포넌트
+interface PreviewWatermarkLayerProps {
+  watermark: {
+    enabled: boolean;
+    type: "text" | "image";
+    text?: string;
+    fontSize?: number;
+    fontColor?: string;
+    imageUrl?: string;
+    opacity: number;
+    style: "diagonal" | "center" | "tile";
+    rotation?: number;
+  };
+  pageWidth: number;
+  pageHeight: number;
+}
+
+function PreviewWatermarkLayer({ watermark, pageWidth, pageHeight }: PreviewWatermarkLayerProps) {
+  const baseStyle: React.CSSProperties = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    overflow: "hidden",
+    zIndex: 0,
+  };
+
+  const rotation = watermark.rotation ?? -45;
+
+  // 대각선 스타일
+  if (watermark.style === "diagonal") {
+    return (
+      <div style={baseStyle}>
+        <div
+          className="absolute flex items-center justify-center"
+          style={{
+            top: "50%",
+            left: "50%",
+            transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+            opacity: watermark.opacity,
+            whiteSpace: "nowrap",
+          }}
+        >
+          {watermark.type === "text" ? (
+            <span
+              style={{
+                fontSize: `${watermark.fontSize || 48}px`,
+                color: watermark.fontColor || "#cccccc",
+                fontWeight: "bold",
+                userSelect: "none",
+              }}
+            >
+              {watermark.text || "WATERMARK"}
+            </span>
+          ) : (
+            watermark.imageUrl && (
+              <img
+                src={
+                  watermark.imageUrl.startsWith("data:")
+                    ? watermark.imageUrl
+                    : getFullImageUrl(watermark.imageUrl)
+                }
+                alt="watermark"
+                style={{
+                  maxWidth: "50%",
+                  maxHeight: "50%",
+                  objectFit: "contain",
+                }}
+              />
+            )
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // 중앙 스타일
+  if (watermark.style === "center") {
+    return (
+      <div style={baseStyle}>
+        <div
+          className="absolute flex items-center justify-center"
+          style={{
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            opacity: watermark.opacity,
+          }}
+        >
+          {watermark.type === "text" ? (
+            <span
+              style={{
+                fontSize: `${watermark.fontSize || 48}px`,
+                color: watermark.fontColor || "#cccccc",
+                fontWeight: "bold",
+                userSelect: "none",
+              }}
+            >
+              {watermark.text || "WATERMARK"}
+            </span>
+          ) : (
+            watermark.imageUrl && (
+              <img
+                src={
+                  watermark.imageUrl.startsWith("data:")
+                    ? watermark.imageUrl
+                    : getFullImageUrl(watermark.imageUrl)
+                }
+                alt="watermark"
+                style={{
+                  maxWidth: "50%",
+                  maxHeight: "50%",
+                  objectFit: "contain",
+                }}
+              />
+            )
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // 타일 스타일
+  if (watermark.style === "tile") {
+    const tileSize = watermark.type === "text" ? (watermark.fontSize || 48) * 4 : 150;
+    const cols = Math.ceil((pageWidth * MM_TO_PX) / tileSize) + 2;
+    const rows = Math.ceil((pageHeight * MM_TO_PX) / tileSize) + 2;
+
+    return (
+      <div style={baseStyle}>
+        <div
+          style={{
+            position: "absolute",
+            top: "-50%",
+            left: "-50%",
+            width: "200%",
+            height: "200%",
+            display: "flex",
+            flexWrap: "wrap",
+            alignContent: "flex-start",
+            transform: `rotate(${rotation}deg)`,
+            opacity: watermark.opacity,
+          }}
+        >
+          {Array.from({ length: rows * cols }).map((_, index) => (
+            <div
+              key={index}
+              style={{
+                width: `${tileSize}px`,
+                height: `${tileSize}px`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {watermark.type === "text" ? (
+                <span
+                  style={{
+                    fontSize: `${watermark.fontSize || 24}px`,
+                    color: watermark.fontColor || "#cccccc",
+                    fontWeight: "bold",
+                    userSelect: "none",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {watermark.text || "WATERMARK"}
+                </span>
+              ) : (
+                watermark.imageUrl && (
+                  <img
+                    src={
+                      watermark.imageUrl.startsWith("data:")
+                        ? watermark.imageUrl
+                        : getFullImageUrl(watermark.imageUrl)
+                    }
+                    alt="watermark"
+                    style={{
+                      width: `${tileSize * 0.6}px`,
+                      height: `${tileSize * 0.6}px`,
+                      objectFit: "contain",
+                    }}
+                  />
+                )
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+// 바코드/QR코드 미리보기 컴포넌트
+function BarcodePreview({
+  component,
+  getQueryResult,
+}: {
+  component: any;
+  getQueryResult: (queryId: string) => { fields: string[]; rows: Record<string, unknown>[] } | null;
+}) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const barcodeType = component.barcodeType || "CODE128";
+  const isQR = barcodeType === "QR";
+
+  // 바코드 값 결정
+  const getBarcodeValue = (): string => {
+    // QR코드 다중 필드 모드
+    if (
+      isQR &&
+      component.qrUseMultiField &&
+      component.qrDataFields &&
+      component.qrDataFields.length > 0 &&
+      component.queryId
+    ) {
+      const queryResult = getQueryResult(component.queryId);
+      if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
+        if (component.qrIncludeAllRows) {
+          const allRowsData: Record<string, string>[] = [];
+          queryResult.rows.forEach((row) => {
+            const rowData: Record<string, string> = {};
+            component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
+              if (field.fieldName && field.label) {
+                const val = row[field.fieldName];
+                rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
+              }
+            });
+            allRowsData.push(rowData);
+          });
+          return JSON.stringify(allRowsData);
+        }
+        const row = queryResult.rows[0];
+        const jsonData: Record<string, string> = {};
+        component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
+          if (field.fieldName && field.label) {
+            const val = row[field.fieldName];
+            jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
+          }
+        });
+        return JSON.stringify(jsonData);
+      }
+    }
+
+    // 단일 필드 바인딩
+    if (component.barcodeFieldName && component.queryId) {
+      const queryResult = getQueryResult(component.queryId);
+      if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
+        if (isQR && component.qrIncludeAllRows) {
+          const allValues = queryResult.rows
+            .map((row) => {
+              const val = row[component.barcodeFieldName];
+              return val !== null && val !== undefined ? String(val) : "";
+            })
+            .filter((v) => v !== "");
+          return JSON.stringify(allValues);
+        }
+        const row = queryResult.rows[0];
+        const val = row[component.barcodeFieldName];
+        if (val !== null && val !== undefined) {
+          return String(val);
+        }
+      }
+      return `{${component.barcodeFieldName}}`;
+    }
+    return component.barcodeValue || "SAMPLE123";
+  };
+
+  const barcodeValue = getBarcodeValue();
+
+  useEffect(() => {
+    setError(null);
+
+    if (isQR) {
+      // QR코드 렌더링
+      if (canvasRef.current && barcodeValue) {
+        const bgColor = component.barcodeBackground === "transparent" ? "#ffffff" : (component.barcodeBackground || "#ffffff");
+        QRCode.toCanvas(
+          canvasRef.current,
+          barcodeValue,
+          {
+            width: Math.min(component.width, component.height) - 20,
+            margin: 2,
+            color: {
+              dark: component.barcodeColor || "#000000",
+              light: bgColor,
+            },
+            errorCorrectionLevel: component.qrErrorCorrectionLevel || "M",
+          },
+          (err) => {
+            if (err) setError(err.message || "QR코드 생성 실패");
+          }
+        );
+      }
+    } else {
+      // 1D 바코드 렌더링
+      if (svgRef.current && barcodeValue) {
+        try {
+          const bgColor = component.barcodeBackground === "transparent" ? "" : (component.barcodeBackground || "#ffffff");
+          JsBarcode(svgRef.current, barcodeValue.trim(), {
+            format: barcodeType.toLowerCase(),
+            width: 2,
+            height: Math.max(30, component.height - 40),
+            displayValue: component.showBarcodeText !== false,
+            lineColor: component.barcodeColor || "#000000",
+            background: bgColor,
+            margin: component.barcodeMargin ?? 10,
+            fontSize: 12,
+            textMargin: 2,
+          });
+        } catch (err: any) {
+          setError(err?.message || "바코드 생성 실패");
+        }
+      }
+    }
+  }, [barcodeValue, barcodeType, isQR, component]);
+
+  if (error) {
+    return (
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "#ef4444", fontSize: "12px" }}>
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", backgroundColor: component.barcodeBackground || "transparent" }}>
+      {isQR ? (
+        <canvas ref={canvasRef} style={{ maxWidth: "100%", maxHeight: "100%" }} />
+      ) : (
+        <svg ref={svgRef} style={{ maxWidth: "100%", maxHeight: "100%" }} />
+      )}
+    </div>
+  );
+}
+
 export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps) {
   const { layoutConfig, getQueryResult, reportDetail } = useReportDesigner();
   const [isExporting, setIsExporting] = useState(false);
@@ -40,16 +386,192 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
     return component.defaultValue || "텍스트";
   };
 
-  const handlePrint = () => {
+  // 바코드/QR코드를 base64 이미지로 변환
+  const generateBarcodeImage = async (component: any): Promise<string | null> => {
+    const barcodeType = component.barcodeType || "CODE128";
+    const isQR = barcodeType === "QR";
+
+    // 바코드 값 결정
+    const getBarcodeValue = (): string => {
+      if (
+        isQR &&
+        component.qrUseMultiField &&
+        component.qrDataFields &&
+        component.qrDataFields.length > 0 &&
+        component.queryId
+      ) {
+        const queryResult = getQueryResult(component.queryId);
+        if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
+          if (component.qrIncludeAllRows) {
+            const allRowsData: Record<string, string>[] = [];
+            queryResult.rows.forEach((row) => {
+              const rowData: Record<string, string> = {};
+              component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
+                if (field.fieldName && field.label) {
+                  const val = row[field.fieldName];
+                  rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
+                }
+              });
+              allRowsData.push(rowData);
+            });
+            return JSON.stringify(allRowsData);
+          }
+          const row = queryResult.rows[0];
+          const jsonData: Record<string, string> = {};
+          component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
+            if (field.fieldName && field.label) {
+              const val = row[field.fieldName];
+              jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
+            }
+          });
+          return JSON.stringify(jsonData);
+        }
+      }
+
+      if (component.barcodeFieldName && component.queryId) {
+        const queryResult = getQueryResult(component.queryId);
+        if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
+          if (isQR && component.qrIncludeAllRows) {
+            const allValues = queryResult.rows
+              .map((row) => {
+                const val = row[component.barcodeFieldName];
+                return val !== null && val !== undefined ? String(val) : "";
+              })
+              .filter((v) => v !== "");
+            return JSON.stringify(allValues);
+          }
+          const row = queryResult.rows[0];
+          const val = row[component.barcodeFieldName];
+          if (val !== null && val !== undefined) {
+            return String(val);
+          }
+        }
+      }
+      return component.barcodeValue || "SAMPLE123";
+    };
+
+    const barcodeValue = getBarcodeValue();
+
+    try {
+      if (isQR) {
+        // QR코드를 canvas에 렌더링 후 base64로 변환
+        const canvas = document.createElement("canvas");
+        const bgColor = component.barcodeBackground === "transparent" ? "#ffffff" : (component.barcodeBackground || "#ffffff");
+        await QRCode.toCanvas(canvas, barcodeValue, {
+          width: Math.min(component.width, component.height) - 10,
+          margin: 2,
+          color: {
+            dark: component.barcodeColor || "#000000",
+            light: bgColor,
+          },
+          errorCorrectionLevel: component.qrErrorCorrectionLevel || "M",
+        });
+        return canvas.toDataURL("image/png");
+      } else {
+        // 1D 바코드를 SVG로 렌더링 후 base64로 변환
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        const bgColor = component.barcodeBackground === "transparent" ? "" : (component.barcodeBackground || "#ffffff");
+        JsBarcode(svg, barcodeValue.trim(), {
+          format: barcodeType.toLowerCase(),
+          width: 2,
+          height: Math.max(30, component.height - 40),
+          displayValue: component.showBarcodeText !== false,
+          lineColor: component.barcodeColor || "#000000",
+          background: bgColor,
+          margin: component.barcodeMargin ?? 10,
+          fontSize: 12,
+          textMargin: 2,
+        });
+        const svgData = new XMLSerializer().serializeToString(svg);
+        const svgBase64 = btoa(unescape(encodeURIComponent(svgData)));
+        return `data:image/svg+xml;base64,${svgBase64}`;
+      }
+    } catch (error) {
+      console.error("바코드 생성 오류:", error);
+      return null;
+    }
+  };
+
+  const handlePrint = async () => {
+    // 바코드 이미지 미리 생성
+    const pagesWithBarcodes = await Promise.all(
+      layoutConfig.pages.map(async (page) => {
+        const componentsWithBarcodes = await Promise.all(
+          (Array.isArray(page.components) ? page.components : []).map(async (component) => {
+            if (component.type === "barcode") {
+              const barcodeImage = await generateBarcodeImage(component);
+              return { ...component, barcodeImageBase64: barcodeImage };
+            }
+            return component;
+          })
+        );
+        return { ...page, components: componentsWithBarcodes };
+      })
+    );
+
     // HTML 생성하여 인쇄
-    const printHtml = generatePrintHTML();
+    const printHtml = generatePrintHTML(pagesWithBarcodes);
 
     const printWindow = window.open("", "_blank");
     if (!printWindow) return;
 
     printWindow.document.write(printHtml);
     printWindow.document.close();
-    printWindow.print();
+    // print()는 HTML 내 스크립트에서 이미지 로드 완료 후 자동 호출됨
+  };
+
+  // 워터마크 HTML 생성 헬퍼 함수
+  const generateWatermarkHTML = (watermark: any, pageWidth: number, pageHeight: number): string => {
+    if (!watermark?.enabled) return "";
+
+    const opacity = watermark.opacity ?? 0.3;
+    const rotation = watermark.rotation ?? -45;
+
+    // 공통 래퍼 스타일
+    const wrapperStyle = `position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;`;
+
+    // 텍스트 컨텐츠 생성
+    const textContent = watermark.type === "text"
+      ? `<span style="font-size: ${watermark.fontSize || 48}px; color: ${watermark.fontColor || "#cccccc"}; font-weight: bold; white-space: nowrap;">${watermark.text || "WATERMARK"}</span>`
+      : watermark.imageUrl
+        ? `<img src="${watermark.imageUrl.startsWith("data:") ? watermark.imageUrl : getFullImageUrl(watermark.imageUrl)}" style="max-width: 50%; max-height: 50%; object-fit: contain;" />`
+        : "";
+
+    if (watermark.style === "diagonal") {
+      return `
+        <div style="${wrapperStyle}">
+          <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(${rotation}deg); opacity: ${opacity};">
+            ${textContent}
+          </div>
+        </div>`;
+    }
+
+    if (watermark.style === "center") {
+      return `
+        <div style="${wrapperStyle}">
+          <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: ${opacity};">
+            ${textContent}
+          </div>
+        </div>`;
+    }
+
+    if (watermark.style === "tile") {
+      const tileSize = watermark.type === "text" ? (watermark.fontSize || 48) * 4 : 150;
+      const cols = Math.ceil((pageWidth * MM_TO_PX) / tileSize) + 2;
+      const rows = Math.ceil((pageHeight * MM_TO_PX) / tileSize) + 2;
+      const tileItems = Array.from({ length: rows * cols })
+        .map(() => `<div style="width: ${tileSize}px; height: ${tileSize}px; display: flex; align-items: center; justify-content: center;">${textContent}</div>`)
+        .join("");
+
+      return `
+        <div style="${wrapperStyle}">
+          <div style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; display: flex; flex-wrap: wrap; align-content: flex-start; transform: rotate(${rotation}deg); opacity: ${opacity};">
+            ${tileItems}
+          </div>
+        </div>`;
+    }
+
+    return "";
   };
 
   // 페이지별 컴포넌트 HTML 생성
@@ -60,6 +582,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
     backgroundColor: string,
     pageIndex: number = 0,
     totalPages: number = 1,
+    watermark?: any,
   ): string => {
     const componentsHTML = pageComponents
       .map((component) => {
@@ -104,7 +627,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                 ${showLabel ? `<div style="font-size: 12px; white-space: nowrap;">${labelText}</div>` : ""}
                 <div style="flex: 1; position: relative;">
                   ${imageUrl ? `<img src="${imageUrl}" style="width: 100%; height: 100%; object-fit: ${component.objectFit || "contain"};" />` : ""}
-                  ${component.showUnderline ? '<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #000000;"></div>' : ""}
                 </div>
               </div>`;
           } else {
@@ -113,7 +635,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                 ${showLabel && labelPosition === "top" ? `<div style="font-size: 12px;">${labelText}</div>` : ""}
                 <div style="flex: 1; width: 100%; position: relative;">
                   ${imageUrl ? `<img src="${imageUrl}" style="width: 100%; height: 100%; object-fit: ${component.objectFit || "contain"};" />` : ""}
-                  ${component.showUnderline ? '<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #000000;"></div>' : ""}
                 </div>
                 ${showLabel && labelPosition === "bottom" ? `<div style="font-size: 12px;">${labelText}</div>` : ""}
               </div>`;
@@ -132,9 +653,9 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
             : "";
 
           content = `
-            <div style="display: flex; align-items: center; gap: 8px; height: 100%;">
+            <div style="display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;">
-              ${personName ? `<div style="font-size: 12px;">${personName}</div>` : ""}
+              ${personName ? `<div style="font-size: 12px; white-space: nowrap;">${personName}</div>` : ""}
-              <div style="position: relative; width: ${component.width}px; height: ${component.height}px;">
+              <div style="position: relative; flex: 1; height: 100%;">
                 ${imageUrl ? `<img src="${imageUrl}" style="width: 100%; height: 100%; object-fit: ${component.objectFit || "contain"}; border-radius: 50%;" />` : ""}
                 ${showLabel ? `<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; color: #dc2626;">${labelText}</div>` : ""}
               </div>
@@ -298,6 +819,46 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
             </div>`;
         }
 
+        // 바코드/QR코드 컴포넌트 (인쇄용 - base64 이미지 사용)
+        else if (component.type === "barcode") {
+          // 바코드 이미지는 미리 생성된 base64 사용 (handlePrint에서 생성)
+          const barcodeImage = (component as any).barcodeImageBase64;
+          if (barcodeImage) {
+            content = `<img src="${barcodeImage}" style="max-width: 100%; max-height: 100%; object-fit: contain;" />`;
+          } else {
+            content = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666; font-size: 12px;">바코드</div>`;
+          }
+        }
+
+        // 체크박스 컴포넌트 (인쇄용)
+        else if (component.type === "checkbox") {
+          const checkboxSize = component.checkboxSize || 18;
+          const checkboxColor = component.checkboxColor || "#2563eb";
+          const checkboxBorderColor = component.checkboxBorderColor || "#6b7280";
+          const checkboxLabel = component.checkboxLabel || "";
+          const checkboxLabelPosition = component.checkboxLabelPosition || "right";
+
+          // 체크 상태 결정
+          let isChecked = component.checkboxChecked === true;
+          if (component.checkboxFieldName && queryResult && queryResult.rows && queryResult.rows.length > 0) {
+            const val = queryResult.rows[0][component.checkboxFieldName];
+            isChecked = val === true || val === "Y" || val === "1" || val === 1 || val === "true";
+          }
+
+          const checkboxHTML = `
+            <div style="width: ${checkboxSize}px; height: ${checkboxSize}px; border: 2px solid ${isChecked ? checkboxColor : checkboxBorderColor}; border-radius: 2px; background-color: ${isChecked ? checkboxColor : "transparent"}; display: flex; align-items: center; justify-content: center;">
+              ${isChecked ? `<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="width: ${checkboxSize * 0.7}px; height: ${checkboxSize * 0.7}px;"><polyline points="20 6 9 17 4 12" /></svg>` : ""}
+            </div>
+          `;
+
+          content = `
+            <div style="display: flex; align-items: center; gap: 8px; height: 100%; flex-direction: ${checkboxLabelPosition === "left" ? "row-reverse" : "row"}; ${checkboxLabelPosition === "left" ? "justify-content: flex-end;" : ""}">
+              ${checkboxHTML}
+              ${checkboxLabel ? `<span style="font-size: 12px;">${checkboxLabel}</span>` : ""}
+            </div>
+          `;
+        }
+
         // Table 컴포넌트
         else if (component.type === "table" && queryResult && queryResult.rows.length > 0) {
           const columns =
@@ -333,22 +894,33 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
             </table>`;
         }
 
+        // 컴포넌트 값은 px로 저장됨 (캔버스는 pageWidth * MM_TO_PX px)
+        // 인쇄용 mm 단위로 변환: px / MM_TO_PX = mm
+        const xMm = component.x / MM_TO_PX;
+        const yMm = component.y / MM_TO_PX;
+        const widthMm = component.width / MM_TO_PX;
+        const heightMm = component.height / MM_TO_PX;
+        
         return `
-          <div style="position: absolute; left: ${component.x}px; top: ${component.y}px; width: ${component.width}px; height: ${component.height}px; background-color: ${component.backgroundColor || "transparent"}; border: ${component.borderWidth ? `${component.borderWidth}px solid ${component.borderColor}` : "none"}; padding: 8px; box-sizing: border-box;">
+          <div style="position: absolute; left: ${xMm}mm; top: ${yMm}mm; width: ${widthMm}mm; height: ${heightMm}mm; background-color: ${component.backgroundColor || "transparent"}; border: ${component.borderWidth ? `${component.borderWidth}px solid ${component.borderColor}` : "none"}; box-sizing: border-box; overflow: hidden;">
             ${content}
           </div>`;
       })
       .join("");
 
+    const watermarkHTML = generateWatermarkHTML(watermark, pageWidth, pageHeight);
+
     return `
-      <div style="position: relative; width: ${pageWidth}mm; min-height: ${pageHeight}mm; background-color: ${backgroundColor}; margin: 0 auto;">
+      <div class="print-page" style="position: relative; width: ${pageWidth}mm; min-height: ${pageHeight}mm; background-color: ${backgroundColor};">
+        ${watermarkHTML}
         ${componentsHTML}
       </div>`;
   };
 
   // 모든 페이지 HTML 생성 (인쇄/PDF용)
-  const generatePrintHTML = (): string => {
+  const generatePrintHTML = (pagesWithBarcodes?: any[]): string => {
-    const sortedPages = layoutConfig.pages.sort((a, b) => a.page_order - b.page_order);
+    const pages = pagesWithBarcodes || layoutConfig.pages;
+    const sortedPages = pages.sort((a, b) => a.page_order - b.page_order);
     const totalPages = sortedPages.length;
 
     const pagesHTML = sortedPages
@@ -360,6 +932,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
           page.background_color,
           pageIndex,
           totalPages,
+          layoutConfig.watermark, // 전체 페이지 공유 워터마크
         ),
       )
       .join('<div style="page-break-after: always;"></div>');
@@ -370,20 +943,18 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
           <meta charset="UTF-8">
           <title>리포트 인쇄</title>
           <style>
-            * { box-sizing: border-box; }
+            * { box-sizing: border-box; margin: 0; padding: 0; }
             @page {
               size: A4;
-              margin: 10mm;
+              margin: 0;
             }
             @media print {
-              body { margin: 0; padding: 0; }
+              html, body { width: 210mm; height: 297mm; }
               .print-page { page-break-after: always; page-break-inside: avoid; }
               .print-page:last-child { page-break-after: auto; }
             }
             body {
               font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
-              margin: 0;
-              padding: 20px;
               -webkit-print-color-adjust: exact;
               print-color-adjust: exact;
             }
@@ -422,8 +993,24 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
   };
 
   // PDF 다운로드 (브라우저 인쇄 기능 이용)
-  const handleDownloadPDF = () => {
+  const handleDownloadPDF = async () => {
-    const printHtml = generatePrintHTML();
+    // 바코드 이미지 미리 생성
+    const pagesWithBarcodes = await Promise.all(
+      layoutConfig.pages.map(async (page) => {
+        const componentsWithBarcodes = await Promise.all(
+          (Array.isArray(page.components) ? page.components : []).map(async (component) => {
+            if (component.type === "barcode") {
+              const barcodeImage = await generateBarcodeImage(component);
+              return { ...component, barcodeImageBase64: barcodeImage };
+            }
+            return component;
+          })
+        );
+        return { ...page, components: componentsWithBarcodes };
+      })
+    );
+
+    const printHtml = generatePrintHTML(pagesWithBarcodes);
 
     const printWindow = window.open("", "_blank");
     if (!printWindow) return;
@@ -471,7 +1058,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
         description: "WORD 파일을 생성하고 있습니다...",
       });
 
-      // 이미지를 Base64로 변환하여 컴포넌트 데이터에 포함
+      // 이미지 및 바코드를 Base64로 변환하여 컴포넌트 데이터에 포함
       const pagesWithBase64 = await Promise.all(
         layoutConfig.pages.map(async (page) => {
           const componentsWithBase64 = await Promise.all(
@@ -485,11 +1072,20 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                   return component;
                 }
               }
+              // 바코드/QR코드 컴포넌트는 이미지로 변환
+              if (component.type === "barcode") {
+                try {
+                  const barcodeImage = await generateBarcodeImage(component);
+                  return { ...component, barcodeImageBase64: barcodeImage };
+                } catch {
               return component;
-                  }),
+                }
+              }
+              return component;
+            })
                 );
           return { ...page, components: componentsWithBase64 };
-                  }),
+        })
                 );
 
       // 쿼리 결과 수집
@@ -568,13 +1164,21 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                 <div key={page.page_id} className="relative">
                   {/* 페이지 컨텐츠 */}
                   <div
-                    className="relative mx-auto shadow-lg"
+                    className="relative mx-auto overflow-hidden shadow-lg"
                     style={{
-                      width: `${page.width}mm`,
+                      width: `${page.width * 4}px`,
-                      minHeight: `${page.height}mm`,
+                      minHeight: `${page.height * 4}px`,
                       backgroundColor: page.background_color,
                     }}
                   >
+                    {/* 워터마크 렌더링 (전체 페이지 공유) */}
+                    {layoutConfig.watermark?.enabled && (
+                      <PreviewWatermarkLayer
+                        watermark={layoutConfig.watermark}
+                        pageWidth={page.width}
+                        pageHeight={page.height}
+                      />
+                    )}
                     {(Array.isArray(page.components) ? page.components : []).map((component) => {
                       const displayValue = getComponentValue(component);
                       const queryResult = component.queryId ? getQueryResult(component.queryId) : null;
@@ -788,17 +1392,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                                     }}
                                   />
                                 )}
-                                {component.showUnderline !== false && (
-                                  <div
-                                    style={{
-                                      position: "absolute",
-                                      bottom: "0",
-                                      left: "0",
-                                      right: "0",
-                                      borderBottom: "2px solid #000000",
-                                    }}
-                                  />
-                                )}
                               </div>
                             </div>
                           )}
@@ -1113,6 +1706,76 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                               </div>
                             );
                           })()}
+
+                          {/* 바코드/QR코드 컴포넌트 */}
+                          {component.type === "barcode" && (
+                            <BarcodePreview component={component} getQueryResult={getQueryResult} />
+                          )}
+
+                          {/* 체크박스 컴포넌트 */}
+                          {component.type === "checkbox" && (() => {
+                            const checkboxSize = component.checkboxSize || 18;
+                            const checkboxColor = component.checkboxColor || "#2563eb";
+                            const checkboxBorderColor = component.checkboxBorderColor || "#6b7280";
+                            const checkboxLabel = component.checkboxLabel || "";
+                            const checkboxLabelPosition = component.checkboxLabelPosition || "right";
+
+                            // 체크 상태 결정
+                            let isChecked = component.checkboxChecked === true;
+                            if (component.checkboxFieldName && component.queryId) {
+                              const qResult = getQueryResult(component.queryId);
+                              if (qResult && qResult.rows && qResult.rows.length > 0) {
+                                const val = qResult.rows[0][component.checkboxFieldName];
+                                isChecked = val === true || val === "Y" || val === "1" || val === 1 || val === "true";
+                              }
+                            }
+
+                            return (
+                              <div
+                                style={{
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "8px",
+                                  height: "100%",
+                                  flexDirection: checkboxLabelPosition === "left" ? "row-reverse" : "row",
+                                  justifyContent: checkboxLabelPosition === "left" ? "flex-end" : "flex-start",
+                                }}
+                              >
+                                <div
+                                  style={{
+                                    width: `${checkboxSize}px`,
+                                    height: `${checkboxSize}px`,
+                                    borderRadius: "2px",
+                                    border: `2px solid ${isChecked ? checkboxColor : checkboxBorderColor}`,
+                                    backgroundColor: isChecked ? checkboxColor : "transparent",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                  }}
+                                >
+                                  {isChecked && (
+                                    <svg
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      stroke="white"
+                                      strokeWidth="3"
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      style={{
+                                        width: `${checkboxSize * 0.7}px`,
+                                        height: `${checkboxSize * 0.7}px`,
+                                      }}
+                                    >
+                                      <polyline points="20 6 9 17 4 12" />
+                                    </svg>
+                                  )}
+                                </div>
+                                {checkboxLabel && (
+                                  <span style={{ fontSize: "12px" }}>{checkboxLabel}</span>
+                                )}
+                              </div>
+                            );
+                          })()}
                         </div>
                       );
                     })}

frontend/components/report/designer/Ruler.tsx

@@ -8,9 +8,12 @@ interface RulerProps {
   offset?: number; // 스크롤 오프셋 (px)
 }
 
+// 고정 스케일 팩터 (화면 해상도와 무관)
+const MM_TO_PX = 4;
+
 export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
-  // mm를 px로 변환 (1mm = 3.7795px, 96dpi 기준)
+  // mm를 px로 변환
-  const mmToPx = (mm: number) => mm * 3.7795;
+  const mmToPx = (mm: number) => mm * MM_TO_PX;
 
   const lengthPx = mmToPx(length);
   const isHorizontal = orientation === "horizontal";

frontend/components/report/designer/SignatureGenerator.tsx

@@ -13,17 +13,17 @@ interface SignatureGeneratorProps {
   onSignatureSelect: (dataUrl: string) => void;
 }
 
-// 서명용 손글씨 폰트 목록 (스타일이 확실히 구분되는 폰트들)
+// 서명용 손글씨 폰트 목록 (완전한 한글 지원 폰트만 사용)
 const SIGNATURE_FONTS = {
   korean: [
     { name: "나눔손글씨 붓", style: "'Nanum Brush Script', cursive", weight: 400 },
     { name: "나눔손글씨 펜", style: "'Nanum Pen Script', cursive", weight: 400 },
-    { name: "배달의민족 도현", style: "Dokdo, cursive", weight: 400 },
+    { name: "손글씨 (Gaegu)", style: "Gaegu, cursive", weight: 700 },
-    { name: "귀여운", style: "Gugi, cursive", weight: 400 },
+    { name: "하이멜로디", style: "'Hi Melody', cursive", weight: 400 },
-    { name: "싱글데이", style: "'Single Day', cursive", weight: 400 },
+    { name: "감자꽃", style: "'Gamja Flower', cursive", weight: 400 },
-    { name: "스타일리시", style: "Stylish, cursive", weight: 400 },
+    { name: "푸어스토리", style: "'Poor Story', cursive", weight: 400 },
-    { name: "해바라기", style: "Sunflower, sans-serif", weight: 700 },
+    { name: "도현", style: "'Do Hyeon', sans-serif", weight: 400 },
-    { name: "손글씨", style: "Gaegu, cursive", weight: 700 },
+    { name: "주아", style: "Jua, sans-serif", weight: 400 },
   ],
   english: [
     { name: "Allura (우아한)", style: "Allura, cursive", weight: 400 },
@@ -109,6 +109,22 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
       });
     }
 
+    // 사용자가 입력한 텍스트로 각 폰트의 글리프를 미리 로드
+    const preloadCanvas = document.createElement("canvas");
+    preloadCanvas.width = 500;
+    preloadCanvas.height = 200;
+    const preloadCtx = preloadCanvas.getContext("2d");
+
+    if (preloadCtx) {
+      for (const font of fonts) {
+        preloadCtx.font = `${font.weight} 124px ${font.style}`;
+        preloadCtx.fillText(name, 0, 100);
+      }
+    }
+
+    // 글리프 로드 대기 (중요: 첫 렌더링 후 폰트가 완전히 로드되도록)
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
     const newSignatures: string[] = [];
 
     // 동기적으로 하나씩 생성

frontend/components/report/designer/TemplatePalette.tsx

@@ -3,6 +3,16 @@
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Trash2, Loader2, RefreshCw } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { useReportDesigner } from "@/contexts/ReportDesignerContext";
 import { reportApi } from "@/lib/api/reportApi";
 import { useToast } from "@/hooks/use-toast";
@@ -19,6 +29,7 @@ export function TemplatePalette() {
   const [customTemplates, setCustomTemplates] = useState<Template[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null);
   const { toast } = useToast();
 
   const fetchTemplates = async () => {
@@ -49,14 +60,18 @@ export function TemplatePalette() {
     await applyTemplate(templateId);
   };
 
-  const handleDeleteTemplate = async (templateId: string, templateName: string) => {
+  const handleDeleteClick = (templateId: string, templateName: string) => {
-    if (!confirm(`"${templateName}" 템플릿을 삭제하시겠습니까?`)) {
+    setDeleteTarget({ id: templateId, name: templateName });
-      return;
+  };
-    }
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteTarget) return;
+
+    setDeletingId(deleteTarget.id);
+    setDeleteTarget(null);
 
-    setDeletingId(templateId);
     try {
-      const response = await reportApi.deleteTemplate(templateId);
+      const response = await reportApi.deleteTemplate(deleteTarget.id);
       if (response.success) {
         toast({
           title: "성공",
@@ -108,7 +123,7 @@ export function TemplatePalette() {
                 size="sm"
                 onClick={(e) => {
                   e.stopPropagation();
-                  handleDeleteTemplate(template.template_id, template.template_name_kor);
+                  handleDeleteClick(template.template_id, template.template_name_kor);
                 }}
                 disabled={deletingId === template.template_id}
                 className="absolute top-1/2 right-1 h-6 w-6 -translate-y-1/2 p-0 opacity-0 transition-opacity group-hover:opacity-100"
@@ -123,6 +138,29 @@ export function TemplatePalette() {
           ))
         )}
       </div>
+
+      {/* 삭제 확인 모달 */}
+      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent className="max-w-[400px]">
+          <AlertDialogHeader>
+            <AlertDialogTitle>템플릿 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{deleteTarget?.name}&quot; 템플릿을 삭제하시겠습니까?
+              <br />
+              삭제된 템플릿은 복구할 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

frontend/components/unified/UnifiedDate.tsx

@@ -0,0 +1,488 @@
+"use client";
+
+/**
+ * UnifiedDate
+ *
+ * 통합 날짜/시간 컴포넌트
+ * - date: 날짜 선택
+ * - time: 시간 선택
+ * - datetime: 날짜+시간 선택
+ * - range 옵션: 범위 선택 (시작~종료)
+ */
+
+import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import { format, parse, isValid } from "date-fns";
+import { ko } from "date-fns/locale";
+import { Calendar as CalendarIcon, Clock } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { UnifiedDateProps, UnifiedDateType } from "@/types/unified-components";
+
+// 날짜 형식 매핑
+const DATE_FORMATS: Record<string, string> = {
+  "YYYY-MM-DD": "yyyy-MM-dd",
+  "YYYY/MM/DD": "yyyy/MM/dd",
+  "DD-MM-YYYY": "dd-MM-yyyy",
+  "DD/MM/YYYY": "dd/MM/yyyy",
+  "MM-DD-YYYY": "MM-dd-yyyy",
+  "MM/DD/YYYY": "MM/dd/yyyy",
+  "YYYY-MM-DD HH:mm": "yyyy-MM-dd HH:mm",
+  "YYYY-MM-DD HH:mm:ss": "yyyy-MM-dd HH:mm:ss",
+};
+
+// 날짜 문자열 → Date 객체
+function parseDate(value: string | undefined, formatStr: string): Date | undefined {
+  if (!value) return undefined;
+
+  const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
+
+  try {
+    // ISO 형식 먼저 시도
+    const isoDate = new Date(value);
+    if (isValid(isoDate)) return isoDate;
+
+    // 포맷에 맞게 파싱
+    const parsed = parse(value, dateFnsFormat, new Date());
+    return isValid(parsed) ? parsed : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+// Date 객체 → 날짜 문자열
+function formatDate(date: Date | undefined, formatStr: string): string {
+  if (!date || !isValid(date)) return "";
+  const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
+  return format(date, dateFnsFormat);
+}
+
+/**
+ * 단일 날짜 선택 컴포넌트
+ */
+const SingleDatePicker = forwardRef<
+  HTMLButtonElement,
+  {
+    value?: string;
+    onChange?: (value: string) => void;
+    dateFormat: string;
+    showToday?: boolean;
+    minDate?: string;
+    maxDate?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    className?: string;
+  }
+>(
+  (
+    { value, onChange, dateFormat = "YYYY-MM-DD", showToday = true, minDate, maxDate, disabled, readonly, className },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+
+    const date = useMemo(() => parseDate(value, dateFormat), [value, dateFormat]);
+    const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
+    const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
+
+    const handleSelect = useCallback(
+      (selectedDate: Date | undefined) => {
+        if (selectedDate) {
+          onChange?.(formatDate(selectedDate, dateFormat));
+          setOpen(false);
+        }
+      },
+      [dateFormat, onChange],
+    );
+
+    const handleToday = useCallback(() => {
+      onChange?.(formatDate(new Date(), dateFormat));
+      setOpen(false);
+    }, [dateFormat, onChange]);
+
+    const handleClear = useCallback(() => {
+      onChange?.("");
+      setOpen(false);
+    }, [onChange]);
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            variant="outline"
+            disabled={disabled || readonly}
+            className={cn(
+              "h-10 w-full justify-start text-left font-normal",
+              !value && "text-muted-foreground",
+              className,
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value || "날짜 선택"}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={handleSelect}
+            initialFocus
+            locale={ko}
+            disabled={(date) => {
+              if (minDateObj && date < minDateObj) return true;
+              if (maxDateObj && date > maxDateObj) return true;
+              return false;
+            }}
+          />
+          <div className="flex gap-2 p-3 pt-0">
+            {showToday && (
+              <Button variant="outline" size="sm" onClick={handleToday}>
+                오늘
+              </Button>
+            )}
+            <Button variant="ghost" size="sm" onClick={handleClear}>
+              초기화
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+SingleDatePicker.displayName = "SingleDatePicker";
+
+/**
+ * 날짜 범위 선택 컴포넌트
+ */
+const RangeDatePicker = forwardRef<
+  HTMLDivElement,
+  {
+    value?: [string, string];
+    onChange?: (value: [string, string]) => void;
+    dateFormat: string;
+    minDate?: string;
+    maxDate?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    className?: string;
+  }
+>(({ value = ["", ""], onChange, dateFormat = "YYYY-MM-DD", minDate, maxDate, disabled, readonly, className }, ref) => {
+  const [openStart, setOpenStart] = useState(false);
+  const [openEnd, setOpenEnd] = useState(false);
+
+  const startDate = useMemo(() => parseDate(value[0], dateFormat), [value, dateFormat]);
+  const endDate = useMemo(() => parseDate(value[1], dateFormat), [value, dateFormat]);
+  const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
+  const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
+
+  const handleStartSelect = useCallback(
+    (date: Date | undefined) => {
+      if (date) {
+        const newStart = formatDate(date, dateFormat);
+        // 시작일이 종료일보다 크면 종료일도 같이 변경
+        if (endDate && date > endDate) {
+          onChange?.([newStart, newStart]);
+        } else {
+          onChange?.([newStart, value[1]]);
+        }
+        setOpenStart(false);
+      }
+    },
+    [value, dateFormat, endDate, onChange],
+  );
+
+  const handleEndSelect = useCallback(
+    (date: Date | undefined) => {
+      if (date) {
+        const newEnd = formatDate(date, dateFormat);
+        // 종료일이 시작일보다 작으면 시작일도 같이 변경
+        if (startDate && date < startDate) {
+          onChange?.([newEnd, newEnd]);
+        } else {
+          onChange?.([value[0], newEnd]);
+        }
+        setOpenEnd(false);
+      }
+    },
+    [value, dateFormat, startDate, onChange],
+  );
+
+  return (
+    <div ref={ref} className={cn("flex items-center gap-2", className)}>
+      {/* 시작 날짜 */}
+      <Popover open={openStart} onOpenChange={setOpenStart}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            disabled={disabled || readonly}
+            className={cn("h-10 flex-1 justify-start text-left font-normal", !value[0] && "text-muted-foreground")}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value[0] || "시작일"}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={startDate}
+            onSelect={handleStartSelect}
+            initialFocus
+            locale={ko}
+            disabled={(date) => {
+              if (minDateObj && date < minDateObj) return true;
+              if (maxDateObj && date > maxDateObj) return true;
+              return false;
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+
+      <span className="text-muted-foreground">~</span>
+
+      {/* 종료 날짜 */}
+      <Popover open={openEnd} onOpenChange={setOpenEnd}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            disabled={disabled || readonly}
+            className={cn("h-10 flex-1 justify-start text-left font-normal", !value[1] && "text-muted-foreground")}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value[1] || "종료일"}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={endDate}
+            onSelect={handleEndSelect}
+            initialFocus
+            locale={ko}
+            disabled={(date) => {
+              if (minDateObj && date < minDateObj) return true;
+              if (maxDateObj && date > maxDateObj) return true;
+              // 시작일보다 이전 날짜는 선택 불가
+              if (startDate && date < startDate) return true;
+              return false;
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+});
+RangeDatePicker.displayName = "RangeDatePicker";
+
+/**
+ * 시간 선택 컴포넌트
+ */
+const TimePicker = forwardRef<
+  HTMLInputElement,
+  {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    readonly?: boolean;
+    className?: string;
+  }
+>(({ value, onChange, disabled, readonly, className }, ref) => {
+  return (
+    <div className={cn("relative", className)}>
+      <Clock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+      <Input
+        ref={ref}
+        type="time"
+        value={value || ""}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        readOnly={readonly}
+        className="h-10 pl-10"
+      />
+    </div>
+  );
+});
+TimePicker.displayName = "TimePicker";
+
+/**
+ * 날짜+시간 선택 컴포넌트
+ */
+const DateTimePicker = forwardRef<
+  HTMLDivElement,
+  {
+    value?: string;
+    onChange?: (value: string) => void;
+    dateFormat: string;
+    minDate?: string;
+    maxDate?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    className?: string;
+  }
+>(({ value, onChange, dateFormat = "YYYY-MM-DD HH:mm", minDate, maxDate, disabled, readonly, className }, ref) => {
+  // 날짜와 시간 분리
+  const [datePart, timePart] = useMemo(() => {
+    if (!value) return ["", ""];
+    const parts = value.split(" ");
+    return [parts[0] || "", parts[1] || ""];
+  }, [value]);
+
+  const handleDateChange = useCallback(
+    (newDate: string) => {
+      const newValue = `${newDate} ${timePart || "00:00"}`;
+      onChange?.(newValue.trim());
+    },
+    [timePart, onChange],
+  );
+
+  const handleTimeChange = useCallback(
+    (newTime: string) => {
+      const newValue = `${datePart || format(new Date(), "yyyy-MM-dd")} ${newTime}`;
+      onChange?.(newValue.trim());
+    },
+    [datePart, onChange],
+  );
+
+  return (
+    <div ref={ref} className={cn("flex gap-2", className)}>
+      <div className="flex-1">
+        <SingleDatePicker
+          value={datePart}
+          onChange={handleDateChange}
+          dateFormat="YYYY-MM-DD"
+          minDate={minDate}
+          maxDate={maxDate}
+          disabled={disabled}
+          readonly={readonly}
+        />
+      </div>
+      <div className="w-32">
+        <TimePicker value={timePart} onChange={handleTimeChange} disabled={disabled} readonly={readonly} />
+      </div>
+    </div>
+  );
+});
+DateTimePicker.displayName = "DateTimePicker";
+
+/**
+ * 메인 UnifiedDate 컴포넌트
+ */
+export const UnifiedDate = forwardRef<HTMLDivElement, UnifiedDateProps>((props, ref) => {
+  const { id, label, required, readonly, disabled, style, size, config: configProp, value, onChange } = props;
+
+  // config가 없으면 기본값 사용
+  const config = configProp || { type: "date" as const };
+
+  const dateFormat = config.format || "YYYY-MM-DD";
+
+  // 타입별 컴포넌트 렌더링
+  const renderDatePicker = () => {
+    const isDisabled = disabled || readonly;
+
+    // 범위 선택
+    if (config.range) {
+      return (
+        <RangeDatePicker
+          value={Array.isArray(value) ? (value as [string, string]) : ["", ""]}
+          onChange={onChange as (value: [string, string]) => void}
+          dateFormat={dateFormat}
+          minDate={config.minDate}
+          maxDate={config.maxDate}
+          disabled={isDisabled}
+          readonly={readonly}
+        />
+      );
+    }
+
+    // 타입별 렌더링
+    switch (config.type) {
+      case "date":
+        return (
+          <SingleDatePicker
+            value={typeof value === "string" ? value : ""}
+            onChange={(v) => onChange?.(v)}
+            dateFormat={dateFormat}
+            showToday={config.showToday}
+            minDate={config.minDate}
+            maxDate={config.maxDate}
+            disabled={isDisabled}
+            readonly={readonly}
+          />
+        );
+
+      case "time":
+        return (
+          <TimePicker
+            value={typeof value === "string" ? value : ""}
+            onChange={(v) => onChange?.(v)}
+            disabled={isDisabled}
+            readonly={readonly}
+          />
+        );
+
+      case "datetime":
+        return (
+          <DateTimePicker
+            value={typeof value === "string" ? value : ""}
+            onChange={(v) => onChange?.(v)}
+            dateFormat={dateFormat}
+            minDate={config.minDate}
+            maxDate={config.maxDate}
+            disabled={isDisabled}
+            readonly={readonly}
+          />
+        );
+
+      default:
+        return (
+          <SingleDatePicker
+            value={typeof value === "string" ? value : ""}
+            onChange={(v) => onChange?.(v)}
+            dateFormat={dateFormat}
+            showToday={config.showToday}
+            disabled={isDisabled}
+            readonly={readonly}
+          />
+        );
+    }
+  };
+
+  const showLabel = label && style?.labelDisplay !== false;
+  const componentWidth = size?.width || style?.width;
+  const componentHeight = size?.height || style?.height;
+
+  return (
+    <div
+      ref={ref}
+      id={id}
+      className="flex flex-col"
+      style={{
+        width: componentWidth,
+        height: componentHeight,
+      }}
+    >
+      {showLabel && (
+        <Label
+          htmlFor={id}
+          style={{
+            fontSize: style?.labelFontSize,
+            color: style?.labelColor,
+            fontWeight: style?.labelFontWeight,
+            marginBottom: style?.labelMarginBottom,
+          }}
+          className="flex-shrink-0 text-sm font-medium"
+        >
+          {label}
+          {required && <span className="ml-0.5 text-orange-500">*</span>}
+        </Label>
+      )}
+      <div className="min-h-0 flex-1">{renderDatePicker()}</div>
+    </div>
+  );
+});
+
+UnifiedDate.displayName = "UnifiedDate";
+
+export default UnifiedDate;

frontend/components/unified/config-panels/UnifiedInputConfigPanel.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+/**
+ * UnifiedInput 설정 패널
+ * 통합 입력 컴포넌트의 세부 설정을 관리합니다.
+ */
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+
+interface UnifiedInputConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+}
+
+export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = ({ config, onChange }) => {
+  // 설정 업데이트 핸들러
+  const updateConfig = (field: string, value: any) => {
+    onChange({ ...config, [field]: value });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 입력 타입 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">입력 타입</Label>
+        <Select
+          value={config.inputType || config.type || "text"}
+          onValueChange={(value) => updateConfig("inputType", value)}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue placeholder="입력 타입 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="text">텍스트</SelectItem>
+            <SelectItem value="number">숫자</SelectItem>
+            <SelectItem value="password">비밀번호</SelectItem>
+            <SelectItem value="textarea">여러 줄 텍스트</SelectItem>
+            <SelectItem value="slider">슬라이더</SelectItem>
+            <SelectItem value="color">색상 선택</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Separator />
+
+      {/* 형식 (텍스트/숫자용) */}
+      {(config.inputType === "text" || !config.inputType) && (
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">입력 형식</Label>
+          <Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="형식 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none">제한 없음</SelectItem>
+              <SelectItem value="email">이메일</SelectItem>
+              <SelectItem value="tel">전화번호</SelectItem>
+              <SelectItem value="url">URL</SelectItem>
+              <SelectItem value="currency">통화</SelectItem>
+              <SelectItem value="biz_no">사업자번호</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* 플레이스홀더 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">플레이스홀더</Label>
+        <Input
+          value={config.placeholder || ""}
+          onChange={(e) => updateConfig("placeholder", e.target.value)}
+          placeholder="입력 안내 텍스트"
+          className="h-8 text-xs"
+        />
+      </div>
+
+      {/* 숫자/슬라이더 전용 설정 */}
+      {(config.inputType === "number" || config.inputType === "slider") && (
+        <>
+          <Separator />
+          <div className="grid grid-cols-3 gap-2">
+            <div className="space-y-2">
+              <Label className="text-xs font-medium">최소값</Label>
+              <Input
+                type="number"
+                value={config.min ?? ""}
+                onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
+                placeholder="0"
+                className="h-8 text-xs"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="text-xs font-medium">최대값</Label>
+              <Input
+                type="number"
+                value={config.max ?? ""}
+                onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
+                placeholder="100"
+                className="h-8 text-xs"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="text-xs font-medium">단계</Label>
+              <Input
+                type="number"
+                value={config.step ?? ""}
+                onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
+                placeholder="1"
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* 여러 줄 텍스트 전용 설정 */}
+      {config.inputType === "textarea" && (
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">줄 수</Label>
+          <Input
+            type="number"
+            value={config.rows || 3}
+            onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
+            min={2}
+            max={20}
+            className="h-8 text-xs"
+          />
+        </div>
+      )}
+
+      {/* 마스크 입력 (선택) */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">입력 마스크 (선택)</Label>
+        <Input
+          value={config.mask || ""}
+          onChange={(e) => updateConfig("mask", e.target.value)}
+          placeholder="예: ###-####-####"
+          className="h-8 text-xs"
+        />
+        <p className="text-muted-foreground text-[10px]"># = 숫자, A = 문자, * = 모든 문자</p>
+      </div>
+    </div>
+  );
+};
+
+UnifiedInputConfigPanel.displayName = "UnifiedInputConfigPanel";
+
+export default UnifiedInputConfigPanel;

frontend/contexts/ActiveTabContext.tsx

@@ -139,3 +139,4 @@ export const useActiveTabOptional = () => {
 
 
 
+

frontend/contexts/ReportDesignerContext.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext, useContext, useState, useCallback, ReactNode, useEffect, useRef } from "react";
-import { ComponentConfig, ReportDetail, ReportLayout, ReportPage, ReportLayoutConfig } from "@/types/report";
+import { ComponentConfig, ReportDetail, ReportLayout, ReportPage, ReportLayoutConfig, WatermarkConfig } from "@/types/report";
 import { reportApi } from "@/lib/api/reportApi";
 import { useToast } from "@/hooks/use-toast";
 import { v4 as uuidv4 } from "uuid";
@@ -40,6 +40,7 @@ interface ReportDesignerContextType {
   reorderPages: (sourceIndex: number, targetIndex: number) => void;
   selectPage: (pageId: string) => void;
   updatePageSettings: (pageId: string, settings: Partial<ReportPage>) => void;
+  updateWatermark: (watermark: WatermarkConfig | undefined) => void; // 전체 페이지 공유 워터마크
 
   // 컴포넌트 (현재 페이지)
   components: ComponentConfig[]; // currentPage의 components (읽기 전용)
@@ -137,10 +138,49 @@ interface ReportDesignerContextType {
   // 그룹화
   groupComponents: () => void;
   ungroupComponents: () => void;
+
+  // 메뉴 연결
+  menuObjids: number[];
+  setMenuObjids: (menuObjids: number[]) => void;
+  saveLayoutWithMenus: (menuObjids: number[]) => Promise<void>;
 }
 
 const ReportDesignerContext = createContext<ReportDesignerContextType | undefined>(undefined);
 
+// 페이지 사이즈 변경 시 컴포넌트 위치 및 크기 재계산 유틸리티 함수
+const recalculateComponentPositions = (
+  components: ComponentConfig[],
+  oldWidth: number,
+  oldHeight: number,
+  newWidth: number,
+  newHeight: number
+): ComponentConfig[] => {
+  // 사이즈가 동일하면 그대로 반환
+  if (oldWidth === newWidth && oldHeight === newHeight) {
+    return components;
+  }
+
+  const widthRatio = newWidth / oldWidth;
+  const heightRatio = newHeight / oldHeight;
+
+  return components.map((comp) => {
+    // 위치와 크기 모두 비율대로 재계산
+    // 소수점 2자리까지만 유지
+    const newX = Math.round(comp.x * widthRatio * 100) / 100;
+    const newY = Math.round(comp.y * heightRatio * 100) / 100;
+    const newCompWidth = Math.round(comp.width * widthRatio * 100) / 100;
+    const newCompHeight = Math.round(comp.height * heightRatio * 100) / 100;
+
+    return {
+      ...comp,
+      x: newX,
+      y: newY,
+      width: newCompWidth,
+      height: newCompHeight,
+    };
+  });
+};
+
 export function ReportDesignerProvider({ reportId, children }: { reportId: string; children: ReactNode }) {
   const [reportDetail, setReportDetail] = useState<ReportDetail | null>(null);
   const [layout, setLayout] = useState<ReportLayout | null>(null);
@@ -157,6 +197,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();
 
   // 현재 페이지 계산
@@ -803,9 +844,10 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
       const horizontalLines: number[] = [];
       const threshold = 5; // 5px 오차 허용
 
-      // 캔버스를 픽셀로 변환 (1mm = 3.7795px)
+      // 캔버스를 픽셀로 변환 (고정 스케일 팩터: 1mm = 4px)
-      const canvasWidthPx = canvasWidth * 3.7795;
+      const MM_TO_PX = 4;
-      const canvasHeightPx = canvasHeight * 3.7795;
+      const canvasWidthPx = canvasWidth * MM_TO_PX;
+      const canvasHeightPx = canvasHeight * MM_TO_PX;
       const canvasCenterX = canvasWidthPx / 2;
       const canvasCenterY = canvasHeightPx / 2;
 
@@ -986,8 +1028,49 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
   }, []);
 
   const updatePageSettings = useCallback((pageId: string, settings: Partial<ReportPage>) => {
+    setLayoutConfig((prev) => {
+      const targetPage = prev.pages.find((p) => p.page_id === pageId);
+      if (!targetPage) {
+        return prev;
+      }
+
+      // 페이지 사이즈 변경 감지
+      const isWidthChanging = settings.width !== undefined && settings.width !== targetPage.width;
+      const isHeightChanging = settings.height !== undefined && settings.height !== targetPage.height;
+
+      // 사이즈 변경 시 컴포넌트 위치 재계산
+      let updatedComponents = targetPage.components;
+      if (isWidthChanging || isHeightChanging) {
+        const oldWidth = targetPage.width;
+        const oldHeight = targetPage.height;
+        const newWidth = settings.width ?? targetPage.width;
+        const newHeight = settings.height ?? targetPage.height;
+
+        updatedComponents = recalculateComponentPositions(
+          targetPage.components,
+          oldWidth,
+          oldHeight,
+          newWidth,
+          newHeight
+        );
+      }
+
+      return {
+        ...prev,
+        pages: prev.pages.map((page) =>
+          page.page_id === pageId
+            ? { ...page, ...settings, components: updatedComponents }
+            : page
+        ),
+      };
+    });
+  }, []);
+
+  // 전체 페이지 공유 워터마크 업데이트
+  const updateWatermark = useCallback((watermark: WatermarkConfig | undefined) => {
     setLayoutConfig((prev) => ({
-      pages: prev.pages.map((page) => (page.page_id === pageId ? { ...page, ...settings } : page)),
+      ...prev,
+      watermark,
     }));
   }, []);
 
@@ -1032,6 +1115,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([]);
+        }
       }
 
       // 레이아웃 조회
@@ -1320,6 +1410,7 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
           ...q,
           externalConnectionId: q.externalConnectionId || undefined,
         })),
+        menuObjids, // 연결된 메뉴 목록
       });
 
       toast({
@@ -1341,7 +1432,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(
@@ -1470,6 +1622,7 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     reorderPages,
     selectPage,
     updatePageSettings,
+    updateWatermark,
 
     // 컴포넌트 (현재 페이지)
     components,
@@ -1541,6 +1694,10 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     // 그룹화
     groupComponents,
     ungroupComponents,
+    // 메뉴 연결
+    menuObjids,
+    setMenuObjids,
+    saveLayoutWithMenus,
   };
 
   return <ReportDesignerContext.Provider value={value}>{children}</ReportDesignerContext.Provider>;

frontend/hooks/queries/useCodes.ts

@@ -9,16 +9,13 @@ export const queryKeys = {
     all: ["codes"] as const,
     list: (categoryCode: string) => ["codes", "list", categoryCode] as const,
     options: (categoryCode: string) => ["codes", "options", categoryCode] as const,
-    detail: (categoryCode: string, codeValue: string) =>
+    detail: (categoryCode: string, codeValue: string) => ["codes", "detail", categoryCode, codeValue] as const,
-      ["codes", "detail", categoryCode, codeValue] as const,
+    infiniteList: (categoryCode: string, filters?: any) => ["codes", "infiniteList", categoryCode, filters] as const,
-    infiniteList: (categoryCode: string, filters?: any) =>
-      ["codes", "infiniteList", categoryCode, filters] as const,
   },
   tables: {
     all: ["tables"] as const,
     columns: (tableName: string) => ["tables", "columns", tableName] as const,
-    codeCategory: (tableName: string, columnName: string) =>
+    codeCategory: (tableName: string, columnName: string) => ["tables", "codeCategory", tableName, columnName] as const,
-      ["tables", "codeCategory", tableName, columnName] as const,
   },
   categories: {
     all: ["categories"] as const,
@@ -36,9 +33,8 @@ export function useTableCodeCategory(tableName?: string, columnName?: string) {
       const columns = await tableTypeApi.getColumns(tableName);
       const targetColumn = columns.find((col) => col.columnName === columnName);
 
-      const codeCategory = targetColumn?.codeCategory && targetColumn.codeCategory !== "none"
+      const codeCategory =
-        ? targetColumn.codeCategory
+        targetColumn?.codeCategory && targetColumn.codeCategory !== "none" ? targetColumn.codeCategory : null;
-        : null;
 
       return codeCategory;
     },
@@ -48,16 +44,101 @@ export function useTableCodeCategory(tableName?: string, columnName?: string) {
   });
 }
 
+// 🆕 테이블 컬럼의 계층구조 설정 조회 (대분류/중분류/소분류)
+interface ColumnHierarchyInfo {
+  hierarchyRole?: "large" | "medium" | "small";
+  hierarchyParentField?: string;
+  codeCategory?: string;
+}
+
+export function useTableColumnHierarchy(tableName?: string, columnName?: string) {
+  return useQuery<ColumnHierarchyInfo | null>({
+    queryKey: ["tables", "hierarchy", tableName || "", columnName || ""],
+    queryFn: async () => {
+      if (!tableName || !columnName) return null;
+
+      const columns = await tableTypeApi.getColumns(tableName);
+      const targetColumn = columns.find((col) => col.columnName === columnName);
+
+      if (!targetColumn) return null;
+
+      // detailSettings에서 hierarchyRole 추출
+      let hierarchyRole: ColumnHierarchyInfo["hierarchyRole"];
+      let hierarchyParentField: string | undefined;
+
+      console.log("🔍 [useTableColumnHierarchy] 컬럼 정보:", {
+        columnName,
+        detailSettings: targetColumn.detailSettings,
+        detailSettingsType: typeof targetColumn.detailSettings,
+        codeCategory: targetColumn.codeCategory,
+      });
+
+      if (targetColumn.detailSettings) {
+        try {
+          const settings =
+            typeof targetColumn.detailSettings === "string"
+              ? JSON.parse(targetColumn.detailSettings)
+              : targetColumn.detailSettings;
+
+          console.log("🔍 [useTableColumnHierarchy] 파싱된 settings:", settings);
+
+          hierarchyRole = settings.hierarchyRole;
+          hierarchyParentField = settings.hierarchyParentField;
+        } catch (e) {
+          console.log("🔍 [useTableColumnHierarchy] JSON 파싱 실패:", e);
+          // JSON 파싱 실패 시 무시
+        }
+      }
+
+      // hierarchyParentField가 없으면 같은 codeCategory를 가진 상위 역할 컬럼을 자동으로 찾음
+      if (hierarchyRole && !hierarchyParentField && targetColumn.codeCategory) {
+        const roleOrder = { large: 0, medium: 1, small: 2 };
+        const currentOrder = roleOrder[hierarchyRole];
+
+        if (currentOrder > 0) {
+          // 같은 codeCategory를 가진 컬럼들 중에서 상위 역할을 찾음
+          const parentRole = currentOrder === 1 ? "large" : "medium";
+
+          const parentColumn = columns.find((col) => {
+            if (col.codeCategory !== targetColumn.codeCategory) return false;
+
+            try {
+              const colSettings =
+                typeof col.detailSettings === "string" ? JSON.parse(col.detailSettings) : col.detailSettings;
+              return colSettings?.hierarchyRole === parentRole;
+            } catch {
+              return false;
+            }
+          });
+
+          if (parentColumn) {
+            hierarchyParentField = parentColumn.columnName;
+          }
+        }
+      }
+
+      return {
+        hierarchyRole,
+        hierarchyParentField,
+        codeCategory: targetColumn.codeCategory,
+      };
+    },
+    enabled: !!(tableName && columnName),
+    staleTime: 10 * 60 * 1000,
+    gcTime: 30 * 60 * 1000,
+  });
+}
+
 // 코드 옵션 조회 (select용)
 export function useCodeOptions(codeCategory?: string, enabled: boolean = true, menuObjid?: number) {
   const query = useQuery({
     queryKey: menuObjid
-      ? [...queryKeys.codes.options(codeCategory || ""), 'menu', menuObjid]
+      ? [...queryKeys.codes.options(codeCategory || ""), "menu", menuObjid]
       : queryKeys.codes.options(codeCategory || ""),
     queryFn: async () => {
       if (!codeCategory || codeCategory === "none") return [];
 
-      console.log(`🔍 [useCodeOptions] 코드 옵션 조회 시작:`, {
+      console.log("🔍 [useCodeOptions] 코드 옵션 조회 시작:", {
         codeCategory,
         menuObjid,
         hasMenuObjid: !!menuObjid,
@@ -65,10 +146,10 @@ export function useCodeOptions(codeCategory?: string, enabled: boolean = true, m
 
       const response = await commonCodeApi.codes.getList(codeCategory, {
         isActive: true,
-        menuObjid 
+        menuObjid,
       });
 
-      console.log(`📦 [useCodeOptions] API 응답:`, {
+      console.log("📦 [useCodeOptions] API 응답:", {
         codeCategory,
         menuObjid,
         success: response.success,
@@ -79,17 +160,32 @@ export function useCodeOptions(codeCategory?: string, enabled: boolean = true, m
       if (response.success && response.data) {
         const options = response.data.map((code: any) => {
           const actualValue = code.code || code.CODE || code.value || code.code_value || code.codeValue;
-          const actualLabel = code.codeName || code.code_name || code.name || code.CODE_NAME ||
+          const actualLabel =
-                             code.NAME || code.label || code.LABEL || code.text || code.title ||
+            code.codeName ||
-                             code.description || actualValue;
+            code.code_name ||
+            code.name ||
+            code.CODE_NAME ||
+            code.NAME ||
+            code.label ||
+            code.LABEL ||
+            code.text ||
+            code.title ||
+            code.description ||
+            actualValue;
+
+          // 계층구조 정보 포함
+          const depth = code.depth ?? 1;
+          const parentCodeValue = code.parentCodeValue || code.parent_code_value || null;
 
           return {
             value: actualValue,
             label: actualLabel,
+            depth,
+            parentCodeValue,
           };
         });
 
-        console.log(`✅ [useCodeOptions] 옵션 변환 완료:`, {
+        console.log("✅ [useCodeOptions] 옵션 변환 완료:", {
           codeCategory,
           menuObjid,
           optionsCount: options.length,
@@ -140,15 +236,8 @@ export function useUpdateCode() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({
+    mutationFn: ({ categoryCode, codeValue, data }: { categoryCode: string; codeValue: string; data: any }) =>
-      categoryCode,
+      commonCodeApi.codes.update(categoryCode, codeValue, data),
-      codeValue,
-      data,
-    }: {
-      categoryCode: string;
-      codeValue: string;
-      data: any;
-    }) => commonCodeApi.codes.update(categoryCode, codeValue, data),
     onSuccess: (_, variables) => {
       // 해당 코드 상세 쿼리 무효화
       queryClient.invalidateQueries({

frontend/hooks/useAutoFill.ts

@@ -196,3 +196,4 @@ export function applyAutoFillToFormData(
 
 
 
+

frontend/lib/api/commonCode.ts

@@ -166,4 +166,62 @@ export const commonCodeApi = {
       return response.data;
     },
   },
+
+  // 계층구조 코드 API
+  hierarchy: {
+    /**
+     * 계층구조 코드 조회
+     * @param categoryCode 카테고리 코드
+     * @param parentCodeValue 부모 코드값 (빈 문자열이면 최상위 코드)
+     * @param depth 특정 깊이만 조회 (선택)
+     * @param menuObjid 메뉴 OBJID (선택)
+     */
+    async getHierarchicalCodes(
+      categoryCode: string,
+      parentCodeValue?: string | null,
+      depth?: number,
+      menuObjid?: number
+    ): Promise<ApiResponse<CodeInfo[]>> {
+      const searchParams = new URLSearchParams();
+
+      if (parentCodeValue !== undefined && parentCodeValue !== null) {
+        searchParams.append("parentCodeValue", parentCodeValue);
+      }
+      if (depth !== undefined) searchParams.append("depth", depth.toString());
+      if (menuObjid !== undefined) searchParams.append("menuObjid", menuObjid.toString());
+
+      const queryString = searchParams.toString();
+      const url = `/common-codes/categories/${categoryCode}/hierarchy${queryString ? `?${queryString}` : ""}`;
+
+      const response = await apiClient.get(url);
+      return response.data;
+    },
+
+    /**
+     * 코드 트리 조회 (전체 계층구조)
+     */
+    async getCodeTree(
+      categoryCode: string,
+      menuObjid?: number
+    ): Promise<ApiResponse<{ flat: CodeInfo[]; tree: CodeInfo[] }>> {
+      const searchParams = new URLSearchParams();
+      if (menuObjid !== undefined) searchParams.append("menuObjid", menuObjid.toString());
+
+      const queryString = searchParams.toString();
+      const url = `/common-codes/categories/${categoryCode}/tree${queryString ? `?${queryString}` : ""}`;
+
+      const response = await apiClient.get(url);
+      return response.data;
+    },
+
+    /**
+     * 자식 코드 존재 여부 확인
+     */
+    async hasChildren(categoryCode: string, codeValue: string): Promise<ApiResponse<{ hasChildren: boolean }>> {
+      const response = await apiClient.get(
+        `/common-codes/categories/${categoryCode}/codes/${codeValue}/has-children`
+      );
+      return response.data;
+    },
+  },
 };

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -413,8 +413,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           groupedData: props.groupedData, // ✅ 언더스코어 제거하여 직접 전달
           _groupedData: props.groupedData, // 하위 호환성 유지
           // 🆕 UniversalFormModal용 initialData 전달
-          // originalData를 사용 (최초 전달된 값, formData는 계속 변경되므로 사용하면 안됨)
+          // originalData가 비어있지 않으면 originalData 사용, 아니면 formData 사용
-          _initialData: originalData || formData,
+          // 생성 모드에서는 originalData가 빈 객체이므로 formData를 사용해야 함
+          _initialData: (originalData && Object.keys(originalData).length > 0) ? originalData : formData,
           _originalData: originalData,
           // 🆕 탭 관련 정보 전달 (탭 내부의 테이블 컴포넌트에서 사용)
           parentTabId: props.parentTabId,

frontend/lib/registry/components/map/MapConfigPanel.tsx

@@ -315,16 +315,17 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
         {/* 라벨 컬럼 (선택) */}
         <div className="space-y-2 mb-3">
           <Label>라벨 컬럼 (선택사항)</Label>
+          {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__none__" 사용 */}
           <Select
-            value={config.dataSource?.labelColumn || ""}
+            value={config.dataSource?.labelColumn || "__none__"}
-            onValueChange={(value) => updateConfig("dataSource.labelColumn", value)}
+            onValueChange={(value) => updateConfig("dataSource.labelColumn", value === "__none__" ? "" : value)}
             disabled={isLoadingColumns || !config.dataSource?.tableName}
           >
             <SelectTrigger>
               <SelectValue placeholder="라벨 컬럼 선택" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="">선택 안 함</SelectItem>
+              <SelectItem value="__none__">선택 안 함</SelectItem>
               {columns.map((col) => (
                 <SelectItem key={col.column_name} value={col.column_name}>
                   {col.column_name} ({col.data_type})
@@ -337,16 +338,17 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
         {/* 상태 컬럼 (선택) */}
         <div className="space-y-2 mb-3">
           <Label>상태 컬럼 (선택사항)</Label>
+          {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__none__" 사용 */}
           <Select
-            value={config.dataSource?.statusColumn || ""}
+            value={config.dataSource?.statusColumn || "__none__"}
-            onValueChange={(value) => updateConfig("dataSource.statusColumn", value)}
+            onValueChange={(value) => updateConfig("dataSource.statusColumn", value === "__none__" ? "" : value)}
             disabled={isLoadingColumns || !config.dataSource?.tableName}
           >
             <SelectTrigger>
               <SelectValue placeholder="상태 컬럼 선택" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="">선택 안 함</SelectItem>
+              <SelectItem value="__none__">선택 안 함</SelectItem>
               {columns.map((col) => (
                 <SelectItem key={col.column_name} value={col.column_name}>
                   {col.column_name} ({col.data_type})

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
-import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";
+import { useCodeOptions, useTableCodeCategory, useTableColumnHierarchy } from "@/hooks/queries/useCodes";
 import { cn } from "@/lib/registry/components/common/inputStyles";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import type { DataProvidable } from "@/types/data-transfer";
 import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
+import { HierarchicalCodeSelect } from "@/components/common/HierarchicalCodeSelect";
 
 interface Option {
   value: string;
@@ -58,7 +59,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   // 🆕 읽기전용/비활성화 상태 확인
   const isReadonly = (component as any).readonly || (props as any).readonly || componentConfig?.readonly || false;
   const isDisabled = (component as any).disabled || (props as any).disabled || componentConfig?.disabled || false;
-  const isFieldDisabled = isDesignMode || isReadonly || isDisabled;
+  const isFieldDisabledBase = isDesignMode || isReadonly || isDisabled;
   // 화면 컨텍스트 (데이터 제공자로 등록)
   const screenContext = useScreenContextOptional();
 
@@ -114,7 +115,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   const [selectedValues, setSelectedValues] = useState<string[]>(() => {
     const initialValue = externalValue || config?.value || "";
     if (isMultiple && typeof initialValue === "string" && initialValue) {
-      return initialValue.split(",").map(v => v.trim()).filter(v => v);
+      return initialValue
+        .split(",")
+        .map((v) => v.trim())
+        .filter((v) => v);
     }
     return [];
   });
@@ -122,7 +126,6 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   // autocomplete의 경우 검색어 관리
   const [searchQuery, setSearchQuery] = useState("");
 
-
   const selectRef = useRef<HTMLDivElement>(null);
 
   // 안정적인 쿼리 키를 위한 메모이제이션
@@ -133,6 +136,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   // 🚀 React Query: 테이블 코드 카테고리 조회
   const { data: dynamicCodeCategory } = useTableCodeCategory(stableTableName, stableColumnName);
 
+  // 🆕 React Query: 테이블 컬럼의 계층구조 설정 조회
+  const { data: columnHierarchy } = useTableColumnHierarchy(stableTableName, stableColumnName);
+
   // 코드 카테고리 결정: 동적 카테고리 > 설정 카테고리 (메모이제이션)
   const codeCategory = useMemo(() => {
     const category = dynamicCodeCategory || staticCodeCategory;
@@ -150,6 +156,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     isFetching,
   } = useCodeOptions(codeCategory, isCodeCategoryValid, menuObjid);
 
+  // 🆕 계층구조 코드 자동 감지: 비활성화 (테이블 타입관리에서 hierarchyRole 설정 방식 사용)
+  // 기존: depth > 1인 코드가 있으면 자동으로 HierarchicalCodeSelect 사용
+  // 변경: 항상 false 반환하여 자동 감지 비활성화
+  const hasHierarchicalCodes = false;
+
   // 🆕 카테고리 타입 (category webType)을 위한 옵션 로딩
   const [categoryOptions, setCategoryOptions] = useState<Option[]>([]);
   const [isLoadingCategories, setIsLoadingCategories] = useState(false);
@@ -161,10 +172,93 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   const cascadingRole = config?.cascadingRole || componentConfig?.cascadingRole || "child";
   const cascadingParentField = config?.cascadingParentField || componentConfig?.cascadingParentField;
 
+  // 🆕 계층구조 역할 설정 (대분류/중분류/소분류)
+  // 1순위: 동적으로 조회된 값 (테이블 타입관리에서 설정)
+  // 2순위: config에서 전달된 값
+  const hierarchyRole = columnHierarchy?.hierarchyRole || config?.hierarchyRole || componentConfig?.hierarchyRole;
+  const hierarchyParentField = columnHierarchy?.hierarchyParentField || config?.hierarchyParentField || componentConfig?.hierarchyParentField;
+
+  // 디버깅 로그
+  console.log("🔍 [SelectBasic] 계층구조 설정:", {
+    columnName: component.columnName,
+    tableName: component.tableName,
+    columnHierarchy,
+    hierarchyRole,
+    hierarchyParentField,
+    codeCategory,
+  });
+
   // 🆕 자식 역할일 때 부모 값 추출 (단일 또는 다중)
-  const rawParentValue = cascadingRole === "child" && cascadingParentField && formData 
+  const rawParentValue =
-    ? formData[cascadingParentField] 
+    cascadingRole === "child" && cascadingParentField && formData ? formData[cascadingParentField] : undefined;
-    : undefined;
+
+  // 🆕 계층구조 역할에 따른 부모 값 추출
+  const hierarchyParentValue = useMemo(() => {
+    if (!hierarchyRole || hierarchyRole === "large" || !hierarchyParentField || !formData) {
+      return undefined;
+    }
+    return formData[hierarchyParentField] as string | undefined;
+  }, [hierarchyRole, hierarchyParentField, formData]);
+
+  // 🆕 계층구조에서 상위 항목 미선택 시 비활성화
+  const isHierarchyDisabled = (hierarchyRole === "medium" || hierarchyRole === "small") && !hierarchyParentValue;
+
+  // 최종 비활성화 상태
+  const isFieldDisabled = isFieldDisabledBase || isHierarchyDisabled;
+
+  console.log("🔍 [SelectBasic] 비활성화 상태:", {
+    columnName: component.columnName,
+    hierarchyRole,
+    hierarchyParentValue,
+    isHierarchyDisabled,
+    isFieldDisabled,
+  });
+
+  // 🆕 계층구조 역할에 따라 옵션 필터링
+  const filteredCodeOptions = useMemo(() => {
+    console.log("🔍 [SelectBasic] 옵션 필터링:", {
+      columnName: component.columnName,
+      hierarchyRole,
+      hierarchyParentField,
+      hierarchyParentValue,
+      codeOptionsCount: codeOptions?.length || 0,
+      sampleOptions: codeOptions?.slice(0, 3),
+    });
+
+    if (!hierarchyRole || !codeOptions || codeOptions.length === 0) {
+      console.log("🔍 [SelectBasic] 필터링 스킵 - hierarchyRole 없음 또는 옵션 없음");
+      return codeOptions;
+    }
+
+    // 대분류: depth = 1 (최상위)
+    if (hierarchyRole === "large") {
+      const filtered = codeOptions.filter((opt: any) => {
+        const depth = opt.depth || 1;
+        const parentCodeValue = opt.parentCodeValue || opt.parent_code_value;
+        return depth === 1 || !parentCodeValue;
+      });
+      console.log("🔍 [SelectBasic] 대분류 필터링 결과:", filtered.length, "개");
+      return filtered;
+    }
+
+    // 중분류/소분류: 부모 값이 있어야 함
+    if ((hierarchyRole === "medium" || hierarchyRole === "small") && hierarchyParentValue) {
+      const filtered = codeOptions.filter((opt: any) => {
+        const parentCodeValue = opt.parentCodeValue || opt.parent_code_value;
+        return parentCodeValue === hierarchyParentValue;
+      });
+      console.log("🔍 [SelectBasic] 중/소분류 필터링 결과:", filtered.length, "개");
+      return filtered;
+    }
+
+    // 부모 값이 없으면 빈 배열 반환 (선택 불가 상태)
+    if (hierarchyRole === "medium" || hierarchyRole === "small") {
+      console.log("🔍 [SelectBasic] 중/소분류 - 부모값 없음, 빈 배열 반환");
+      return [];
+    }
+
+    return codeOptions;
+  }, [codeOptions, hierarchyRole, hierarchyParentValue, hierarchyParentField, component.columnName]);
 
   // 🆕 부모값이 콤마로 구분된 문자열이면 배열로 변환 (다중 선택 지원)
   const parentValues: string[] | undefined = useMemo(() => {
@@ -172,13 +266,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
 
     // 이미 배열인 경우
     if (Array.isArray(rawParentValue)) {
-      return rawParentValue.map(v => String(v)).filter(v => v);
+      return rawParentValue.map((v) => String(v)).filter((v) => v);
     }
 
     // 콤마로 구분된 문자열인 경우
     const strValue = String(rawParentValue);
-    if (strValue.includes(',')) {
+    if (strValue.includes(",")) {
-      return strValue.split(',').map(v => v.trim()).filter(v => v);
+      return strValue
+        .split(",")
+        .map((v) => v.trim())
+        .filter((v) => v);
     }
 
     // 단일 값
@@ -186,10 +283,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   }, [rawParentValue]);
 
   // 🆕 연쇄 드롭다운 훅 사용 (역할에 따라 다른 옵션 로드) - 다중 부모값 지원
-  const {
+  const { options: cascadingOptions, loading: isLoadingCascading } = useCascadingDropdown({
-    options: cascadingOptions,
-    loading: isLoadingCascading,
-  } = useCascadingDropdown({
     relationCode: cascadingRelationCode,
     categoryRelationCode: categoryRelationCode, // 🆕 카테고리 값 연쇄관계 지원
     role: cascadingRole, // 부모/자식 역할 전달
@@ -279,7 +373,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     // 다중선택 모드인 경우
     if (isMultiple) {
       if (typeof newValue === "string" && newValue) {
-        const values = newValue.split(",").map(v => v.trim()).filter(v => v);
+        const values = newValue
+          .split(",")
+          .map((v) => v.trim())
+          .filter((v) => v);
         const currentValuesStr = selectedValues.join(",");
 
         if (newValue !== currentValuesStr) {
@@ -314,11 +411,13 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     getSelectedData: () => {
       // 현재 선택된 값을 배열로 반환
       const fieldName = component.columnName || "selectedValue";
-      return [{
+      return [
+        {
           [fieldName]: selectedValue,
           value: selectedValue,
           label: selectedLabel,
-      }];
+        },
+      ];
     },
 
     getAllData: () => {
@@ -444,7 +543,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     }
 
     const configOptions = config.options || [];
-    return [...codeOptions, ...categoryOptions, ...configOptions];
+    // 🆕 계층구조 역할이 설정된 경우 필터링된 옵션 사용
+    console.log("🔍 [SelectBasic] getAllOptions 호출:", {
+      columnName: component.columnName,
+      hierarchyRole,
+      codeOptionsCount: codeOptions?.length || 0,
+      filteredCodeOptionsCount: filteredCodeOptions?.length || 0,
+      categoryOptionsCount: categoryOptions?.length || 0,
+      configOptionsCount: configOptions?.length || 0,
+    });
+    return [...filteredCodeOptions, ...categoryOptions, ...configOptions];
   };
 
   const allOptions = getAllOptions();
@@ -482,6 +590,45 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
 
   // 세부 타입별 렌더링
   const renderSelectByWebType = () => {
+    // 🆕 계층구조 코드: 자동 감지 또는 수동 설정 시 1,2,3단계 셀렉트박스로 렌더링
+    // 단, hierarchyRole이 설정된 경우(개별 컬럼별 계층구조)는 일반 셀렉트 사용
+    const shouldUseHierarchical = !hierarchyRole && (config?.useHierarchicalCode || hasHierarchicalCodes);
+
+    if (shouldUseHierarchical && codeCategory) {
+      const maxDepth = config?.hierarchicalMaxDepth || 3;
+      const labels = config?.hierarchicalLabels || ["대분류", "중분류", "소분류"];
+      const placeholders = config?.hierarchicalPlaceholders || ["선택하세요", "선택하세요", "선택하세요"];
+      const isInline = config?.hierarchicalInline || false;
+
+      return (
+        <HierarchicalCodeSelect
+          categoryCode={codeCategory}
+          menuObjid={menuObjid}
+          maxDepth={maxDepth}
+          value={selectedValue}
+          onChange={(codeValue: string) => {
+            setSelectedValue(codeValue);
+            // 라벨 업데이트 - 선택된 값을 라벨로도 설정 (계층구조에서는 값=라벨인 경우가 많음)
+            setSelectedLabel(codeValue);
+
+            // 디자인 모드에서의 컴포넌트 속성 업데이트
+            if (onUpdate) {
+              onUpdate("value", codeValue);
+            }
+
+            // 인터랙티브 모드에서 폼 데이터 업데이트
+            if (isInteractive && onFormDataChange && component.columnName) {
+              onFormDataChange(component.columnName, codeValue);
+            }
+          }}
+          labels={labels as [string, string?, string?]}
+          placeholders={placeholders as [string, string?, string?]}
+          className={isInline ? "flex-row gap-2" : "flex-col gap-2"}
+          disabled={isFieldDisabled}
+        />
+      );
+    }
+
     // code-radio: 라디오 버튼으로 코드 선택
     if (webType === "code-radio") {
       return (
@@ -527,7 +674,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
               !isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "bg-gray-100 cursor-not-allowed",
+              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
             )}
             readOnly={isFieldDisabled}
             disabled={isFieldDisabled}
@@ -565,7 +712,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               !isFieldDisabled && "cursor-pointer hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
               isOpen && "border-orange-500",
-              isFieldDisabled && "bg-gray-100 cursor-not-allowed",
+              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
             )}
             onClick={handleToggle}
             style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
@@ -612,7 +759,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               "box-border flex h-full w-full flex-wrap gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
               !isFieldDisabled && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "bg-gray-100 cursor-not-allowed",
+              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
             )}
           >
             {selectedValues.map((val, idx) => {
@@ -673,7 +820,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
               !isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "bg-gray-100 cursor-not-allowed",
+              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
             )}
             readOnly={isFieldDisabled}
             disabled={isFieldDisabled}
@@ -713,7 +860,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               !isFieldDisabled && "cursor-pointer hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
               isOpen && "border-orange-500",
-              isFieldDisabled && "bg-gray-100 cursor-not-allowed",
+              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
             )}
             onClick={handleToggle}
             style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
@@ -770,12 +917,12 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               "box-border flex w-full flex-wrap items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
               !isFieldDisabled && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "bg-gray-100 cursor-not-allowed",
+              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
             )}
             onClick={() => !isFieldDisabled && setIsOpen(true)}
             style={{
               pointerEvents: isFieldDisabled ? "none" : "auto",
-              height: "100%"
+              height: "100%",
             }}
           >
             {selectedValues.map((val, idx) => {
@@ -801,13 +948,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                 </span>
               );
             })}
-            {selectedValues.length === 0 && (
+            {selectedValues.length === 0 && <span className="text-gray-500">{placeholder}</span>}
-              <span className="text-gray-500">{placeholder}</span>
-            )}
           </div>
           {isOpen && !isFieldDisabled && (
             <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
-              {(isLoadingCodes || isLoadingCategories) ? (
+              {isLoadingCodes || isLoadingCategories ? (
                 <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
               ) : allOptions.length > 0 ? (
                 (() => {
@@ -829,7 +974,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                     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">
+                        <div className="sticky top-0 border-b bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600">
                           {group.parentLabel}
                         </div>
                         {/* 그룹 옵션들 */}
@@ -840,7 +985,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                               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"
+                                isOptionSelected && "bg-blue-50 font-medium",
                               )}
                               onClick={() => {
                                 const newVals = isOptionSelected
@@ -869,7 +1014,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                                       onFormDataChange(component.columnName, newValue);
                                     }
                                   }}
-                                  className="h-4 w-4 pointer-events-auto"
+                                  className="pointer-events-auto h-4 w-4"
                                 />
                                 <span>{option.label || option.value}</span>
                               </div>
@@ -888,7 +1033,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                         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"
+                          isOptionSelected && "bg-blue-50 font-medium",
                         )}
                         onClick={() => {
                           const newVals = isOptionSelected
@@ -917,7 +1062,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                                 onFormDataChange(component.columnName, newValue);
                               }
                             }}
-                            className="h-4 w-4 pointer-events-auto"
+                            className="pointer-events-auto h-4 w-4"
                           />
                           <span>{option.label || option.value}</span>
                         </div>
@@ -943,7 +1088,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             !isFieldDisabled && "cursor-pointer hover:border-orange-400",
             isSelected && "ring-2 ring-orange-500",
             isOpen && "border-orange-500",
-            isFieldDisabled && "bg-gray-100 cursor-not-allowed",
+            isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
           )}
           onClick={handleToggle}
           style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}

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

@@ -203,13 +203,11 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
   };
 
   // 선택된 관계 정보
-  const selectedRelation = relationList.find(r => r.relation_code === config.cascadingRelationCode);
+  const selectedRelation = relationList.find((r) => r.relation_code === config.cascadingRelationCode);
 
   return (
     <div className="space-y-4">
-      <div className="text-sm font-medium">
+      <div className="text-sm font-medium">select-basic 설정</div>
-        select-basic 설정
-      </div>
 
       {/* select 관련 설정 */}
       <div className="space-y-2">
@@ -259,23 +257,18 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
       </div>
 
       {/* 연쇄 드롭다운 설정 */}
-      <div className="border-t pt-4 mt-4 space-y-3">
+      <div className="mt-4 space-y-3 border-t pt-4">
         <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
+          <Switch checked={cascadingEnabled} onCheckedChange={handleCascadingToggle} />
-            checked={cascadingEnabled}
-            onCheckedChange={handleCascadingToggle}
-          />
         </div>
-        <p className="text-muted-foreground text-xs">
+        <p className="text-muted-foreground text-xs">다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.</p>
-          다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.
-        </p>
 
         {cascadingEnabled && (
-          <div className="space-y-3 rounded-md border p-3 bg-muted/30">
+          <div className="bg-muted/30 space-y-3 rounded-md border p-3">
             {/* 관계 선택 */}
             <div className="space-y-2">
               <Label className="text-xs">연쇄 관계 선택</Label>
@@ -336,7 +329,9 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
             )}
 
             {/* 부모 필드 설정 (자식 역할일 때만) */}
-            {config.cascadingRelationCode && config.cascadingRole === "child" && (() => {
+            {config.cascadingRelationCode &&
+              config.cascadingRole === "child" &&
+              (() => {
                 // 선택된 관계에서 부모 값 컬럼 가져오기
                 const expectedParentColumn = selectedRelation?.parent_value_column;
 
@@ -372,7 +367,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
                           </SelectItem>
                         ))}
                         {parentFieldCandidates.length === 0 && (
-                        <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                          <div className="text-muted-foreground px-2 py-1.5 text-xs">
                             {expectedParentColumn
                               ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
                               : "선택 가능한 부모 필드가 없습니다"}
@@ -380,9 +375,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
                         )}
                       </SelectContent>
                     </Select>
-                  <p className="text-muted-foreground text-xs">
+                    <p className="text-muted-foreground text-xs">상위 값을 제공할 필드를 선택하세요.</p>
-                    상위 값을 제공할 필드를 선택하세요.
-                  </p>
                   </div>
                 );
               })()}
@@ -436,24 +429,22 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
       </div>
 
       {/* 🆕 카테고리 값 연쇄관계 설정 */}
-      <div className="border-t pt-4 mt-4 space-y-3">
+      <div className="mt-4 space-y-3 border-t pt-4">
         <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
+          <Switch checked={categoryRelationEnabled} onCheckedChange={handleCategoryRelationToggle} />
-            checked={categoryRelationEnabled}
-            onCheckedChange={handleCategoryRelationToggle}
-          />
         </div>
         <p className="text-muted-foreground text-xs">
           부모 카테고리 값 선택에 따라 자식 카테고리 옵션이 변경됩니다.
-          <br />예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
+          <br />
+          예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
         </p>
 
         {categoryRelationEnabled && (
-          <div className="space-y-3 rounded-md border p-3 bg-muted/30">
+          <div className="bg-muted/30 space-y-3 rounded-md border p-3">
             {/* 관계 선택 */}
             <div className="space-y-2">
               <Label className="text-xs">카테고리 값 연쇄 관계 선택</Label>
@@ -470,7 +461,8 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
                       <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}
+                          {relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.
+                          {relation.child_column_name}
                         </span>
                       </div>
                     </SelectItem>
@@ -514,10 +506,12 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
             )}
 
             {/* 부모 필드 설정 (자식 역할일 때만) */}
-            {(config as any).categoryRelationCode && config.cascadingRole === "child" && (() => {
+            {(config as any).categoryRelationCode &&
+              config.cascadingRole === "child" &&
+              (() => {
                 // 선택된 관계 정보 가져오기
                 const selectedRelation = categoryRelationList.find(
-                (r) => r.relation_code === (config as any).categoryRelationCode
+                  (r) => r.relation_code === (config as any).categoryRelationCode,
                 );
                 const expectedParentColumn = selectedRelation?.parent_column_name;
 
@@ -553,7 +547,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
                           </SelectItem>
                         ))}
                         {parentFieldCandidates.length === 0 && (
-                        <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                          <div className="text-muted-foreground px-2 py-1.5 text-xs">
                             {expectedParentColumn
                               ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
                               : "선택 가능한 부모 필드가 없습니다"}
@@ -561,9 +555,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
                         )}
                       </SelectContent>
                     </Select>
-                  <p className="text-muted-foreground text-xs">
+                    <p className="text-muted-foreground text-xs">상위 카테고리 값을 제공할 필드를 선택하세요.</p>
-                    상위 카테고리 값을 제공할 필드를 선택하세요.
-                  </p>
                   </div>
                 );
               })()}
@@ -580,6 +572,118 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
           </div>
         )}
       </div>
+
+      {/* 계층구조 코드 설정 */}
+      <div className="mt-4 space-y-3 border-t pt-4">
+        <div className="flex items-center gap-2">
+          <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M12 2v4m0 12v4m-6-10H2m20 0h-4m-1.5-6.5L18 4m-12 0 1.5 1.5M6 18l-1.5 1.5M18 18l1.5 1.5" />
+          </svg>
+          <Label className="text-sm font-medium">계층구조 코드 설정</Label>
+        </div>
+        <div className="rounded border border-blue-200 bg-blue-50 p-2 text-xs text-blue-800">
+          공통코드에 계층구조(depth 2 이상)가 있으면 자동으로 대분류 → 중분류 → 소분류 셀렉트박스로 표시됩니다.
+        </div>
+
+        {/* 상세 설정 (항상 표시, 계층구조가 있을 때 적용됨) */}
+        <div className="bg-muted/30 space-y-3 rounded-md border p-3">
+          <p className="text-muted-foreground text-xs">계층구조 코드가 감지되면 아래 설정이 적용됩니다.</p>
+
+          {/* 코드 카테고리 선택 안내 */}
+          {!config.codeCategory && (
+            <div className="rounded border border-yellow-200 bg-yellow-50 p-2 text-xs text-yellow-800">
+              먼저 상단에서 코드 카테고리를 선택해주세요.
+            </div>
+          )}
+
+          {/* 최대 깊이 선택 */}
+          <div className="space-y-2">
+            <Label className="text-xs">최대 깊이</Label>
+            <Select
+              value={String(config.hierarchicalMaxDepth || 3)}
+              onValueChange={(value) => handleChange("hierarchicalMaxDepth", Number(value) as 1 | 2 | 3)}
+            >
+              <SelectTrigger className="text-xs">
+                <SelectValue placeholder="깊이 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">1단계만</SelectItem>
+                <SelectItem value="2">2단계까지</SelectItem>
+                <SelectItem value="3">3단계까지</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground text-xs">표시할 계층의 최대 깊이를 선택하세요.</p>
+          </div>
+
+          {/* 1단계 라벨 */}
+          <div className="space-y-2">
+            <Label className="text-xs">1단계 라벨</Label>
+            <Input
+              value={config.hierarchicalLabels?.[0] || ""}
+              onChange={(e) => {
+                const newLabels: [string, string?, string?] = [
+                  e.target.value,
+                  config.hierarchicalLabels?.[1],
+                  config.hierarchicalLabels?.[2],
+                ];
+                handleChange("hierarchicalLabels", newLabels);
+              }}
+              placeholder="예: 대분류"
+              className="h-8 text-xs"
+            />
+          </div>
+
+          {/* 2단계 라벨 */}
+          {(config.hierarchicalMaxDepth || 3) >= 2 && (
+            <div className="space-y-2">
+              <Label className="text-xs">2단계 라벨</Label>
+              <Input
+                value={config.hierarchicalLabels?.[1] || ""}
+                onChange={(e) => {
+                  const newLabels: [string, string?, string?] = [
+                    config.hierarchicalLabels?.[0] || "대분류",
+                    e.target.value,
+                    config.hierarchicalLabels?.[2],
+                  ];
+                  handleChange("hierarchicalLabels", newLabels);
+                }}
+                placeholder="예: 중분류"
+                className="h-8 text-xs"
+              />
+            </div>
+          )}
+
+          {/* 3단계 라벨 */}
+          {(config.hierarchicalMaxDepth || 3) >= 3 && (
+            <div className="space-y-2">
+              <Label className="text-xs">3단계 라벨</Label>
+              <Input
+                value={config.hierarchicalLabels?.[2] || ""}
+                onChange={(e) => {
+                  const newLabels: [string, string?, string?] = [
+                    config.hierarchicalLabels?.[0] || "대분류",
+                    config.hierarchicalLabels?.[1] || "중분류",
+                    e.target.value,
+                  ];
+                  handleChange("hierarchicalLabels", newLabels);
+                }}
+                placeholder="예: 소분류"
+                className="h-8 text-xs"
+              />
+            </div>
+          )}
+
+          {/* 인라인 표시 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">가로 배치</Label>
+            <Switch
+              checked={config.hierarchicalInline || false}
+              onCheckedChange={(checked) => handleChange("hierarchicalInline", checked)}
+            />
+          </div>
+          <p className="text-muted-foreground text-xs">셀렉트박스를 가로로 나란히 표시합니다.</p>
+        </div>
+      </div>
     </div>
   );
 };

frontend/lib/registry/components/select-basic/types.ts

@@ -22,6 +22,24 @@ export interface SelectBasicConfig extends ComponentConfig {
   /** 부모 필드명 (자식 역할일 때, 화면 내 부모 필드의 columnName) */
   cascadingParentField?: string;
   
+  // 🆕 계층구조 코드 설정
+  /** 계층구조 코드 사용 여부 */
+  useHierarchicalCode?: boolean;
+  /** 계층구조 최대 깊이 (1, 2, 3) */
+  hierarchicalMaxDepth?: 1 | 2 | 3;
+  /** 각 단계별 라벨 */
+  hierarchicalLabels?: [string, string?, string?];
+  /** 각 단계별 placeholder */
+  hierarchicalPlaceholders?: [string, string?, string?];
+  /** 가로 배열 여부 */
+  hierarchicalInline?: boolean;
+
+  // 🆕 다중 컬럼 계층구조 설정 (테이블 타입관리에서 설정)
+  /** 계층 역할: 대분류(large), 중분류(medium), 소분류(small) */
+  hierarchyRole?: "large" | "medium" | "small";
+  /** 상위 계층 필드명 (중분류는 대분류 필드명, 소분류는 중분류 필드명) */
+  hierarchyParentField?: string;
+
   // 공통 설정
   disabled?: boolean;
   required?: boolean;

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -2030,8 +2030,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         className="border-border flex flex-shrink-0 flex-col border-r"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
-          <CardHeader className="border-b pb-3">
+          <CardHeader 
-            <div className="flex items-center justify-between">
+            className="flex-shrink-0 border-b"
+            style={{ 
+              height: componentConfig.leftPanel?.panelHeaderHeight || 48,
+              minHeight: componentConfig.leftPanel?.panelHeaderHeight || 48,
+              padding: '0 1rem',
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
                 {componentConfig.leftPanel?.title || "좌측 패널"}
               </CardTitle>
@@ -2042,8 +2051,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 </Button>
               )}
             </div>
+          </CardHeader>
           {componentConfig.leftPanel?.showSearch && (
-              <div className="relative mt-2">
+            <div className="flex-shrink-0 border-b p-2">
+              <div className="relative">
                 <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                 <Input
                   placeholder="검색..."
@@ -2052,8 +2063,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   className="pl-9"
                 />
               </div>
+            </div>
           )}
-          </CardHeader>
           <CardContent className="flex-1 overflow-auto p-4">
             {/* 좌측 데이터 목록/테이블 */}
             {componentConfig.leftPanel?.displayMode === "table" ? (
@@ -2510,8 +2521,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         className="flex flex-shrink-0 flex-col"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
-          <CardHeader className="border-b pb-3">
+          <CardHeader 
-            <div className="flex items-center justify-between">
+            className="flex-shrink-0 border-b"
+            style={{ 
+              height: componentConfig.rightPanel?.panelHeaderHeight || 48,
+              minHeight: componentConfig.rightPanel?.panelHeaderHeight || 48,
+              padding: '0 1rem',
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
                 {componentConfig.rightPanel?.title || "우측 패널"}
               </CardTitle>
@@ -2527,8 +2547,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 </div>
               )}
             </div>
+          </CardHeader>
           {componentConfig.rightPanel?.showSearch && (
-              <div className="relative mt-2">
+            <div className="flex-shrink-0 border-b p-2">
+              <div className="relative">
                 <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                 <Input
                   placeholder="검색..."
@@ -2537,8 +2559,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   className="pl-9"
                 />
               </div>
+            </div>
           )}
-          </CardHeader>
           <CardContent className="flex-1 overflow-auto p-4">
             {/* 우측 데이터 */}
             {isLoadingRight ? (

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx

@@ -602,6 +602,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           />
         </div>
 
+        <div className="space-y-2">
+          <Label>헤더 높이 (px)</Label>
+          <Input
+            type="number"
+            value={config.leftPanel?.panelHeaderHeight || 48}
+            onChange={(e) => updateLeftPanel({ panelHeaderHeight: parseInt(e.target.value) || 48 })}
+            placeholder="48"
+            min={32}
+            max={120}
+          />
+          <p className="text-xs text-muted-foreground">패널 상단 헤더의 높이 (기본: 48px)</p>
+        </div>
+
         <div className="space-y-2">
           <Label>테이블 (현재 화면 고정)</Label>
           <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
@@ -1486,6 +1499,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           />
         </div>
 
+        <div className="space-y-2">
+          <Label>헤더 높이 (px)</Label>
+          <Input
+            type="number"
+            value={config.rightPanel?.panelHeaderHeight || 48}
+            onChange={(e) => updateRightPanel({ panelHeaderHeight: parseInt(e.target.value) || 48 })}
+            placeholder="48"
+            min={32}
+            max={120}
+          />
+          <p className="text-xs text-muted-foreground">패널 상단 헤더의 높이 (기본: 48px)</p>
+        </div>
+
         {/* 관계 타입에 따라 테이블 선택 UI 변경 */}
         {relationshipType === "detail" ? (
           // 상세 모드: 좌측과 동일한 테이블 (자동 설정)

frontend/lib/registry/components/split-panel-layout/types.ts

@@ -8,6 +8,7 @@ export interface SplitPanelLayoutConfig {
   // 좌측 패널 설정
   leftPanel: {
     title: string;
+    panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
     tableName?: string; // 데이터베이스 테이블명
     dataSource?: string; // API 엔드포인트
     displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
@@ -70,6 +71,7 @@ export interface SplitPanelLayoutConfig {
   // 우측 패널 설정
   rightPanel: {
     title: string;
+    panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
     tableName?: string;
     dataSource?: string;
     displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블

frontend/lib/registry/components/split-panel-layout2/ActionButtonConfigModal.tsx

@@ -0,0 +1,674 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Plus, GripVertical, Settings, X, Check, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import type { ActionButtonConfig, ModalParamMapping, ColumnConfig } from "./types";
+
+interface ScreenInfo {
+  screen_id: number;
+  screen_name: string;
+  screen_code: string;
+}
+
+// 정렬 가능한 버튼 아이템
+const SortableButtonItem: React.FC<{
+  id: string;
+  button: ActionButtonConfig;
+  index: number;
+  onSettingsClick: () => void;
+  onRemove: () => void;
+}> = ({ id, button, index, onSettingsClick, onRemove }) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const getVariantColor = (variant?: string) => {
+    switch (variant) {
+      case "destructive":
+        return "bg-destructive/10 text-destructive";
+      case "outline":
+        return "bg-background border";
+      case "ghost":
+        return "bg-muted/50";
+      case "secondary":
+        return "bg-secondary text-secondary-foreground";
+      default:
+        return "bg-primary/10 text-primary";
+    }
+  };
+
+  const getActionLabel = (action?: string) => {
+    switch (action) {
+      case "add":
+        return "추가";
+      case "edit":
+        return "수정";
+      case "delete":
+        return "삭제";
+      case "bulk-delete":
+        return "일괄삭제";
+      case "api":
+        return "API";
+      case "custom":
+        return "커스텀";
+      default:
+        return "추가";
+    }
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn("flex items-center gap-2 rounded-md border bg-card p-3", isDragging && "opacity-50 shadow-lg")}
+    >
+      {/* 드래그 핸들 */}
+      <div {...attributes} {...listeners} className="cursor-grab touch-none text-muted-foreground hover:text-foreground">
+        <GripVertical className="h-4 w-4" />
+      </div>
+
+      {/* 버튼 정보 */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className={cn("px-2 py-0.5 rounded text-xs font-medium", getVariantColor(button.variant))}>
+            {button.label || `버튼 ${index + 1}`}
+          </span>
+        </div>
+        <div className="flex flex-wrap gap-1 mt-1">
+          <Badge variant="outline" className="text-[10px] h-4">
+            {getActionLabel(button.action)}
+          </Badge>
+          {button.icon && (
+            <Badge variant="secondary" className="text-[10px] h-4">
+              {button.icon}
+            </Badge>
+          )}
+          {button.showCondition && button.showCondition !== "always" && (
+            <Badge variant="secondary" className="text-[10px] h-4">
+              {button.showCondition === "selected" ? "선택시만" : "미선택시만"}
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* 액션 버튼들 */}
+      <div className="flex items-center gap-1 shrink-0">
+        <Button size="sm" variant="ghost" className="h-7 w-7 p-0" onClick={onSettingsClick} title="세부설정">
+          <Settings className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+          onClick={onRemove}
+          title="삭제"
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+interface ActionButtonConfigModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  actionButtons: ActionButtonConfig[];
+  displayColumns?: ColumnConfig[]; // 모달 파라미터 매핑용
+  onSave: (buttons: ActionButtonConfig[]) => void;
+  side: "left" | "right";
+}
+
+export const ActionButtonConfigModal: React.FC<ActionButtonConfigModalProps> = ({
+  open,
+  onOpenChange,
+  actionButtons: initialButtons,
+  displayColumns = [],
+  onSave,
+  side,
+}) => {
+  // 로컬 상태
+  const [buttons, setButtons] = useState<ActionButtonConfig[]>([]);
+
+  // 버튼 세부설정 모달
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [editingButtonIndex, setEditingButtonIndex] = useState<number | null>(null);
+  const [editingButton, setEditingButton] = useState<ActionButtonConfig | null>(null);
+
+  // 화면 목록
+  const [screens, setScreens] = useState<ScreenInfo[]>([]);
+  const [screensLoading, setScreensLoading] = useState(false);
+  const [screenSelectOpen, setScreenSelectOpen] = useState(false);
+
+  // 드래그 센서
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // 초기값 설정
+  useEffect(() => {
+    if (open) {
+      setButtons(initialButtons || []);
+    }
+  }, [open, initialButtons]);
+
+  // 화면 목록 로드
+  const loadScreens = useCallback(async () => {
+    setScreensLoading(true);
+    try {
+      const response = await apiClient.get("/screen-management/screens?size=1000");
+
+      let screenList: any[] = [];
+      if (response.data?.success && Array.isArray(response.data?.data)) {
+        screenList = response.data.data;
+      } else if (Array.isArray(response.data?.data)) {
+        screenList = response.data.data;
+      }
+
+      const transformedScreens = screenList.map((s: any) => ({
+        screen_id: s.screenId ?? s.screen_id ?? s.id,
+        screen_name: s.screenName ?? s.screen_name ?? s.name ?? `화면 ${s.screenId || s.screen_id || s.id}`,
+        screen_code: s.screenCode ?? s.screen_code ?? s.code ?? "",
+      }));
+
+      setScreens(transformedScreens);
+    } catch (error) {
+      console.error("화면 목록 로드 실패:", error);
+      setScreens([]);
+    } finally {
+      setScreensLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      loadScreens();
+    }
+  }, [open, loadScreens]);
+
+  // 드래그 종료 핸들러
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = buttons.findIndex((btn) => btn.id === active.id);
+      const newIndex = buttons.findIndex((btn) => btn.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setButtons(arrayMove(buttons, oldIndex, newIndex));
+      }
+    }
+  };
+
+  // 버튼 추가
+  const handleAddButton = () => {
+    const newButton: ActionButtonConfig = {
+      id: `btn-${Date.now()}`,
+      label: "새 버튼",
+      variant: "default",
+      action: "add",
+      showCondition: "always",
+    };
+    setButtons([...buttons, newButton]);
+  };
+
+  // 버튼 삭제
+  const handleRemoveButton = (index: number) => {
+    setButtons(buttons.filter((_, i) => i !== index));
+  };
+
+  // 버튼 업데이트
+  const handleUpdateButton = (index: number, updates: Partial<ActionButtonConfig>) => {
+    const newButtons = [...buttons];
+    newButtons[index] = { ...newButtons[index], ...updates };
+    setButtons(newButtons);
+  };
+
+  // 버튼 세부설정 열기
+  const handleOpenDetailSettings = (index: number) => {
+    setEditingButtonIndex(index);
+    setEditingButton({ ...buttons[index] });
+    setDetailModalOpen(true);
+  };
+
+  // 버튼 세부설정 저장
+  const handleSaveDetailSettings = () => {
+    if (editingButtonIndex !== null && editingButton) {
+      handleUpdateButton(editingButtonIndex, editingButton);
+    }
+    setDetailModalOpen(false);
+    setEditingButtonIndex(null);
+    setEditingButton(null);
+  };
+
+  // 저장
+  const handleSave = () => {
+    onSave(buttons);
+    onOpenChange(false);
+  };
+
+  // 선택된 화면 정보
+  const getScreenInfo = (screenId?: number) => {
+    return screens.find((s) => s.screen_id === screenId);
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] flex flex-col">
+          <DialogHeader>
+            <DialogTitle>
+              {side === "left" ? "좌측" : "우측"} 패널 액션 버튼 설정
+            </DialogTitle>
+            <DialogDescription>
+              버튼을 추가하고 순서를 드래그로 변경할 수 있습니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-hidden flex flex-col">
+            <div className="flex items-center justify-between mb-3">
+              <Label className="text-sm font-medium">
+                액션 버튼 ({buttons.length}개)
+              </Label>
+              <Button size="sm" variant="outline" onClick={handleAddButton}>
+                <Plus className="mr-1 h-4 w-4" />
+                버튼 추가
+              </Button>
+            </div>
+
+            <ScrollArea className="flex-1 pr-4">
+              {buttons.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-center">
+                  <p className="text-muted-foreground text-sm mb-2">
+                    액션 버튼이 없습니다
+                  </p>
+                  <Button size="sm" variant="outline" onClick={handleAddButton}>
+                    <Plus className="mr-1 h-4 w-4" />
+                    첫 번째 버튼 추가
+                  </Button>
+                </div>
+              ) : (
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleDragEnd}
+                >
+                  <SortableContext
+                    items={buttons.map((btn) => btn.id)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    <div className="space-y-2">
+                      {buttons.map((btn, index) => (
+                        <SortableButtonItem
+                          key={btn.id}
+                          id={btn.id}
+                          button={btn}
+                          index={index}
+                          onSettingsClick={() => handleOpenDetailSettings(index)}
+                          onRemove={() => handleRemoveButton(index)}
+                        />
+                      ))}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              )}
+            </ScrollArea>
+          </div>
+
+          <DialogFooter className="mt-4">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSave}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 버튼 세부설정 모달 */}
+      <Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[85vh]">
+          <DialogHeader>
+            <DialogTitle>버튼 세부설정</DialogTitle>
+            <DialogDescription>
+              {editingButton?.label || "버튼"}의 동작을 설정합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          {editingButton && (
+            <ScrollArea className="max-h-[60vh]">
+              <div className="space-y-4 pr-4">
+                {/* 기본 설정 */}
+                <div className="space-y-3 p-3 border rounded-lg">
+                  <h4 className="text-sm font-medium">기본 설정</h4>
+
+                  <div>
+                    <Label className="text-xs">버튼 라벨</Label>
+                    <Input
+                      value={editingButton.label}
+                      onChange={(e) =>
+                        setEditingButton({ ...editingButton, label: e.target.value })
+                      }
+                      placeholder="버튼 라벨"
+                      className="mt-1 h-9"
+                    />
+                  </div>
+
+                  <div>
+                    <Label className="text-xs">버튼 스타일</Label>
+                    <Select
+                      value={editingButton.variant || "default"}
+                      onValueChange={(value) =>
+                        setEditingButton({
+                          ...editingButton,
+                          variant: value as ActionButtonConfig["variant"],
+                        })
+                      }
+                    >
+                      <SelectTrigger className="mt-1 h-9">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="default">기본 (Primary)</SelectItem>
+                        <SelectItem value="secondary">보조 (Secondary)</SelectItem>
+                        <SelectItem value="outline">외곽선</SelectItem>
+                        <SelectItem value="ghost">투명</SelectItem>
+                        <SelectItem value="destructive">삭제 (빨간색)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <Label className="text-xs">아이콘</Label>
+                    <Select
+                      value={editingButton.icon || "none"}
+                      onValueChange={(value) =>
+                        setEditingButton({
+                          ...editingButton,
+                          icon: value === "none" ? undefined : value,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="mt-1 h-9">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">없음</SelectItem>
+                        <SelectItem value="Plus">+ (추가)</SelectItem>
+                        <SelectItem value="Edit">수정</SelectItem>
+                        <SelectItem value="Trash2">삭제</SelectItem>
+                        <SelectItem value="Download">다운로드</SelectItem>
+                        <SelectItem value="Upload">업로드</SelectItem>
+                        <SelectItem value="RefreshCw">새로고침</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <Label className="text-xs">표시 조건</Label>
+                    <Select
+                      value={editingButton.showCondition || "always"}
+                      onValueChange={(value) =>
+                        setEditingButton({
+                          ...editingButton,
+                          showCondition: value as ActionButtonConfig["showCondition"],
+                        })
+                      }
+                    >
+                      <SelectTrigger className="mt-1 h-9">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="always">항상 표시</SelectItem>
+                        <SelectItem value="selected">선택 시만 표시</SelectItem>
+                        <SelectItem value="notSelected">미선택 시만 표시</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                {/* 동작 설정 */}
+                <div className="space-y-3 p-3 border rounded-lg">
+                  <h4 className="text-sm font-medium">동작 설정</h4>
+
+                  <div>
+                    <Label className="text-xs">동작 유형</Label>
+                    <Select
+                      value={editingButton.action || "add"}
+                      onValueChange={(value) =>
+                        setEditingButton({
+                          ...editingButton,
+                          action: value as ActionButtonConfig["action"],
+                        })
+                      }
+                    >
+                      <SelectTrigger className="mt-1 h-9">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="add">추가 (모달 열기)</SelectItem>
+                        <SelectItem value="edit">수정 (선택 항목)</SelectItem>
+                        <SelectItem value="delete">삭제 (선택 항목)</SelectItem>
+                        <SelectItem value="bulk-delete">일괄 삭제 (체크된 항목)</SelectItem>
+                        <SelectItem value="api">API 호출</SelectItem>
+                        <SelectItem value="custom">커스텀 액션</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 모달 설정 (add, edit 액션) */}
+                  {(editingButton.action === "add" || editingButton.action === "edit") && (
+                    <div>
+                      <Label className="text-xs">모달 화면</Label>
+                      <Popover open={screenSelectOpen} onOpenChange={setScreenSelectOpen}>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            className="mt-1 h-9 w-full justify-between"
+                            disabled={screensLoading}
+                          >
+                            {screensLoading
+                              ? "로딩 중..."
+                              : editingButton.modalScreenId
+                                ? getScreenInfo(editingButton.modalScreenId)?.screen_name ||
+                                  `화면 ${editingButton.modalScreenId}`
+                                : "화면 선택"}
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-full p-0" align="start">
+                          <Command>
+                            <CommandInput placeholder="화면 검색..." className="h-9" />
+                            <CommandList>
+                              <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                              <CommandGroup>
+                                {screens.map((screen) => (
+                                  <CommandItem
+                                    key={screen.screen_id}
+                                    value={`${screen.screen_id}-${screen.screen_name}`}
+                                    onSelect={() => {
+                                      setEditingButton({
+                                        ...editingButton,
+                                        modalScreenId: screen.screen_id,
+                                      });
+                                      setScreenSelectOpen(false);
+                                    }}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-4 w-4",
+                                        editingButton.modalScreenId === screen.screen_id
+                                          ? "opacity-100"
+                                          : "opacity-0"
+                                      )}
+                                    />
+                                    <span className="flex flex-col">
+                                      <span>{screen.screen_name}</span>
+                                      <span className="text-xs text-muted-foreground">
+                                        {screen.screen_code}
+                                      </span>
+                                    </span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  )}
+
+                  {/* API 설정 */}
+                  {editingButton.action === "api" && (
+                    <>
+                      <div>
+                        <Label className="text-xs">API 엔드포인트</Label>
+                        <Input
+                          value={editingButton.apiEndpoint || ""}
+                          onChange={(e) =>
+                            setEditingButton({
+                              ...editingButton,
+                              apiEndpoint: e.target.value,
+                            })
+                          }
+                          placeholder="/api/example"
+                          className="mt-1 h-9"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-xs">HTTP 메서드</Label>
+                        <Select
+                          value={editingButton.apiMethod || "POST"}
+                          onValueChange={(value) =>
+                            setEditingButton({
+                              ...editingButton,
+                              apiMethod: value as ActionButtonConfig["apiMethod"],
+                            })
+                          }
+                        >
+                          <SelectTrigger className="mt-1 h-9">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="GET">GET</SelectItem>
+                            <SelectItem value="POST">POST</SelectItem>
+                            <SelectItem value="PUT">PUT</SelectItem>
+                            <SelectItem value="DELETE">DELETE</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </>
+                  )}
+
+                  {/* 확인 메시지 (삭제 계열) */}
+                  {(editingButton.action === "delete" ||
+                    editingButton.action === "bulk-delete" ||
+                    (editingButton.action === "api" && editingButton.apiMethod === "DELETE")) && (
+                    <div>
+                      <Label className="text-xs">확인 메시지</Label>
+                      <Input
+                        value={editingButton.confirmMessage || ""}
+                        onChange={(e) =>
+                          setEditingButton({
+                            ...editingButton,
+                            confirmMessage: e.target.value,
+                          })
+                        }
+                        placeholder="정말 삭제하시겠습니까?"
+                        className="mt-1 h-9"
+                      />
+                    </div>
+                  )}
+
+                  {/* 커스텀 액션 ID */}
+                  {editingButton.action === "custom" && (
+                    <div>
+                      <Label className="text-xs">커스텀 액션 ID</Label>
+                      <Input
+                        value={editingButton.customActionId || ""}
+                        onChange={(e) =>
+                          setEditingButton({
+                            ...editingButton,
+                            customActionId: e.target.value,
+                          })
+                        }
+                        placeholder="customAction1"
+                        className="mt-1 h-9"
+                      />
+                      <p className="text-xs text-muted-foreground mt-1">
+                        커스텀 이벤트 핸들러에서 이 ID로 버튼을 구분합니다
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+              </div>
+            </ScrollArea>
+          )}
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSaveDetailSettings}>적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default ActionButtonConfigModal;
+

frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx

@@ -0,0 +1,805 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { Plus, Settings2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { entityJoinApi } from "@/lib/api/entityJoin";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { ColumnConfig, SearchColumnConfig, GroupingConfig, ColumnDisplayConfig, EntityReferenceConfig } from "./types";
+import { SortableColumnItem } from "./components/SortableColumnItem";
+import { SearchableColumnSelect } from "./components/SearchableColumnSelect";
+
+interface ColumnInfo {
+  column_name: string;
+  data_type: string;
+  column_comment?: string;
+  input_type?: string;
+  web_type?: string;
+  reference_table?: string;
+  reference_column?: string;
+}
+
+// 참조 테이블 컬럼 정보
+interface ReferenceColumnInfo {
+  columnName: string;
+  displayName: string;
+  dataType: string;
+}
+
+interface ColumnConfigModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  tableName: string;
+  displayColumns: ColumnConfig[];
+  searchColumns?: SearchColumnConfig[];
+  grouping?: GroupingConfig;
+  showSearch?: boolean;
+  onSave: (config: {
+    displayColumns: ColumnConfig[];
+    searchColumns: SearchColumnConfig[];
+    grouping: GroupingConfig;
+    showSearch: boolean;
+  }) => void;
+  side: "left" | "right"; // 좌측/우측 패널 구분
+}
+
+export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
+  open,
+  onOpenChange,
+  tableName,
+  displayColumns: initialDisplayColumns,
+  searchColumns: initialSearchColumns,
+  grouping: initialGrouping,
+  showSearch: initialShowSearch,
+  onSave,
+  side,
+}) => {
+  // 로컬 상태 (모달 내에서만 사용, 저장 시 부모로 전달)
+  const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]);
+  const [searchColumns, setSearchColumns] = useState<SearchColumnConfig[]>([]);
+  const [grouping, setGrouping] = useState<GroupingConfig>({ enabled: false, groupByColumn: "" });
+  const [showSearch, setShowSearch] = useState(false);
+
+  // 컬럼 세부설정 모달
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [editingColumnIndex, setEditingColumnIndex] = useState<number | null>(null);
+  const [editingColumn, setEditingColumn] = useState<ColumnConfig | null>(null);
+
+  // 테이블 컬럼 목록
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+
+  // 엔티티 참조 관련 상태
+  const [entityReferenceColumns, setEntityReferenceColumns] = useState<Map<string, ReferenceColumnInfo[]>>(new Map());
+  const [loadingEntityColumns, setLoadingEntityColumns] = useState<Set<string>>(new Set());
+
+  // 드래그 센서
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // 초기값 설정
+  useEffect(() => {
+    if (open) {
+      setDisplayColumns(initialDisplayColumns || []);
+      setSearchColumns(initialSearchColumns || []);
+      setGrouping(initialGrouping || { enabled: false, groupByColumn: "" });
+      setShowSearch(initialShowSearch || false);
+    }
+  }, [open, initialDisplayColumns, initialSearchColumns, initialGrouping, initialShowSearch]);
+
+  // 테이블 컬럼 로드 (entity 타입 정보 포함)
+  const loadColumns = useCallback(async () => {
+    if (!tableName) {
+      setColumns([]);
+      return;
+    }
+
+    setColumnsLoading(true);
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
+
+      let columnList: any[] = [];
+      if (response.data?.success && response.data?.data?.columns) {
+        columnList = response.data.data.columns;
+      } else if (Array.isArray(response.data?.data?.columns)) {
+        columnList = response.data.data.columns;
+      } else if (Array.isArray(response.data?.data)) {
+        columnList = response.data.data;
+      }
+
+      // entity 타입 정보를 포함하여 변환
+      const transformedColumns = columnList.map((c: any) => ({
+        column_name: c.columnName ?? c.column_name ?? c.name ?? "",
+        data_type: c.dataType ?? c.data_type ?? c.type ?? "",
+        column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
+        input_type: c.inputType ?? c.input_type ?? "",
+        web_type: c.webType ?? c.web_type ?? "",
+        reference_table: c.referenceTable ?? c.reference_table ?? "",
+        reference_column: c.referenceColumn ?? c.reference_column ?? "",
+      }));
+
+      setColumns(transformedColumns);
+    } catch (error) {
+      console.error("컬럼 목록 로드 실패:", error);
+      setColumns([]);
+    } finally {
+      setColumnsLoading(false);
+    }
+  }, [tableName]);
+
+  // 엔티티 참조 테이블의 컬럼 목록 로드
+  const loadEntityReferenceColumns = useCallback(async (columnName: string, referenceTable: string) => {
+    if (!referenceTable || entityReferenceColumns.has(columnName)) {
+      return;
+    }
+
+    setLoadingEntityColumns(prev => new Set(prev).add(columnName));
+    try {
+      const result = await entityJoinApi.getReferenceTableColumns(referenceTable);
+      if (result?.columns) {
+        setEntityReferenceColumns(prev => {
+          const newMap = new Map(prev);
+          newMap.set(columnName, result.columns);
+          return newMap;
+        });
+      }
+    } catch (error) {
+      console.error(`엔티티 참조 컬럼 로드 실패 (${referenceTable}):`, error);
+    } finally {
+      setLoadingEntityColumns(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(columnName);
+        return newSet;
+      });
+    }
+  }, [entityReferenceColumns]);
+
+  useEffect(() => {
+    if (open && tableName) {
+      loadColumns();
+    }
+  }, [open, tableName, loadColumns]);
+
+  // 드래그 종료 핸들러
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === active.id);
+      const newIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setDisplayColumns(arrayMove(displayColumns, oldIndex, newIndex));
+      }
+    }
+  };
+
+  // 컬럼 추가
+  const handleAddColumn = () => {
+    setDisplayColumns([
+      ...displayColumns,
+      {
+        name: "",
+        label: "",
+        displayRow: side === "left" ? "name" : "info",
+        sourceTable: tableName,
+      },
+    ]);
+  };
+
+  // 컬럼 삭제
+  const handleRemoveColumn = (index: number) => {
+    setDisplayColumns(displayColumns.filter((_, i) => i !== index));
+  };
+
+  // 컬럼 업데이트 (entity 타입이면 참조 테이블 컬럼도 로드)
+  const handleUpdateColumn = (index: number, updates: Partial<ColumnConfig>) => {
+    const newColumns = [...displayColumns];
+    newColumns[index] = { ...newColumns[index], ...updates };
+    setDisplayColumns(newColumns);
+
+    // 컬럼명이 변경된 경우 entity 타입인지 확인하고 참조 테이블 컬럼 로드
+    if (updates.name) {
+      const columnInfo = columns.find(c => c.column_name === updates.name);
+      if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
+        if (columnInfo.reference_table) {
+          loadEntityReferenceColumns(updates.name, columnInfo.reference_table);
+        }
+      }
+    }
+  };
+
+  // 컬럼 세부설정 열기 (entity 타입이면 참조 테이블 컬럼도 로드)
+  const handleOpenDetailSettings = (index: number) => {
+    const column = displayColumns[index];
+    setEditingColumnIndex(index);
+    setEditingColumn({ ...column });
+    setDetailModalOpen(true);
+
+    // entity 타입인지 확인하고 참조 테이블 컬럼 로드
+    if (column.name) {
+      const columnInfo = columns.find(c => c.column_name === column.name);
+      if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
+        if (columnInfo.reference_table) {
+          loadEntityReferenceColumns(column.name, columnInfo.reference_table);
+        }
+      }
+    }
+  };
+
+  // 컬럼 세부설정 저장
+  const handleSaveDetailSettings = () => {
+    if (editingColumnIndex !== null && editingColumn) {
+      handleUpdateColumn(editingColumnIndex, editingColumn);
+    }
+    setDetailModalOpen(false);
+    setEditingColumnIndex(null);
+    setEditingColumn(null);
+  };
+
+  // 검색 컬럼 추가
+  const handleAddSearchColumn = () => {
+    setSearchColumns([...searchColumns, { columnName: "", label: "" }]);
+  };
+
+  // 검색 컬럼 삭제
+  const handleRemoveSearchColumn = (index: number) => {
+    setSearchColumns(searchColumns.filter((_, i) => i !== index));
+  };
+
+  // 검색 컬럼 업데이트
+  const handleUpdateSearchColumn = (index: number, columnName: string) => {
+    const newColumns = [...searchColumns];
+    newColumns[index] = { ...newColumns[index], columnName };
+    setSearchColumns(newColumns);
+  };
+
+  // 저장
+  const handleSave = () => {
+    onSave({
+      displayColumns,
+      searchColumns,
+      grouping,
+      showSearch,
+    });
+    onOpenChange(false);
+  };
+
+  // 엔티티 표시 컬럼 토글
+  const toggleEntityDisplayColumn = (selectedColumn: string) => {
+    if (!editingColumn) return;
+    
+    const currentDisplayColumns = editingColumn.entityReference?.displayColumns || [];
+    const newDisplayColumns = currentDisplayColumns.includes(selectedColumn)
+      ? currentDisplayColumns.filter(col => col !== selectedColumn)
+      : [...currentDisplayColumns, selectedColumn];
+    
+    setEditingColumn({
+      ...editingColumn,
+      entityReference: {
+        ...editingColumn.entityReference,
+        displayColumns: newDisplayColumns,
+      } as EntityReferenceConfig,
+    });
+  };
+
+  // 현재 편집 중인 컬럼이 entity 타입인지 확인
+  const getEditingColumnEntityInfo = useCallback(() => {
+    if (!editingColumn?.name) return null;
+    const columnInfo = columns.find(c => c.column_name === editingColumn.name);
+    if (!columnInfo) return null;
+    if (columnInfo.input_type !== 'entity' && columnInfo.web_type !== 'entity') return null;
+    return {
+      referenceTable: columnInfo.reference_table || '',
+      referenceColumns: entityReferenceColumns.get(editingColumn.name) || [],
+      isLoading: loadingEntityColumns.has(editingColumn.name),
+    };
+  }, [editingColumn, columns, entityReferenceColumns, loadingEntityColumns]);
+
+  // 이미 선택된 컬럼명 목록 (중복 선택 방지용)
+  const selectedColumnNames = displayColumns.map((col) => col.name).filter(Boolean);
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="flex h-[80vh] max-w-[95vw] flex-col overflow-hidden sm:max-w-[700px]">
+          <DialogHeader className="shrink-0">
+            <DialogTitle className="flex items-center gap-2">
+              <Settings2 className="h-5 w-5" />
+              {side === "left" ? "좌측" : "우측"} 패널 컬럼 설정
+            </DialogTitle>
+            <DialogDescription>
+              표시할 컬럼을 추가하고 순서를 드래그로 변경할 수 있습니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs defaultValue="columns" className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <TabsList className="grid w-full shrink-0 grid-cols-3">
+              <TabsTrigger value="columns">표시 컬럼</TabsTrigger>
+              <TabsTrigger value="grouping" disabled={side === "right"}>
+                그룹핑
+              </TabsTrigger>
+              <TabsTrigger value="search">검색</TabsTrigger>
+            </TabsList>
+
+            {/* 표시 컬럼 탭 */}
+            <TabsContent value="columns" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
+              <div className="flex shrink-0 items-center justify-between mb-3">
+                <Label className="text-sm font-medium">
+                  표시할 컬럼 ({displayColumns.length}개)
+                </Label>
+                <Button size="sm" variant="outline" onClick={handleAddColumn}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  컬럼 추가
+                </Button>
+              </div>
+
+              <ScrollArea className="min-h-0 flex-1">
+                <div className="pr-4">
+                  {displayColumns.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                      <p className="text-muted-foreground text-sm mb-2">
+                        표시할 컬럼이 없습니다
+                      </p>
+                      <Button size="sm" variant="outline" onClick={handleAddColumn}>
+                        <Plus className="mr-1 h-4 w-4" />
+                        첫 번째 컬럼 추가
+                      </Button>
+                    </div>
+                  ) : (
+                    <DndContext
+                      sensors={sensors}
+                      collisionDetection={closestCenter}
+                      onDragEnd={handleDragEnd}
+                    >
+                      <SortableContext
+                        items={displayColumns.map((_, idx) => `col-${idx}`)}
+                        strategy={verticalListSortingStrategy}
+                      >
+                        <div className="space-y-2">
+                          {displayColumns.map((col, index) => (
+                            <div key={`col-${index}`} className="space-y-2">
+                              <SortableColumnItem
+                                id={`col-${index}`}
+                                column={col}
+                                index={index}
+                                onSettingsClick={() => handleOpenDetailSettings(index)}
+                                onRemove={() => handleRemoveColumn(index)}
+                                showGroupingSettings={grouping.enabled}
+                              />
+                              {/* 컬럼 빠른 선택 (인라인) */}
+                              {!col.name && (
+                                <div className="ml-6 pl-2 border-l-2 border-muted">
+                                  <SearchableColumnSelect
+                                    tableName={tableName}
+                                    value={col.name}
+                                    onValueChange={(value) => {
+                                      const colInfo = columns.find((c) => c.column_name === value);
+                                      handleUpdateColumn(index, {
+                                        name: value,
+                                        label: colInfo?.column_comment || "",
+                                      });
+                                    }}
+                                    excludeColumns={selectedColumnNames}
+                                    placeholder="컬럼을 선택하세요"
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      </SortableContext>
+                    </DndContext>
+                  )}
+                </div>
+              </ScrollArea>
+            </TabsContent>
+
+            {/* 그룹핑 탭 (좌측 패널만) */}
+            <TabsContent value="grouping" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
+              <ScrollArea className="min-h-0 flex-1">
+                <div className="space-y-4 pr-4">
+                  <div className="flex items-center justify-between rounded-lg border p-4">
+                  <div>
+                    <Label className="text-sm font-medium">그룹핑 사용</Label>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      동일한 값을 가진 행들을 하나로 그룹화합니다
+                    </p>
+                  </div>
+                  <Switch
+                    checked={grouping.enabled}
+                    onCheckedChange={(checked) =>
+                      setGrouping({ ...grouping, enabled: checked })
+                    }
+                  />
+                </div>
+
+                {grouping.enabled && (
+                  <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+                    <div>
+                      <Label className="text-sm">그룹 기준 컬럼</Label>
+                      <SearchableColumnSelect
+                        tableName={tableName}
+                        value={grouping.groupByColumn}
+                        onValueChange={(value) =>
+                          setGrouping({ ...grouping, groupByColumn: value })
+                        }
+                        placeholder="그룹 기준 컬럼 선택"
+                        className="mt-1"
+                      />
+                      <p className="text-xs text-muted-foreground mt-1">
+                        예: item_id로 그룹핑하면 같은 품목의 데이터를 하나로 표시합니다
+                      </p>
+                    </div>
+                  </div>
+                )}
+                </div>
+              </ScrollArea>
+            </TabsContent>
+
+            {/* 검색 탭 */}
+            <TabsContent value="search" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
+              <ScrollArea className="min-h-0 flex-1">
+                <div className="space-y-4 pr-4">
+                  <div className="flex items-center justify-between rounded-lg border p-4">
+                  <div>
+                    <Label className="text-sm font-medium">검색 표시</Label>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      검색 입력창을 표시합니다
+                    </p>
+                  </div>
+                  <Switch checked={showSearch} onCheckedChange={setShowSearch} />
+                </div>
+
+                {showSearch && (
+                  <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-sm">검색 대상 컬럼</Label>
+                      <Button size="sm" variant="ghost" onClick={handleAddSearchColumn}>
+                        <Plus className="mr-1 h-3 w-3" />
+                        추가
+                      </Button>
+                    </div>
+
+                    {searchColumns.length === 0 ? (
+                      <div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
+                        검색할 컬럼을 추가하세요
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        {searchColumns.map((searchCol, index) => (
+                          <div key={index} className="flex items-center gap-2">
+                            <SearchableColumnSelect
+                              tableName={tableName}
+                              value={searchCol.columnName}
+                              onValueChange={(value) => handleUpdateSearchColumn(index, value)}
+                              placeholder="검색 컬럼 선택"
+                              className="flex-1"
+                            />
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-9 w-9 p-0 text-destructive"
+                              onClick={() => handleRemoveSearchColumn(index)}
+                            >
+                              ×
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+                </div>
+              </ScrollArea>
+            </TabsContent>
+          </Tabs>
+
+          <DialogFooter className="mt-4 shrink-0">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSave}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 컬럼 세부설정 모달 */}
+      <Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>컬럼 세부설정</DialogTitle>
+            <DialogDescription>
+              {editingColumn?.label || editingColumn?.name || "컬럼"}의 표시 설정을 변경합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          {editingColumn && (
+            <div className="space-y-4">
+              {/* 기본 설정 */}
+              <div className="space-y-3 p-3 border rounded-lg">
+                <h4 className="text-sm font-medium">기본 설정</h4>
+
+                <div>
+                  <Label className="text-xs">컬럼 선택</Label>
+                  <SearchableColumnSelect
+                    tableName={tableName}
+                    value={editingColumn.name}
+                    onValueChange={(value) => {
+                      const colInfo = columns.find((c) => c.column_name === value);
+                      setEditingColumn({
+                        ...editingColumn,
+                        name: value,
+                        label: colInfo?.column_comment || editingColumn.label,
+                      });
+                    }}
+                    className="mt-1"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs">표시 라벨</Label>
+                  <Input
+                    value={editingColumn.label || ""}
+                    onChange={(e) =>
+                      setEditingColumn({ ...editingColumn, label: e.target.value })
+                    }
+                    placeholder="라벨명 (미입력 시 컬럼명 사용)"
+                    className="mt-1 h-9"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs">표시 위치</Label>
+                  <Select
+                    value={editingColumn.displayRow || "name"}
+                    onValueChange={(value: "name" | "info") =>
+                      setEditingColumn({ ...editingColumn, displayRow: value })
+                    }
+                  >
+                    <SelectTrigger className="mt-1 h-9">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="name">이름 행 (Name Row)</SelectItem>
+                      <SelectItem value="info">정보 행 (Info Row)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label className="text-xs">컬럼 너비 (px)</Label>
+                  <Input
+                    type="number"
+                    value={editingColumn.width || ""}
+                    onChange={(e) =>
+                      setEditingColumn({
+                        ...editingColumn,
+                        width: e.target.value ? parseInt(e.target.value) : undefined,
+                      })
+                    }
+                    placeholder="자동"
+                    className="mt-1 h-9"
+                  />
+                </div>
+              </div>
+
+              {/* 그룹핑/집계 설정 (그룹핑 활성화 시만) */}
+              {grouping.enabled && (
+                <div className="space-y-3 p-3 border rounded-lg">
+                  <h4 className="text-sm font-medium">그룹핑/집계 설정</h4>
+
+                  <div>
+                    <Label className="text-xs">표시 방식</Label>
+                    <Select
+                      value={editingColumn.displayConfig?.displayType || "text"}
+                      onValueChange={(value: "text" | "badge") =>
+                        setEditingColumn({
+                          ...editingColumn,
+                          displayConfig: {
+                            ...editingColumn.displayConfig,
+                            displayType: value,
+                          } as ColumnDisplayConfig,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="mt-1 h-9">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="text">텍스트 (기본)</SelectItem>
+                        <SelectItem value="badge">배지 (태그 형태)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      배지는 여러 값을 태그 형태로 나란히 표시합니다
+                    </p>
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Label className="text-xs">집계 사용</Label>
+                      <p className="text-[10px] text-muted-foreground">
+                        그룹핑 시 값을 집계합니다
+                      </p>
+                    </div>
+                    <Switch
+                      checked={editingColumn.displayConfig?.aggregate?.enabled || false}
+                      onCheckedChange={(checked) =>
+                        setEditingColumn({
+                          ...editingColumn,
+                          displayConfig: {
+                            displayType: editingColumn.displayConfig?.displayType || "text",
+                            aggregate: {
+                              enabled: checked,
+                              function: editingColumn.displayConfig?.aggregate?.function || "DISTINCT",
+                            },
+                          },
+                        })
+                      }
+                    />
+                  </div>
+
+                  {editingColumn.displayConfig?.aggregate?.enabled && (
+                    <div>
+                      <Label className="text-xs">집계 방식</Label>
+                      <Select
+                        value={editingColumn.displayConfig?.aggregate?.function || "DISTINCT"}
+                        onValueChange={(value: "DISTINCT" | "COUNT") =>
+                          setEditingColumn({
+                            ...editingColumn,
+                            displayConfig: {
+                              displayType: editingColumn.displayConfig?.displayType || "text",
+                              aggregate: {
+                                enabled: true,
+                                function: value,
+                              },
+                            },
+                          })
+                        }
+                      >
+                        <SelectTrigger className="mt-1 h-9">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="DISTINCT">중복제거 (고유값만)</SelectItem>
+                          <SelectItem value="COUNT">개수</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* 엔티티 참조 설정 (entity 타입 컬럼일 때만 표시) */}
+              {(() => {
+                const entityInfo = getEditingColumnEntityInfo();
+                if (!entityInfo) return null;
+
+                return (
+                  <div className="space-y-3 p-3 border rounded-lg">
+                    <h4 className="text-sm font-medium">엔티티 표시 컬럼</h4>
+                    <p className="text-xs text-muted-foreground">
+                      참조 테이블: <span className="font-medium">{entityInfo.referenceTable}</span>
+                    </p>
+                    
+                    {entityInfo.isLoading ? (
+                      <div className="flex items-center justify-center py-4">
+                        <span className="text-sm text-muted-foreground">컬럼 정보 로딩 중...</span>
+                      </div>
+                    ) : entityInfo.referenceColumns.length === 0 ? (
+                      <div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
+                        참조 테이블의 컬럼 정보를 불러올 수 없습니다
+                      </div>
+                    ) : (
+                      <ScrollArea className="max-h-40">
+                        <div className="space-y-2 pr-4">
+                          {entityInfo.referenceColumns.map((col) => {
+                            const isSelected = (editingColumn.entityReference?.displayColumns || []).includes(col.columnName);
+                            return (
+                              <div 
+                                key={col.columnName} 
+                                className={cn(
+                                  "flex items-center gap-2 p-2 rounded-md cursor-pointer hover:bg-muted/50 transition-colors",
+                                  isSelected && "bg-muted"
+                                )}
+                                onClick={() => toggleEntityDisplayColumn(col.columnName)}
+                              >
+                                <Checkbox
+                                  checked={isSelected}
+                                  onCheckedChange={() => toggleEntityDisplayColumn(col.columnName)}
+                                />
+                                <div className="flex-1 min-w-0">
+                                  <span className="text-sm font-medium truncate block">
+                                    {col.displayName || col.columnName}
+                                  </span>
+                                  <span className="text-xs text-muted-foreground truncate block">
+                                    {col.columnName} ({col.dataType})
+                                  </span>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </ScrollArea>
+                    )}
+
+                    {(editingColumn.entityReference?.displayColumns || []).length > 0 && (
+                      <div className="mt-2 pt-2 border-t">
+                        <p className="text-xs text-muted-foreground mb-1">
+                          선택됨: {(editingColumn.entityReference?.displayColumns || []).length}개
+                        </p>
+                        <div className="flex flex-wrap gap-1">
+                          {(editingColumn.entityReference?.displayColumns || []).map((colName) => {
+                            const colInfo = entityInfo.referenceColumns.find(c => c.columnName === colName);
+                            return (
+                              <span
+                                key={colName}
+                                className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-primary/10 text-primary"
+                              >
+                                {colInfo?.displayName || colName}
+                              </span>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })()}
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSaveDetailSettings}>적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default ColumnConfigModal;
+

frontend/lib/registry/components/split-panel-layout2/DataTransferConfigModal.tsx

@@ -0,0 +1,423 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Plus, X, Settings, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import type { DataTransferField } from "./types";
+
+interface ColumnInfo {
+  column_name: string;
+  column_comment?: string;
+  data_type?: string;
+}
+
+interface DataTransferConfigModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dataTransferFields: DataTransferField[];
+  onChange: (fields: DataTransferField[]) => void;
+  leftColumns: ColumnInfo[];
+  rightColumns: ColumnInfo[];
+  leftTableName?: string;
+  rightTableName?: string;
+}
+
+// 컬럼 선택 컴포넌트
+const ColumnSelect: React.FC<{
+  columns: ColumnInfo[];
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder: string;
+  disabled?: boolean;
+}> = ({ columns, value, onValueChange, placeholder, disabled = false }) => {
+  return (
+    <Select value={value} onValueChange={onValueChange} disabled={disabled}>
+      <SelectTrigger className="h-8 text-xs">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {columns.map((col) => (
+          <SelectItem key={col.column_name} value={col.column_name}>
+            {col.column_comment || col.column_name}
+            <span className="text-muted-foreground ml-1 text-[10px]">({col.column_name})</span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+// 개별 필드 편집 모달
+const FieldEditModal: React.FC<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  field: DataTransferField | null;
+  onSave: (field: DataTransferField) => void;
+  leftColumns: ColumnInfo[];
+  rightColumns: ColumnInfo[];
+  leftTableName?: string;
+  rightTableName?: string;
+  isNew?: boolean;
+}> = ({
+  open,
+  onOpenChange,
+  field,
+  onSave,
+  leftColumns,
+  rightColumns,
+  leftTableName,
+  rightTableName,
+  isNew = false,
+}) => {
+  const [editingField, setEditingField] = useState<DataTransferField>({
+    id: "",
+    panel: "left",
+    sourceColumn: "",
+    targetColumn: "",
+    label: "",
+    description: "",
+  });
+
+  useEffect(() => {
+    if (field) {
+      setEditingField({ ...field });
+    } else {
+      setEditingField({
+        id: `field_${Date.now()}`,
+        panel: "left",
+        sourceColumn: "",
+        targetColumn: "",
+        label: "",
+        description: "",
+      });
+    }
+  }, [field, open]);
+
+  const handleSave = () => {
+    if (!editingField.sourceColumn || !editingField.targetColumn) {
+      return;
+    }
+    onSave(editingField);
+    onOpenChange(false);
+  };
+
+  const currentColumns = editingField.panel === "left" ? leftColumns : rightColumns;
+  const currentTableName = editingField.panel === "left" ? leftTableName : rightTableName;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[450px]">
+        <DialogHeader>
+          <DialogTitle className="text-base">{isNew ? "데이터 전달 필드 추가" : "데이터 전달 필드 편집"}</DialogTitle>
+          <DialogDescription className="text-xs">
+            선택한 항목의 데이터를 모달에 자동으로 전달합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* 패널 선택 */}
+          <div>
+            <Label className="text-xs">소스 패널</Label>
+            <Select
+              value={editingField.panel}
+              onValueChange={(value: "left" | "right") => {
+                setEditingField({ ...editingField, panel: value, sourceColumn: "" });
+              }}
+            >
+              <SelectTrigger className="mt-1 h-9">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="left">
+                  좌측 패널 {leftTableName && <span className="text-muted-foreground">({leftTableName})</span>}
+                </SelectItem>
+                <SelectItem value="right">
+                  우측 패널 {rightTableName && <span className="text-muted-foreground">({rightTableName})</span>}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-[10px]">데이터를 가져올 패널을 선택합니다.</p>
+          </div>
+
+          {/* 소스 컬럼 */}
+          <div>
+            <Label className="text-xs">
+              소스 컬럼 <span className="text-destructive">*</span>
+            </Label>
+            <div className="mt-1">
+              <ColumnSelect
+                columns={currentColumns}
+                value={editingField.sourceColumn}
+                onValueChange={(value) => {
+                  const col = currentColumns.find((c) => c.column_name === value);
+                  setEditingField({
+                    ...editingField,
+                    sourceColumn: value,
+                    // 타겟 컬럼이 비어있으면 소스와 동일하게 설정
+                    targetColumn: editingField.targetColumn || value,
+                    // 라벨이 비어있으면 컬럼 코멘트 사용
+                    label: editingField.label || col?.column_comment || "",
+                  });
+                }}
+                placeholder="컬럼 선택..."
+                disabled={currentColumns.length === 0}
+              />
+            </div>
+            {currentColumns.length === 0 && (
+              <p className="text-destructive mt-1 text-[10px]">
+                {currentTableName ? "테이블에 컬럼이 없습니다." : "테이블을 먼저 선택해주세요."}
+              </p>
+            )}
+          </div>
+
+          {/* 타겟 컬럼 */}
+          <div>
+            <Label className="text-xs">
+              타겟 컬럼 (모달 필드명) <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              value={editingField.targetColumn}
+              onChange={(e) => setEditingField({ ...editingField, targetColumn: e.target.value })}
+              placeholder="모달에서 사용할 필드명"
+              className="mt-1 h-9 text-sm"
+            />
+            <p className="text-muted-foreground mt-1 text-[10px]">모달 폼에서 이 값을 받을 필드명입니다.</p>
+          </div>
+
+          {/* 라벨 (선택) */}
+          <div>
+            <Label className="text-xs">표시 라벨 (선택)</Label>
+            <Input
+              value={editingField.label || ""}
+              onChange={(e) => setEditingField({ ...editingField, label: e.target.value })}
+              placeholder="표시용 이름"
+              className="mt-1 h-9 text-sm"
+            />
+          </div>
+
+          {/* 설명 (선택) */}
+          <div>
+            <Label className="text-xs">설명 (선택)</Label>
+            <Input
+              value={editingField.description || ""}
+              onChange={(e) => setEditingField({ ...editingField, description: e.target.value })}
+              placeholder="이 필드에 대한 설명"
+              className="mt-1 h-9 text-sm"
+            />
+          </div>
+
+          {/* 미리보기 */}
+          {editingField.sourceColumn && editingField.targetColumn && (
+            <div className="bg-muted/50 rounded-md p-3">
+              <p className="mb-2 text-xs font-medium">미리보기</p>
+              <div className="flex items-center gap-2 text-xs">
+                <Badge variant="outline" className="text-[10px]">
+                  {editingField.panel === "left" ? "좌측" : "우측"}
+                </Badge>
+                <span className="font-mono">{editingField.sourceColumn}</span>
+                <ArrowRight className="h-3 w-3" />
+                <span className="font-mono">{editingField.targetColumn}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
+            취소
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={!editingField.sourceColumn || !editingField.targetColumn}
+            className="h-9 text-sm"
+          >
+            {isNew ? "추가" : "저장"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// 메인 모달 컴포넌트
+const DataTransferConfigModal: React.FC<DataTransferConfigModalProps> = ({
+  open,
+  onOpenChange,
+  dataTransferFields,
+  onChange,
+  leftColumns,
+  rightColumns,
+  leftTableName,
+  rightTableName,
+}) => {
+  const [fields, setFields] = useState<DataTransferField[]>([]);
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editingField, setEditingField] = useState<DataTransferField | null>(null);
+  const [isNewField, setIsNewField] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      // 기존 필드에 panel이 없으면 left로 기본 설정 (하위 호환성)
+      const normalizedFields = (dataTransferFields || []).map((field, idx) => ({
+        ...field,
+        id: field.id || `field_${idx}`,
+        panel: field.panel || ("left" as const),
+      }));
+      setFields(normalizedFields);
+    }
+  }, [open, dataTransferFields]);
+
+  const handleAddField = () => {
+    setEditingField(null);
+    setIsNewField(true);
+    setEditModalOpen(true);
+  };
+
+  const handleEditField = (field: DataTransferField) => {
+    setEditingField(field);
+    setIsNewField(false);
+    setEditModalOpen(true);
+  };
+
+  const handleSaveField = (field: DataTransferField) => {
+    if (isNewField) {
+      setFields([...fields, field]);
+    } else {
+      setFields(fields.map((f) => (f.id === field.id ? field : f)));
+    }
+  };
+
+  const handleRemoveField = (id: string) => {
+    setFields(fields.filter((f) => f.id !== id));
+  };
+
+  const handleSave = () => {
+    onChange(fields);
+    onOpenChange(false);
+  };
+
+  const getColumnLabel = (panel: "left" | "right", columnName: string) => {
+    const columns = panel === "left" ? leftColumns : rightColumns;
+    const col = columns.find((c) => c.column_name === columnName);
+    return col?.column_comment || columnName;
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="flex max-h-[85vh] max-w-[95vw] flex-col sm:max-w-[550px]">
+          <DialogHeader>
+            <DialogTitle className="text-base">데이터 전달 설정</DialogTitle>
+            <DialogDescription className="text-xs">
+              버튼 클릭 시 모달에 자동으로 전달할 데이터를 설정합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="min-h-0 flex-1 overflow-hidden">
+            <div className="mb-3 flex items-center justify-between">
+              <span className="text-muted-foreground text-xs">전달 필드 ({fields.length}개)</span>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={handleAddField}>
+                <Plus className="mr-1 h-3 w-3" />
+                추가
+              </Button>
+            </div>
+
+            <ScrollArea className="h-[300px]">
+              <div className="space-y-2 pr-2">
+                {fields.length === 0 ? (
+                  <div className="text-muted-foreground rounded-md border py-8 text-center text-xs">
+                    <p className="mb-2">전달할 필드가 없습니다</p>
+                    <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={handleAddField}>
+                      <Plus className="mr-1 h-3 w-3" />
+                      필드 추가
+                    </Button>
+                  </div>
+                ) : (
+                  fields.map((field) => (
+                    <div
+                      key={field.id}
+                      className="hover:bg-muted/50 flex items-center gap-2 rounded-md border p-2 transition-colors"
+                    >
+                      <Badge variant={field.panel === "left" ? "default" : "secondary"} className="shrink-0 text-[10px]">
+                        {field.panel === "left" ? "좌측" : "우측"}
+                      </Badge>
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-1 text-xs">
+                          <span className="font-mono">{getColumnLabel(field.panel, field.sourceColumn)}</span>
+                          <ArrowRight className="text-muted-foreground h-3 w-3 shrink-0" />
+                          <span className="font-mono truncate">{field.targetColumn}</span>
+                        </div>
+                        {field.description && (
+                          <p className="text-muted-foreground mt-0.5 truncate text-[10px]">{field.description}</p>
+                        )}
+                      </div>
+                      <div className="flex shrink-0 items-center gap-1">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-6 w-6 p-0"
+                          onClick={() => handleEditField(field)}
+                        >
+                          <Settings className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="text-destructive hover:text-destructive h-6 w-6 p-0"
+                          onClick={() => handleRemoveField(field.id || "")}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+
+          <div className="bg-muted/50 text-muted-foreground rounded-md p-2 text-[10px]">
+            <p>버튼별로 개별 데이터 전달 설정이 있으면 해당 설정이 우선 적용됩니다.</p>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
+              취소
+            </Button>
+            <Button onClick={handleSave} className="h-9 text-sm">
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 필드 편집 모달 */}
+      <FieldEditModal
+        open={editModalOpen}
+        onOpenChange={setEditModalOpen}
+        field={editingField}
+        onSave={handleSaveField}
+        leftColumns={leftColumns}
+        rightColumns={rightColumns}
+        leftTableName={leftTableName}
+        rightTableName={rightTableName}
+        isNew={isNewField}
+      />
+    </>
+  );
+};
+
+export default DataTransferConfigModal;

frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx

@@ -2,7 +2,8 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { ComponentRendererProps } from "@/types/component";
-import { SplitPanelLayout2Config, ColumnConfig, DataTransferField, ActionButtonConfig, JoinTableConfig } from "./types";
+import { SplitPanelLayout2Config, ColumnConfig, DataTransferField, ActionButtonConfig, JoinTableConfig, GroupingConfig, ColumnDisplayConfig, TabConfig } from "./types";
+import { Badge } from "@/components/ui/badge";
 import { defaultConfig } from "./config";
 import { cn } from "@/lib/utils";
 import {
@@ -86,6 +87,177 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
   const [itemToDelete, setItemToDelete] = useState<any>(null);
   const [isBulkDelete, setIsBulkDelete] = useState(false);
 
+  // 탭 상태 (좌측/우측 각각)
+  const [leftActiveTab, setLeftActiveTab] = useState<string | null>(null);
+  const [rightActiveTab, setRightActiveTab] = useState<string | null>(null);
+
+  // 프론트엔드 그룹핑 함수
+  const groupData = useCallback(
+    (data: Record<string, any>[], groupingConfig: GroupingConfig, columns: ColumnConfig[]): Record<string, any>[] => {
+      if (!groupingConfig.enabled || !groupingConfig.groupByColumn) {
+        return data;
+      }
+
+      const groupByColumn = groupingConfig.groupByColumn;
+      const groupMap = new Map<string, Record<string, any>>();
+
+      // 데이터를 그룹별로 수집
+      data.forEach((item) => {
+        const groupKey = String(item[groupByColumn] ?? "");
+
+        if (!groupMap.has(groupKey)) {
+          // 첫 번째 항목을 기준으로 그룹 초기화
+          const groupedItem: Record<string, any> = { ...item };
+
+          // 각 컬럼의 displayConfig 확인하여 집계 준비
+          columns.forEach((col) => {
+            if (col.displayConfig?.aggregate?.enabled) {
+              // 집계가 활성화된 컬럼은 배열로 초기화
+              groupedItem[`__agg_${col.name}`] = [item[col.name]];
+            }
+          });
+
+          groupMap.set(groupKey, groupedItem);
+        } else {
+          // 기존 그룹에 값 추가
+          const existingGroup = groupMap.get(groupKey)!;
+
+          columns.forEach((col) => {
+            if (col.displayConfig?.aggregate?.enabled) {
+              const aggKey = `__agg_${col.name}`;
+              if (!existingGroup[aggKey]) {
+                existingGroup[aggKey] = [];
+              }
+              existingGroup[aggKey].push(item[col.name]);
+            }
+          });
+        }
+      });
+
+      // 집계 처리 및 결과 변환
+      const result: Record<string, any>[] = [];
+
+      groupMap.forEach((groupedItem) => {
+        columns.forEach((col) => {
+          if (col.displayConfig?.aggregate?.enabled) {
+            const aggKey = `__agg_${col.name}`;
+            const values = groupedItem[aggKey] || [];
+
+            if (col.displayConfig.aggregate.function === "DISTINCT") {
+              // 중복 제거 후 배열로 저장
+              const uniqueValues = [...new Set(values.filter((v: any) => v !== null && v !== undefined))];
+              groupedItem[col.name] = uniqueValues;
+            } else if (col.displayConfig.aggregate.function === "COUNT") {
+              // 개수를 숫자로 저장
+              groupedItem[col.name] = values.filter((v: any) => v !== null && v !== undefined).length;
+            }
+
+            // 임시 집계 키 제거
+            delete groupedItem[aggKey];
+          }
+        });
+
+        result.push(groupedItem);
+      });
+
+      console.log(`[SplitPanelLayout2] 그룹핑 완료: ${data.length}건 → ${result.length}개 그룹`);
+      return result;
+    },
+    [],
+  );
+
+  // 탭 목록 생성 함수 (데이터에서 고유값 추출)
+  const generateTabs = useCallback(
+    (data: Record<string, unknown>[], tabConfig: TabConfig | undefined): { id: string; label: string; count: number }[] => {
+      if (!tabConfig?.enabled || !tabConfig.tabSourceColumn) {
+        return [];
+      }
+
+      const sourceColumn = tabConfig.tabSourceColumn;
+
+      // 데이터에서 고유값 추출 및 개수 카운트
+      const valueCount = new Map<string, number>();
+      data.forEach((item) => {
+        const value = String(item[sourceColumn] ?? "");
+        if (value) {
+          valueCount.set(value, (valueCount.get(value) || 0) + 1);
+        }
+      });
+
+      // 탭 목록 생성
+      const tabs = Array.from(valueCount.entries()).map(([value, count]) => ({
+        id: value,
+        label: value,
+        count: tabConfig.showCount ? count : 0,
+      }));
+
+      console.log(`[SplitPanelLayout2] 탭 생성: ${tabs.length}개 탭 (컬럼: ${sourceColumn})`);
+      return tabs;
+    },
+    [],
+  );
+
+  // 탭으로 필터링된 데이터 반환
+  const filterDataByTab = useCallback(
+    (data: Record<string, unknown>[], activeTab: string | null, tabConfig: TabConfig | undefined): Record<string, unknown>[] => {
+      if (!tabConfig?.enabled || !activeTab || !tabConfig.tabSourceColumn) {
+        return data;
+      }
+
+      const sourceColumn = tabConfig.tabSourceColumn;
+      return data.filter((item) => String(item[sourceColumn] ?? "") === activeTab);
+    },
+    [],
+  );
+
+  // 좌측 패널 탭 목록 (메모이제이션)
+  const leftTabs = useMemo(() => {
+    if (!config.leftPanel?.tabConfig?.enabled || !config.leftPanel?.tabConfig?.tabSourceColumn) {
+      return [];
+    }
+    return generateTabs(leftData, config.leftPanel.tabConfig);
+  }, [leftData, config.leftPanel?.tabConfig, generateTabs]);
+
+  // 우측 패널 탭 목록 (메모이제이션)
+  const rightTabs = useMemo(() => {
+    if (!config.rightPanel?.tabConfig?.enabled || !config.rightPanel?.tabConfig?.tabSourceColumn) {
+      return [];
+    }
+    return generateTabs(rightData, config.rightPanel.tabConfig);
+  }, [rightData, config.rightPanel?.tabConfig, generateTabs]);
+
+  // 탭 기본값 설정 (탭 목록이 변경되면 기본 탭 선택)
+  useEffect(() => {
+    if (leftTabs.length > 0 && !leftActiveTab) {
+      const defaultTab = config.leftPanel?.tabConfig?.defaultTab;
+      if (defaultTab && leftTabs.some((t) => t.id === defaultTab)) {
+        setLeftActiveTab(defaultTab);
+      } else {
+        setLeftActiveTab(leftTabs[0].id);
+      }
+    }
+  }, [leftTabs, leftActiveTab, config.leftPanel?.tabConfig?.defaultTab]);
+
+  useEffect(() => {
+    if (rightTabs.length > 0 && !rightActiveTab) {
+      const defaultTab = config.rightPanel?.tabConfig?.defaultTab;
+      if (defaultTab && rightTabs.some((t) => t.id === defaultTab)) {
+        setRightActiveTab(defaultTab);
+      } else {
+        setRightActiveTab(rightTabs[0].id);
+      }
+    }
+  }, [rightTabs, rightActiveTab, config.rightPanel?.tabConfig?.defaultTab]);
+
+  // 탭 필터링된 데이터 (메모이제이션)
+  const filteredLeftDataByTab = useMemo(() => {
+    return filterDataByTab(leftData, leftActiveTab, config.leftPanel?.tabConfig);
+  }, [leftData, leftActiveTab, config.leftPanel?.tabConfig, filterDataByTab]);
+
+  const filteredRightDataByTab = useMemo(() => {
+    return filterDataByTab(rightData, rightActiveTab, config.rightPanel?.tabConfig);
+  }, [rightData, rightActiveTab, config.rightPanel?.tabConfig, filterDataByTab]);
+
   // 좌측 데이터 로드
   const loadLeftData = useCallback(async () => {
     if (!config.leftPanel?.tableName || isDesignMode) return;
@@ -115,6 +287,80 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
           );
         }
 
+        // 조인 테이블 처리 (좌측 패널) - 인라인 처리
+        if (config.leftPanel.joinTables && config.leftPanel.joinTables.length > 0) {
+          for (const joinTableConfig of config.leftPanel.joinTables) {
+            if (!joinTableConfig.joinTable || !joinTableConfig.mainColumn || !joinTableConfig.joinColumn) {
+              continue;
+            }
+            // 메인 데이터에서 조인할 키 값들 추출
+            const joinKeys = [
+              ...new Set(data.map((item: Record<string, unknown>) => item[joinTableConfig.mainColumn]).filter(Boolean)),
+            ];
+            if (joinKeys.length === 0) continue;
+
+            try {
+              const joinResponse = await apiClient.post(`/table-management/tables/${joinTableConfig.joinTable}/data`, {
+                page: 1,
+                size: 1000,
+                dataFilter: {
+                  enabled: true,
+                  matchType: "any",
+                  filters: joinKeys.map((key, idx) => ({
+                    id: `join_key_${idx}`,
+                    columnName: joinTableConfig.joinColumn,
+                    operator: "equals",
+                    value: String(key),
+                    valueType: "static",
+                  })),
+                },
+                autoFilter: {
+                  enabled: true,
+                  filterColumn: "company_code",
+                  filterType: "company",
+                },
+              });
+
+              if (joinResponse.data.success) {
+                const joinDataArray = joinResponse.data.data?.data || [];
+                const joinDataMap = new Map<string, Record<string, unknown>>();
+                joinDataArray.forEach((item: Record<string, unknown>) => {
+                  const key = item[joinTableConfig.joinColumn];
+                  if (key) joinDataMap.set(String(key), item);
+                });
+
+                if (joinDataMap.size > 0) {
+                  data = data.map((item: Record<string, unknown>) => {
+                    const joinKey = item[joinTableConfig.mainColumn];
+                    const joinData = joinDataMap.get(String(joinKey));
+                    if (joinData) {
+                      const mergedData = { ...item };
+                      joinTableConfig.selectColumns.forEach((col) => {
+                        // 테이블.컬럼명 형식으로 저장
+                        mergedData[`${joinTableConfig.joinTable}.${col}`] = joinData[col];
+                        // 컬럼명만으로도 저장 (기존 값이 없을 때)
+                        if (!(col in mergedData)) {
+                          mergedData[col] = joinData[col];
+                        }
+                      });
+                      return mergedData;
+                    }
+                    return item;
+                  });
+                }
+                console.log(`[SplitPanelLayout2] 좌측 조인 테이블 로드: ${joinTableConfig.joinTable}, ${joinDataArray.length}건`);
+              }
+            } catch (error) {
+              console.error(`[SplitPanelLayout2] 좌측 조인 테이블 로드 실패 (${joinTableConfig.joinTable}):`, error);
+            }
+          }
+        }
+
+        // 그룹핑 처리
+        if (config.leftPanel.grouping?.enabled && config.leftPanel.grouping.groupByColumn) {
+          data = groupData(data, config.leftPanel.grouping, config.leftPanel.displayColumns || []);
+        }
+
         setLeftData(data);
         console.log(`[SplitPanelLayout2] 좌측 데이터 로드: ${data.length}건 (company_code 필터 적용)`);
       }
@@ -124,7 +370,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     } finally {
       setLeftLoading(false);
     }
-  }, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, isDesignMode]);
+  }, [config.leftPanel?.tableName, config.leftPanel?.hierarchyConfig, config.leftPanel?.grouping, config.leftPanel?.displayColumns, config.leftPanel?.joinTables, isDesignMode, groupData]);
 
   // 조인 테이블 데이터 로드 (단일 테이블)
   const loadJoinTableData = useCallback(
@@ -700,16 +946,20 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     });
   }, []);
 
-  // 검색 필터링
+  // 검색 필터링 (탭 필터링 후 적용)
   const filteredLeftData = useMemo(() => {
-    if (!leftSearchTerm) return leftData;
+    // 1. 먼저 탭 필터링 적용
+    const data = filteredLeftDataByTab;
+
+    // 2. 검색어가 없으면 탭 필터링된 데이터 반환
+    if (!leftSearchTerm) return data;
 
     // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
     const searchColumns = config.leftPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
     const legacyColumn = config.leftPanel?.searchColumn;
     const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
 
-    if (columnsToSearch.length === 0) return leftData;
+    if (columnsToSearch.length === 0) return data;
 
     const filterRecursive = (items: any[]): any[] => {
       return items.filter((item) => {
@@ -731,27 +981,31 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
       });
     };
 
-    return filterRecursive([...leftData]);
+    return filterRecursive([...data]);
-  }, [leftData, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
+  }, [filteredLeftDataByTab, leftSearchTerm, config.leftPanel?.searchColumns, config.leftPanel?.searchColumn]);
 
   const filteredRightData = useMemo(() => {
-    if (!rightSearchTerm) return rightData;
+    // 1. 먼저 탭 필터링 적용
+    const data = filteredRightDataByTab;
+
+    // 2. 검색어가 없으면 탭 필터링된 데이터 반환
+    if (!rightSearchTerm) return data;
 
     // 복수 검색 컬럼 지원 (searchColumns 우선, 없으면 searchColumn 사용)
     const searchColumns = config.rightPanel?.searchColumns?.map((c) => c.columnName).filter(Boolean) || [];
     const legacyColumn = config.rightPanel?.searchColumn;
     const columnsToSearch = searchColumns.length > 0 ? searchColumns : legacyColumn ? [legacyColumn] : [];
 
-    if (columnsToSearch.length === 0) return rightData;
+    if (columnsToSearch.length === 0) return data;
 
-    return rightData.filter((item) => {
+    return data.filter((item) => {
       // 여러 컬럼 중 하나라도 매칭되면 포함
       return columnsToSearch.some((col) => {
         const value = String(item[col] || "").toLowerCase();
         return value.includes(rightSearchTerm.toLowerCase());
       });
     });
-  }, [rightData, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
+  }, [filteredRightDataByTab, rightSearchTerm, config.rightPanel?.searchColumns, config.rightPanel?.searchColumn]);
 
   // 체크박스 전체 선택/해제 (filteredRightData 정의 이후에 위치해야 함)
   const handleSelectAll = useCallback(
@@ -835,7 +1089,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     };
   }, [screenContext, component.id]);
 
-  // 컬럼 값 가져오기 (sourceTable 고려)
+  // 컬럼 값 가져오기 (sourceTable 및 엔티티 참조 고려)
   const getColumnValue = useCallback(
     (item: any, col: ColumnConfig): any => {
       // col.name이 "테이블명.컬럼명" 형식인 경우 처리
@@ -843,28 +1097,66 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
       const tableFromName = col.name.includes(".") ? col.name.split(".")[0] : null;
       const effectiveSourceTable = col.sourceTable || tableFromName;
 
+      // 기본 값 가져오기
+      let baseValue: any;
+
       // sourceTable이 설정되어 있고, 메인 테이블이 아닌 경우
       if (effectiveSourceTable && effectiveSourceTable !== config.rightPanel?.tableName) {
         // 1. 테이블명.컬럼명 형식으로 먼저 시도 (mergeJoinData에서 저장한 형식)
         const tableColumnKey = `${effectiveSourceTable}.${actualColName}`;
         if (item[tableColumnKey] !== undefined) {
-          return item[tableColumnKey];
+          baseValue = item[tableColumnKey];
-        }
+        } else {
           // 2. 조인 테이블의 alias가 설정된 경우 alias_컬럼명으로 시도
           const joinTable = config.rightPanel?.joinTables?.find((jt) => jt.joinTable === effectiveSourceTable);
           if (joinTable?.alias) {
             const aliasKey = `${joinTable.alias}_${actualColName}`;
             if (item[aliasKey] !== undefined) {
-            return item[aliasKey];
+              baseValue = item[aliasKey];
             }
           }
           // 3. 그냥 컬럼명으로 시도 (메인 테이블에 없는 경우 조인 데이터가 직접 들어감)
-        if (item[actualColName] !== undefined) {
+          if (baseValue === undefined && item[actualColName] !== undefined) {
-          return item[actualColName];
+            baseValue = item[actualColName];
           }
         }
+      } else {
         // 4. 기본: 컬럼명으로 직접 접근
-      return item[actualColName];
+        baseValue = item[actualColName];
+      }
+
+      // 엔티티 참조 설정이 있는 경우 - 선택된 컬럼들의 값을 결합
+      if (col.entityReference?.displayColumns && col.entityReference.displayColumns.length > 0) {
+        // 엔티티 참조 컬럼들의 값을 수집
+        // 백엔드에서 entity 조인을 통해 "컬럼명_참조테이블컬럼" 형태로 데이터가 들어옴
+        const entityValues: string[] = [];
+        
+        for (const displayCol of col.entityReference.displayColumns) {
+          // 다양한 형식으로 값을 찾아봄
+          // 1. 직접 컬럼명 (entity 조인 결과)
+          if (item[displayCol] !== undefined && item[displayCol] !== null) {
+            entityValues.push(String(item[displayCol]));
+          }
+          // 2. 컬럼명_참조컬럼 형식
+          else if (item[`${actualColName}_${displayCol}`] !== undefined) {
+            entityValues.push(String(item[`${actualColName}_${displayCol}`]));
+          }
+          // 3. 참조테이블.컬럼 형식
+          else if (col.entityReference.entityId) {
+            const refTableCol = `${col.entityReference.entityId}.${displayCol}`;
+            if (item[refTableCol] !== undefined && item[refTableCol] !== null) {
+              entityValues.push(String(item[refTableCol]));
+            }
+          }
+        }
+
+        // 엔티티 값들이 있으면 결합하여 반환
+        if (entityValues.length > 0) {
+          return entityValues.join(" - ");
+        }
+      }
+
+      return baseValue;
     },
     [config.rightPanel?.tableName, config.rightPanel?.joinTables],
   );
@@ -972,12 +1264,36 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
             {/* 내용 */}
           <div className="min-w-0 flex-1">
             {/* 이름 행 (Name Row) */}
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               <span className="truncate text-base font-medium">{primaryValue || "이름 없음"}</span>
-              {/* 이름 행의 추가 컬럼들 (배지 스타일) */}
+              {/* 이름 행의 추가 컬럼들 */}
               {nameRowColumns.slice(1).map((col, idx) => {
                 const value = item[col.name];
-                if (!value) return null;
+                if (value === null || value === undefined) return null;
+
+                // 배지 타입이고 배열인 경우
+                if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
+                  return (
+                    <div key={idx} className="flex flex-wrap gap-1">
+                      {value.map((v, vIdx) => (
+                        <Badge key={vIdx} variant="secondary" className="shrink-0 text-xs">
+                          {formatValue(v, col.format)}
+                        </Badge>
+                      ))}
+                    </div>
+                  );
+                }
+
+                // 배지 타입이지만 단일 값인 경우
+                if (col.displayConfig?.displayType === "badge") {
+                  return (
+                    <Badge key={idx} variant="secondary" className="shrink-0 text-xs">
+                      {formatValue(value, col.format)}
+                    </Badge>
+                  );
+                }
+
+                // 기본 텍스트 스타일
                 return (
                   <span key={idx} className="bg-muted shrink-0 rounded px-1.5 py-0.5 text-xs">
                     {formatValue(value, col.format)}
@@ -987,16 +1303,40 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
             </div>
             {/* 정보 행 (Info Row) */}
             {infoRowColumns.length > 0 && (
-              <div className="text-muted-foreground flex items-center gap-2 truncate text-sm">
+              <div className="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
                 {infoRowColumns
                   .map((col, idx) => {
                     const value = item[col.name];
-                    if (!value) return null;
+                    if (value === null || value === undefined) return null;
+
+                    // 배지 타입이고 배열인 경우
+                    if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
+                      return (
+                        <div key={idx} className="flex flex-wrap gap-1">
+                          {value.map((v, vIdx) => (
+                            <Badge key={vIdx} variant="outline" className="text-xs">
+                              {formatValue(v, col.format)}
+                            </Badge>
+                          ))}
+                        </div>
+                      );
+                    }
+
+                    // 배지 타입이지만 단일 값인 경우
+                    if (col.displayConfig?.displayType === "badge") {
+                      return (
+                        <Badge key={idx} variant="outline" className="text-xs">
+                          {formatValue(value, col.format)}
+                        </Badge>
+                      );
+                    }
+
+                    // 기본 텍스트
                     return <span key={idx}>{formatValue(value, col.format)}</span>;
                   })
                   .filter(Boolean)
                   .reduce((acc: React.ReactNode[], curr, idx) => {
-                    if (idx > 0)
+                    if (idx > 0 && !React.isValidElement(curr))
                       acc.push(
                         <span key={`sep-${idx}`} className="text-muted-foreground/50">
                           |
@@ -1020,6 +1360,95 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
     );
   };
 
+  // 왼쪽 패널 기본키 컬럼명 가져오기
+  const getLeftPrimaryKeyColumn = useCallback(() => {
+    return config.leftPanel?.primaryKeyColumn || config.leftPanel?.hierarchyConfig?.idColumn || "id";
+  }, [config.leftPanel?.primaryKeyColumn, config.leftPanel?.hierarchyConfig?.idColumn]);
+
+  // 왼쪽 패널 테이블 렌더링
+  const renderLeftTable = () => {
+    const displayColumns = config.leftPanel?.displayColumns || [];
+    const pkColumn = getLeftPrimaryKeyColumn();
+
+    // 값 렌더링 (배지 지원)
+    const renderCellValue = (item: any, col: ColumnConfig) => {
+      const value = item[col.name];
+      if (value === null || value === undefined) return "-";
+
+      // 배지 타입이고 배열인 경우
+      if (col.displayConfig?.displayType === "badge" && Array.isArray(value)) {
+        return (
+          <div className="flex flex-wrap gap-1">
+            {value.map((v, vIdx) => (
+              <Badge key={vIdx} variant="secondary" className="text-xs">
+                {formatValue(v, col.format)}
+              </Badge>
+            ))}
+          </div>
+        );
+      }
+
+      // 배지 타입이지만 단일 값인 경우
+      if (col.displayConfig?.displayType === "badge") {
+        return (
+          <Badge variant="secondary" className="text-xs">
+            {formatValue(value, col.format)}
+          </Badge>
+        );
+      }
+
+      // 기본 텍스트
+      return formatValue(value, col.format);
+    };
+
+    return (
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {displayColumns.map((col, idx) => (
+                <TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
+                  {col.label || col.name}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredLeftData.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={displayColumns.length} className="text-muted-foreground h-24 text-center">
+                  데이터가 없습니다
+                </TableCell>
+              </TableRow>
+            ) : (
+              filteredLeftData.map((item, index) => {
+                const itemId = item[pkColumn];
+                const isItemSelected =
+                  selectedLeftItem &&
+                  (selectedLeftItem === item ||
+                    (item[pkColumn] !== undefined &&
+                      selectedLeftItem[pkColumn] !== undefined &&
+                      selectedLeftItem[pkColumn] === item[pkColumn]));
+
+                return (
+                  <TableRow
+                    key={itemId ?? index}
+                    className={cn("cursor-pointer hover:bg-muted/50", isItemSelected && "bg-primary/10")}
+                    onClick={() => handleLeftItemSelect(item)}
+                  >
+                    {displayColumns.map((col, colIdx) => (
+                      <TableCell key={colIdx}>{renderCellValue(item, col)}</TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  };
+
   // 우측 패널 카드 렌더링
   const renderRightCard = (item: any, index: number) => {
     const displayColumns = config.rightPanel?.displayColumns || [];
@@ -1285,6 +1714,11 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
 
   // 디자인 모드 렌더링
   if (isDesignMode) {
+    const leftButtons = config.leftPanel?.actionButtons || [];
+    const rightButtons = config.rightPanel?.actionButtons || [];
+    const leftDisplayColumns = config.leftPanel?.displayColumns || [];
+    const rightDisplayColumns = config.rightPanel?.displayColumns || [];
+
     return (
       <div
         className={cn(
@@ -1292,19 +1726,211 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
           isSelected ? "border-primary" : "border-muted-foreground/30",
         )}
         onClick={onClick}
+        style={{ minHeight: "300px" }}
       >
         {/* 좌측 패널 미리보기 */}
-        <div className="bg-muted/30 flex flex-col border-r p-4" style={{ width: `${splitPosition}%` }}>
+        <div className="bg-muted/20 flex flex-col border-r" style={{ width: `${splitPosition}%` }}>
-          <div className="mb-2 text-sm font-medium">{config.leftPanel?.title || "좌측 패널"}</div>
+          {/* 헤더 */}
-          <div className="text-muted-foreground mb-2 text-xs">테이블: {config.leftPanel?.tableName || "미설정"}</div>
+          <div className="flex items-center justify-between border-b px-3 py-2">
-          <div className="text-muted-foreground flex flex-1 items-center justify-center text-xs">좌측 목록 영역</div>
+            <div>
+              <div className="text-sm font-medium">{config.leftPanel?.title || "좌측 패널"}</div>
+              <div className="text-muted-foreground text-[10px]">
+                {config.leftPanel?.tableName || "테이블 미설정"}
+              </div>
+            </div>
+            {leftButtons.length > 0 && (
+              <div className="flex gap-1">
+                {leftButtons.slice(0, 2).map((btn) => (
+                  <div
+                    key={btn.id}
+                    className="bg-primary/10 text-primary rounded px-2 py-0.5 text-[10px]"
+                  >
+                    {btn.label}
+                  </div>
+                ))}
+                {leftButtons.length > 2 && (
+                  <div className="text-muted-foreground text-[10px]">+{leftButtons.length - 2}</div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* 검색 표시 */}
+          {config.leftPanel?.showSearch && (
+            <div className="border-b px-3 py-2">
+              <div className="bg-muted h-7 w-full rounded text-[10px] leading-7 text-center text-muted-foreground">
+                검색
+              </div>
+            </div>
+          )}
+
+          {/* 컬럼 미리보기 */}
+          <div className="flex-1 overflow-hidden p-3">
+            {leftDisplayColumns.length > 0 ? (
+              <div className="space-y-2">
+                {/* 샘플 카드 */}
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="rounded-md border bg-background/50 p-2">
+                    <div className="flex items-center gap-2">
+                      {leftDisplayColumns
+                        .filter((col) => col.displayRow === "name" || !col.displayRow)
+                        .slice(0, 2)
+                        .map((col, idx) => (
+                          <div
+                            key={col.name}
+                            className={cn(
+                              "text-[10px]",
+                              idx === 0 ? "font-medium" : "text-muted-foreground"
+                            )}
+                          >
+                            {col.label || col.name}
+                          </div>
+                        ))}
+                    </div>
+                    {leftDisplayColumns.filter((col) => col.displayRow === "info").length > 0 && (
+                      <div className="text-muted-foreground mt-1 flex gap-2 text-[10px]">
+                        {leftDisplayColumns
+                          .filter((col) => col.displayRow === "info")
+                          .slice(0, 3)
+                          .map((col) => (
+                            <span key={col.name}>{col.label || col.name}</span>
+                          ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="flex h-full items-center justify-center">
+                <div className="text-muted-foreground text-xs">컬럼 미설정</div>
+              </div>
+            )}
+          </div>
         </div>
 
         {/* 우측 패널 미리보기 */}
-        <div className="flex flex-1 flex-col p-4">
+        <div className="flex flex-1 flex-col">
-          <div className="mb-2 text-sm font-medium">{config.rightPanel?.title || "우측 패널"}</div>
+          {/* 헤더 */}
-          <div className="text-muted-foreground mb-2 text-xs">테이블: {config.rightPanel?.tableName || "미설정"}</div>
+          <div className="flex items-center justify-between border-b px-3 py-2">
-          <div className="text-muted-foreground flex flex-1 items-center justify-center text-xs">우측 상세 영역</div>
+            <div>
+              <div className="text-sm font-medium">{config.rightPanel?.title || "우측 패널"}</div>
+              <div className="text-muted-foreground text-[10px]">
+                {config.rightPanel?.tableName || "테이블 미설정"}
+              </div>
+            </div>
+            {rightButtons.length > 0 && (
+              <div className="flex gap-1">
+                {rightButtons.slice(0, 2).map((btn) => (
+                  <div
+                    key={btn.id}
+                    className={cn(
+                      "rounded px-2 py-0.5 text-[10px]",
+                      btn.variant === "destructive"
+                        ? "bg-destructive/10 text-destructive"
+                        : "bg-primary/10 text-primary"
+                    )}
+                  >
+                    {btn.label}
+                  </div>
+                ))}
+                {rightButtons.length > 2 && (
+                  <div className="text-muted-foreground text-[10px]">+{rightButtons.length - 2}</div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* 검색 표시 */}
+          {config.rightPanel?.showSearch && (
+            <div className="border-b px-3 py-2">
+              <div className="bg-muted h-7 w-full rounded text-[10px] leading-7 text-center text-muted-foreground">
+                검색
+              </div>
+            </div>
+          )}
+
+          {/* 컬럼 미리보기 */}
+          <div className="flex-1 overflow-hidden p-3">
+            {rightDisplayColumns.length > 0 ? (
+              config.rightPanel?.displayMode === "table" ? (
+                // 테이블 모드 미리보기
+                <div className="rounded-md border">
+                  <div className="bg-muted/50 flex border-b px-2 py-1">
+                    {config.rightPanel?.showCheckbox && (
+                      <div className="w-8 text-[10px]"></div>
+                    )}
+                    {rightDisplayColumns.slice(0, 4).map((col) => (
+                      <div key={col.name} className="flex-1 text-[10px] font-medium">
+                        {col.label || col.name}
+                      </div>
+                    ))}
+                  </div>
+                  {[1, 2, 3].map((i) => (
+                    <div key={i} className="flex border-b px-2 py-1 last:border-b-0">
+                      {config.rightPanel?.showCheckbox && (
+                        <div className="w-8">
+                          <div className="border h-3 w-3 rounded-sm"></div>
+                        </div>
+                      )}
+                      {rightDisplayColumns.slice(0, 4).map((col) => (
+                        <div key={col.name} className="text-muted-foreground flex-1 text-[10px]">
+                          ---
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                // 카드 모드 미리보기
+                <div className="space-y-2">
+                  {[1, 2].map((i) => (
+                    <div key={i} className="rounded-md border bg-background/50 p-2">
+                      <div className="flex items-center gap-2">
+                        {rightDisplayColumns
+                          .filter((col) => col.displayRow === "name" || !col.displayRow)
+                          .slice(0, 2)
+                          .map((col, idx) => (
+                            <div
+                              key={col.name}
+                              className={cn(
+                                "text-[10px]",
+                                idx === 0 ? "font-medium" : "text-muted-foreground"
+                              )}
+                            >
+                              {col.label || col.name}
+                            </div>
+                          ))}
+                      </div>
+                      {rightDisplayColumns.filter((col) => col.displayRow === "info").length > 0 && (
+                        <div className="text-muted-foreground mt-1 flex gap-2 text-[10px]">
+                          {rightDisplayColumns
+                            .filter((col) => col.displayRow === "info")
+                            .slice(0, 3)
+                            .map((col) => (
+                              <span key={col.name}>{col.label || col.name}</span>
+                            ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )
+            ) : (
+              <div className="flex h-full items-center justify-center">
+                <div className="text-muted-foreground text-xs">컬럼 미설정</div>
+              </div>
+            )}
+          </div>
+
+          {/* 연결 설정 표시 */}
+          {(config.joinConfig?.leftColumn || config.joinConfig?.keys?.length) && (
+            <div className="border-t px-3 py-1">
+              <div className="text-muted-foreground text-[10px]">
+                연결: {config.joinConfig?.leftColumn || config.joinConfig?.keys?.[0]?.leftColumn} →{" "}
+                {config.joinConfig?.rightColumn || config.joinConfig?.keys?.[0]?.rightColumn}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     );
@@ -1325,12 +1951,36 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
         <div className="bg-muted/30 border-b p-4">
           <div className="mb-3 flex items-center justify-between">
             <h3 className="text-base font-semibold">{config.leftPanel?.title || "목록"}</h3>
-            {config.leftPanel?.showAddButton && (
+            {/* actionButtons 배열이 정의되어 있으면(빈 배열 포함) 해당 배열 사용, undefined면 기존 showAddButton 사용 (하위호환) */}
+            {config.leftPanel?.actionButtons !== undefined ? (
+              // 새로운 actionButtons 배열 기반 렌더링 (빈 배열이면 버튼 없음)
+              config.leftPanel.actionButtons.length > 0 && (
+                <div className="flex items-center gap-2">
+                  {config.leftPanel.actionButtons.map((btn, idx) => (
+                    <Button
+                      key={idx}
+                      size="sm"
+                      variant={btn.variant || "default"}
+                      className="h-8 text-sm"
+                      onClick={() => {
+                        if (btn.action === "add") {
+                          handleLeftAddClick();
+                        }
+                      }}
+                    >
+                      {btn.icon && <span className="mr-1">{btn.icon}</span>}
+                      {btn.label || "버튼"}
+                    </Button>
+                  ))}
+                </div>
+              )
+            ) : config.leftPanel?.showAddButton ? (
+              // 기존 showAddButton 기반 렌더링 (하위호환 - actionButtons가 undefined일 때만)
               <Button size="sm" variant="default" className="h-8 text-sm" onClick={handleLeftAddClick}>
                 <Plus className="mr-1 h-4 w-4" />
                 {config.leftPanel?.addButtonLabel || "추가"}
               </Button>
-            )}
+            ) : null}
           </div>
 
           {/* 검색 */}
@@ -1347,15 +1997,49 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
           )}
         </div>
 
+        {/* 좌측 패널 탭 */}
+        {config.leftPanel?.tabConfig?.enabled && leftTabs.length > 0 && (
+          <div className="flex flex-wrap gap-2 border-b px-4 py-3">
+            {leftTabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setLeftActiveTab(tab.id)}
+                className={cn(
+                  "inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
+                  leftActiveTab === tab.id
+                    ? "border-primary bg-primary/5 text-primary"
+                    : "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                )}
+              >
+                <span>{tab.label}</span>
+                {config.leftPanel?.tabConfig?.showCount && (
+                  <span
+                    className={cn(
+                      "rounded-full px-2 py-0.5 text-xs",
+                      leftActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                    )}
+                  >
+                    {tab.count}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+
         {/* 목록 */}
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto p-2">
           {leftLoading ? (
             <div className="text-muted-foreground flex h-full items-center justify-center text-base">로딩 중...</div>
+          ) : (config.leftPanel?.displayMode || "card") === "table" ? (
+            // 테이블 모드
+            renderLeftTable()
           ) : filteredLeftData.length === 0 ? (
             <div className="text-muted-foreground flex h-full items-center justify-center text-base">
               데이터가 없습니다
             </div>
           ) : (
+            // 카드 모드 (기본)
             <div className="py-1">{filteredLeftData.map((item, index) => renderLeftItem(item, 0, index))}</div>
           )}
         </div>
@@ -1389,15 +2073,18 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
               )}
             </div>
             <div className="flex items-center gap-2">
-              {/* 복수 액션 버튼 (actionButtons 설정 시) */}
+              {/* actionButtons 배열이 정의되어 있으면(빈 배열 포함) 해당 배열 사용, undefined면 기존 showAddButton 사용 (하위호환) */}
-              {selectedLeftItem && renderActionButtons()}
+              {selectedLeftItem && (
-
+                config.rightPanel?.actionButtons !== undefined ? (
-              {/* 기존 단일 추가 버튼 (하위 호환성) */}
+                  // 새로운 actionButtons 배열 기반 렌더링 (빈 배열이면 버튼 없음)
-              {config.rightPanel?.showAddButton && selectedLeftItem && !config.rightPanel?.actionButtons?.length && (
+                  config.rightPanel.actionButtons.length > 0 && renderActionButtons()
+                ) : config.rightPanel?.showAddButton ? (
+                  // 기존 showAddButton 기반 렌더링 (하위호환 - actionButtons가 undefined일 때만)
                   <Button size="sm" variant="default" className="h-8 text-sm" onClick={handleRightAddClick}>
                     <Plus className="mr-1 h-4 w-4" />
                     {config.rightPanel?.addButtonLabel || "추가"}
                   </Button>
+                ) : null
               )}
             </div>
           </div>
@@ -1416,6 +2103,36 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
           )}
         </div>
 
+        {/* 우측 패널 탭 */}
+        {config.rightPanel?.tabConfig?.enabled && rightTabs.length > 0 && selectedLeftItem && (
+          <div className="flex flex-wrap gap-2 border-b px-4 py-3">
+            {rightTabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setRightActiveTab(tab.id)}
+                className={cn(
+                  "inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all",
+                  rightActiveTab === tab.id
+                    ? "border-primary bg-primary/5 text-primary"
+                    : "border-muted bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                )}
+              >
+                <span>{tab.label}</span>
+                {config.rightPanel?.tabConfig?.showCount && (
+                  <span
+                    className={cn(
+                      "rounded-full px-2 py-0.5 text-xs",
+                      rightActiveTab === tab.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                    )}
+                  >
+                    {tab.count}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+
         {/* 내용 */}
         <div className="flex-1 overflow-auto p-4">
           {!selectedLeftItem ? (

frontend/lib/registry/components/split-panel-layout2/components/SearchableColumnSelect.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Check, ChevronsUpDown, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+
+export interface ColumnInfo {
+  column_name: string;
+  data_type: string;
+  column_comment?: string;
+}
+
+interface SearchableColumnSelectProps {
+  tableName: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  excludeColumns?: string[]; // 이미 선택된 컬럼 제외
+  className?: string;
+}
+
+export const SearchableColumnSelect: React.FC<SearchableColumnSelectProps> = ({
+  tableName,
+  value,
+  onValueChange,
+  placeholder = "컬럼 선택",
+  disabled = false,
+  excludeColumns = [],
+  className,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // 컬럼 목록 로드
+  const loadColumns = useCallback(async () => {
+    if (!tableName) {
+      setColumns([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
+
+      let columnList: any[] = [];
+      if (response.data?.success && response.data?.data?.columns) {
+        columnList = response.data.data.columns;
+      } else if (Array.isArray(response.data?.data?.columns)) {
+        columnList = response.data.data.columns;
+      } else if (Array.isArray(response.data?.data)) {
+        columnList = response.data.data;
+      } else if (Array.isArray(response.data)) {
+        columnList = response.data;
+      }
+
+      const transformedColumns = columnList.map((c: any) => ({
+        column_name: c.columnName ?? c.column_name ?? c.name ?? "",
+        data_type: c.dataType ?? c.data_type ?? c.type ?? "",
+        column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
+      }));
+
+      setColumns(transformedColumns);
+    } catch (error) {
+      console.error("컬럼 목록 로드 실패:", error);
+      setColumns([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [tableName]);
+
+  useEffect(() => {
+    loadColumns();
+  }, [loadColumns]);
+
+  // 선택된 컬럼 정보 가져오기
+  const selectedColumn = columns.find((col) => col.column_name === value);
+  const displayValue = selectedColumn
+    ? selectedColumn.column_comment || selectedColumn.column_name
+    : value || "";
+
+  // 필터링된 컬럼 목록 (이미 선택된 컬럼 제외)
+  const filteredColumns = columns.filter(
+    (col) => !excludeColumns.includes(col.column_name) || col.column_name === value
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || loading || !tableName}
+          className={cn("w-full justify-between h-9 text-sm", className)}
+        >
+          {loading ? (
+            "로딩 중..."
+          ) : !tableName ? (
+            "테이블을 먼저 선택하세요"
+          ) : (
+            <span className="truncate">
+              {displayValue || placeholder}
+            </span>
+          )}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+        <Command>
+          <CommandInput placeholder="컬럼명 또는 라벨 검색..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>
+              {filteredColumns.length === 0 ? "선택 가능한 컬럼이 없습니다" : "검색 결과가 없습니다"}
+            </CommandEmpty>
+            <CommandGroup>
+              {filteredColumns.map((col) => (
+                <CommandItem
+                  key={col.column_name}
+                  value={`${col.column_name} ${col.column_comment || ""}`}
+                  onSelect={() => {
+                    onValueChange(col.column_name);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4 shrink-0",
+                      value === col.column_name ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <div className="flex flex-col min-w-0">
+                    <span className="truncate font-medium">
+                      {col.column_comment || col.column_name}
+                    </span>
+                    <span className="text-xs text-muted-foreground truncate">
+                      {col.column_name} ({col.data_type})
+                    </span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default SearchableColumnSelect;
+

frontend/lib/registry/components/split-panel-layout2/components/SortableColumnItem.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, Settings, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import type { ColumnConfig } from "../types";
+
+interface SortableColumnItemProps {
+  id: string;
+  column: ColumnConfig;
+  index: number;
+  onSettingsClick: () => void;
+  onRemove: () => void;
+  showGroupingSettings?: boolean;
+}
+
+export const SortableColumnItem: React.FC<SortableColumnItemProps> = ({
+  id,
+  column,
+  index,
+  onSettingsClick,
+  onRemove,
+  showGroupingSettings = false,
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-card p-2",
+        isDragging && "opacity-50 shadow-lg"
+      )}
+    >
+      {/* 드래그 핸들 */}
+      <div
+        {...attributes}
+        {...listeners}
+        className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
+      >
+        <GripVertical className="h-4 w-4" />
+      </div>
+
+      {/* 컬럼 정보 */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium truncate">
+            {column.label || column.name || `컬럼 ${index + 1}`}
+          </span>
+          {column.name && column.label && (
+            <span className="text-xs text-muted-foreground truncate">
+              ({column.name})
+            </span>
+          )}
+        </div>
+
+        {/* 설정 요약 뱃지 */}
+        <div className="flex flex-wrap gap-1 mt-1">
+          {column.displayRow && (
+            <Badge variant="outline" className="text-[10px] h-4">
+              {column.displayRow === "name" ? "이름행" : "정보행"}
+            </Badge>
+          )}
+          {showGroupingSettings && column.displayConfig?.displayType === "badge" && (
+            <Badge variant="secondary" className="text-[10px] h-4">
+              배지
+            </Badge>
+          )}
+          {showGroupingSettings && column.displayConfig?.aggregate?.enabled && (
+            <Badge variant="secondary" className="text-[10px] h-4">
+              {column.displayConfig.aggregate.function === "DISTINCT" ? "중복제거" : "개수"}
+            </Badge>
+          )}
+          {column.sourceTable && (
+            <Badge variant="outline" className="text-[10px] h-4">
+              {column.sourceTable}
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* 액션 버튼들 */}
+      <div className="flex items-center gap-1 shrink-0">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-7 w-7 p-0"
+          onClick={onSettingsClick}
+          title="세부설정"
+        >
+          <Settings className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+          onClick={onRemove}
+          title="삭제"
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default SortableColumnItem;
+

frontend/lib/registry/components/split-panel-layout2/index.ts

@@ -37,5 +37,13 @@ export type {
   JoinConfig,
   DataTransferField,
   ColumnConfig,
+  ActionButtonConfig,
+  ValueSourceConfig,
+  EntityReferenceConfig,
+  ModalParamMapping,
 } from "./types";
 
+// 모달 컴포넌트 내보내기 (별도 사용 필요시)
+export { ColumnConfigModal } from "./ColumnConfigModal";
+export { ActionButtonConfigModal } from "./ActionButtonConfigModal";
+

frontend/lib/registry/components/split-panel-layout2/types.ts

@@ -3,6 +3,65 @@
  * 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
  */
 
+// =============================================================================
+// 값 소스 및 연동 설정
+// =============================================================================
+
+/**
+ * 값 소스 설정 (화면 내 필드/폼에서 값 가져오기)
+ */
+export interface ValueSourceConfig {
+  type: "none" | "field" | "dataForm" | "component"; // 소스 유형
+  fieldId?: string; // 필드 컴포넌트 ID
+  formId?: string; // 데이터폼 ID
+  formFieldName?: string; // 데이터폼 내 필드명
+  componentId?: string; // 다른 컴포넌트 ID
+  componentColumn?: string; // 컴포넌트에서 참조할 컬럼
+}
+
+/**
+ * 엔티티 참조 설정 (엔티티에서 표시할 값 선택)
+ */
+export interface EntityReferenceConfig {
+  entityId?: string; // 연결된 엔티티 ID
+  displayColumns?: string[]; // 표시할 엔티티 컬럼들 (체크박스 선택)
+  primaryDisplayColumn?: string; // 주 표시 컬럼
+}
+
+// =============================================================================
+// 컬럼 표시 설정
+// =============================================================================
+
+/**
+ * 컬럼별 표시 설정 (그룹핑 시 사용)
+ */
+export interface ColumnDisplayConfig {
+  displayType: "text" | "badge"; // 표시 방식 (텍스트 또는 배지)
+  aggregate?: {
+    enabled: boolean; // 집계 사용 여부
+    function: "DISTINCT" | "COUNT"; // 집계 방식 (중복제거 또는 개수)
+  };
+}
+
+/**
+ * 그룹핑 설정 (왼쪽 패널용)
+ */
+export interface GroupingConfig {
+  enabled: boolean; // 그룹핑 사용 여부
+  groupByColumn: string; // 그룹 기준 컬럼 (예: item_id)
+}
+
+/**
+ * 탭 설정
+ */
+export interface TabConfig {
+  enabled: boolean; // 탭 사용 여부
+  mode?: "auto" | "manual"; // 하위 호환성용 (실제로는 manual만 사용)
+  tabSourceColumn?: string; // 탭 생성 기준 컬럼
+  showCount?: boolean; // 탭에 항목 개수 표시 여부
+  defaultTab?: string; // 기본 선택 탭 (값 또는 ID)
+}
+
 /**
  * 컬럼 설정
  */
@@ -13,6 +72,9 @@ export interface ColumnConfig {
   displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
   width?: number; // 너비 (px)
   bold?: boolean; // 굵게 표시
+  displayConfig?: ColumnDisplayConfig; // 컬럼별 표시 설정 (그룹핑 시)
+  entityReference?: EntityReferenceConfig; // 엔티티 참조 설정
+  valueSource?: ValueSourceConfig; // 값 소스 설정 (화면 내 연동)
   format?: {
     type?: "text" | "number" | "currency" | "date";
     thousandSeparator?: boolean;
@@ -23,27 +85,58 @@ export interface ColumnConfig {
   };
 }
 
+/**
+ * 모달 파라미터 매핑 설정
+ */
+export interface ModalParamMapping {
+  sourceColumn: string; // 선택된 항목에서 가져올 컬럼
+  targetParam: string; // 모달에 전달할 파라미터명
+}
+
 /**
  * 액션 버튼 설정
  */
 export interface ActionButtonConfig {
   id: string; // 고유 ID
   label: string; // 버튼 라벨
-  variant?: "default" | "outline" | "destructive" | "ghost"; // 버튼 스타일
+  variant?: "default" | "secondary" | "outline" | "destructive" | "ghost"; // 버튼 스타일
   icon?: string; // lucide 아이콘명 (예: "Plus", "Edit", "Trash2")
+  showCondition?: "always" | "selected" | "notSelected"; // 표시 조건
+  action?: "add" | "edit" | "delete" | "bulk-delete" | "api" | "custom"; // 버튼 동작 유형
+
+  // 모달 관련
   modalScreenId?: number; // 연결할 모달 화면 ID
-  action?: "add" | "edit" | "delete" | "bulk-delete" | "custom"; // 버튼 동작 유형
+  modalParams?: ModalParamMapping[]; // 모달에 전달할 파라미터 매핑
+
+  // API 호출 관련
+  apiEndpoint?: string; // API 엔드포인트
+  apiMethod?: "GET" | "POST" | "PUT" | "DELETE"; // HTTP 메서드
+  confirmMessage?: string; // 확인 메시지 (삭제 등)
+
+  // 커스텀 액션
+  customActionId?: string; // 커스텀 액션 식별자
 }
 
 /**
  * 데이터 전달 필드 설정
  */
 export interface DataTransferField {
-  sourceColumn: string; // 좌측 패널의 컬럼명
+  sourceColumn: string; // 소스 패널의 컬럼명
   targetColumn: string; // 모달로 전달할 컬럼명
   label?: string; // 표시용 라벨
 }
 
+/**
+ * 버튼별 데이터 전달 설정
+ * 특정 패널의 특정 버튼에 어떤 데이터를 전달할지 설정
+ */
+export interface ButtonDataTransferConfig {
+  id: string; // 고유 ID
+  targetPanel: "left" | "right"; // 대상 패널
+  targetButtonId: string; // 대상 버튼 ID
+  fields: DataTransferField[]; // 전달할 필드 목록
+}
+
 /**
  * 검색 컬럼 설정
  */
@@ -62,15 +155,24 @@ export interface LeftPanelConfig {
   searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
   searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
   showSearch?: boolean; // 검색 표시 여부
-  showAddButton?: boolean; // 추가 버튼 표시
+  showAddButton?: boolean; // 추가 버튼 표시 (하위 호환성)
-  addButtonLabel?: string; // 추가 버튼 라벨
+  addButtonLabel?: string; // 추가 버튼 라벨 (하위 호환성)
-  addModalScreenId?: number; // 추가 모달 화면 ID
+  addModalScreenId?: number; // 추가 모달 화면 ID (하위 호환성)
+  actionButtons?: ActionButtonConfig[]; // 복수 액션 버튼 배열
+  displayMode?: "card" | "table"; // 표시 모드 (card: 카드형, table: 테이블형)
+  primaryKeyColumn?: string; // 기본키 컬럼명 (선택용, 기본: id)
   // 계층 구조 설정
   hierarchyConfig?: {
     enabled: boolean;
     parentColumn: string; // 부모 참조 컬럼 (예: parent_dept_code)
     idColumn: string; // ID 컬럼 (예: dept_code)
   };
+  // 그룹핑 설정
+  grouping?: GroupingConfig;
+  // 탭 설정
+  tabConfig?: TabConfig;
+  // 추가 조인 테이블 설정 (다른 테이블 참조하여 컬럼 추가 표시)
+  joinTables?: JoinTableConfig[];
 }
 
 /**
@@ -106,6 +208,8 @@ export interface RightPanelConfig {
    * - 결과: 부서별 사원 목록에 이메일, 전화번호 등 개인정보 함께 표시
    */
   joinTables?: JoinTableConfig[];
+  // 탭 설정
+  tabConfig?: TabConfig;
 }
 
 /**
@@ -157,9 +261,12 @@ export interface SplitPanelLayout2Config {
   // 조인 설정
   joinConfig: JoinConfig;
 
-  // 데이터 전달 설정 (모달로 전달할 필드)
+  // 데이터 전달 설정 (하위 호환성 - 기본 설정)
   dataTransferFields?: DataTransferField[];
 
+  // 버튼별 데이터 전달 설정 (신규)
+  buttonDataTransfers?: ButtonDataTransferConfig[];
+
   // 레이아웃 설정
   splitRatio?: number; // 좌우 비율 (0-100, 기본 30)
   resizable?: boolean; // 크기 조절 가능 여부

frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx

@@ -621,6 +621,14 @@ export function TableSectionRenderer({
             if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
               newItem[col.field] = col.defaultValue;
             }
+
+            // 부모에서 값 받기 (receiveFromParent)
+            if (col.receiveFromParent) {
+              const parentField = col.parentFieldName || col.field;
+              if (formData[parentField] !== undefined) {
+                newItem[col.field] = formData[parentField];
+              }
+            }
           }
 
           return newItem;

frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
@@ -47,13 +48,24 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
   <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
 );
 
-export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFormModalConfigPanelProps) {
+// 부모 화면에서 전달 가능한 필드 타입
+interface AvailableParentField {
+  name: string;           // 필드명 (columnName)
+  label: string;          // 표시 라벨
+  sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
+  sourceTable?: string;   // 출처 테이블명
+}
+
+export function UniversalFormModalConfigPanel({ config, onChange, allComponents = [] }: UniversalFormModalConfigPanelProps) {
   // 테이블 목록
   const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
   const [tableColumns, setTableColumns] = useState<{
     [tableName: string]: { name: string; type: string; label: string }[];
   }>({});
 
+  // 부모 화면에서 전달 가능한 필드 목록
+  const [availableParentFields, setAvailableParentFields] = useState<AvailableParentField[]>([]);
+
   // 채번규칙 목록
   const [numberingRules, setNumberingRules] = useState<{ id: string; name: string }[]>([]);
 
@@ -71,6 +83,186 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
     loadNumberingRules();
   }, []);
 
+  // allComponents에서 부모 화면에서 전달 가능한 필드 추출
+  useEffect(() => {
+    const extractParentFields = async () => {
+      if (!allComponents || allComponents.length === 0) {
+        setAvailableParentFields([]);
+        return;
+      }
+
+      const fields: AvailableParentField[] = [];
+
+      for (const comp of allComponents) {
+        // 컴포넌트 타입 추출 (여러 위치에서 확인)
+        const compType = comp.componentId || comp.componentConfig?.type || comp.componentConfig?.id || comp.type;
+        const compConfig = comp.componentConfig || {};
+
+        // 1. TableList / InteractiveDataTable - 테이블 컬럼 추출
+        if (compType === "table-list" || compType === "interactive-data-table") {
+          const tableName = compConfig.selectedTable || compConfig.tableName;
+          if (tableName) {
+            // 테이블 컬럼 로드
+            try {
+              const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+              const columns = response.data?.data?.columns;
+              if (response.data?.success && Array.isArray(columns)) {
+                columns.forEach((col: any) => {
+                  const colName = col.columnName || col.column_name;
+                  const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
+                  fields.push({
+                    name: colName,
+                    label: colLabel,
+                    sourceComponent: "TableList",
+                    sourceTable: tableName,
+                  });
+                });
+              }
+            } catch (error) {
+              console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
+            }
+          }
+        }
+
+        // 2. SplitPanelLayout2 - 데이터 전달 필드 및 소스 테이블 컬럼 추출
+        if (compType === "split-panel-layout2") {
+          // dataTransferFields 추출
+          const transferFields = compConfig.dataTransferFields;
+          if (transferFields && Array.isArray(transferFields)) {
+            transferFields.forEach((field: any) => {
+              if (field.targetColumn) {
+                fields.push({
+                  name: field.targetColumn,
+                  label: field.targetColumn,
+                  sourceComponent: "SplitPanelLayout2",
+                  sourceTable: compConfig.leftPanel?.tableName,
+                });
+              }
+            });
+          }
+          
+          // 좌측 패널 테이블 컬럼도 추출
+          const leftTableName = compConfig.leftPanel?.tableName;
+          if (leftTableName) {
+            try {
+              const response = await apiClient.get(`/table-management/tables/${leftTableName}/columns`);
+              const columns = response.data?.data?.columns;
+              if (response.data?.success && Array.isArray(columns)) {
+                columns.forEach((col: any) => {
+                  const colName = col.columnName || col.column_name;
+                  const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
+                  // 중복 방지
+                  if (!fields.some(f => f.name === colName && f.sourceTable === leftTableName)) {
+                    fields.push({
+                      name: colName,
+                      label: colLabel,
+                      sourceComponent: "SplitPanelLayout2 (좌측)",
+                      sourceTable: leftTableName,
+                    });
+                  }
+                });
+              }
+            } catch (error) {
+              console.error(`테이블 컬럼 로드 실패 (${leftTableName}):`, error);
+            }
+          }
+        }
+
+        // 3. 기타 테이블 관련 컴포넌트
+        if (compType === "card-display" || compType === "simple-repeater-table") {
+          const tableName = compConfig.tableName || compConfig.initialDataConfig?.sourceTable;
+          if (tableName) {
+            try {
+              const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+              const columns = response.data?.data?.columns;
+              if (response.data?.success && Array.isArray(columns)) {
+                columns.forEach((col: any) => {
+                  const colName = col.columnName || col.column_name;
+                  const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
+                  if (!fields.some(f => f.name === colName && f.sourceTable === tableName)) {
+                    fields.push({
+                      name: colName,
+                      label: colLabel,
+                      sourceComponent: compType,
+                      sourceTable: tableName,
+                    });
+                  }
+                });
+              }
+            } catch (error) {
+              console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
+            }
+          }
+        }
+
+        // 4. 버튼 컴포넌트 - openModalWithData의 fieldMappings/dataMapping에서 소스 컬럼 추출
+        if (compType === "button-primary" || compType === "button" || compType === "button-secondary") {
+          const action = compConfig.action || {};
+          
+          // fieldMappings에서 소스 컬럼 추출
+          const fieldMappings = action.fieldMappings || [];
+          fieldMappings.forEach((mapping: any) => {
+            if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
+              fields.push({
+                name: mapping.sourceColumn,
+                label: mapping.sourceColumn,
+                sourceComponent: "Button (fieldMappings)",
+                sourceTable: action.sourceTableName,
+              });
+            }
+          });
+          
+          // dataMapping에서 소스 컬럼 추출
+          const dataMapping = action.dataMapping || [];
+          dataMapping.forEach((mapping: any) => {
+            if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
+              fields.push({
+                name: mapping.sourceColumn,
+                label: mapping.sourceColumn,
+                sourceComponent: "Button (dataMapping)",
+                sourceTable: action.sourceTableName,
+              });
+            }
+          });
+        }
+      }
+
+      // 5. 현재 모달의 저장 테이블 컬럼도 추가 (부모에서 전달받을 수 있는 값들)
+      const currentTableName = config.saveConfig?.tableName;
+      if (currentTableName) {
+        try {
+          const response = await apiClient.get(`/table-management/tables/${currentTableName}/columns`);
+          const columns = response.data?.data?.columns;
+          if (response.data?.success && Array.isArray(columns)) {
+            columns.forEach((col: any) => {
+              const colName = col.columnName || col.column_name;
+              const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
+              if (!fields.some(f => f.name === colName)) {
+                fields.push({
+                  name: colName,
+                  label: colLabel,
+                  sourceComponent: "현재 폼 테이블",
+                  sourceTable: currentTableName,
+                });
+              }
+            });
+          }
+        } catch (error) {
+          console.error(`현재 테이블 컬럼 로드 실패 (${currentTableName}):`, error);
+        }
+      }
+
+      // 중복 제거 (같은 name이면 첫 번째만 유지)
+      const uniqueFields = fields.filter((field, index, self) =>
+        index === self.findIndex(f => f.name === field.name)
+      );
+
+      setAvailableParentFields(uniqueFields);
+    };
+
+    extractParentFields();
+  }, [allComponents, config.saveConfig?.tableName]);
+
   // 저장 테이블 변경 시 컬럼 로드
   useEffect(() => {
     if (config.saveConfig.tableName) {
@@ -84,9 +276,10 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
       const data = response.data?.data;
       if (response.data?.success && Array.isArray(data)) {
         setTables(
-          data.map((t: { tableName?: string; table_name?: string; tableLabel?: string; table_label?: string }) => ({
+          data.map((t: { tableName?: string; table_name?: string; displayName?: string; tableLabel?: string; table_label?: string }) => ({
             name: t.tableName || t.table_name || "",
-            label: t.tableLabel || t.table_label || t.tableName || t.table_name || "",
+            // displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
+            label: t.displayName || t.tableLabel || t.table_label || "",
           })),
         );
       }
@@ -334,6 +527,21 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                 <HelpText>모달 창의 크기를 선택하세요</HelpText>
               </div>
 
+              {/* 저장 버튼 표시 설정 */}
+              <div className="w-full min-w-0">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="show-save-button"
+                    checked={config.modal.showSaveButton !== false}
+                    onCheckedChange={(checked) => updateModalConfig({ showSaveButton: checked === true })}
+                  />
+                  <Label htmlFor="show-save-button" className="text-xs font-medium cursor-pointer">
+                    저장 버튼 표시
+                  </Label>
+                </div>
+                <HelpText>체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다</HelpText>
+              </div>
+
               <div className="space-y-3 w-full min-w-0">
                 <div className="w-full min-w-0">
                   <Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label>
@@ -604,6 +812,12 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
             setSelectedField(field);
             setFieldDetailModalOpen(true);
           }}
+          tableName={config.saveConfig.tableName}
+          tableColumns={tableColumns[config.saveConfig.tableName || ""]?.map(col => ({
+            name: col.name,
+            type: col.type,
+            label: col.label || col.name
+          })) || []}
         />
       )}
 
@@ -650,6 +864,9 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
           tableColumns={tableColumns}
           numberingRules={numberingRules}
           onLoadTableColumns={loadTableColumns}
+          availableParentFields={availableParentFields}
+          targetTableName={config.saveConfig?.tableName}
+          targetTableColumns={config.saveConfig?.tableName ? tableColumns[config.saveConfig.tableName] || [] : []}
         />
       )}
 
@@ -690,6 +907,7 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
           )}
           onLoadTableColumns={loadTableColumns}
           allSections={config.sections as FormSectionConfig[]}
+          availableParentFields={availableParentFields}
         />
       )}
     </div>

frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx

@@ -10,7 +10,16 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
-import { Plus, Trash2, Settings as SettingsIcon } from "lucide-react";
+import { Plus, Trash2, Settings as SettingsIcon, Check, ChevronsUpDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
 import { cn } from "@/lib/utils";
 import {
   FormFieldConfig,
@@ -36,6 +45,17 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
   <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
 );
 
+/**
+ * 부모 화면에서 전달 가능한 필드 타입
+ * 유니버셜 폼 모달에서 "부모에서 값 받기" 설정 시 선택 가능한 필드 목록
+ */
+export interface AvailableParentField {
+  name: string;           // 필드명 (columnName)
+  label: string;          // 표시 라벨
+  sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
+  sourceTable?: string;   // 출처 테이블명
+}
+
 interface FieldDetailSettingsModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -45,6 +65,11 @@ interface FieldDetailSettingsModalProps {
   tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
   numberingRules: { id: string; name: string }[];
   onLoadTableColumns: (tableName: string) => void;
+  // 부모 화면에서 전달 가능한 필드 목록 (선택사항)
+  availableParentFields?: AvailableParentField[];
+  // 저장 테이블 정보 (타겟 컬럼 선택용)
+  targetTableName?: string;
+  targetTableColumns?: { name: string; type: string; label: string }[];
 }
 
 export function FieldDetailSettingsModal({
@@ -56,7 +81,13 @@ export function FieldDetailSettingsModal({
   tableColumns,
   numberingRules,
   onLoadTableColumns,
+  availableParentFields = [],
+  // targetTableName은 타겟 컬럼 선택 시 참고용으로 전달됨 (현재 targetTableColumns만 사용)
+  targetTableName: _targetTableName,
+  targetTableColumns = [],
 }: FieldDetailSettingsModalProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  void _targetTableName; // 향후 사용 가능성을 위해 유지
   // 로컬 상태로 필드 설정 관리
   const [localField, setLocalField] = useState<FormFieldConfig>(field);
   
@@ -64,6 +95,10 @@ export function FieldDetailSettingsModal({
   const [categoryColumns, setCategoryColumns] = useState<CategoryColumnOption[]>([]);
   const [loadingCategoryColumns, setLoadingCategoryColumns] = useState(false);
   
+  // Combobox 열림 상태
+  const [sourceTableOpen, setSourceTableOpen] = useState(false);
+  const [targetColumnOpenMap, setTargetColumnOpenMap] = useState<Record<number, boolean>>({});
+
   // open이 변경될 때마다 필드 데이터 동기화
   useEffect(() => {
     if (open) {
@@ -293,6 +328,49 @@ export function FieldDetailSettingsModal({
                   />
                 </div>
                 <HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다</HelpText>
+
+                {/* 부모에서 값 받기 활성화 시 필드 선택 */}
+                {localField.receiveFromParent && (
+                  <div className="mt-3 space-y-2 p-3 rounded-md bg-blue-50 border border-blue-200">
+                    <Label className="text-xs font-medium text-blue-700">부모 필드명 선택</Label>
+                    {availableParentFields.length > 0 ? (
+                      <Select
+                        value={localField.parentFieldName || localField.columnName}
+                        onValueChange={(value) => updateField({ parentFieldName: value })}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="필드 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {availableParentFields.map((pf) => (
+                            <SelectItem key={pf.name} value={pf.name}>
+                              <div className="flex flex-col">
+                                <span>{pf.label || pf.name}</span>
+                                {pf.sourceComponent && (
+                                  <span className="text-[9px] text-muted-foreground">
+                                    {pf.sourceComponent}{pf.sourceTable && ` (${pf.sourceTable})`}
+                                  </span>
+                                )}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <div className="space-y-1">
+                        <Input
+                          value={localField.parentFieldName || ""}
+                          onChange={(e) => updateField({ parentFieldName: e.target.value })}
+                          placeholder={`예: ${localField.columnName || "parent_field_name"}`}
+                          className="h-8 text-xs"
+                        />
+                        <p className="text-[10px] text-muted-foreground">
+                          부모 화면에서 전달받을 필드명을 입력하세요. 비워두면 "{localField.columnName}"을 사용합니다.
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
               </div>
 
               {/* Accordion으로 고급 설정 */}
@@ -472,12 +550,12 @@ export function FieldDetailSettingsModal({
                             <Label className="text-[10px]">저장할 컬럼</Label>
                             {selectTableColumns.length > 0 ? (
                               <Select
-                                value={localField.selectOptions?.saveColumn || ""}
+                                value={localField.selectOptions?.saveColumn || "__default__"}
                                 onValueChange={(value) =>
                                   updateField({
                                     selectOptions: {
                                       ...localField.selectOptions,
-                                      saveColumn: value,
+                                      saveColumn: value === "__default__" ? "" : value,
                                     },
                                   })
                                 }
@@ -486,7 +564,7 @@ export function FieldDetailSettingsModal({
                                   <SelectValue placeholder="컬럼 선택 (미선택 시 조인 컬럼 저장)" />
                                 </SelectTrigger>
                                 <SelectContent>
-                                  <SelectItem value="">조인 컬럼 사용 (기본)</SelectItem>
+                                  <SelectItem value="__default__">조인 컬럼 사용 (기본)</SelectItem>
                                   {selectTableColumns.map((col) => (
                                     <SelectItem key={col.name} value={col.name}>
                                       {col.name}
@@ -592,29 +670,68 @@ export function FieldDetailSettingsModal({
                       <div className="space-y-3 pt-2 border-t">
                         <div>
                           <Label className="text-[10px]">소스 테이블</Label>
-                          <Select
+                          <Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
-                            value={localField.linkedFieldGroup?.sourceTable || ""}
+                            <PopoverTrigger asChild>
-                            onValueChange={(value) => {
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                aria-expanded={sourceTableOpen}
+                                className="h-7 w-full justify-between text-xs mt-1 font-normal"
+                              >
+                                {localField.linkedFieldGroup?.sourceTable
+                                  ? (() => {
+                                      const selectedTable = tables.find(
+                                        (t) => t.name === localField.linkedFieldGroup?.sourceTable
+                                      );
+                                      return selectedTable
+                                        ? `${selectedTable.label || selectedTable.name} (${selectedTable.name})`
+                                        : localField.linkedFieldGroup?.sourceTable;
+                                    })()
+                                  : "테이블 선택..."}
+                                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-[300px] p-0" align="start">
+                              <Command>
+                                <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                                <CommandList>
+                                  <CommandEmpty className="py-2 text-xs text-center">
+                                    테이블을 찾을 수 없습니다.
+                                  </CommandEmpty>
+                                  <CommandGroup>
+                                    {tables.map((t) => (
+                                      <CommandItem
+                                        key={t.name}
+                                        value={`${t.name} ${t.label || ""}`}
+                                        onSelect={() => {
                                           updateField({
                                             linkedFieldGroup: {
                                               ...localField.linkedFieldGroup,
-                                  sourceTable: value,
+                                              sourceTable: t.name,
                                             },
                                           });
-                              onLoadTableColumns(value);
+                                          onLoadTableColumns(t.name);
+                                          setSourceTableOpen(false);
                                         }}
+                                        className="text-xs"
                                       >
-                            <SelectTrigger className="h-7 text-xs mt-1">
+                                        <Check
-                              <SelectValue placeholder="테이블 선택" />
+                                          className={cn(
-                            </SelectTrigger>
+                                            "mr-2 h-3 w-3",
-                            <SelectContent>
+                                            localField.linkedFieldGroup?.sourceTable === t.name
-                              {tables.map((t) => (
+                                              ? "opacity-100"
-                                <SelectItem key={t.name} value={t.name}>
+                                              : "opacity-0"
-                                  {t.label || t.name}
+                                          )}
-                                </SelectItem>
+                                        />
+                                        <span className="font-medium">{t.label || t.name}</span>
+                                        <span className="ml-1 text-muted-foreground">({t.name})</span>
+                                      </CommandItem>
                                     ))}
-                            </SelectContent>
+                                  </CommandGroup>
-                          </Select>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
                           <HelpText>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
                         </div>
 
@@ -763,6 +880,69 @@ export function FieldDetailSettingsModal({
 
                                   <div>
                                     <Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
+                                    {targetTableColumns.length > 0 ? (
+                                      <Popover
+                                        open={targetColumnOpenMap[index] || false}
+                                        onOpenChange={(open) =>
+                                          setTargetColumnOpenMap((prev) => ({ ...prev, [index]: open }))
+                                        }
+                                      >
+                                        <PopoverTrigger asChild>
+                                          <Button
+                                            variant="outline"
+                                            role="combobox"
+                                            aria-expanded={targetColumnOpenMap[index] || false}
+                                            className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
+                                          >
+                                            {mapping.targetColumn
+                                              ? (() => {
+                                                  const selectedCol = targetTableColumns.find(
+                                                    (c) => c.name === mapping.targetColumn
+                                                  );
+                                                  return selectedCol
+                                                    ? `${selectedCol.name} (${selectedCol.label})`
+                                                    : mapping.targetColumn;
+                                                })()
+                                              : "컬럼 선택..."}
+                                            <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                                          </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-[250px] p-0" align="start">
+                                          <Command>
+                                            <CommandInput placeholder="컬럼 검색..." className="h-7 text-[9px]" />
+                                            <CommandList>
+                                              <CommandEmpty className="py-2 text-[9px] text-center">
+                                                컬럼을 찾을 수 없습니다.
+                                              </CommandEmpty>
+                                              <CommandGroup>
+                                                {targetTableColumns.map((col) => (
+                                                  <CommandItem
+                                                    key={col.name}
+                                                    value={`${col.name} ${col.label}`}
+                                                    onSelect={() => {
+                                                      updateLinkedFieldMapping(index, { targetColumn: col.name });
+                                                      setTargetColumnOpenMap((prev) => ({ ...prev, [index]: false }));
+                                                    }}
+                                                    className="text-[9px]"
+                                                  >
+                                                    <Check
+                                                      className={cn(
+                                                        "mr-2 h-3 w-3",
+                                                        mapping.targetColumn === col.name
+                                                          ? "opacity-100"
+                                                          : "opacity-0"
+                                                      )}
+                                                    />
+                                                    <span className="font-medium">{col.name}</span>
+                                                    <span className="ml-1 text-muted-foreground">({col.label})</span>
+                                                  </CommandItem>
+                                                ))}
+                                              </CommandGroup>
+                                            </CommandList>
+                                          </Command>
+                                        </PopoverContent>
+                                      </Popover>
+                                    ) : (
                                       <Input
                                         value={mapping.targetColumn || ""}
                                         onChange={(e) =>
@@ -771,6 +951,7 @@ export function FieldDetailSettingsModal({
                                         placeholder="partner_id"
                                         className="h-6 text-[9px] mt-0.5"
                                       />
+                                    )}
                                   </div>
                                 </div>
                               ))}
@@ -909,3 +1090,4 @@ export function FieldDetailSettingsModal({
 
 
 
+

frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx

@@ -11,7 +11,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
-import { Plus, Trash2, Database, Layers, Info } 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, Database, Layers, Info, Check, ChevronsUpDown } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { SaveConfig, SubTableSaveConfig, SubTableFieldMapping, FormSectionConfig, FormFieldConfig, SectionSaveMode } from "../types";
@@ -50,6 +52,11 @@ export function SaveSettingsModal({
     saveConfig.customApiSave?.enabled && saveConfig.customApiSave?.multiTable?.enabled ? "multi" : "single"
   );
 
+  // 테이블 검색 Popover 상태
+  const [singleTableSearchOpen, setSingleTableSearchOpen] = useState(false);
+  const [mainTableSearchOpen, setMainTableSearchOpen] = useState(false);
+  const [subTableSearchOpen, setSubTableSearchOpen] = useState<Record<number, boolean>>({});
+
   // open이 변경될 때마다 데이터 동기화
   useEffect(() => {
     if (open) {
@@ -217,8 +224,8 @@ export function SaveSettingsModal({
   const repeatSections = sections.filter((s) => s.repeatable);
 
   // 모든 필드 목록 (반복 섹션 포함)
-  const getAllFields = (): { columnName: string; label: string; sectionTitle: string }[] => {
+  const getAllFields = (): { columnName: string; label: string; sectionTitle: string; sectionId: string }[] => {
-    const fields: { columnName: string; label: string; sectionTitle: string }[] = [];
+    const fields: { columnName: string; label: string; sectionTitle: string; sectionId: string }[] = [];
     sections.forEach((section) => {
       // 필드 타입 섹션만 처리 (테이블 타입은 fields가 undefined)
       if (section.fields && Array.isArray(section.fields)) {
@@ -227,6 +234,7 @@ export function SaveSettingsModal({
             columnName: field.columnName,
             label: field.label,
             sectionTitle: section.title,
+            sectionId: section.id,
           });
         });
       }
@@ -375,24 +383,68 @@ export function SaveSettingsModal({
 
                   <div>
                     <Label className="text-[10px]">저장 테이블</Label>
-                    <Select
+                    <Popover open={singleTableSearchOpen} onOpenChange={setSingleTableSearchOpen}>
-                      value={localSaveConfig.tableName || ""}
+                      <PopoverTrigger asChild>
-                      onValueChange={(value) => {
+                        <Button
-                        updateSaveConfig({ tableName: value });
+                          variant="outline"
-                        onLoadTableColumns(value);
+                          role="combobox"
-                      }}
+                          aria-expanded={singleTableSearchOpen}
+                          className="h-8 w-full justify-between text-xs mt-1 font-normal"
                         >
-                      <SelectTrigger className="h-7 text-xs mt-1">
+                          {localSaveConfig.tableName ? (
-                        <SelectValue placeholder="테이블 선택" />
+                            <div className="flex flex-col items-start text-left">
-                      </SelectTrigger>
+                              <span className="font-medium">{localSaveConfig.tableName}</span>
-                      <SelectContent>
+                              {(() => {
+                                const tableLabel = tables.find(t => t.name === localSaveConfig.tableName)?.label;
+                                return tableLabel && tableLabel !== localSaveConfig.tableName ? (
+                                  <span className="text-[10px] text-muted-foreground">{tableLabel}</span>
+                                ) : null;
+                              })()}
+                            </div>
+                          ) : (
+                            <span className="text-muted-foreground">테이블 선택...</span>
+                          )}
+                          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="p-0 w-[300px]" align="start">
+                        <Command>
+                          <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                          <CommandList className="max-h-[250px]">
+                            <CommandEmpty className="text-xs py-4 text-center">
+                              테이블을 찾을 수 없습니다.
+                            </CommandEmpty>
+                            <CommandGroup>
                               {tables.map((t) => (
-                          <SelectItem key={t.name} value={t.name}>
+                                <CommandItem
-                            {t.label || t.name}
+                                  key={t.name}
-                          </SelectItem>
+                                  value={`${t.name} ${t.label}`}
+                                  onSelect={() => {
+                                    updateSaveConfig({ tableName: t.name });
+                                    onLoadTableColumns(t.name);
+                                    setSingleTableSearchOpen(false);
+                                  }}
+                                  className="text-xs"
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-3 w-3",
+                                      localSaveConfig.tableName === t.name ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col">
+                                    <span className="font-medium">{t.name}</span>
+                                    {t.label && (
+                                      <span className="text-[10px] text-muted-foreground">{t.label}</span>
+                                    )}
+                                  </div>
+                                </CommandItem>
                               ))}
-                      </SelectContent>
+                            </CommandGroup>
-                    </Select>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                     <HelpText>폼 데이터를 저장할 테이블을 선택하세요</HelpText>
                   </div>
 
@@ -425,9 +477,43 @@ export function SaveSettingsModal({
 
                     <div>
                       <Label className="text-[10px]">메인 테이블명</Label>
-                      <Select
+                      <Popover open={mainTableSearchOpen} onOpenChange={setMainTableSearchOpen}>
-                        value={localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName || ""}
+                        <PopoverTrigger asChild>
-                        onValueChange={(value) => {
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={mainTableSearchOpen}
+                            className="h-8 w-full justify-between text-xs mt-1 font-normal"
+                          >
+                            {localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName ? (
+                              <div className="flex flex-col items-start text-left">
+                                <span className="font-medium">{localSaveConfig.customApiSave.multiTable.mainTable.tableName}</span>
+                                {(() => {
+                                  const tableLabel = tables.find(t => t.name === localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName)?.label;
+                                  return tableLabel && tableLabel !== localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName ? (
+                                    <span className="text-[10px] text-muted-foreground">{tableLabel}</span>
+                                  ) : null;
+                                })()}
+                              </div>
+                            ) : (
+                              <span className="text-muted-foreground">테이블 선택...</span>
+                            )}
+                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="p-0 w-[300px]" align="start">
+                          <Command>
+                            <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                            <CommandList className="max-h-[250px]">
+                              <CommandEmpty className="text-xs py-4 text-center">
+                                테이블을 찾을 수 없습니다.
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {tables.map((t) => (
+                                  <CommandItem
+                                    key={t.name}
+                                    value={`${t.name} ${t.label}`}
+                                    onSelect={() => {
                                       updateSaveConfig({
                                         customApiSave: {
                                           ...localSaveConfig.customApiSave,
@@ -437,25 +523,35 @@ export function SaveSettingsModal({
                                             enabled: true,
                                             mainTable: {
                                               ...localSaveConfig.customApiSave?.multiTable?.mainTable,
-                                  tableName: value,
+                                              tableName: t.name,
                                             },
                                           },
                                         },
                                       });
-                          onLoadTableColumns(value);
+                                      onLoadTableColumns(t.name);
+                                      setMainTableSearchOpen(false);
                                     }}
+                                    className="text-xs"
                                   >
-                        <SelectTrigger className="h-7 text-xs mt-1">
+                                    <Check
-                          <SelectValue placeholder="테이블 선택" />
+                                      className={cn(
-                        </SelectTrigger>
+                                        "mr-2 h-3 w-3",
-                        <SelectContent>
+                                        localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName === t.name ? "opacity-100" : "opacity-0"
-                          {tables.map((t) => (
+                                      )}
-                            <SelectItem key={t.name} value={t.name}>
+                                    />
-                              {t.label || t.name}
+                                    <div className="flex flex-col">
-                            </SelectItem>
+                                      <span className="font-medium">{t.name}</span>
+                                      {t.label && (
+                                        <span className="text-[10px] text-muted-foreground">{t.label}</span>
+                                      )}
+                                    </div>
+                                  </CommandItem>
                                 ))}
-                        </SelectContent>
+                              </CommandGroup>
-                      </Select>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
                       <HelpText>주요 데이터를 저장할 메인 테이블 (예: orders, user_info)</HelpText>
                     </div>
 
@@ -550,8 +646,8 @@ export function SaveSettingsModal({
                           return (
                             <Accordion key={subIndex} type="single" collapsible>
                               <AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-orange-50/30">
-                                <AccordionTrigger className="px-3 py-2 text-xs hover:no-underline">
+                                <div className="flex items-center justify-between px-3 py-2">
-                                  <div className="flex items-center justify-between flex-1">
+                                  <AccordionTrigger className="flex-1 text-xs hover:no-underline p-0">
                                     <div className="flex items-center gap-2">
                                       <span className="font-medium">
                                         서브 테이블 {subIndex + 1}: {subTable.tableName || "(미설정)"}
@@ -560,40 +656,86 @@ export function SaveSettingsModal({
                                         ({subTable.fieldMappings?.length || 0}개 매핑)
                                       </span>
                                     </div>
-                                    <Button
+                                  </AccordionTrigger>
-                                      size="sm"
+                                  <button
-                                      variant="ghost"
+                                    type="button"
                                     onClick={(e) => {
                                       e.stopPropagation();
                                       removeSubTable(subIndex);
                                     }}
-                                      className="h-5 w-5 p-0 text-destructive hover:text-destructive mr-2"
+                                    className="h-5 w-5 p-0 text-destructive hover:text-destructive/80 ml-2 inline-flex items-center justify-center"
                                   >
                                     <Trash2 className="h-3 w-3" />
-                                    </Button>
+                                  </button>
                                 </div>
-                                </AccordionTrigger>
                                 <AccordionContent className="px-3 pb-3 space-y-3">
                                   <div>
                                     <Label className="text-[10px]">서브 테이블명</Label>
-                                    <Select
+                                    <Popover 
-                                      value={subTable.tableName || ""}
+                                      open={subTableSearchOpen[subIndex] || false} 
-                                      onValueChange={(value) => {
+                                      onOpenChange={(open) => setSubTableSearchOpen(prev => ({ ...prev, [subIndex]: open }))}
-                                        updateSubTable(subIndex, { tableName: value });
-                                        onLoadTableColumns(value);
-                                      }}
                                     >
-                                      <SelectTrigger className="h-7 text-xs mt-1">
+                                      <PopoverTrigger asChild>
-                                        <SelectValue placeholder="테이블 선택" />
+                                        <Button
-                                      </SelectTrigger>
+                                          variant="outline"
-                                      <SelectContent>
+                                          role="combobox"
+                                          aria-expanded={subTableSearchOpen[subIndex] || false}
+                                          className="h-8 w-full justify-between text-xs mt-1 font-normal"
+                                        >
+                                          {subTable.tableName ? (
+                                            <div className="flex flex-col items-start text-left">
+                                              <span className="font-medium">{subTable.tableName}</span>
+                                              {(() => {
+                                                const tableLabel = tables.find(t => t.name === subTable.tableName)?.label;
+                                                return tableLabel && tableLabel !== subTable.tableName ? (
+                                                  <span className="text-[10px] text-muted-foreground">{tableLabel}</span>
+                                                ) : null;
+                                              })()}
+                                            </div>
+                                          ) : (
+                                            <span className="text-muted-foreground">테이블 선택...</span>
+                                          )}
+                                          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                        </Button>
+                                      </PopoverTrigger>
+                                      <PopoverContent className="p-0 w-[280px]" align="start">
+                                        <Command>
+                                          <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                                          <CommandList className="max-h-[200px]">
+                                            <CommandEmpty className="text-xs py-4 text-center">
+                                              테이블을 찾을 수 없습니다.
+                                            </CommandEmpty>
+                                            <CommandGroup>
                                               {tables.map((t) => (
-                                          <SelectItem key={t.name} value={t.name}>
+                                                <CommandItem
-                                            {t.label || t.name}
+                                                  key={t.name}
-                                          </SelectItem>
+                                                  value={`${t.name} ${t.label}`}
+                                                  onSelect={() => {
+                                                    updateSubTable(subIndex, { tableName: t.name });
+                                                    onLoadTableColumns(t.name);
+                                                    setSubTableSearchOpen(prev => ({ ...prev, [subIndex]: false }));
+                                                  }}
+                                                  className="text-xs"
+                                                >
+                                                  <Check
+                                                    className={cn(
+                                                      "mr-2 h-3 w-3",
+                                                      subTable.tableName === t.name ? "opacity-100" : "opacity-0"
+                                                    )}
+                                                  />
+                                                  <div className="flex flex-col">
+                                                    <span className="font-medium">{t.name}</span>
+                                                    {t.label && (
+                                                      <span className="text-[10px] text-muted-foreground">{t.label}</span>
+                                                    )}
+                                                  </div>
+                                                </CommandItem>
                                               ))}
-                                      </SelectContent>
+                                            </CommandGroup>
-                                    </Select>
+                                          </CommandList>
+                                        </Command>
+                                      </PopoverContent>
+                                    </Popover>
                                     <HelpText>반복 데이터를 저장할 서브 테이블</HelpText>
                                   </div>
 
@@ -755,8 +897,8 @@ export function SaveSettingsModal({
                                                   <SelectValue placeholder="필드 선택" />
                                                 </SelectTrigger>
                                                 <SelectContent>
-                                                  {allFields.map((field) => (
+                                                  {allFields.map((field, fieldIndex) => (
-                                                    <SelectItem key={field.columnName} value={field.columnName}>
+                                                    <SelectItem key={`${field.sectionId}-${field.columnName}-${fieldIndex}`} value={field.columnName}>
                                                       {field.label} ({field.sectionTitle})
                                                     </SelectItem>
                                                   ))}

frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx

@@ -11,7 +11,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Badge } from "@/components/ui/badge";
-import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings as SettingsIcon } 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, ChevronUp, ChevronDown, Settings as SettingsIcon, Check, ChevronsUpDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { FormSectionConfig, FormFieldConfig, OptionalFieldGroupConfig, FIELD_TYPE_OPTIONS } from "../types";
 import { defaultFieldConfig, generateFieldId, generateUniqueId } from "../config";
@@ -21,12 +23,22 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
   <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
 );
 
+// 테이블 컬럼 정보 타입
+interface TableColumnInfo {
+  name: string;
+  type: string;
+  label: string;
+}
+
 interface SectionLayoutModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   section: FormSectionConfig;
   onSave: (updates: Partial<FormSectionConfig>) => void;
   onOpenFieldDetail: (field: FormFieldConfig) => void;
+  // 저장 테이블의 컬럼 정보
+  tableName?: string;
+  tableColumns?: TableColumnInfo[];
 }
 
 export function SectionLayoutModal({
@@ -35,8 +47,13 @@ export function SectionLayoutModal({
   section,
   onSave,
   onOpenFieldDetail,
+  tableName = "",
+  tableColumns = [],
 }: SectionLayoutModalProps) {
 
+  // 컬럼 선택 Popover 상태 (필드별)
+  const [columnSearchOpen, setColumnSearchOpen] = useState<Record<string, boolean>>({});
+
   // 로컬 상태로 섹션 관리 (fields가 없으면 빈 배열로 초기화)
   const [localSection, setLocalSection] = useState<FormSectionConfig>(() => ({
     ...section,
@@ -443,11 +460,90 @@ export function SectionLayoutModal({
                             </div>
                             <div>
                               <Label className="text-[9px]">컬럼명</Label>
+                              {tableColumns.length > 0 ? (
+                                <Popover 
+                                  open={columnSearchOpen[field.id] || false} 
+                                  onOpenChange={(open) => setColumnSearchOpen(prev => ({ ...prev, [field.id]: open }))}
+                                >
+                                  <PopoverTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      role="combobox"
+                                      aria-expanded={columnSearchOpen[field.id] || false}
+                                      className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
+                                    >
+                                      {field.columnName ? (
+                                        <div className="flex flex-col items-start text-left truncate">
+                                          <span className="font-medium truncate">{field.columnName}</span>
+                                          {(() => {
+                                            const col = tableColumns.find(c => c.name === field.columnName);
+                                            return col?.label && col.label !== field.columnName ? (
+                                              <span className="text-[8px] text-muted-foreground truncate">({col.label})</span>
+                                            ) : null;
+                                          })()}
+                                        </div>
+                                      ) : (
+                                        <span className="text-muted-foreground">컬럼 선택...</span>
+                                      )}
+                                      <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                                    </Button>
+                                  </PopoverTrigger>
+                                  <PopoverContent className="p-0 w-[280px]" align="start">
+                                    <Command>
+                                      <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                                      <CommandList className="max-h-[200px]">
+                                        <CommandEmpty className="text-xs py-3 text-center">
+                                          컬럼을 찾을 수 없습니다.
+                                        </CommandEmpty>
+                                        <CommandGroup>
+                                          {tableColumns.map((col) => (
+                                            <CommandItem
+                                              key={col.name}
+                                              value={`${col.name} ${col.label}`}
+                                              onSelect={() => {
+                                                updateField(field.id, { 
+                                                  columnName: col.name,
+                                                  // 라벨이 기본값이면 컬럼 라벨로 자동 설정
+                                                  ...(field.label.startsWith("새 필드") || field.label.startsWith("field_") 
+                                                    ? { label: col.label || col.name } 
+                                                    : {})
+                                                });
+                                                setColumnSearchOpen(prev => ({ ...prev, [field.id]: false }));
+                                              }}
+                                              className="text-xs"
+                                            >
+                                              <Check
+                                                className={cn(
+                                                  "mr-2 h-3 w-3",
+                                                  field.columnName === col.name ? "opacity-100" : "opacity-0"
+                                                )}
+                                              />
+                                              <div className="flex flex-col">
+                                                <div className="flex items-center gap-1">
+                                                  <span className="font-medium">{col.name}</span>
+                                                  {col.label && col.label !== col.name && (
+                                                    <span className="text-muted-foreground">({col.label})</span>
+                                                  )}
+                                                </div>
+                                                {tableName && (
+                                                  <span className="text-[9px] text-muted-foreground">{tableName}</span>
+                                                )}
+                                              </div>
+                                            </CommandItem>
+                                          ))}
+                                        </CommandGroup>
+                                      </CommandList>
+                                    </Command>
+                                  </PopoverContent>
+                                </Popover>
+                              ) : (
                                 <Input
                                   value={field.columnName}
                                   onChange={(e) => updateField(field.id, { columnName: e.target.value })}
                                   className="h-6 text-[9px] mt-0.5"
+                                  placeholder="저장 테이블을 먼저 설정하세요"
                                 />
+                              )}
                             </div>
                           </div>
 
@@ -821,6 +917,87 @@ export function SectionLayoutModal({
                                       className="h-5 text-[8px]"
                                       placeholder="라벨"
                                     />
+                                    {tableColumns.length > 0 ? (
+                                      <Popover 
+                                        open={columnSearchOpen[`opt-${field.id}`] || false} 
+                                        onOpenChange={(open) => setColumnSearchOpen(prev => ({ ...prev, [`opt-${field.id}`]: open }))}
+                                      >
+                                        <PopoverTrigger asChild>
+                                          <Button
+                                            variant="outline"
+                                            role="combobox"
+                                            className="h-6 w-full justify-between text-[8px] font-normal px-1"
+                                          >
+                                            {field.columnName ? (
+                                              <div className="flex flex-col items-start text-left truncate">
+                                                <span className="font-medium truncate">{field.columnName}</span>
+                                                {(() => {
+                                                  const col = tableColumns.find(c => c.name === field.columnName);
+                                                  return col?.label && col.label !== field.columnName ? (
+                                                    <span className="text-[7px] text-muted-foreground truncate">({col.label})</span>
+                                                  ) : null;
+                                                })()}
+                                              </div>
+                                            ) : (
+                                              <span className="text-muted-foreground">컬럼...</span>
+                                            )}
+                                            <ChevronsUpDown className="h-2.5 w-2.5 shrink-0 opacity-50" />
+                                          </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="p-0 w-[250px]" align="start">
+                                          <Command>
+                                            <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                                            <CommandList className="max-h-[180px]">
+                                              <CommandEmpty className="text-xs py-2 text-center">
+                                                컬럼을 찾을 수 없습니다.
+                                              </CommandEmpty>
+                                              <CommandGroup>
+                                                {tableColumns.map((col) => (
+                                                  <CommandItem
+                                                    key={col.name}
+                                                    value={`${col.name} ${col.label}`}
+                                                    onSelect={() => {
+                                                      const newGroups = localSection.optionalFieldGroups?.map((g) =>
+                                                        g.id === group.id
+                                                          ? {
+                                                              ...g,
+                                                              fields: g.fields.map((f) =>
+                                                                f.id === field.id 
+                                                                  ? { 
+                                                                      ...f, 
+                                                                      columnName: col.name,
+                                                                      ...(f.label.startsWith("필드 ") ? { label: col.label || col.name } : {})
+                                                                    } 
+                                                                  : f
+                                                              ),
+                                                            }
+                                                          : g
+                                                      );
+                                                      updateSection({ optionalFieldGroups: newGroups });
+                                                      setColumnSearchOpen(prev => ({ ...prev, [`opt-${field.id}`]: false }));
+                                                    }}
+                                                    className="text-[9px]"
+                                                  >
+                                                    <Check
+                                                      className={cn(
+                                                        "mr-1 h-2.5 w-2.5",
+                                                        field.columnName === col.name ? "opacity-100" : "opacity-0"
+                                                      )}
+                                                    />
+                                                    <div className="flex flex-col">
+                                                      <span className="font-medium">{col.name}</span>
+                                                      {col.label && col.label !== col.name && (
+                                                        <span className="text-[8px] text-muted-foreground">({col.label})</span>
+                                                      )}
+                                                    </div>
+                                                  </CommandItem>
+                                                ))}
+                                              </CommandGroup>
+                                            </CommandList>
+                                          </Command>
+                                        </PopoverContent>
+                                      </Popover>
+                                    ) : (
                                       <Input
                                         value={field.columnName}
                                         onChange={(e) => {
@@ -839,6 +1016,7 @@ export function SectionLayoutModal({
                                         className="h-5 text-[8px]"
                                         placeholder="컬럼명"
                                       />
+                                    )}
                                     <Select
                                       value={field.fieldType}
                                       onValueChange={(value) => {

frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx

@@ -48,6 +48,14 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
   <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
 );
 
+// 부모 화면에서 전달 가능한 필드 타입
+interface AvailableParentField {
+  name: string;           // 필드명 (columnName)
+  label: string;          // 표시 라벨
+  sourceComponent?: string; // 출처 컴포넌트
+  sourceTable?: string;   // 출처 테이블명
+}
+
 // 컬럼 설정 아이템 컴포넌트
 interface ColumnSettingItemProps {
   col: TableColumnConfig;
@@ -62,6 +70,7 @@ interface ColumnSettingItemProps {
   sections: { id: string; title: string }[];  // 섹션 목록
   formFields: { columnName: string; label: string; sectionId?: string }[];  // 폼 필드 목록
   tableConfig: TableSectionConfig;  // 현재 행 필드 목록 표시용
+  availableParentFields?: AvailableParentField[];  // 부모 화면에서 전달 가능한 필드 목록
   onLoadTableColumns: (tableName: string) => void;
   onUpdate: (updates: Partial<TableColumnConfig>) => void;
   onMoveUp: () => void;
@@ -82,6 +91,7 @@ function ColumnSettingItem({
   sections,
   formFields,
   tableConfig,
+  availableParentFields = [],
   onLoadTableColumns,
   onUpdate,
   onMoveUp,
@@ -90,6 +100,7 @@ function ColumnSettingItem({
 }: ColumnSettingItemProps) {
   const [fieldSearchOpen, setFieldSearchOpen] = useState(false);
   const [sourceFieldSearchOpen, setSourceFieldSearchOpen] = useState(false);
+  const [parentFieldSearchOpen, setParentFieldSearchOpen] = useState(false);
   const [lookupTableOpenMap, setLookupTableOpenMap] = useState<Record<string, boolean>>({});
 
   // 조회 옵션 추가
@@ -402,6 +413,14 @@ function ColumnSettingItem({
           />
           <span>필수</span>
         </label>
+        <label className="flex items-center gap-2 text-xs cursor-pointer" title="부모 화면에서 전달받은 값을 모든 행에 적용">
+          <Switch
+            checked={col.receiveFromParent ?? false}
+            onCheckedChange={(checked) => onUpdate({ receiveFromParent: checked })}
+            className="scale-75"
+          />
+          <span className="text-blue-600">부모값</span>
+        </label>
         <label className="flex items-center gap-2 text-xs cursor-pointer">
           <Switch
             checked={col.lookup?.enabled ?? false}
@@ -432,6 +451,103 @@ function ColumnSettingItem({
         )}
       </div>
 
+      {/* 부모에서 값 받기 설정 (부모값 ON일 때만 표시) */}
+      {col.receiveFromParent && (
+        <div className="border-t pt-3 mt-3 space-y-2">
+          <Label className="text-xs font-medium text-blue-600">부모 필드 선택</Label>
+          <p className="text-[10px] text-muted-foreground">
+            부모 화면에서 전달받을 필드를 선택하세요. 모든 행에 동일한 값이 적용됩니다.
+          </p>
+          {availableParentFields.length > 0 ? (
+            <Popover open={parentFieldSearchOpen} onOpenChange={setParentFieldSearchOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={parentFieldSearchOpen}
+                  className="h-8 w-full justify-between text-xs"
+                >
+                  <span className="truncate">
+                    {col.parentFieldName 
+                      ? availableParentFields.find(f => f.name === col.parentFieldName)?.label || col.parentFieldName
+                      : `(기본: ${col.field})`}
+                  </span>
+                  <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0 w-[300px]" align="start">
+                <Command>
+                  <CommandInput placeholder="부모 필드 검색..." className="text-xs" />
+                  <CommandList className="max-h-[250px]">
+                    <CommandEmpty className="text-xs py-4 text-center">
+                      사용 가능한 부모 필드가 없습니다.
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {/* 기본값 (필드명과 동일) */}
+                      <CommandItem
+                        value="__same_as_field__"
+                        onSelect={() => {
+                          onUpdate({ parentFieldName: undefined });
+                          setParentFieldSearchOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            !col.parentFieldName ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <span className="text-muted-foreground">(기본: {col.field})</span>
+                      </CommandItem>
+                      {/* 부모 필드 목록 */}
+                      {availableParentFields.map((pf) => (
+                        <CommandItem
+                          key={pf.name}
+                          value={`${pf.name} ${pf.label}`}
+                          onSelect={() => {
+                            onUpdate({ parentFieldName: pf.name });
+                            setParentFieldSearchOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              col.parentFieldName === pf.name ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col flex-1 min-w-0">
+                            <span className="font-medium truncate">{pf.label || pf.name}</span>
+                            {pf.sourceComponent && (
+                              <span className="text-[10px] text-muted-foreground truncate">
+                                {pf.sourceComponent}{pf.sourceTable && ` (${pf.sourceTable})`}
+                              </span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <div className="space-y-1">
+              <Input
+                value={col.parentFieldName || ""}
+                onChange={(e) => onUpdate({ parentFieldName: e.target.value })}
+                placeholder={col.field}
+                className="h-8 text-xs"
+              />
+              <p className="text-[10px] text-muted-foreground">
+                비워두면 "{col.field}"를 사용합니다.
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
       {/* 조회 설정 (조회 ON일 때만 표시) */}
       {col.lookup?.enabled && (
         <div className="border-t pt-3 mt-3 space-y-3">
@@ -1119,6 +1235,8 @@ interface TableSectionSettingsModalProps {
   onLoadCategoryList?: () => void;
   // 전체 섹션 목록 (다른 섹션 필드 참조용)
   allSections?: FormSectionConfig[];
+  // 부모 화면에서 전달 가능한 필드 목록
+  availableParentFields?: AvailableParentField[];
 }
 
 export function TableSectionSettingsModal({
@@ -1132,6 +1250,7 @@ export function TableSectionSettingsModal({
   categoryList = [],
   onLoadCategoryList,
   allSections = [],
+  availableParentFields = [],
 }: TableSectionSettingsModalProps) {
   // 로컬 상태
   const [title, setTitle] = useState(section.title);
@@ -1693,6 +1812,7 @@ export function TableSectionSettingsModal({
                           sections={otherSections}
                           formFields={otherSectionFields}
                           tableConfig={tableConfig}
+                          availableParentFields={availableParentFields}
                           onLoadTableColumns={onLoadTableColumns}
                           onUpdate={(updates) => updateColumn(index, updates)}
                           onMoveUp={() => moveColumn(index, "up")}

frontend/lib/registry/components/universal-form-modal/types.ts

@@ -335,6 +335,10 @@ export interface TableColumnConfig {
   // 날짜 일괄 적용 (type이 "date"일 때만 사용)
   // 활성화 시 첫 번째 날짜 입력 시 모든 행에 동일한 날짜가 자동 적용됨
   batchApply?: boolean;
+
+  // 부모에서 값 받기 (모든 행에 동일한 값 적용)
+  receiveFromParent?: boolean;      // 부모에서 값 받기 활성화
+  parentFieldName?: string;         // 부모 필드명 (미지정 시 field와 동일)
 }
 
 // ============================================
@@ -705,6 +709,8 @@ export interface UniversalFormModalComponentProps {
 export interface UniversalFormModalConfigPanelProps {
   config: UniversalFormModalConfig;
   onChange: (config: UniversalFormModalConfig) => void;
+  // 화면 설계 시 같은 화면의 다른 컴포넌트들 (부모 데이터 필드 추출용)
+  allComponents?: any[];
 }
 
 // 필드 타입 옵션

frontend/lib/schemas/commonCode.ts

@@ -30,15 +30,12 @@ export const updateCategorySchema = categorySchema.omit({ categoryCode: true }).
 
 // 코드 스키마
 export const codeSchema = z.object({
-  codeValue: z
+  codeValue: z.string().min(1, "코드값은 필수입니다").max(50, "코드값은 50자 이하여야 합니다"),
-    .string()
-    .min(1, "코드값은 필수입니다")
-    .max(50, "코드값은 50자 이하여야 합니다")
-    .regex(/^[A-Z0-9_]+$/, "대문자, 숫자, 언더스코어(_)만 사용 가능합니다"),
   codeName: z.string().min(1, "코드명은 필수입니다").max(100, "코드명은 100자 이하여야 합니다"),
-  codeNameEng: z.string().min(1, "영문 코드명은 필수입니다").max(100, "영문 코드명은 100자 이하여야 합니다"),
+  codeNameEng: z.string().max(100, "영문 코드명은 100자 이하여야 합니다").optional().or(z.literal("")),
-  description: z.string().min(1, "설명은 필수입니다").max(500, "설명은 500자 이하여야 합니다"),
+  description: z.string().max(500, "설명은 500자 이하여야 합니다").optional().or(z.literal("")),
   sortOrder: z.number().min(1, "정렬 순서는 1 이상이어야 합니다").max(9999, "정렬 순서는 9999 이하여야 합니다"),
+  parentCodeValue: z.string().optional().nullable(), // 계층구조: 부모 코드값 (선택)
 });
 
 // 코드 생성 스키마

frontend/package-lock.json

@@ -46,6 +46,7 @@
         "@turf/union": "^7.2.0",
         "@types/d3": "^7.4.3",
         "@types/leaflet": "^1.9.21",
+        "@types/qrcode": "^1.5.6",
         "@types/react-window": "^1.8.8",
         "@types/three": "^0.180.0",
         "@xyflow/react": "^12.8.4",
@@ -61,11 +62,13 @@
         "html-to-image": "^1.11.13",
         "html2canvas": "^1.4.1",
         "isomorphic-dompurify": "^2.28.0",
+        "jsbarcode": "^3.12.1",
         "jspdf": "^3.0.3",
         "leaflet": "^1.9.4",
         "lucide-react": "^0.525.0",
         "mammoth": "^1.11.0",
         "next": "^15.4.8",
+        "qrcode": "^1.5.4",
         "react": "19.1.0",
         "react-day-picker": "^9.11.1",
         "react-dnd": "^16.0.1",
@@ -91,6 +94,7 @@
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4",
         "@tanstack/react-query-devtools": "^5.86.0",
+        "@types/jsbarcode": "^3.11.4",
         "@types/node": "^20",
         "@types/react": "^19.1.13",
         "@types/react-dom": "^19.1.9",
@@ -6022,6 +6026,16 @@
       "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
       "license": "MIT"
     },
+    "node_modules/@types/jsbarcode": {
+      "version": "3.11.4",
+      "resolved": "https://registry.npmjs.org/@types/jsbarcode/-/jsbarcode-3.11.4.tgz",
+      "integrity": "sha512-VBcpTAnEMH0Gbh8JpV14CgOtJjCYjsvR2FoDRyoYPE0gUxtApf8N4c+HKEOyz/iiIZkMzqrzBA3XX7+KgKxxsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -6071,7 +6085,6 @@
       "version": "20.19.24",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
       "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -6089,6 +6102,15 @@
       "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/raf": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
@@ -6917,11 +6939,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -7387,6 +7417,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camera-controls": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.0.tgz",
@@ -7529,6 +7568,17 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -7580,7 +7630,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -7593,7 +7642,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -8292,6 +8340,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
@@ -8420,6 +8477,12 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dingbat-to-unicode": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dingbat-to-unicode/-/dingbat-to-unicode-1.0.1.tgz",
@@ -9606,6 +9669,15 @@
         "quickselect": "^1.0.1"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -10256,6 +10328,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -10593,6 +10674,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbarcode": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.12.1.tgz",
+      "integrity": "sha512-QZQSqIknC2Rr/YOUyOkCBqsoiBAOTYK+7yNN3JsqfoUtJtkazxNw1dmPpxuv7VVvqW13kA3/mKiLq+s/e3o9hQ==",
+      "license": "MIT"
+    },
     "node_modules/jsdom": {
       "version": "27.1.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.1.0.tgz",
@@ -11700,6 +11787,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -11735,7 +11831,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11818,6 +11913,15 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/point-in-polygon": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
@@ -12348,6 +12452,23 @@
       ],
       "license": "MIT"
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -12873,6 +12994,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -12882,6 +13012,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/reselect": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
@@ -13110,6 +13246,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -13451,6 +13593,26 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -13564,6 +13726,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -14191,7 +14365,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {
@@ -14511,6 +14684,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.19",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
@@ -14561,6 +14740,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ws": {
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
@@ -14675,6 +14868,99 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "license": "MIT"
     },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

frontend/package.json

@@ -54,6 +54,7 @@
     "@turf/union": "^7.2.0",
     "@types/d3": "^7.4.3",
     "@types/leaflet": "^1.9.21",
+    "@types/qrcode": "^1.5.6",
     "@types/react-window": "^1.8.8",
     "@types/three": "^0.180.0",
     "@xyflow/react": "^12.8.4",
@@ -69,11 +70,13 @@
     "html-to-image": "^1.11.13",
     "html2canvas": "^1.4.1",
     "isomorphic-dompurify": "^2.28.0",
+    "jsbarcode": "^3.12.1",
     "jspdf": "^3.0.3",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.525.0",
     "mammoth": "^1.11.0",
     "next": "^15.4.8",
+    "qrcode": "^1.5.4",
     "react": "19.1.0",
     "react-day-picker": "^9.11.1",
     "react-dnd": "^16.0.1",
@@ -99,6 +102,7 @@
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
     "@tanstack/react-query-devtools": "^5.86.0",
+    "@types/jsbarcode": "^3.11.4",
     "@types/node": "^20",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",

frontend/types/commonCode.ts

@@ -25,6 +25,8 @@ export interface CodeInfo {
   sortOrder?: number;
   isActive?: string | boolean;
   useYn?: string;
+  parentCodeValue?: string | null; // 계층구조: 부모 코드값
+  depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
 
   // 기존 필드 (하위 호환성을 위해 유지)
   code_category?: string;
@@ -33,10 +35,14 @@ export interface CodeInfo {
   code_name_eng?: string | null;
   sort_order?: number;
   is_active?: string;
+  parent_code_value?: string | null; // 계층구조: 부모 코드값
   created_date?: string | null;
   created_by?: string | null;
   updated_date?: string | null;
   updated_by?: string | null;
+  
+  // 트리 구조용
+  children?: CodeInfo[];
 }
 
 export interface CreateCategoryRequest {
@@ -61,6 +67,7 @@ export interface CreateCodeRequest {
   codeNameEng?: string;
   description?: string;
   sortOrder?: number;
+  parentCodeValue?: string; // 계층구조: 부모 코드값
 }
 
 export interface UpdateCodeRequest {
@@ -69,6 +76,7 @@ export interface UpdateCodeRequest {
   description?: string;
   sortOrder?: number;
   isActive?: "Y" | "N"; // 백엔드에서 기대하는 문자열 타입
+  parentCodeValue?: string; // 계층구조: 부모 코드값
 }
 
 export interface CodeOption {

frontend/types/report.ts

@@ -81,6 +81,22 @@ export interface ExternalConnection {
   is_active: string;
 }
 
+// 워터마크 설정
+export interface WatermarkConfig {
+  enabled: boolean;
+  type: "text" | "image";
+  // 텍스트 워터마크
+  text?: string;
+  fontSize?: number;
+  fontColor?: string;
+  // 이미지 워터마크
+  imageUrl?: string;
+  // 공통 설정
+  opacity: number; // 0~1
+  style: "diagonal" | "center" | "tile";
+  rotation?: number; // 대각선일 때 각도 (기본 -45)
+}
+
 // 페이지 설정
 export interface ReportPage {
   page_id: string;
@@ -102,6 +118,7 @@ export interface ReportPage {
 // 레이아웃 설정 (페이지 기반)
 export interface ReportLayoutConfig {
   pages: ReportPage[];
+  watermark?: WatermarkConfig; // 전체 페이지 공유 워터마크
 }
 
 // 컴포넌트 설정
@@ -145,7 +162,6 @@ export interface ComponentConfig {
   showLabel?: boolean; // 레이블 표시 여부 ("서명:", "(인)")
   labelText?: string; // 커스텀 레이블 텍스트
   labelPosition?: "top" | "left" | "bottom" | "right"; // 레이블 위치
-  showUnderline?: boolean; // 서명란 밑줄 표시 여부
   personName?: string; // 도장란 이름 (예: "홍길동")
   // 테이블 전용
   tableColumns?: Array<{
@@ -189,6 +205,30 @@ export interface ComponentConfig {
   showCalcBorder?: boolean; // 테두리 표시 여부
   numberFormat?: "none" | "comma" | "currency"; // 숫자 포맷 (없음, 천단위, 원화)
   currencySuffix?: string; // 통화 접미사 (예: "원")
+  // 바코드 컴포넌트 전용
+  barcodeType?: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "QR"; // 바코드 타입
+  barcodeValue?: string; // 고정값
+  barcodeFieldName?: string; // 쿼리 필드 바인딩
+  showBarcodeText?: boolean; // 바코드 아래 텍스트 표시 (1D만)
+  barcodeColor?: string; // 바코드 색상
+  barcodeBackground?: string; // 배경 색상
+  barcodeMargin?: number; // 여백
+  qrErrorCorrectionLevel?: "L" | "M" | "Q" | "H"; // QR 오류 보정 수준
+  // QR코드 다중 필드 (JSON 형식)
+  qrDataFields?: Array<{
+    fieldName: string; // 쿼리 필드명
+    label: string; // JSON 키 이름
+  }>;
+  qrUseMultiField?: boolean; // 다중 필드 사용 여부
+  qrIncludeAllRows?: boolean; // 모든 행 포함 (배열 JSON)
+  // 체크박스 컴포넌트 전용
+  checkboxChecked?: boolean; // 체크 상태 (고정값)
+  checkboxFieldName?: string; // 쿼리 필드 바인딩 (truthy/falsy 값)
+  checkboxLabel?: string; // 체크박스 옆 레이블 텍스트
+  checkboxSize?: number; // 체크박스 크기 (px)
+  checkboxColor?: string; // 체크 색상
+  checkboxBorderColor?: string; // 테두리 색상
+  checkboxLabelPosition?: "left" | "right"; // 레이블 위치
 }
 
 // 리포트 상세
@@ -196,6 +236,7 @@ export interface ReportDetail {
   report: ReportMaster;
   layout: ReportLayout | null;
   queries: ReportQuery[];
+  menuObjids?: number[]; // 연결된 메뉴 ID 목록
 }
 
 // 리포트 목록 응답
@@ -247,6 +288,7 @@ export interface SaveLayoutRequest {
     parameters: string[];
     externalConnectionId?: number;
   }>;
+  menuObjids?: number[]; // 연결할 메뉴 ID 목록
 
   // 하위 호환성 (deprecated)
   canvasWidth?: number;

화면_임베딩_및_데이터_전달_시스템_구현_계획서.md

@@ -1688,3 +1688,4 @@ const 출고등록_설정: ScreenSplitPanel = {
 
 
 
+

화면_임베딩_시스템_Phase1-4_구현_완료.md

@@ -535,3 +535,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
 
 
 
+

화면_임베딩_시스템_충돌_분석_보고서.md

@@ -522,3 +522,4 @@ function ScreenViewPage() {
 
 
 
+