Merge pull request 'feature/screen-management' (#180) from feature/screen-management into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/180

backend-node/src/app.ts

@@ -64,6 +64,7 @@ import flowExternalDbConnectionRoutes from "./routes/flowExternalDbConnectionRou
 import workHistoryRoutes from "./routes/workHistoryRoutes"; // 작업 이력 관리
 import tableHistoryRoutes from "./routes/tableHistoryRoutes"; // 테이블 변경 이력 조회
 import roleRoutes from "./routes/roleRoutes"; // 권한 그룹 관리
+import numberingRuleController from "./controllers/numberingRuleController"; // 채번 규칙 관리
 import departmentRoutes from "./routes/departmentRoutes"; // 부서 관리
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
@@ -223,6 +224,7 @@ app.use("/api/flow", flowRoutes); // 플로우 관리 (마지막에 등록하여
 app.use("/api/work-history", workHistoryRoutes); // 작업 이력 관리
 app.use("/api/table-history", tableHistoryRoutes); // 테이블 변경 이력 조회
 app.use("/api/roles", roleRoutes); // 권한 그룹 관리
+app.use("/api/numbering-rules", numberingRuleController); // 채번 규칙 관리
 app.use("/api/departments", departmentRoutes); // 부서 관리
 // app.use("/api/collections", collectionRoutes); // 임시 주석
 // app.use("/api/batch", batchRoutes); // 임시 주석

backend-node/src/controllers/numberingRuleController.ts

@@ -0,0 +1,131 @@
+/**
+ * 채번 규칙 관리 컨트롤러
+ */
+
+import { Router, Request, Response } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+import { numberingRuleService } from "../services/numberingRuleService";
+import { logger } from "../utils/logger";
+
+const router = Router();
+
+// 규칙 목록 조회
+router.get("/", authenticateToken, async (req: Request, res: Response) => {
+  const companyCode = req.user!.companyCode;
+
+  try {
+    const rules = await numberingRuleService.getRuleList(companyCode);
+    return res.json({ success: true, data: rules });
+  } catch (error: any) {
+    logger.error("규칙 목록 조회 실패", { error: error.message });
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// 특정 규칙 조회
+router.get("/:ruleId", authenticateToken, async (req: Request, res: Response) => {
+  const companyCode = req.user!.companyCode;
+  const { ruleId } = req.params;
+
+  try {
+    const rule = await numberingRuleService.getRuleById(ruleId, companyCode);
+    if (!rule) {
+      return res.status(404).json({ success: false, error: "규칙을 찾을 수 없습니다" });
+    }
+    return res.json({ success: true, data: rule });
+  } catch (error: any) {
+    logger.error("규칙 조회 실패", { error: error.message });
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// 규칙 생성
+router.post("/", authenticateToken, async (req: Request, res: Response) => {
+  const companyCode = req.user!.companyCode;
+  const userId = req.user!.userId;
+  const ruleConfig = req.body;
+
+  try {
+    if (!ruleConfig.ruleId || !ruleConfig.ruleName) {
+      return res.status(400).json({ success: false, error: "규칙 ID와 규칙명은 필수입니다" });
+    }
+
+    if (!Array.isArray(ruleConfig.parts) || ruleConfig.parts.length === 0) {
+      return res.status(400).json({ success: false, error: "최소 1개 이상의 규칙 파트가 필요합니다" });
+    }
+
+    const newRule = await numberingRuleService.createRule(ruleConfig, companyCode, userId);
+    return res.status(201).json({ success: true, data: newRule });
+  } catch (error: any) {
+    if (error.code === "23505") {
+      return res.status(409).json({ success: false, error: "이미 존재하는 규칙 ID입니다" });
+    }
+    logger.error("규칙 생성 실패", { error: error.message });
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// 규칙 수정
+router.put("/:ruleId", authenticateToken, async (req: Request, res: Response) => {
+  const companyCode = req.user!.companyCode;
+  const { ruleId } = req.params;
+  const updates = req.body;
+
+  try {
+    const updatedRule = await numberingRuleService.updateRule(ruleId, updates, companyCode);
+    return res.json({ success: true, data: updatedRule });
+  } catch (error: any) {
+    if (error.message.includes("찾을 수 없거나")) {
+      return res.status(404).json({ success: false, error: error.message });
+    }
+    logger.error("규칙 수정 실패", { error: error.message });
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// 규칙 삭제
+router.delete("/:ruleId", authenticateToken, async (req: Request, res: Response) => {
+  const companyCode = req.user!.companyCode;
+  const { ruleId } = req.params;
+
+  try {
+    await numberingRuleService.deleteRule(ruleId, companyCode);
+    return res.json({ success: true, message: "규칙이 삭제되었습니다" });
+  } catch (error: any) {
+    if (error.message.includes("찾을 수 없거나")) {
+      return res.status(404).json({ success: false, error: error.message });
+    }
+    logger.error("규칙 삭제 실패", { error: error.message });
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// 코드 생성
+router.post("/:ruleId/generate", authenticateToken, async (req: Request, res: Response) => {
+  const companyCode = req.user!.companyCode;
+  const { ruleId } = req.params;
+
+  try {
+    const generatedCode = await numberingRuleService.generateCode(ruleId, companyCode);
+    return res.json({ success: true, data: { code: generatedCode } });
+  } catch (error: any) {
+    logger.error("코드 생성 실패", { error: error.message });
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// 시퀀스 초기화
+router.post("/:ruleId/reset", authenticateToken, async (req: Request, res: Response) => {
+  const companyCode = req.user!.companyCode;
+  const { ruleId } = req.params;
+
+  try {
+    await numberingRuleService.resetSequence(ruleId, companyCode);
+    return res.json({ success: true, message: "시퀀스가 초기화되었습니다" });
+  } catch (error: any) {
+    logger.error("시퀀스 초기화 실패", { error: error.message });
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+export default router;

backend-node/src/services/numberingRuleService.ts

@@ -0,0 +1,465 @@
+/**
+ * 채번 규칙 관리 서비스
+ */
+
+import { getPool } from "../database/db";
+import { logger } from "../utils/logger";
+
+interface NumberingRulePart {
+  id?: number;
+  order: number;
+  partType: string;
+  generationMethod: string;
+  autoConfig?: any;
+  manualConfig?: any;
+  generatedValue?: string;
+}
+
+interface NumberingRuleConfig {
+  ruleId: string;
+  ruleName: string;
+  description?: string;
+  parts: NumberingRulePart[];
+  separator?: string;
+  resetPeriod?: string;
+  currentSequence?: number;
+  tableName?: string;
+  columnName?: string;
+  companyCode?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  createdBy?: string;
+}
+
+class NumberingRuleService {
+  /**
+   * 규칙 목록 조회
+   */
+  async getRuleList(companyCode: string): Promise<NumberingRuleConfig[]> {
+    try {
+      logger.info("채번 규칙 목록 조회 시작", { companyCode });
+
+      const pool = getPool();
+      const query = `
+        SELECT 
+          rule_id AS "ruleId",
+          rule_name AS "ruleName",
+          description,
+          separator,
+          reset_period AS "resetPeriod",
+          current_sequence AS "currentSequence",
+          table_name AS "tableName",
+          column_name AS "columnName",
+          company_code AS "companyCode",
+          menu_objid AS "menuObjid",
+          scope_type AS "scopeType",
+          created_at AS "createdAt",
+          updated_at AS "updatedAt",
+          created_by AS "createdBy"
+        FROM numbering_rules
+        WHERE company_code = $1 OR company_code = '*'
+        ORDER BY created_at DESC
+      `;
+
+      const result = await pool.query(query, [companyCode]);
+
+      // 각 규칙의 파트 정보 조회
+      for (const rule of result.rows) {
+        const partsQuery = `
+          SELECT 
+            id,
+            part_order AS "order",
+            part_type AS "partType",
+            generation_method AS "generationMethod",
+            auto_config AS "autoConfig",
+            manual_config AS "manualConfig"
+          FROM numbering_rule_parts
+          WHERE rule_id = $1 AND (company_code = $2 OR company_code = '*')
+          ORDER BY part_order
+        `;
+
+        const partsResult = await pool.query(partsQuery, [rule.ruleId, companyCode]);
+        rule.parts = partsResult.rows;
+      }
+
+      logger.info(`채번 규칙 목록 조회 완료: ${result.rows.length}개`, { companyCode });
+      return result.rows;
+    } catch (error: any) {
+      logger.error(`채번 규칙 목록 조회 중 에러: ${error.message}`);
+      throw error;
+    }
+  }
+
+  /**
+   * 특정 규칙 조회
+   */
+  async getRuleById(ruleId: string, companyCode: string): Promise<NumberingRuleConfig | null> {
+    const pool = getPool();
+    const query = `
+      SELECT 
+        rule_id AS "ruleId",
+        rule_name AS "ruleName",
+        description,
+        separator,
+        reset_period AS "resetPeriod",
+        current_sequence AS "currentSequence",
+        table_name AS "tableName",
+        column_name AS "columnName",
+        company_code AS "companyCode",
+        menu_id AS "menuId",
+        scope_type AS "scopeType",
+        created_at AS "createdAt",
+        updated_at AS "updatedAt",
+        created_by AS "createdBy"
+      FROM numbering_rules
+      WHERE rule_id = $1 AND (company_code = $2 OR company_code = '*')
+    `;
+
+    const result = await pool.query(query, [ruleId, companyCode]);
+    if (result.rowCount === 0) return null;
+
+    const rule = result.rows[0];
+
+    const partsQuery = `
+      SELECT 
+        id,
+        part_order AS "order",
+        part_type AS "partType",
+        generation_method AS "generationMethod",
+        auto_config AS "autoConfig",
+        manual_config AS "manualConfig"
+      FROM numbering_rule_parts
+      WHERE rule_id = $1 AND (company_code = $2 OR company_code = '*')
+      ORDER BY part_order
+    `;
+
+    const partsResult = await pool.query(partsQuery, [ruleId, companyCode]);
+    rule.parts = partsResult.rows;
+
+    return rule;
+  }
+
+  /**
+   * 규칙 생성
+   */
+  async createRule(
+    config: NumberingRuleConfig,
+    companyCode: string,
+    userId: string
+  ): Promise<NumberingRuleConfig> {
+    const pool = getPool();
+    const client = await pool.connect();
+
+    try {
+      await client.query("BEGIN");
+
+      // 마스터 삽입
+      const insertRuleQuery = `
+        INSERT INTO numbering_rules (
+          rule_id, rule_name, description, separator, reset_period,
+          current_sequence, table_name, column_name, company_code, 
+          menu_objid, scope_type, created_by
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+        RETURNING 
+          rule_id AS "ruleId",
+          rule_name AS "ruleName",
+          description,
+          separator,
+          reset_period AS "resetPeriod",
+          current_sequence AS "currentSequence",
+          table_name AS "tableName",
+          column_name AS "columnName",
+          company_code AS "companyCode",
+          menu_objid AS "menuObjid",
+          scope_type AS "scopeType",
+          created_at AS "createdAt",
+          updated_at AS "updatedAt",
+          created_by AS "createdBy"
+      `;
+
+      const ruleResult = await client.query(insertRuleQuery, [
+        config.ruleId,
+        config.ruleName,
+        config.description || null,
+        config.separator || "-",
+        config.resetPeriod || "none",
+        config.currentSequence || 1,
+        config.tableName || null,
+        config.columnName || null,
+        companyCode,
+        config.menuObjid || null,
+        config.scopeType || "global",
+        userId,
+      ]);
+
+      // 파트 삽입
+      const parts: NumberingRulePart[] = [];
+      for (const part of config.parts) {
+        const insertPartQuery = `
+          INSERT INTO numbering_rule_parts (
+            rule_id, part_order, part_type, generation_method,
+            auto_config, manual_config, company_code
+          ) VALUES ($1, $2, $3, $4, $5, $6, $7)
+          RETURNING 
+            id,
+            part_order AS "order",
+            part_type AS "partType",
+            generation_method AS "generationMethod",
+            auto_config AS "autoConfig",
+            manual_config AS "manualConfig"
+        `;
+
+        const partResult = await client.query(insertPartQuery, [
+          config.ruleId,
+          part.order,
+          part.partType,
+          part.generationMethod,
+          JSON.stringify(part.autoConfig || {}),
+          JSON.stringify(part.manualConfig || {}),
+          companyCode,
+        ]);
+
+        parts.push(partResult.rows[0]);
+      }
+
+      await client.query("COMMIT");
+      logger.info("채번 규칙 생성 완료", { ruleId: config.ruleId, companyCode });
+      return { ...ruleResult.rows[0], parts };
+    } catch (error: any) {
+      await client.query("ROLLBACK");
+      logger.error("채번 규칙 생성 실패", { error: error.message });
+      throw error;
+    } finally {
+      client.release();
+    }
+  }
+
+  /**
+   * 규칙 수정
+   */
+  async updateRule(
+    ruleId: string,
+    updates: Partial<NumberingRuleConfig>,
+    companyCode: string
+  ): Promise<NumberingRuleConfig> {
+    const pool = getPool();
+    const client = await pool.connect();
+
+    try {
+      await client.query("BEGIN");
+
+      const updateRuleQuery = `
+        UPDATE numbering_rules
+        SET 
+          rule_name = COALESCE($1, rule_name),
+          description = COALESCE($2, description),
+          separator = COALESCE($3, separator),
+          reset_period = COALESCE($4, reset_period),
+          table_name = COALESCE($5, table_name),
+          column_name = COALESCE($6, column_name),
+          menu_objid = COALESCE($7, menu_objid),
+          scope_type = COALESCE($8, scope_type),
+          updated_at = NOW()
+        WHERE rule_id = $9 AND company_code = $10
+        RETURNING 
+          rule_id AS "ruleId",
+          rule_name AS "ruleName",
+          description,
+          separator,
+          reset_period AS "resetPeriod",
+          current_sequence AS "currentSequence",
+          table_name AS "tableName",
+          column_name AS "columnName",
+          company_code AS "companyCode",
+          menu_objid AS "menuObjid",
+          scope_type AS "scopeType",
+          created_at AS "createdAt",
+          updated_at AS "updatedAt",
+          created_by AS "createdBy"
+      `;
+
+      const ruleResult = await client.query(updateRuleQuery, [
+        updates.ruleName,
+        updates.description,
+        updates.separator,
+        updates.resetPeriod,
+        updates.tableName,
+        updates.columnName,
+        updates.menuObjid,
+        updates.scopeType,
+        ruleId,
+        companyCode,
+      ]);
+
+      if (ruleResult.rowCount === 0) {
+        throw new Error("규칙을 찾을 수 없거나 권한이 없습니다");
+      }
+
+      // 파트 업데이트
+      let parts: NumberingRulePart[] = [];
+      if (updates.parts) {
+        await client.query(
+          "DELETE FROM numbering_rule_parts WHERE rule_id = $1 AND company_code = $2",
+          [ruleId, companyCode]
+        );
+
+        for (const part of updates.parts) {
+          const insertPartQuery = `
+            INSERT INTO numbering_rule_parts (
+              rule_id, part_order, part_type, generation_method,
+              auto_config, manual_config, company_code
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7)
+            RETURNING 
+              id,
+              part_order AS "order",
+              part_type AS "partType",
+              generation_method AS "generationMethod",
+              auto_config AS "autoConfig",
+              manual_config AS "manualConfig"
+          `;
+
+          const partResult = await client.query(insertPartQuery, [
+            ruleId,
+            part.order,
+            part.partType,
+            part.generationMethod,
+            JSON.stringify(part.autoConfig || {}),
+            JSON.stringify(part.manualConfig || {}),
+            companyCode,
+          ]);
+
+          parts.push(partResult.rows[0]);
+        }
+      }
+
+      await client.query("COMMIT");
+      logger.info("채번 규칙 수정 완료", { ruleId, companyCode });
+      return { ...ruleResult.rows[0], parts };
+    } catch (error: any) {
+      await client.query("ROLLBACK");
+      logger.error("채번 규칙 수정 실패", { error: error.message });
+      throw error;
+    } finally {
+      client.release();
+    }
+  }
+
+  /**
+   * 규칙 삭제
+   */
+  async deleteRule(ruleId: string, companyCode: string): Promise<void> {
+    const pool = getPool();
+    const query = `
+      DELETE FROM numbering_rules
+      WHERE rule_id = $1 AND company_code = $2
+    `;
+
+    const result = await pool.query(query, [ruleId, companyCode]);
+
+    if (result.rowCount === 0) {
+      throw new Error("규칙을 찾을 수 없거나 권한이 없습니다");
+    }
+
+    logger.info("채번 규칙 삭제 완료", { ruleId, companyCode });
+  }
+
+  /**
+   * 코드 생성
+   */
+  async generateCode(ruleId: string, companyCode: string): Promise<string> {
+    const pool = getPool();
+    const client = await pool.connect();
+
+    try {
+      await client.query("BEGIN");
+
+      const rule = await this.getRuleById(ruleId, companyCode);
+      if (!rule) throw new Error("규칙을 찾을 수 없습니다");
+
+      const parts = rule.parts
+        .sort((a: any, b: any) => a.order - b.order)
+        .map((part: any) => {
+          if (part.generationMethod === "manual") {
+            return part.manualConfig?.value || "";
+          }
+
+          const autoConfig = part.autoConfig || {};
+
+          switch (part.partType) {
+            case "prefix":
+              return autoConfig.prefix || "PREFIX";
+
+            case "sequence": {
+              const length = autoConfig.sequenceLength || 4;
+              return String(rule.currentSequence || 1).padStart(length, "0");
+            }
+
+            case "date":
+              return this.formatDate(new Date(), autoConfig.dateFormat || "YYYYMMDD");
+
+            case "year": {
+              const format = autoConfig.dateFormat || "YYYY";
+              const year = new Date().getFullYear();
+              return format === "YY" ? String(year).slice(-2) : String(year);
+            }
+
+            case "month":
+              return String(new Date().getMonth() + 1).padStart(2, "0");
+
+            case "custom":
+              return autoConfig.value || "CUSTOM";
+
+            default:
+              return "";
+          }
+        });
+
+      const generatedCode = parts.join(rule.separator || "");
+
+      const hasSequence = rule.parts.some((p: any) => p.partType === "sequence");
+      if (hasSequence) {
+        await client.query(
+          "UPDATE numbering_rules SET current_sequence = current_sequence + 1 WHERE rule_id = $1 AND company_code = $2",
+          [ruleId, companyCode]
+        );
+      }
+
+      await client.query("COMMIT");
+      logger.info("코드 생성 완료", { ruleId, generatedCode });
+      return generatedCode;
+    } catch (error: any) {
+      await client.query("ROLLBACK");
+      logger.error("코드 생성 실패", { error: error.message });
+      throw error;
+    } finally {
+      client.release();
+    }
+  }
+
+  private formatDate(date: Date, format: string): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+
+    switch (format) {
+      case "YYYY": return String(year);
+      case "YY": return String(year).slice(-2);
+      case "YYYYMM": return `${year}${month}`;
+      case "YYMM": return `${String(year).slice(-2)}${month}`;
+      case "YYYYMMDD": return `${year}${month}${day}`;
+      case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
+      default: return `${year}${month}${day}`;
+    }
+  }
+
+  async resetSequence(ruleId: string, companyCode: string): Promise<void> {
+    const pool = getPool();
+    await pool.query(
+      "UPDATE numbering_rules SET current_sequence = 1, updated_at = NOW() WHERE rule_id = $1 AND company_code = $2",
+      [ruleId, companyCode]
+    );
+    logger.info("시퀀스 초기화 완료", { ruleId, companyCode });
+  }
+}
+
+export const numberingRuleService = new NumberingRuleService();

docs/채번규칙_컴포넌트_구현_완료.md

@@ -0,0 +1,374 @@
+# 채번규칙 컴포넌트 구현 완료
+
+> **작성일**: 2025-11-04  
+> **상태**: 백엔드 및 프론트엔드 핵심 구현 완료 (화면관리 통합 대기)
+
+---
+
+## 구현 개요
+
+채번규칙(Numbering Rule) 컴포넌트는 시스템에서 자동으로 코드를 생성하는 규칙을 설정하고 관리하는 관리자 전용 컴포넌트입니다.
+
+**생성 코드 예시**:
+- 제품 코드: `PROD-20251104-0001`
+- 프로젝트 코드: `PRJ-2025-001`
+- 거래처 코드: `CUST-A-0001`
+
+---
+
+## 완료된 구현 항목
+
+### 1. 데이터베이스 레이어 ✅
+
+**파일**: `db/migrations/034_create_numbering_rules.sql`
+
+- [x] `numbering_rules` 마스터 테이블 생성
+- [x] `numbering_rule_parts` 파트 테이블 생성
+- [x] 멀티테넌시 지원 (company_code 필드)
+- [x] 인덱스 생성 (성능 최적화)
+- [x] 샘플 데이터 삽입
+
+**주요 기능**:
+- 규칙 ID, 규칙명, 구분자, 초기화 주기
+- 현재 시퀀스 번호 관리
+- 적용 대상 테이블/컬럼 지정
+- 최대 6개 파트 지원
+
+---
+
+### 2. 백엔드 레이어 ✅
+
+#### 2.1 서비스 레이어
+
+**파일**: `backend-node/src/services/numberingRuleService.ts`
+
+**구현된 메서드**:
+- [x] `getRuleList(companyCode)` - 규칙 목록 조회
+- [x] `getRuleById(ruleId, companyCode)` - 특정 규칙 조회
+- [x] `createRule(config, companyCode, userId)` - 규칙 생성
+- [x] `updateRule(ruleId, updates, companyCode)` - 규칙 수정
+- [x] `deleteRule(ruleId, companyCode)` - 규칙 삭제
+- [x] `generateCode(ruleId, companyCode)` - 코드 생성
+- [x] `resetSequence(ruleId, companyCode)` - 시퀀스 초기화
+
+**핵심 로직**:
+- 트랜잭션 관리 (BEGIN/COMMIT/ROLLBACK)
+- 멀티테넌시 필터링 (company_code 기반)
+- JSON 설정 직렬화/역직렬화
+- 날짜 형식 변환 (YYYY, YYYYMMDD 등)
+- 순번 자동 증가 및 제로 패딩
+
+#### 2.2 컨트롤러 레이어
+
+**파일**: `backend-node/src/controllers/numberingRuleController.ts`
+
+**구현된 엔드포인트**:
+- [x] `GET /api/numbering-rules` - 규칙 목록 조회
+- [x] `GET /api/numbering-rules/:ruleId` - 특정 규칙 조회
+- [x] `POST /api/numbering-rules` - 규칙 생성
+- [x] `PUT /api/numbering-rules/:ruleId` - 규칙 수정
+- [x] `DELETE /api/numbering-rules/:ruleId` - 규칙 삭제
+- [x] `POST /api/numbering-rules/:ruleId/generate` - 코드 생성
+- [x] `POST /api/numbering-rules/:ruleId/reset` - 시퀀스 초기화
+
+**보안 및 검증**:
+- `authenticateToken` 미들웨어로 인증 확인
+- 입력값 검증 (필수 필드, 파트 최소 개수)
+- 에러 핸들링 및 적절한 HTTP 상태 코드 반환
+
+#### 2.3 라우터 등록
+
+**파일**: `backend-node/src/app.ts`
+
+```typescript
+import numberingRuleController from "./controllers/numberingRuleController";
+app.use("/api/numbering-rules", numberingRuleController);
+```
+
+---
+
+### 3. 프론트엔드 레이어 ✅
+
+#### 3.1 타입 정의
+
+**파일**: `frontend/types/numbering-rule.ts`
+
+**정의된 타입**:
+- [x] `CodePartType` - 파트 유형 (prefix/sequence/date/year/month/custom)
+- [x] `GenerationMethod` - 생성 방식 (auto/manual)
+- [x] `DateFormat` - 날짜 형식 (YYYY/YYYYMMDD 등)
+- [x] `NumberingRulePart` - 단일 파트 인터페이스
+- [x] `NumberingRuleConfig` - 전체 규칙 인터페이스
+- [x] 상수 옵션 배열 (UI용)
+
+#### 3.2 API 클라이언트
+
+**파일**: `frontend/lib/api/numberingRule.ts`
+
+**구현된 함수**:
+- [x] `getNumberingRules()` - 규칙 목록 조회
+- [x] `getNumberingRuleById(ruleId)` - 특정 규칙 조회
+- [x] `createNumberingRule(config)` - 규칙 생성
+- [x] `updateNumberingRule(ruleId, config)` - 규칙 수정
+- [x] `deleteNumberingRule(ruleId)` - 규칙 삭제
+- [x] `generateCode(ruleId)` - 코드 생성
+- [x] `resetSequence(ruleId)` - 시퀀스 초기화
+
+**기술 스택**:
+- Axios 기반 API 클라이언트
+- 에러 핸들링 및 응답 타입 정의
+
+#### 3.3 컴포넌트 구조
+
+```
+frontend/components/numbering-rule/
+├── NumberingRuleDesigner.tsx      # 메인 디자이너 (좌우 분할)
+├── NumberingRulePreview.tsx       # 실시간 미리보기
+├── NumberingRuleCard.tsx          # 단일 파트 카드
+├── AutoConfigPanel.tsx            # 자동 생성 설정
+└── ManualConfigPanel.tsx          # 직접 입력 설정
+```
+
+#### 3.4 주요 컴포넌트 기능
+
+**NumberingRuleDesigner** (메인 컴포넌트):
+- [x] 좌측: 저장된 규칙 목록 (카드 리스트)
+- [x] 우측: 규칙 편집 영역 (파트 추가/수정/삭제)
+- [x] 실시간 미리보기
+- [x] 규칙 저장/불러오기/삭제
+- [x] 타이틀 편집 기능
+- [x] 로딩 상태 관리
+
+**NumberingRulePreview**:
+- [x] 설정된 규칙에 따라 실시간 코드 생성
+- [x] 컴팩트 모드 지원
+- [x] useMemo로 성능 최적화
+
+**NumberingRuleCard**:
+- [x] 파트 유형 선택 (Select)
+- [x] 생성 방식 선택 (자동/수동)
+- [x] 동적 설정 패널 표시
+- [x] 삭제 버튼
+
+**AutoConfigPanel**:
+- [x] 파트 유형별 설정 UI
+- [x] 접두사, 순번, 날짜, 연도, 월, 커스텀
+- [x] 입력값 검증 및 가이드 텍스트
+
+**ManualConfigPanel**:
+- [x] 직접 입력값 설정
+- [x] 플레이스홀더 설정
+
+---
+
+## 기술적 특징
+
+### Shadcn/ui 스타일 가이드 준수
+
+- 반응형 크기: `h-8 sm:h-10`, `text-xs sm:text-sm`
+- 색상 토큰: `bg-muted`, `text-muted-foreground`, `border-border`
+- 간격: `space-y-3 sm:space-y-4`, `gap-4`
+- 상태: `hover:bg-accent`, `disabled:opacity-50`
+
+### 실시간 속성 편집 패턴
+
+```typescript
+const [currentRule, setCurrentRule] = useState<NumberingRuleConfig | null>(null);
+
+useEffect(() => {
+  if (currentRule) {
+    onChange?.(currentRule); // 상위 컴포넌트로 실시간 전파
+  }
+}, [currentRule, onChange]);
+
+const handleUpdatePart = useCallback((partId: string, updates: Partial<NumberingRulePart>) => {
+  setCurrentRule((prev) => {
+    if (!prev) return null;
+    return {
+      ...prev,
+      parts: prev.parts.map((part) => (part.id === partId ? { ...part, ...updates } : part)),
+    };
+  });
+}, []);
+```
+
+### 멀티테넌시 지원
+
+```typescript
+// 백엔드 쿼리
+WHERE company_code = $1 OR company_code = '*'
+
+// 일반 회사는 자신의 데이터만 조회
+// company_code = "*"는 최고 관리자 전용 데이터
+```
+
+### 에러 처리 및 사용자 피드백
+
+```typescript
+try {
+  const response = await createNumberingRule(config);
+  if (response.success) {
+    toast.success("채번 규칙이 저장되었습니다");
+  } else {
+    toast.error(response.error || "저장 실패");
+  }
+} catch (error: any) {
+  toast.error(`저장 실패: ${error.message}`);
+}
+```
+
+---
+
+## 남은 작업
+
+### 화면관리 시스템 통합 (TODO)
+
+다음 파일들을 생성하여 화면관리 시스템에 컴포넌트를 등록해야 합니다:
+
+```
+frontend/lib/registry/components/numbering-rule/
+├── index.ts                      # 컴포넌트 정의 및 등록
+├── NumberingRuleComponent.tsx   # 래퍼 컴포넌트
+├── NumberingRuleConfigPanel.tsx # 속성 설정 패널
+└── types.ts                      # 컴포넌트 설정 타입
+```
+
+**등록 예시**:
+```typescript
+export const NumberingRuleDefinition = createComponentDefinition({
+  id: "numbering-rule",
+  name: "코드 채번 규칙",
+  category: ComponentCategory.ADMIN,
+  component: NumberingRuleWrapper,
+  configPanel: NumberingRuleConfigPanel,
+  defaultSize: { width: 1200, height: 800 },
+  icon: "Hash",
+  tags: ["코드", "채번", "규칙", "관리자"],
+});
+```
+
+---
+
+## 테스트 가이드
+
+### 백엔드 API 테스트 (Postman/Thunder Client)
+
+#### 1. 규칙 목록 조회
+```bash
+GET http://localhost:8080/api/numbering-rules
+Authorization: Bearer {token}
+```
+
+#### 2. 규칙 생성
+```bash
+POST http://localhost:8080/api/numbering-rules
+Content-Type: application/json
+Authorization: Bearer {token}
+
+{
+  "ruleId": "PROD_CODE",
+  "ruleName": "제품 코드 규칙",
+  "separator": "-",
+  "parts": [
+    {
+      "order": 1,
+      "partType": "prefix",
+      "generationMethod": "auto",
+      "autoConfig": { "prefix": "PROD" }
+    },
+    {
+      "order": 2,
+      "partType": "date",
+      "generationMethod": "auto",
+      "autoConfig": { "dateFormat": "YYYYMMDD" }
+    },
+    {
+      "order": 3,
+      "partType": "sequence",
+      "generationMethod": "auto",
+      "autoConfig": { "sequenceLength": 4, "startFrom": 1 }
+    }
+  ]
+}
+```
+
+#### 3. 코드 생성
+```bash
+POST http://localhost:8080/api/numbering-rules/PROD_CODE/generate
+Authorization: Bearer {token}
+
+Response:
+{
+  "success": true,
+  "data": {
+    "code": "PROD-20251104-0001"
+  }
+}
+```
+
+### 프론트엔드 테스트
+
+1. **새 규칙 생성**:
+   - "새 규칙 생성" 버튼 클릭
+   - 규칙명 입력
+   - "규칙 추가" 버튼으로 파트 추가
+   - 각 파트의 설정 변경
+   - "저장" 버튼 클릭
+
+2. **미리보기 확인**:
+   - 파트 추가/수정 시 실시간으로 코드 미리보기 업데이트 확인
+   - 구분자 변경 시 반영 확인
+
+3. **규칙 편집**:
+   - 좌측 목록에서 규칙 선택
+   - 우측 편집 영역에서 수정
+   - 저장 후 목록에 반영 확인
+
+4. **규칙 삭제**:
+   - 목록 카드의 삭제 버튼 클릭
+   - 목록에서 제거 확인
+
+---
+
+## 파일 목록
+
+### 백엔드
+- `db/migrations/034_create_numbering_rules.sql` (마이그레이션)
+- `backend-node/src/services/numberingRuleService.ts` (서비스)
+- `backend-node/src/controllers/numberingRuleController.ts` (컨트롤러)
+- `backend-node/src/app.ts` (라우터 등록)
+
+### 프론트엔드
+- `frontend/types/numbering-rule.ts` (타입 정의)
+- `frontend/lib/api/numberingRule.ts` (API 클라이언트)
+- `frontend/components/numbering-rule/NumberingRuleDesigner.tsx`
+- `frontend/components/numbering-rule/NumberingRulePreview.tsx`
+- `frontend/components/numbering-rule/NumberingRuleCard.tsx`
+- `frontend/components/numbering-rule/AutoConfigPanel.tsx`
+- `frontend/components/numbering-rule/ManualConfigPanel.tsx`
+
+---
+
+## 다음 단계
+
+1. **마이그레이션 실행**:
+   ```sql
+   psql -U postgres -d ilshin -f db/migrations/034_create_numbering_rules.sql
+   ```
+
+2. **백엔드 서버 확인** (이미 실행 중이면 자동 반영)
+
+3. **화면관리 통합**:
+   - 레지스트리 컴포넌트 파일 생성
+   - 컴포넌트 등록 및 화면 디자이너에서 사용 가능하도록 설정
+
+4. **테스트**:
+   - API 테스트 (Postman)
+   - UI 테스트 (브라우저)
+   - 멀티테넌시 검증
+
+---
+
+**작성 완료**: 2025-11-04  
+**문의**: 백엔드 및 프론트엔드 핵심 기능 완료, 화면관리 통합만 남음
+

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -61,6 +61,9 @@ export default function ScreenViewPage() {
     modalDescription?: string;
   }>({});
 
+  // 레이아웃 준비 완료 상태 (버튼 위치 계산 완료 후 화면 표시)
+  const [layoutReady, setLayoutReady] = useState(true);
+
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
   const [containerWidth, setContainerWidth] = useState(0);
@@ -106,6 +109,7 @@ export default function ScreenViewPage() {
     const loadScreen = async () => {
       try {
         setLoading(true);
+        setLayoutReady(false); // 화면 로드 시 레이아웃 준비 초기화
         setError(null);
 
         // 화면 정보 로드
@@ -225,6 +229,9 @@ export default function ScreenViewPage() {
         setScale(newScale);
         // 컨테이너 너비 업데이트
         setContainerWidth(containerWidth);
+
+        // 스케일 계산 완료 후 레이아웃 준비 완료 표시
+        setLayoutReady(true);
       }
     };
 
@@ -240,10 +247,10 @@ export default function ScreenViewPage() {
 
   if (loading) {
     return (
-      <div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-muted to-muted/50">
+      <div className="from-muted to-muted/50 flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br">
-        <div className="rounded-xl border border-border bg-background p-8 text-center shadow-lg">
+        <div className="border-border bg-background rounded-xl border p-8 text-center shadow-lg">
-          <Loader2 className="mx-auto h-10 w-10 animate-spin text-primary" />
+          <Loader2 className="text-primary mx-auto h-10 w-10 animate-spin" />
-          <p className="mt-4 font-medium text-foreground">화면을 불러오는 중...</p>
+          <p className="text-foreground mt-4 font-medium">화면을 불러오는 중...</p>
         </div>
       </div>
     );
@@ -251,13 +258,13 @@ export default function ScreenViewPage() {
 
   if (error || !screen) {
     return (
-      <div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-muted to-muted/50">
+      <div className="from-muted to-muted/50 flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br">
-        <div className="max-w-md rounded-xl border border-border bg-background p-8 text-center shadow-lg">
+        <div className="border-border bg-background max-w-md rounded-xl border p-8 text-center shadow-lg">
-          <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-destructive/20 to-warning/20 shadow-sm">
+          <div className="from-destructive/20 to-warning/20 mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br shadow-sm">
             <span className="text-3xl">⚠️</span>
           </div>
-          <h2 className="mb-3 text-xl font-bold text-foreground">화면을 찾을 수 없습니다</h2>
+          <h2 className="text-foreground mb-3 text-xl font-bold">화면을 찾을 수 없습니다</h2>
-          <p className="mb-6 leading-relaxed text-muted-foreground">{error || "요청하신 화면이 존재하지 않습니다."}</p>
+          <p className="text-muted-foreground mb-6 leading-relaxed">{error || "요청하신 화면이 존재하지 않습니다."}</p>
           <Button onClick={() => router.back()} variant="outline" className="rounded-lg">
             이전으로 돌아가기
           </Button>
@@ -273,10 +280,20 @@ export default function ScreenViewPage() {
   return (
     <ScreenPreviewProvider isPreviewMode={false}>
       <div ref={containerRef} className="bg-background h-full w-full overflow-hidden">
+        {/* 레이아웃 준비 중 로딩 표시 */}
+        {!layoutReady && (
+          <div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
+            <div className="border-border bg-background rounded-xl border p-8 text-center shadow-lg">
+              <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
+              <p className="text-foreground mt-4 text-sm font-medium">화면 준비 중...</p>
+            </div>
+          </div>
+        )}
+
         {/* 절대 위치 기반 렌더링 */}
-        {layout && layout.components.length > 0 ? (
+        {layoutReady && layout && layout.components.length > 0 ? (
           <div
-            className="bg-background relative origin-top-left h-full flex justify-start items-start"
+            className="bg-background relative flex h-full origin-top-left items-start justify-start"
             style={{
               transform: `scale(${scale})`,
               transformOrigin: "top left",
@@ -289,27 +306,76 @@ export default function ScreenViewPage() {
               // 🆕 플로우 버튼 그룹 감지 및 처리
               const topLevelComponents = layout.components.filter((component) => !component.parentId);
 
+              // 버튼은 scale에 맞춰 위치만 조정하면 됨 (scale = 1.0이면 그대로, scale < 1.0이면 왼쪽으로)
+              // 하지만 x=0 컴포넌트는 width: 100%로 확장되므로, 그만큼 버튼을 오른쪽으로 이동
+              const leftmostComponent = topLevelComponents.find((c) => c.position.x === 0);
+              let widthOffset = 0;
+
+              if (leftmostComponent && containerWidth > 0) {
+                const originalWidth = leftmostComponent.size?.width || screenWidth;
+                const actualWidth = containerWidth / scale;
+                widthOffset = Math.max(0, actualWidth - originalWidth);
+
+                console.log("📊 widthOffset 계산:", {
+                  containerWidth,
+                  scale,
+                  screenWidth,
+                  originalWidth,
+                  actualWidth,
+                  widthOffset,
+                  leftmostType: leftmostComponent.type,
+                });
+              }
+
               const buttonGroups: Record<string, any[]> = {};
               const processedButtonIds = new Set<string>();
+              // 🔍 전체 버튼 목록 확인
+              const allButtons = topLevelComponents.filter((component) => {
+                const isButton =
+                  (component.type === "component" &&
+                    ["button-primary", "button-secondary"].includes((component as any).componentType)) ||
+                  (component.type === "widget" && (component as any).widgetType === "button");
+                return isButton;
+              });
+
+              console.log(
+                "🔍 메뉴에서 발견된 전체 버튼:",
+                allButtons.map((b) => ({
+                  id: b.id,
+                  label: b.label,
+                  positionX: b.position.x,
+                  positionY: b.position.y,
+                })),
+              );
 
               topLevelComponents.forEach((component) => {
                 const isButton =
-                  component.type === "button" ||
                   (component.type === "component" &&
-                    ["button-primary", "button-secondary"].includes((component as any).componentType));
+                    ["button-primary", "button-secondary"].includes((component as any).componentType)) ||
+                  (component.type === "widget" && (component as any).widgetType === "button");
 
                 if (isButton) {
                   const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig as
                     | FlowVisibilityConfig
                     | undefined;
 
-                  if (flowConfig?.enabled && flowConfig.layoutBehavior === "auto-compact" && flowConfig.groupId) {
+                  // 🔧 임시: 버튼 그룹 기능 완전 비활성화
+                  // TODO: 사용자가 명시적으로 그룹을 원하는 경우에만 활성화하도록 UI 개선 필요
+                  const DISABLE_BUTTON_GROUPS = false;
+
+                  if (
+                    !DISABLE_BUTTON_GROUPS &&
+                    flowConfig?.enabled &&
+                    flowConfig.layoutBehavior === "auto-compact" &&
+                    flowConfig.groupId
+                  ) {
                     if (!buttonGroups[flowConfig.groupId]) {
                       buttonGroups[flowConfig.groupId] = [];
                     }
                     buttonGroups[flowConfig.groupId].push(component);
                     processedButtonIds.add(component.id);
                   }
+                  // else: 모든 버튼을 개별 렌더링
                 }
               });
 
@@ -318,92 +384,121 @@ export default function ScreenViewPage() {
               return (
                 <>
                   {/* 일반 컴포넌트들 */}
-                  {regularComponents.map((component) => (
+                  {regularComponents.map((component) => {
-                    <RealtimePreview
+                    // 버튼인 경우 위치 조정 (테이블이 늘어난 만큼 오른쪽으로 이동)
-                      key={component.id}
+                    const isButton =
-                      component={component}
+                      (component.type === "component" &&
-                      isSelected={false}
+                        ["button-primary", "button-secondary"].includes((component as any).componentType)) ||
-                      isDesignMode={false}
+                      (component.type === "widget" && (component as any).widgetType === "button");
-                      onClick={() => {}}
-                      screenId={screenId}
-                      tableName={screen?.tableName}
-                      userId={user?.userId}
-                      userName={userName}
-                      companyCode={companyCode}
-                      selectedRowsData={selectedRowsData}
-                      onSelectedRowsChange={(_, selectedData) => {
-                        console.log("🔍 화면에서 선택된 행 데이터:", selectedData);
-                        setSelectedRowsData(selectedData);
-                      }}
-                      flowSelectedData={flowSelectedData}
-                      flowSelectedStepId={flowSelectedStepId}
-                      onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
-                        setFlowSelectedData(selectedData);
-                        setFlowSelectedStepId(stepId);
-                      }}
-                      refreshKey={tableRefreshKey}
-                      onRefresh={() => {
-                        setTableRefreshKey((prev) => prev + 1);
-                        setSelectedRowsData([]); // 선택 해제
-                      }}
-                      flowRefreshKey={flowRefreshKey}
-                      onFlowRefresh={() => {
-                        setFlowRefreshKey((prev) => prev + 1);
-                        setFlowSelectedData([]); // 선택 해제
-                        setFlowSelectedStepId(null);
-                      }}
-                      formData={formData}
-                      onFormDataChange={(fieldName, value) => {
-                        setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                      }}
-                    >
-                      {/* 자식 컴포넌트들 */}
-                      {(component.type === "group" || component.type === "container" || component.type === "area") &&
-                        layout.components
-                          .filter((child) => child.parentId === component.id)
-                          .map((child) => {
-                            // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
-                            const relativeChildComponent = {
-                              ...child,
-                              position: {
-                                x: child.position.x - component.position.x,
-                                y: child.position.y - component.position.y,
-                                z: child.position.z || 1,
-                              },
-                            };
 
-                            return (
+                    const adjustedComponent =
-                              <RealtimePreview
+                      isButton && widthOffset > 0
-                                key={child.id}
+                        ? {
-                                component={relativeChildComponent}
+                            ...component,
-                                isSelected={false}
+                            position: {
-                                isDesignMode={false}
+                              ...component.position,
-                                onClick={() => {}}
+                              x: component.position.x + widthOffset,
-                                screenId={screenId}
+                            },
-                                tableName={screen?.tableName}
+                          }
-                                userId={user?.userId}
+                        : component;
-                                userName={userName}
+
-                                companyCode={companyCode}
+                    // 버튼일 경우 로그 출력
-                                selectedRowsData={selectedRowsData}
+                    if (isButton) {
-                                onSelectedRowsChange={(_, selectedData) => {
+                      console.log("🔘 버튼 위치 조정:", {
-                                  console.log("🔍 화면에서 선택된 행 데이터 (자식):", selectedData);
+                        label: component.label,
-                                  setSelectedRowsData(selectedData);
+                        originalX: component.position.x,
-                                }}
+                        adjustedX: component.position.x + widthOffset,
-                                refreshKey={tableRefreshKey}
+                        widthOffset,
-                                onRefresh={() => {
+                      });
-                                  console.log("🔄 테이블 새로고침 요청됨 (자식)");
+                    }
-                                  setTableRefreshKey((prev) => prev + 1);
+
-                                  setSelectedRowsData([]); // 선택 해제
+                    return (
-                                }}
+                      <RealtimePreview
-                                formData={formData}
+                        key={component.id}
-                                onFormDataChange={(fieldName, value) => {
+                        component={adjustedComponent}
-                                  setFormData((prev) => ({ ...prev, [fieldName]: value }));
+                        isSelected={false}
-                                }}
+                        isDesignMode={false}
-                              />
+                        onClick={() => {}}
-                            );
+                        screenId={screenId}
-                          })}
+                        tableName={screen?.tableName}
-                    </RealtimePreview>
+                        userId={user?.userId}
-                  ))}
+                        userName={userName}
+                        companyCode={companyCode}
+                        selectedRowsData={selectedRowsData}
+                        onSelectedRowsChange={(_, selectedData) => {
+                          console.log("🔍 화면에서 선택된 행 데이터:", selectedData);
+                          setSelectedRowsData(selectedData);
+                        }}
+                        flowSelectedData={flowSelectedData}
+                        flowSelectedStepId={flowSelectedStepId}
+                        onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
+                          setFlowSelectedData(selectedData);
+                          setFlowSelectedStepId(stepId);
+                        }}
+                        refreshKey={tableRefreshKey}
+                        onRefresh={() => {
+                          setTableRefreshKey((prev) => prev + 1);
+                          setSelectedRowsData([]); // 선택 해제
+                        }}
+                        flowRefreshKey={flowRefreshKey}
+                        onFlowRefresh={() => {
+                          setFlowRefreshKey((prev) => prev + 1);
+                          setFlowSelectedData([]); // 선택 해제
+                          setFlowSelectedStepId(null);
+                        }}
+                        formData={formData}
+                        onFormDataChange={(fieldName, value) => {
+                          setFormData((prev) => ({ ...prev, [fieldName]: value }));
+                        }}
+                      >
+                        {/* 자식 컴포넌트들 */}
+                        {(component.type === "group" || component.type === "container" || component.type === "area") &&
+                          layout.components
+                            .filter((child) => child.parentId === component.id)
+                            .map((child) => {
+                              // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
+                              const relativeChildComponent = {
+                                ...child,
+                                position: {
+                                  x: child.position.x - component.position.x,
+                                  y: child.position.y - component.position.y,
+                                  z: child.position.z || 1,
+                                },
+                              };
+
+                              return (
+                                <RealtimePreview
+                                  key={child.id}
+                                  component={relativeChildComponent}
+                                  isSelected={false}
+                                  isDesignMode={false}
+                                  onClick={() => {}}
+                                  screenId={screenId}
+                                  tableName={screen?.tableName}
+                                  userId={user?.userId}
+                                  userName={userName}
+                                  companyCode={companyCode}
+                                  selectedRowsData={selectedRowsData}
+                                  onSelectedRowsChange={(_, selectedData) => {
+                                    console.log("🔍 화면에서 선택된 행 데이터 (자식):", selectedData);
+                                    setSelectedRowsData(selectedData);
+                                  }}
+                                  refreshKey={tableRefreshKey}
+                                  onRefresh={() => {
+                                    console.log("🔄 테이블 새로고침 요청됨 (자식)");
+                                    setTableRefreshKey((prev) => prev + 1);
+                                    setSelectedRowsData([]); // 선택 해제
+                                  }}
+                                  formData={formData}
+                                  onFormDataChange={(fieldName, value) => {
+                                    setFormData((prev) => ({ ...prev, [fieldName]: value }));
+                                  }}
+                                />
+                              );
+                            })}
+                      </RealtimePreview>
+                    );
+                  })}
 
                   {/* 🆕 플로우 버튼 그룹들 */}
                   {Object.entries(buttonGroups).map(([groupId, buttons]) => {
@@ -413,15 +508,37 @@ export default function ScreenViewPage() {
                     const groupConfig = (firstButton as any).webTypeConfig
                       ?.flowVisibilityConfig as FlowVisibilityConfig;
 
-                    // 그룹의 위치는 모든 버튼 중 가장 왼쪽/위쪽 버튼의 위치 사용
+                    // 🔍 버튼 그룹 설정 확인
-                    const groupPosition = buttons.reduce(
+                    console.log("🔍 버튼 그룹 설정:", {
-                      (min, button) => ({
+                      groupId,
-                        x: Math.min(min.x, button.position.x),
+                      buttonCount: buttons.length,
-                        y: Math.min(min.y, button.position.y),
+                      buttons: buttons.map((b) => ({
-                        z: min.z,
+                        id: b.id,
-                      }),
+                        label: b.label,
-                      { x: buttons[0].position.x, y: buttons[0].position.y, z: buttons[0].position.z || 2 },
+                        x: b.position.x,
-                    );
+                        y: b.position.y,
+                      })),
+                      groupConfig: {
+                        layoutBehavior: groupConfig.layoutBehavior,
+                        groupDirection: groupConfig.groupDirection,
+                        groupAlign: groupConfig.groupAlign,
+                        groupGap: groupConfig.groupGap,
+                      },
+                    });
+
+                    // 🔧 수정: 그룹 컨테이너는 첫 번째 버튼 위치를 기준으로 하되,
+                    // 각 버튼의 상대 위치는 원래 위치를 유지
+                    const firstButtonPosition = {
+                      x: buttons[0].position.x,
+                      y: buttons[0].position.y,
+                      z: buttons[0].position.z || 2,
+                    };
+
+                    // 버튼 그룹 위치에도 widthOffset 적용
+                    const adjustedGroupPosition = {
+                      ...firstButtonPosition,
+                      x: firstButtonPosition.x + widthOffset,
+                    };
 
                     // 그룹의 크기 계산: 버튼들의 실제 크기 + 간격을 기준으로 계산
                     const direction = groupConfig.groupDirection || "horizontal";
@@ -451,9 +568,9 @@ export default function ScreenViewPage() {
                         key={`flow-button-group-${groupId}`}
                         style={{
                           position: "absolute",
-                          left: `${groupPosition.x}px`,
+                          left: `${adjustedGroupPosition.x}px`,
-                          top: `${groupPosition.y}px`,
+                          top: `${adjustedGroupPosition.y}px`,
-                          zIndex: groupPosition.z,
+                          zIndex: adjustedGroupPosition.z,
                           width: `${groupWidth}px`,
                           height: `${groupHeight}px`,
                         }}
@@ -463,9 +580,14 @@ export default function ScreenViewPage() {
                           groupConfig={groupConfig}
                           isDesignMode={false}
                           renderButton={(button) => {
+                            // 🔧 각 버튼의 상대 위치 = 버튼의 원래 위치 - 첫 번째 버튼 위치
                             const relativeButton = {
                               ...button,
-                              position: { x: 0, y: 0, z: button.position.z || 1 },
+                              position: {
+                                x: button.position.x - firstButtonPosition.x,
+                                y: button.position.y - firstButtonPosition.y,
+                                z: button.position.z || 1,
+                              },
                             };
 
                             return (

frontend/components/numbering-rule/AutoConfigPanel.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+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 { CodePartType, DATE_FORMAT_OPTIONS } from "@/types/numbering-rule";
+
+interface AutoConfigPanelProps {
+  partType: CodePartType;
+  config?: any;
+  onChange: (config: any) => void;
+  isPreview?: boolean;
+}
+
+export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
+  partType,
+  config = {},
+  onChange,
+  isPreview = false,
+}) => {
+  // 1. 순번 (자동 증가)
+  if (partType === "sequence") {
+    return (
+      <div className="space-y-3 sm:space-y-4">
+        <div>
+          <Label className="text-xs font-medium sm:text-sm">순번 자릿수</Label>
+          <Input
+            type="number"
+            min={1}
+            max={10}
+            value={config.sequenceLength || 3}
+            onChange={(e) =>
+              onChange({ ...config, sequenceLength: parseInt(e.target.value) || 3 })
+            }
+            disabled={isPreview}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+            예: 3 → 001, 4 → 0001
+          </p>
+        </div>
+        <div>
+          <Label className="text-xs font-medium sm:text-sm">시작 번호</Label>
+          <Input
+            type="number"
+            min={1}
+            value={config.startFrom || 1}
+            onChange={(e) =>
+              onChange({ ...config, startFrom: parseInt(e.target.value) || 1 })
+            }
+            disabled={isPreview}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+            순번이 시작될 번호
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // 2. 숫자 (고정 자릿수)
+  if (partType === "number") {
+    return (
+      <div className="space-y-3 sm:space-y-4">
+        <div>
+          <Label className="text-xs font-medium sm:text-sm">숫자 자릿수</Label>
+          <Input
+            type="number"
+            min={1}
+            max={10}
+            value={config.numberLength || 4}
+            onChange={(e) =>
+              onChange({ ...config, numberLength: parseInt(e.target.value) || 4 })
+            }
+            disabled={isPreview}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+            예: 4 → 0001, 5 → 00001
+          </p>
+        </div>
+        <div>
+          <Label className="text-xs font-medium sm:text-sm">숫자 값</Label>
+          <Input
+            type="number"
+            min={0}
+            value={config.numberValue || 0}
+            onChange={(e) =>
+              onChange({ ...config, numberValue: parseInt(e.target.value) || 0 })
+            }
+            disabled={isPreview}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+            고정으로 사용할 숫자
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // 3. 날짜
+  if (partType === "date") {
+    return (
+      <div>
+        <Label className="text-xs font-medium sm:text-sm">날짜 형식</Label>
+        <Select
+          value={config.dateFormat || "YYYYMMDD"}
+          onValueChange={(value) => onChange({ ...config, dateFormat: value })}
+          disabled={isPreview}
+        >
+          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {DATE_FORMAT_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
+                {option.label} ({option.example})
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+          현재 날짜가 자동으로 입력됩니다
+        </p>
+      </div>
+    );
+  }
+
+  // 4. 문자
+  if (partType === "text") {
+    return (
+      <div>
+        <Label className="text-xs font-medium sm:text-sm">텍스트 값</Label>
+        <Input
+          value={config.textValue || ""}
+          onChange={(e) => onChange({ ...config, textValue: e.target.value })}
+          placeholder="예: PRJ, CODE, PROD"
+          disabled={isPreview}
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        />
+        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+          고정으로 사용할 텍스트 또는 코드
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};

frontend/components/numbering-rule/ManualConfigPanel.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+
+interface ManualConfigPanelProps {
+  config?: {
+    value?: string;
+    placeholder?: string;
+  };
+  onChange: (config: any) => void;
+  isPreview?: boolean;
+}
+
+export const ManualConfigPanel: React.FC<ManualConfigPanelProps> = ({
+  config = {},
+  onChange,
+  isPreview = false,
+}) => {
+  return (
+    <div className="space-y-3 sm:space-y-4">
+      <div>
+        <Label className="text-xs font-medium sm:text-sm">입력값</Label>
+        <Input
+          value={config.value || ""}
+          onChange={(e) => onChange({ ...config, value: e.target.value })}
+          placeholder={config.placeholder || "값을 입력하세요"}
+          disabled={isPreview}
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        />
+        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+          코드 생성 시 이 값이 그대로 사용됩니다
+        </p>
+      </div>
+      <div>
+        <Label className="text-xs font-medium sm:text-sm">플레이스홀더 (선택사항)</Label>
+        <Input
+          value={config.placeholder || ""}
+          onChange={(e) => onChange({ ...config, placeholder: e.target.value })}
+          placeholder="예: 부서코드 입력"
+          disabled={isPreview}
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        />
+      </div>
+    </div>
+  );
+};

frontend/components/numbering-rule/NumberingRuleCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Trash2 } from "lucide-react";
+import { NumberingRulePart, CodePartType, GenerationMethod, CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
+import { AutoConfigPanel } from "./AutoConfigPanel";
+import { ManualConfigPanel } from "./ManualConfigPanel";
+
+interface NumberingRuleCardProps {
+  part: NumberingRulePart;
+  onUpdate: (updates: Partial<NumberingRulePart>) => void;
+  onDelete: () => void;
+  isPreview?: boolean;
+}
+
+export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
+  part,
+  onUpdate,
+  onDelete,
+  isPreview = false,
+}) => {
+  return (
+    <Card className="border-border bg-card">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <Badge variant="outline" className="text-xs sm:text-sm">
+            규칙 {part.order}
+          </Badge>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onDelete}
+            className="text-destructive h-7 w-7 sm:h-8 sm:w-8"
+            disabled={isPreview}
+          >
+            <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
+          </Button>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-3 sm:space-y-4">
+        <div>
+          <Label className="text-xs font-medium sm:text-sm">구분 유형</Label>
+          <Select
+            value={part.partType}
+            onValueChange={(value) => onUpdate({ partType: value as CodePartType })}
+            disabled={isPreview}
+          >
+            <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {CODE_PART_TYPE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div>
+          <Label className="text-xs font-medium sm:text-sm">생성 방식</Label>
+          <Select
+            value={part.generationMethod}
+            onValueChange={(value) => onUpdate({ generationMethod: value as GenerationMethod })}
+            disabled={isPreview}
+          >
+            <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="auto" className="text-xs sm:text-sm">
+                자동 생성
+              </SelectItem>
+              <SelectItem value="manual" className="text-xs sm:text-sm">
+                직접 입력
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {part.generationMethod === "auto" ? (
+          <AutoConfigPanel
+            partType={part.partType}
+            config={part.autoConfig}
+            onChange={(autoConfig) => onUpdate({ autoConfig })}
+            isPreview={isPreview}
+          />
+        ) : (
+          <ManualConfigPanel
+            config={part.manualConfig}
+            onChange={(manualConfig) => onUpdate({ manualConfig })}
+            isPreview={isPreview}
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/numbering-rule/NumberingRuleDesigner.tsx

@@ -0,0 +1,433 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Plus, Save, Edit2, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { NumberingRuleConfig, NumberingRulePart } from "@/types/numbering-rule";
+import { NumberingRuleCard } from "./NumberingRuleCard";
+import { NumberingRulePreview } from "./NumberingRulePreview";
+import {
+  getNumberingRules,
+  createNumberingRule,
+  updateNumberingRule,
+  deleteNumberingRule,
+} from "@/lib/api/numberingRule";
+
+interface NumberingRuleDesignerProps {
+  initialConfig?: NumberingRuleConfig;
+  onSave?: (config: NumberingRuleConfig) => void;
+  onChange?: (config: NumberingRuleConfig) => void;
+  maxRules?: number;
+  isPreview?: boolean;
+  className?: string;
+}
+
+export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
+  initialConfig,
+  onSave,
+  onChange,
+  maxRules = 6,
+  isPreview = false,
+  className = "",
+}) => {
+  const [savedRules, setSavedRules] = useState<NumberingRuleConfig[]>([]);
+  const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
+  const [currentRule, setCurrentRule] = useState<NumberingRuleConfig | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [leftTitle, setLeftTitle] = useState("저장된 규칙 목록");
+  const [rightTitle, setRightTitle] = useState("규칙 편집");
+  const [editingLeftTitle, setEditingLeftTitle] = useState(false);
+  const [editingRightTitle, setEditingRightTitle] = useState(false);
+
+  useEffect(() => {
+    loadRules();
+  }, []);
+
+  const loadRules = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await getNumberingRules();
+      if (response.success && response.data) {
+        setSavedRules(response.data);
+      } else {
+        toast.error(response.error || "규칙 목록을 불러올 수 없습니다");
+      }
+    } catch (error: any) {
+      toast.error(`로딩 실패: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (currentRule) {
+      onChange?.(currentRule);
+    }
+  }, [currentRule, onChange]);
+
+  const handleAddPart = useCallback(() => {
+    if (!currentRule) return;
+
+    if (currentRule.parts.length >= maxRules) {
+      toast.error(`최대 ${maxRules}개까지 추가할 수 있습니다`);
+      return;
+    }
+
+    const newPart: NumberingRulePart = {
+      id: `part-${Date.now()}`,
+      order: currentRule.parts.length + 1,
+      partType: "text",
+      generationMethod: "auto",
+      autoConfig: { textValue: "CODE" },
+    };
+
+    setCurrentRule((prev) => {
+      if (!prev) return null;
+      return { ...prev, parts: [...prev.parts, newPart] };
+    });
+
+    toast.success(`규칙 ${newPart.order}가 추가되었습니다`);
+  }, [currentRule, maxRules]);
+
+  const handleUpdatePart = useCallback((partId: string, updates: Partial<NumberingRulePart>) => {
+    setCurrentRule((prev) => {
+      if (!prev) return null;
+      return {
+        ...prev,
+        parts: prev.parts.map((part) => (part.id === partId ? { ...part, ...updates } : part)),
+      };
+    });
+  }, []);
+
+  const handleDeletePart = useCallback((partId: string) => {
+    setCurrentRule((prev) => {
+      if (!prev) return null;
+      return {
+        ...prev,
+        parts: prev.parts
+          .filter((part) => part.id !== partId)
+          .map((part, index) => ({ ...part, order: index + 1 })),
+      };
+    });
+
+    toast.success("규칙이 삭제되었습니다");
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!currentRule) {
+      toast.error("저장할 규칙이 없습니다");
+      return;
+    }
+
+    if (currentRule.parts.length === 0) {
+      toast.error("최소 1개 이상의 규칙을 추가해주세요");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const existing = savedRules.find((r) => r.ruleId === currentRule.ruleId);
+      
+      let response;
+      if (existing) {
+        response = await updateNumberingRule(currentRule.ruleId, currentRule);
+      } else {
+        response = await createNumberingRule(currentRule);
+      }
+
+      if (response.success && response.data) {
+        setSavedRules((prev) => {
+          if (existing) {
+            return prev.map((r) => (r.ruleId === currentRule.ruleId ? response.data! : r));
+          } else {
+            return [...prev, response.data!];
+          }
+        });
+
+        setCurrentRule(response.data);
+        setSelectedRuleId(response.data.ruleId);
+
+        await onSave?.(response.data);
+        toast.success("채번 규칙이 저장되었습니다");
+      } else {
+        toast.error(response.error || "저장 실패");
+      }
+    } catch (error: any) {
+      toast.error(`저장 실패: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [currentRule, savedRules, onSave]);
+
+  const handleSelectRule = useCallback((rule: NumberingRuleConfig) => {
+    setSelectedRuleId(rule.ruleId);
+    setCurrentRule(rule);
+    toast.info(`"${rule.ruleName}" 규칙을 불러왔습니다`);
+  }, []);
+
+  const handleDeleteSavedRule = useCallback(async (ruleId: string) => {
+    setLoading(true);
+    try {
+      const response = await deleteNumberingRule(ruleId);
+      
+      if (response.success) {
+        setSavedRules((prev) => prev.filter((r) => r.ruleId !== ruleId));
+        
+        if (selectedRuleId === ruleId) {
+          setSelectedRuleId(null);
+          setCurrentRule(null);
+        }
+        
+        toast.success("규칙이 삭제되었습니다");
+      } else {
+        toast.error(response.error || "삭제 실패");
+      }
+    } catch (error: any) {
+      toast.error(`삭제 실패: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedRuleId]);
+
+  const handleNewRule = useCallback(() => {
+    const newRule: NumberingRuleConfig = {
+      ruleId: `rule-${Date.now()}`,
+      ruleName: "새 채번 규칙",
+      parts: [],
+      separator: "-",
+      resetPeriod: "none",
+      currentSequence: 1,
+      scopeType: "global",
+    };
+
+    setSelectedRuleId(newRule.ruleId);
+    setCurrentRule(newRule);
+    
+    toast.success("새 규칙이 생성되었습니다");
+  }, []);
+
+  return (
+    <div className={`flex h-full gap-4 ${className}`}>
+      {/* 좌측: 저장된 규칙 목록 */}
+      <div className="flex w-80 flex-shrink-0 flex-col gap-4">
+        <div className="flex items-center justify-between">
+          {editingLeftTitle ? (
+            <Input
+              value={leftTitle}
+              onChange={(e) => setLeftTitle(e.target.value)}
+              onBlur={() => setEditingLeftTitle(false)}
+              onKeyDown={(e) => e.key === "Enter" && setEditingLeftTitle(false)}
+              className="h-8 text-sm font-semibold"
+              autoFocus
+            />
+          ) : (
+            <h2 className="text-sm font-semibold sm:text-base">{leftTitle}</h2>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setEditingLeftTitle(true)}
+          >
+            <Edit2 className="h-3 w-3" />
+          </Button>
+        </div>
+
+        <Button onClick={handleNewRule} variant="outline" className="h-9 w-full text-sm">
+          <Plus className="mr-2 h-4 w-4" />
+          새 규칙 생성
+        </Button>
+
+        <div className="flex-1 space-y-2 overflow-y-auto">
+          {loading ? (
+            <div className="flex h-32 items-center justify-center">
+              <p className="text-xs text-muted-foreground">로딩 중...</p>
+            </div>
+          ) : savedRules.length === 0 ? (
+            <div className="flex h-32 items-center justify-center rounded-lg border border-dashed border-border bg-muted/50">
+              <p className="text-xs text-muted-foreground">저장된 규칙이 없습니다</p>
+            </div>
+          ) : (
+            savedRules.map((rule) => (
+              <Card
+                key={rule.ruleId}
+                className={`cursor-pointer border-border transition-colors hover:bg-accent ${
+                  selectedRuleId === rule.ruleId ? "border-primary bg-primary/5" : "bg-card"
+                }`}
+                onClick={() => handleSelectRule(rule)}
+              >
+                <CardHeader className="p-3">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <CardTitle className="text-sm font-medium">{rule.ruleName}</CardTitle>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        규칙 {rule.parts.length}개
+                      </p>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteSavedRule(rule.ruleId);
+                      }}
+                    >
+                      <Trash2 className="h-3 w-3 text-destructive" />
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent className="p-3 pt-0">
+                  <NumberingRulePreview config={rule} compact />
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* 구분선 */}
+      <div className="h-full w-px bg-border"></div>
+
+      {/* 우측: 편집 영역 */}
+      <div className="flex flex-1 flex-col gap-4">
+        {!currentRule ? (
+          <div className="flex h-full flex-col items-center justify-center">
+            <div className="text-center">
+              <p className="mb-2 text-lg font-medium text-muted-foreground">
+                규칙을 선택해주세요
+              </p>
+              <p className="text-sm text-muted-foreground">
+                좌측에서 규칙을 선택하거나 새로 생성하세요
+              </p>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center justify-between">
+              {editingRightTitle ? (
+                <Input
+                  value={rightTitle}
+                  onChange={(e) => setRightTitle(e.target.value)}
+                  onBlur={() => setEditingRightTitle(false)}
+                  onKeyDown={(e) => e.key === "Enter" && setEditingRightTitle(false)}
+                  className="h-8 text-sm font-semibold"
+                  autoFocus
+                />
+              ) : (
+                <h2 className="text-sm font-semibold sm:text-base">{rightTitle}</h2>
+              )}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => setEditingRightTitle(true)}
+              >
+                <Edit2 className="h-3 w-3" />
+              </Button>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">규칙명</Label>
+              <Input
+                value={currentRule.ruleName}
+                onChange={(e) =>
+                  setCurrentRule((prev) => ({ ...prev!, ruleName: e.target.value }))
+                }
+                className="h-9"
+                placeholder="예: 프로젝트 코드"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">적용 범위</Label>
+              <Select
+                value={currentRule.scopeType || "global"}
+                onValueChange={(value: "global" | "menu") =>
+                  setCurrentRule((prev) => ({ ...prev!, scopeType: value }))
+                }
+                disabled={isPreview}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="global">회사 전체</SelectItem>
+                  <SelectItem value="menu">메뉴별</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+                {currentRule.scopeType === "menu" 
+                  ? "이 규칙이 설정된 상위 메뉴의 모든 하위 메뉴에서 사용 가능합니다" 
+                  : "회사 내 모든 메뉴에서 사용 가능한 전역 규칙입니다"}
+              </p>
+            </div>
+
+            <Card className="border-border bg-card">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">미리보기</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <NumberingRulePreview config={currentRule} />
+              </CardContent>
+            </Card>
+
+            <div className="flex-1 overflow-y-auto">
+              <div className="mb-3 flex items-center justify-between">
+                <h3 className="text-sm font-semibold">코드 구성</h3>
+                <span className="text-xs text-muted-foreground">
+                  {currentRule.parts.length}/{maxRules}
+                </span>
+              </div>
+
+              {currentRule.parts.length === 0 ? (
+                <div className="flex h-32 items-center justify-center rounded-lg border border-dashed border-border bg-muted/50">
+                  <p className="text-xs text-muted-foreground sm:text-sm">
+                    규칙을 추가하여 코드를 구성하세요
+                  </p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+                  {currentRule.parts.map((part) => (
+                    <NumberingRuleCard
+                      key={part.id}
+                      part={part}
+                      onUpdate={(updates) => handleUpdatePart(part.id, updates)}
+                      onDelete={() => handleDeletePart(part.id)}
+                      isPreview={isPreview}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className="flex gap-2">
+              <Button
+                onClick={handleAddPart}
+                disabled={currentRule.parts.length >= maxRules || isPreview || loading}
+                variant="outline"
+                className="h-9 flex-1 text-sm"
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                규칙 추가
+              </Button>
+              <Button 
+                onClick={handleSave} 
+                disabled={isPreview || loading} 
+                className="h-9 flex-1 text-sm"
+              >
+                <Save className="mr-2 h-4 w-4" />
+                {loading ? "저장 중..." : "저장"}
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/components/numbering-rule/NumberingRulePreview.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { NumberingRuleConfig } from "@/types/numbering-rule";
+
+interface NumberingRulePreviewProps {
+  config: NumberingRuleConfig;
+  compact?: boolean;
+}
+
+export const NumberingRulePreview: React.FC<NumberingRulePreviewProps> = ({ 
+  config, 
+  compact = false 
+}) => {
+  const generatedCode = useMemo(() => {
+    if (!config.parts || config.parts.length === 0) {
+      return "규칙을 추가해주세요";
+    }
+
+    const parts = config.parts
+      .sort((a, b) => a.order - b.order)
+      .map((part) => {
+        if (part.generationMethod === "manual") {
+          return part.manualConfig?.value || "XXX";
+        }
+
+        const autoConfig = part.autoConfig || {};
+
+        switch (part.partType) {
+          // 1. 순번 (자동 증가)
+          case "sequence": {
+            const length = autoConfig.sequenceLength || 3;
+            const startFrom = autoConfig.startFrom || 1;
+            return String(startFrom).padStart(length, "0");
+          }
+
+          // 2. 숫자 (고정 자릿수)
+          case "number": {
+            const length = autoConfig.numberLength || 4;
+            const value = autoConfig.numberValue || 0;
+            return String(value).padStart(length, "0");
+          }
+
+          // 3. 날짜
+          case "date": {
+            const format = autoConfig.dateFormat || "YYYYMMDD";
+            const now = new Date();
+            const year = now.getFullYear();
+            const month = String(now.getMonth() + 1).padStart(2, "0");
+            const day = String(now.getDate()).padStart(2, "0");
+
+            switch (format) {
+              case "YYYY": return String(year);
+              case "YY": return String(year).slice(-2);
+              case "YYYYMM": return `${year}${month}`;
+              case "YYMM": return `${String(year).slice(-2)}${month}`;
+              case "YYYYMMDD": return `${year}${month}${day}`;
+              case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
+              default: return `${year}${month}${day}`;
+            }
+          }
+
+          // 4. 문자
+          case "text":
+            return autoConfig.textValue || "TEXT";
+
+          default:
+            return "XXX";
+        }
+      });
+
+    return parts.join(config.separator || "");
+  }, [config]);
+
+  if (compact) {
+    return (
+      <div className="rounded-md bg-muted px-2 py-1">
+        <code className="text-xs font-mono text-foreground">{generatedCode}</code>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <p className="text-xs text-muted-foreground sm:text-sm">코드 미리보기</p>
+      <div className="rounded-md bg-muted p-3 sm:p-4">
+        <code className="text-sm font-mono text-foreground sm:text-base">{generatedCode}</code>
+      </div>
+    </div>
+  );
+};

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -1678,24 +1678,19 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
-        return (
+        return applyStyles(
           <Button
             onClick={handleButtonClick}
             disabled={readonly}
             size="sm"
             variant={config?.variant || "default"}
             className="w-full"
-            style={{ height: "100%" }}
             style={{
-              // 컴포넌트 스타일과 설정 스타일 모두 적용
-              ...comp.style,
-              // 크기는 className으로 처리하므로 CSS 크기 속성 제거
-              width: "100%",
               height: "100%",
-              // 설정값이 있으면 우선 적용, 없으면 컴포넌트 스타일 사용
+              // 설정값이 있으면 우선 적용
-              backgroundColor: config?.backgroundColor || comp.style?.backgroundColor,
+              backgroundColor: config?.backgroundColor,
-              color: config?.textColor || comp.style?.color,
+              color: config?.textColor,
-              borderColor: config?.borderColor || comp.style?.borderColor,
+              borderColor: config?.borderColor,
             }}
           >
             {label || "버튼"}

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -483,9 +483,11 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
         disabled={config?.disabled}
         className="h-full w-full"
         style={{
-          backgroundColor: config?.backgroundColor,
+          // 컴포넌트 스타일 먼저 적용
-          color: config?.textColor,
           ...comp.style,
+          // 설정값이 있으면 우선 적용
+          backgroundColor: config?.backgroundColor || comp.style?.backgroundColor,
+          color: config?.textColor || comp.style?.color,
         }}
       >
         {label || "버튼"}

frontend/components/screen/RealtimePreview.tsx

@@ -399,13 +399,26 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     willUse100Percent: positionX === 0,
   });
 
+  // 너비 결정 로직: style.width (퍼센트) > 조건부 100% > size.width (픽셀)
+  const getWidth = () => {
+    // 1순위: style.width가 있으면 우선 사용 (퍼센트 값)
+    if (style?.width) {
+      return style.width;
+    }
+    // 2순위: left가 0이면 100%
+    if (positionX === 0) {
+      return "100%";
+    }
+    // 3순위: size.width 픽셀 값
+    return size?.width || 200;
+  };
+
   const componentStyle = {
     position: "absolute" as const,
     ...style, // 먼저 적용하고
     left: positionX,
     top: position?.y || 0,
-    // 🆕 left가 0이면 부모 너비를 100% 채우도록 수정 (우측 여백 제거)
+    width: getWidth(), // 우선순위에 따른 너비
-    width: positionX === 0 ? "100%" : (size?.width || 200),
     height: finalHeight,
     zIndex: position?.z || 1,
     // right 속성 강제 제거

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -200,19 +200,58 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     : {};
 
   // 컴포넌트 기본 스타일 - 레이아웃은 항상 맨 아래
-  // 너비 우선순위: style.width > size.width (픽셀값)
+  // 너비 우선순위: style.width > 조건부 100% > size.width (픽셀값)
   const getWidth = () => {
-    // 1순위: style.width가 있으면 우선 사용
+    // 1순위: style.width가 있으면 우선 사용 (퍼센트 값)
     if (componentStyle?.width) {
+      console.log("✅ [getWidth] style.width 사용:", {
+        componentId: id,
+        label: component.label,
+        styleWidth: componentStyle.width,
+        gridColumns: (component as any).gridColumns,
+        componentStyle: componentStyle,
+        baseStyle: {
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+          width: componentStyle.width,
+          height: getHeight(),
+        },
+      });
       return componentStyle.width;
     }
 
-    // 2순위: size.width (픽셀)
+    // 2순위: x=0인 컴포넌트는 전체 너비 사용 (버튼 제외)
-    if (component.componentConfig?.type === "table-list") {
+    const isButtonComponent = 
-      return `${Math.max(size?.width || 120, 120)}px`;
+      (component.type === "widget" && (component as WidgetComponent).widgetType === "button") ||
+      (component.type === "component" && (component as any).componentType?.includes("button"));
+    
+    if (position.x === 0 && !isButtonComponent) {
+      console.log("⚠️ [getWidth] 100% 사용 (x=0):", {
+        componentId: id,
+        label: component.label,
+      });
+      return "100%";
     }
 
-    return `${size?.width || 100}px`;
+    // 3순위: size.width (픽셀)
+    if (component.componentConfig?.type === "table-list") {
+      const width = `${Math.max(size?.width || 120, 120)}px`;
+      console.log("📏 [getWidth] 픽셀 사용 (table-list):", {
+        componentId: id,
+        label: component.label,
+        width,
+      });
+      return width;
+    }
+
+    const width = `${size?.width || 100}px`;
+    console.log("📏 [getWidth] 픽셀 사용 (기본):", {
+      componentId: id,
+      label: component.label,
+      width,
+      sizeWidth: size?.width,
+    });
+    return width;
   };
 
   const getHeight = () => {
@@ -238,17 +277,51 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    // 🆕 left가 0이면 부모 너비를 100% 채우도록 수정 (우측 여백 제거)
+    width: getWidth(), // getWidth()가 모든 우선순위를 처리
-    width: position.x === 0 ? "100%" : getWidth(),
+    height: getHeight(),
-    height: getHeight(), // 모든 컴포넌트 고정 높이로 변경
+    zIndex: component.type === "layout" ? 1 : position.z || 2,
-    zIndex: component.type === "layout" ? 1 : position.z || 2, // 레이아웃은 z-index 1, 다른 컴포넌트는 2 이상
     ...componentStyle,
-    // style.width가 있어도 position.x === 0이면 100%로 강제
-    ...(position.x === 0 && { width: "100%" }),
-    // right 속성 강제 제거
     right: undefined,
   };
 
+  // 🔍 DOM 렌더링 후 실제 크기 측정
+  const innerDivRef = React.useRef<HTMLDivElement>(null);
+  const outerDivRef = React.useRef<HTMLDivElement>(null);
+  
+  React.useEffect(() => {
+    if (outerDivRef.current && innerDivRef.current) {
+      const outerRect = outerDivRef.current.getBoundingClientRect();
+      const innerRect = innerDivRef.current.getBoundingClientRect();
+      const computedOuter = window.getComputedStyle(outerDivRef.current);
+      const computedInner = window.getComputedStyle(innerDivRef.current);
+      
+      console.log("📐 [DOM 실제 크기 상세]:", {
+        componentId: id,
+        label: component.label,
+        gridColumns: (component as any).gridColumns,
+        "1. baseStyle.width": baseStyle.width,
+        "2. 외부 div (파란 테두리)": {
+          width: `${outerRect.width}px`,
+          height: `${outerRect.height}px`,
+          computedWidth: computedOuter.width,
+          computedHeight: computedOuter.height,
+        },
+        "3. 내부 div (컨텐츠 래퍼)": {
+          width: `${innerRect.width}px`,
+          height: `${innerRect.height}px`,
+          computedWidth: computedInner.width,
+          computedHeight: computedInner.height,
+          className: innerDivRef.current.className,
+          inlineStyle: innerDivRef.current.getAttribute("style"),
+        },
+        "4. 너비 비교": {
+          "외부 / 내부": `${outerRect.width}px / ${innerRect.width}px`,
+          "비율": `${((innerRect.width / outerRect.width) * 100).toFixed(2)}%`,
+        },
+      });
+    }
+  }, [id, component.label, (component as any).gridColumns, baseStyle.width]);
+
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     onClick?.(e);
@@ -270,7 +343,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
   return (
     <div
+      ref={outerDivRef}
       id={`component-${id}`}
+      data-component-id={id}
       className="absolute cursor-pointer transition-all duration-200 ease-out"
       style={{ ...baseStyle, ...selectionStyle }}
       onClick={handleClick}
@@ -281,10 +356,15 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     >
       {/* 동적 컴포넌트 렌더링 */}
       <div
-        ref={
+        ref={(node) => {
-          component.type === "component" && (component as any).componentType === "flow-widget" ? contentRef : undefined
+          // 멀티 ref 처리
-        }
+          innerDivRef.current = node;
-        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} w-full max-w-full overflow-visible`}
+          if (component.type === "component" && (component as any).componentType === "flow-widget") {
+            (contentRef as any).current = node;
+          }
+        }}
+        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} overflow-visible`}
+        style={{ width: "100%", maxWidth: "100%" }}
       >
         <DynamicComponentRenderer
           component={component}

frontend/components/screen/ScreenDesigner.tsx

@@ -2012,76 +2012,79 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       const isTableList = component.id === "table-list";
 
       // 컴포넌트 타입별 기본 그리드 컬럼 수 설정
+      const currentGridColumns = layout.gridSettings.columns; // 현재 격자 컬럼 수
       let gridColumns = 1; // 기본값
 
       // 특수 컴포넌트
       if (isCardDisplay) {
-        gridColumns = 8;
+        gridColumns = Math.round(currentGridColumns * 0.667); // 약 66.67%
       } else if (isTableList) {
-        gridColumns = 12; // 테이블은 전체 너비
+        gridColumns = currentGridColumns; // 테이블은 전체 너비
       } else {
         // 웹타입별 적절한 그리드 컬럼 수 설정
         const webType = component.webType;
         const componentId = component.id;
 
-        // 웹타입별 기본 컬럼 수 매핑
+        // 웹타입별 기본 비율 매핑 (12컬럼 기준 비율)
-        const gridColumnsMap: Record<string, number> = {
+        const gridColumnsRatioMap: Record<string, number> = {
           // 입력 컴포넌트 (INPUT 카테고리)
-          "text-input": 4, // 텍스트 입력 (33%)
+          "text-input": 4 / 12, // 텍스트 입력 (33%)
-          "number-input": 2, // 숫자 입력 (16.67%)
+          "number-input": 2 / 12, // 숫자 입력 (16.67%)
-          "email-input": 4, // 이메일 입력 (33%)
+          "email-input": 4 / 12, // 이메일 입력 (33%)
-          "tel-input": 3, // 전화번호 입력 (25%)
+          "tel-input": 3 / 12, // 전화번호 입력 (25%)
-          "date-input": 3, // 날짜 입력 (25%)
+          "date-input": 3 / 12, // 날짜 입력 (25%)
-          "datetime-input": 4, // 날짜시간 입력 (33%)
+          "datetime-input": 4 / 12, // 날짜시간 입력 (33%)
-          "time-input": 2, // 시간 입력 (16.67%)
+          "time-input": 2 / 12, // 시간 입력 (16.67%)
-          "textarea-basic": 6, // 텍스트 영역 (50%)
+          "textarea-basic": 6 / 12, // 텍스트 영역 (50%)
-          "select-basic": 3, // 셀렉트 (25%)
+          "select-basic": 3 / 12, // 셀렉트 (25%)
-          "checkbox-basic": 2, // 체크박스 (16.67%)
+          "checkbox-basic": 2 / 12, // 체크박스 (16.67%)
-          "radio-basic": 3, // 라디오 (25%)
+          "radio-basic": 3 / 12, // 라디오 (25%)
-          "file-basic": 4, // 파일 (33%)
+          "file-basic": 4 / 12, // 파일 (33%)
-          "file-upload": 4, // 파일 업로드 (33%)
+          "file-upload": 4 / 12, // 파일 업로드 (33%)
-          "slider-basic": 3, // 슬라이더 (25%)
+          "slider-basic": 3 / 12, // 슬라이더 (25%)
-          "toggle-switch": 2, // 토글 스위치 (16.67%)
+          "toggle-switch": 2 / 12, // 토글 스위치 (16.67%)
-          "repeater-field-group": 6, // 반복 필드 그룹 (50%)
+          "repeater-field-group": 6 / 12, // 반복 필드 그룹 (50%)
 
           // 표시 컴포넌트 (DISPLAY 카테고리)
-          "label-basic": 2, // 라벨 (16.67%)
+          "label-basic": 2 / 12, // 라벨 (16.67%)
-          "text-display": 3, // 텍스트 표시 (25%)
+          "text-display": 3 / 12, // 텍스트 표시 (25%)
-          "card-display": 8, // 카드 (66.67%)
+          "card-display": 8 / 12, // 카드 (66.67%)
-          "badge-basic": 1, // 배지 (8.33%)
+          "badge-basic": 1 / 12, // 배지 (8.33%)
-          "alert-basic": 6, // 알림 (50%)
+          "alert-basic": 6 / 12, // 알림 (50%)
-          "divider-basic": 12, // 구분선 (100%)
+          "divider-basic": 1, // 구분선 (100%)
-          "divider-line": 12, // 구분선 (100%)
+          "divider-line": 1, // 구분선 (100%)
-          "accordion-basic": 12, // 아코디언 (100%)
+          "accordion-basic": 1, // 아코디언 (100%)
-          "table-list": 12, // 테이블 리스트 (100%)
+          "table-list": 1, // 테이블 리스트 (100%)
-          "image-display": 4, // 이미지 표시 (33%)
+          "image-display": 4 / 12, // 이미지 표시 (33%)
-          "split-panel-layout": 6, // 분할 패널 레이아웃 (50%)
+          "split-panel-layout": 6 / 12, // 분할 패널 레이아웃 (50%)
-          "flow-widget": 12, // 플로우 위젯 (100%)
+          "flow-widget": 1, // 플로우 위젯 (100%)
 
           // 액션 컴포넌트 (ACTION 카테고리)
-          "button-basic": 1, // 버튼 (8.33%)
+          "button-basic": 1 / 12, // 버튼 (8.33%)
-          "button-primary": 1, // 프라이머리 버튼 (8.33%)
+          "button-primary": 1 / 12, // 프라이머리 버튼 (8.33%)
-          "button-secondary": 1, // 세컨더리 버튼 (8.33%)
+          "button-secondary": 1 / 12, // 세컨더리 버튼 (8.33%)
-          "icon-button": 1, // 아이콘 버튼 (8.33%)
+          "icon-button": 1 / 12, // 아이콘 버튼 (8.33%)
 
           // 레이아웃 컴포넌트
-          "container-basic": 6, // 컨테이너 (50%)
+          "container-basic": 6 / 12, // 컨테이너 (50%)
-          "section-basic": 12, // 섹션 (100%)
+          "section-basic": 1, // 섹션 (100%)
-          "panel-basic": 6, // 패널 (50%)
+          "panel-basic": 6 / 12, // 패널 (50%)
 
           // 기타
-          "image-basic": 4, // 이미지 (33%)
+          "image-basic": 4 / 12, // 이미지 (33%)
-          "icon-basic": 1, // 아이콘 (8.33%)
+          "icon-basic": 1 / 12, // 아이콘 (8.33%)
-          "progress-bar": 4, // 프로그레스 바 (33%)
+          "progress-bar": 4 / 12, // 프로그레스 바 (33%)
-          "chart-basic": 6, // 차트 (50%)
+          "chart-basic": 6 / 12, // 차트 (50%)
         };
 
-        // defaultSize에 gridColumnSpan이 "full"이면 12컬럼 사용
+        // defaultSize에 gridColumnSpan이 "full"이면 전체 컬럼 사용
         if (component.defaultSize?.gridColumnSpan === "full") {
-          gridColumns = 12;
+          gridColumns = currentGridColumns;
         } else {
-          // componentId 또는 webType으로 매핑, 없으면 기본값 3
+          // componentId 또는 webType으로 비율 찾기, 없으면 기본값 25%
-          gridColumns = gridColumnsMap[componentId] || gridColumnsMap[webType] || 3;
+          const ratio = gridColumnsRatioMap[componentId] || gridColumnsRatioMap[webType] || 0.25;
+          // 현재 격자 컬럼 수에 비율을 곱하여 계산 (최소 1, 최대 currentGridColumns)
+          gridColumns = Math.max(1, Math.min(currentGridColumns, Math.round(ratio * currentGridColumns)));
         }
 
         console.log("🎯 컴포넌트 타입별 gridColumns 설정:", {
@@ -2141,6 +2144,18 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         };
       }
 
+      // gridColumns에 맞춰 width를 퍼센트로 계산
+      const widthPercent = (gridColumns / currentGridColumns) * 100;
+
+      console.log("🎨 [컴포넌트 생성] 너비 계산:", {
+        componentName: component.name,
+        componentId: component.id,
+        currentGridColumns,
+        gridColumns,
+        widthPercent: `${widthPercent}%`,
+        calculatedWidth: `${Math.round(widthPercent * 100) / 100}%`,
+      });
+
       const newComponent: ComponentData = {
         id: generateComponentId(),
         type: "component", // ✅ 새 컴포넌트 시스템 사용
@@ -2162,6 +2177,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           labelColor: "#212121",
           labelFontWeight: "500",
           labelMarginBottom: "4px",
+          width: `${widthPercent}%`, // gridColumns에 맞춘 퍼센트 너비
         },
       };
 
@@ -4238,7 +4254,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     <UnifiedPropertiesPanel
                       selectedComponent={selectedComponent || undefined}
                       tables={tables}
+                      gridSettings={layout.gridSettings}
                       onUpdateProperty={updateComponentProperty}
+                      onGridSettingsChange={(newSettings) => {
+                        setLayout((prev) => ({
+                          ...prev,
+                          gridSettings: newSettings,
+                        }));
+                      }}
                       onDeleteComponent={deleteComponent}
                       onCopyComponent={copyComponent}
                       currentTable={tables.length > 0 ? tables[0] : undefined}

frontend/components/screen/ScreenList.tsx

@@ -1250,14 +1250,33 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
 
                             {/* 실제 컴포넌트 */}
                             <div
-                              style={{
+                              style={(() => {
-                                position: "absolute",
+                                const style = {
-                                left: `${component.position.x}px`,
+                                  position: "absolute" as const,
-                                top: `${component.position.y}px`,
+                                  left: `${component.position.x}px`,
-                                width: component.style?.width || `${component.size.width}px`,
+                                  top: `${component.position.y}px`,
-                                height: component.style?.height || `${component.size.height}px`,
+                                  width: component.style?.width || `${component.size.width}px`,
-                                zIndex: component.position.z || 1,
+                                  height: component.style?.height || `${component.size.height}px`,
-                              }}
+                                  zIndex: component.position.z || 1,
+                                };
+                                
+                                // 버튼 타입일 때 디버깅 (widget 타입 또는 component 타입 모두 체크)
+                                if (
+                                  (component.type === "widget" && (component as any).widgetType === "button") ||
+                                  (component.type === "component" && (component as any).componentType?.includes("button"))
+                                ) {
+                                  console.log("🔘 ScreenList 버튼 외부 div 스타일:", {
+                                    id: component.id,
+                                    label: component.label,
+                                    position: component.position,
+                                    size: component.size,
+                                    componentStyle: component.style,
+                                    appliedStyle: style,
+                                  });
+                                }
+                                
+                                return style;
+                              })()}
                             >
                               {/* 위젯 컴포넌트가 아닌 경우 DynamicComponentRenderer 사용 */}
                               {component.type !== "widget" ? (

frontend/components/screen/panels/FileComponentConfigPanel.tsx

@@ -12,7 +12,7 @@ import { Plus, X, Upload, File, Image, FileText, Download, Trash2 } from "lucide
 import { Button } from "@/components/ui/button";
 import { FileInfo, FileUploadResponse } from "@/lib/registry/components/file-upload/types";
 import { uploadFiles, downloadFile, deleteFile } from "@/lib/api/file";
-import { formatFileSize } from "@/lib/utils";
+import { formatFileSize, cn } from "@/lib/utils";
 import { toast } from "sonner";
 
 interface FileComponentConfigPanelProps {

frontend/components/screen/panels/GridPanel.tsx

@@ -127,10 +127,27 @@ export const GridPanel: React.FC<GridPanelProps> = ({
 
           <div className="space-y-2">
             <Label htmlFor="columns" className="text-xs font-medium">
-              컬럼 수: <span className="text-primary">{gridSettings.columns}</span>
+              컬럼 수
             </Label>
+            <div className="flex items-center gap-2">
+              <Input
+                id="columns"
+                type="number"
+                min={1}
+                max={24}
+                value={gridSettings.columns}
+                onChange={(e) => {
+                  const value = parseInt(e.target.value, 10);
+                  if (!isNaN(value) && value >= 1 && value <= 24) {
+                    updateSetting("columns", value);
+                  }
+                }}
+                className="h-8 text-xs"
+              />
+              <span className="text-muted-foreground text-xs">/ 24</span>
+            </div>
             <Slider
-              id="columns"
+              id="columns-slider"
               min={1}
               max={24}
               step={1}
@@ -139,8 +156,8 @@ export const GridPanel: React.FC<GridPanelProps> = ({
               className="w-full"
             />
             <div className="text-muted-foreground flex justify-between text-xs">
-              <span>1</span>
+              <span>1열</span>
-              <span>24</span>
+              <span>24열</span>
             </div>
           </div>
 

frontend/components/screen/panels/PropertiesPanel.tsx

@@ -109,6 +109,12 @@ interface PropertiesPanelProps {
     draggedComponent: ComponentData | null;
     currentPosition: { x: number; y: number; z: number };
   };
+  gridSettings?: {
+    columns: number;
+    gap: number;
+    padding: number;
+    snapToGrid: boolean;
+  };
   onUpdateProperty: (path: string, value: unknown) => void;
   onDeleteComponent: () => void;
   onCopyComponent: () => void;
@@ -124,6 +130,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
   selectedComponent,
   tables = [],
   dragState,
+  gridSettings,
   onUpdateProperty,
   onDeleteComponent,
   onCopyComponent,
@@ -744,9 +751,47 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             {/* 카드 레이아웃은 자동 크기 계산으로 너비/높이 설정 숨김 */}
             {selectedComponent?.type !== "layout" || (selectedComponent as any)?.layoutType !== "card" ? (
               <>
-                {/* 🆕 컬럼 스팬 선택 (width를 퍼센트로 변환) - 기존 UI 유지 */}
+                {/* 🆕 그리드 컬럼 수 직접 입력 */}
                 <div className="col-span-2">
-                  <Label className="text-sm font-medium">컴포넌트 너비</Label>
+                  <Label htmlFor="gridColumns" className="text-sm font-medium">
+                    차지 컬럼 수
+                  </Label>
+                  <div className="mt-1 flex items-center gap-2">
+                    <Input
+                      id="gridColumns"
+                      type="number"
+                      min={1}
+                      max={gridSettings?.columns || 12}
+                      value={(selectedComponent as any)?.gridColumns || 1}
+                      onChange={(e) => {
+                        const value = parseInt(e.target.value, 10);
+                        const maxColumns = gridSettings?.columns || 12;
+                        if (!isNaN(value) && value >= 1 && value <= maxColumns) {
+                          // gridColumns 업데이트
+                          onUpdateProperty("gridColumns", value);
+                          
+                          // width를 퍼센트로 계산하여 업데이트
+                          const widthPercent = (value / maxColumns) * 100;
+                          onUpdateProperty("style.width", `${widthPercent}%`);
+                          
+                          // localWidthSpan도 업데이트
+                          setLocalWidthSpan(calculateWidthSpan(`${widthPercent}%`, value));
+                        }
+                      }}
+                      className="h-8 text-xs"
+                    />
+                    <span className="text-muted-foreground text-xs">
+                      / {gridSettings?.columns || 12}열
+                    </span>
+                  </div>
+                  <p className="text-muted-foreground mt-1 text-xs">
+                    이 컴포넌트가 차지할 그리드 컬럼 수 (1-{gridSettings?.columns || 12})
+                  </p>
+                </div>
+
+                {/* 기존 컬럼 스팬 선택 (width를 퍼센트로 변환) - 참고용 */}
+                <div className="col-span-2">
+                  <Label className="text-sm font-medium">미리 정의된 너비</Label>
                   <Select
                     value={localWidthSpan}
                     onValueChange={(value) => {

frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

@@ -24,7 +24,10 @@ import {
 import { ColumnSpanPreset, COLUMN_SPAN_PRESETS } from "@/lib/constants/columnSpans";
 
 // 컬럼 스팬 숫자 배열 (1~12)
-const COLUMN_NUMBERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+// 동적으로 컬럼 수 배열 생성 (gridSettings.columns 기반)
+const generateColumnNumbers = (maxColumns: number) => {
+  return Array.from({ length: maxColumns }, (_, i) => i + 1);
+};
 import { cn } from "@/lib/utils";
 import DataTableConfigPanel from "./DataTableConfigPanel";
 import { WebTypeConfigPanel } from "./WebTypeConfigPanel";
@@ -52,11 +55,23 @@ import { BadgeConfigPanel } from "../config-panels/BadgeConfigPanel";
 import { DynamicComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
 import StyleEditor from "../StyleEditor";
 import ResolutionPanel from "./ResolutionPanel";
+import { Slider } from "@/components/ui/slider";
+import { Grid3X3, Eye, EyeOff, Zap } from "lucide-react";
 
 interface UnifiedPropertiesPanelProps {
   selectedComponent?: ComponentData;
   tables: TableInfo[];
+  gridSettings?: {
+    columns: number;
+    gap: number;
+    padding: number;
+    snapToGrid: boolean;
+    showGrid: boolean;
+    gridColor?: string;
+    gridOpacity?: number;
+  };
   onUpdateProperty: (componentId: string, path: string, value: any) => void;
+  onGridSettingsChange?: (settings: any) => void;
   onDeleteComponent?: (componentId: string) => void;
   onCopyComponent?: (componentId: string) => void;
   currentTable?: TableInfo;
@@ -74,7 +89,9 @@ interface UnifiedPropertiesPanelProps {
 export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
   selectedComponent,
   tables,
+  gridSettings,
   onUpdateProperty,
+  onGridSettingsChange,
   onDeleteComponent,
   onCopyComponent,
   currentTable,
@@ -98,23 +115,148 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
     }
   }, [selectedComponent?.type, selectedComponent?.componentConfig?.webType, selectedComponent?.id]);
 
-  // 컴포넌트가 선택되지 않았을 때도 해상도 설정은 표시
+  // 격자 설정 업데이트 함수 (early return 이전에 정의)
+  const updateGridSetting = (key: string, value: any) => {
+    if (onGridSettingsChange && gridSettings) {
+      onGridSettingsChange({
+        ...gridSettings,
+        [key]: value,
+      });
+    }
+  };
+
+  // 격자 설정 렌더링 (early return 이전에 정의)
+  const renderGridSettings = () => {
+    if (!gridSettings || !onGridSettingsChange) return null;
+
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-1.5">
+          <Grid3X3 className="text-primary h-3 w-3" />
+          <h4 className="text-xs font-semibold">격자 설정</h4>
+        </div>
+        
+        <div className="space-y-3">
+          {/* 토글들 */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              {gridSettings.showGrid ? (
+                <Eye className="text-primary h-3 w-3" />
+              ) : (
+                <EyeOff className="text-muted-foreground h-3 w-3" />
+              )}
+              <Label htmlFor="showGrid" className="text-xs font-medium">
+                격자 표시
+              </Label>
+            </div>
+            <Checkbox
+              id="showGrid"
+              checked={gridSettings.showGrid}
+              onCheckedChange={(checked) => updateGridSetting("showGrid", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Zap className="text-primary h-3 w-3" />
+              <Label htmlFor="snapToGrid" className="text-xs font-medium">
+                격자 스냅
+              </Label>
+            </div>
+            <Checkbox
+              id="snapToGrid"
+              checked={gridSettings.snapToGrid}
+              onCheckedChange={(checked) => updateGridSetting("snapToGrid", checked)}
+            />
+          </div>
+
+          {/* 컬럼 수 */}
+          <div className="space-y-1">
+            <Label htmlFor="columns" className="text-xs font-medium">
+              컬럼 수
+            </Label>
+            <div className="flex items-center gap-2">
+              <Input
+                id="columns"
+                type="number"
+                min={1}
+                value={gridSettings.columns}
+                onChange={(e) => {
+                  const value = parseInt(e.target.value, 10);
+                  if (!isNaN(value) && value >= 1) {
+                    updateGridSetting("columns", value);
+                  }
+                }}
+                className="h-6 px-2 py-0 text-xs"
+                style={{ fontSize: "12px" }}
+                placeholder="1 이상의 숫자"
+              />
+            </div>
+            <p className="text-muted-foreground text-[10px]">
+              1 이상의 숫자를 입력하세요
+            </p>
+          </div>
+
+          {/* 간격 */}
+          <div className="space-y-1">
+            <Label htmlFor="gap" className="text-xs font-medium">
+              간격: <span className="text-primary">{gridSettings.gap}px</span>
+            </Label>
+            <Slider
+              id="gap"
+              min={0}
+              max={40}
+              step={2}
+              value={[gridSettings.gap]}
+              onValueChange={([value]) => updateGridSetting("gap", value)}
+              className="w-full"
+            />
+          </div>
+
+          {/* 여백 */}
+          <div className="space-y-1">
+            <Label htmlFor="padding" className="text-xs font-medium">
+              여백: <span className="text-primary">{gridSettings.padding}px</span>
+            </Label>
+            <Slider
+              id="padding"
+              min={0}
+              max={60}
+              step={4}
+              value={[gridSettings.padding]}
+              onValueChange={([value]) => updateGridSetting("padding", value)}
+              className="w-full"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // 컴포넌트가 선택되지 않았을 때도 해상도 설정과 격자 설정은 표시
   if (!selectedComponent) {
     return (
       <div className="flex h-full flex-col bg-white">
-        {/* 해상도 설정만 표시 */}
+        {/* 해상도 설정과 격자 설정 표시 */}
         <div className="flex-1 overflow-y-auto p-2">
           <div className="space-y-4 text-xs">
+            {/* 해상도 설정 */}
             {currentResolution && onResolutionChange && (
-              <div className="space-y-2">
+              <>
-                <div className="flex items-center gap-1.5">
+                <div className="space-y-2">
-                  <Monitor className="text-primary h-3 w-3" />
+                  <div className="flex items-center gap-1.5">
-                  <h4 className="text-xs font-semibold">해상도 설정</h4>
+                    <Monitor className="text-primary h-3 w-3" />
+                    <h4 className="text-xs font-semibold">해상도 설정</h4>
+                  </div>
+                  <ResolutionPanel currentResolution={currentResolution} onResolutionChange={onResolutionChange} />
                 </div>
-                <ResolutionPanel currentResolution={currentResolution} onResolutionChange={onResolutionChange} />
+                <Separator className="my-2" />
-              </div>
+              </>
             )}
 
+            {/* 격자 설정 */}
+            {renderGridSettings()}
+
             {/* 안내 메시지 */}
             <Separator className="my-4" />
             <div className="flex flex-col items-center justify-center py-8 text-center">
@@ -283,22 +425,31 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
         <div className="grid grid-cols-2 gap-2">
           {(selectedComponent as any).gridColumns !== undefined && (
             <div className="space-y-1">
-              <Label className="text-xs">Grid</Label>
+              <Label className="text-xs">차지 컬럼 수</Label>
-              <Select
+              <div className="flex items-center gap-1">
-                value={((selectedComponent as any).gridColumns || 12).toString()}
+                <Input
-                onValueChange={(value) => handleUpdate("gridColumns", parseInt(value))}
+                  type="number"
-              >
+                  min={1}
-                <SelectTrigger className="h-6 w-full px-2 py-0" style={{ fontSize: "12px" }}>
+                  max={gridSettings?.columns || 12}
-                  <SelectValue />
+                  value={(selectedComponent as any).gridColumns || 1}
-                </SelectTrigger>
+                  onChange={(e) => {
-                <SelectContent>
+                    const value = parseInt(e.target.value, 10);
-                  {COLUMN_NUMBERS.map((span) => (
+                    const maxColumns = gridSettings?.columns || 12;
-                    <SelectItem key={span} value={span.toString()} style={{ fontSize: "12px" }}>
+                    if (!isNaN(value) && value >= 1 && value <= maxColumns) {
-                      {span}열
+                      handleUpdate("gridColumns", value);
-                    </SelectItem>
+                      
-                  ))}
+                      // width를 퍼센트로 계산하여 업데이트
-                </SelectContent>
+                      const widthPercent = (value / maxColumns) * 100;
-              </Select>
+                      handleUpdate("style.width", `${widthPercent}%`);
+                    }
+                  }}
+                  className="h-6 w-full px-2 py-0 text-xs"
+                  style={{ fontSize: "12px" }}
+                />
+                <span className="text-muted-foreground text-[10px] whitespace-nowrap">
+                  /{gridSettings?.columns || 12}
+                </span>
+              </div>
             </div>
           )}
           <div className="space-y-1">
@@ -896,6 +1047,10 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
             </>
           )}
 
+          {/* 격자 설정 - 해상도 설정 아래 표시 */}
+          {renderGridSettings()}
+          {gridSettings && onGridSettingsChange && <Separator className="my-2" />}
+
           {/* 기본 설정 */}
           {renderBasicTab()}
 

frontend/components/screen/templates/NumberingRuleTemplate.ts

@@ -0,0 +1,77 @@
+/**
+ * 채번 규칙 템플릿
+ * 화면관리 시스템에 등록하여 드래그앤드롭으로 사용
+ */
+
+import { Hash } from "lucide-react";
+
+export const getDefaultNumberingRuleConfig = () => ({
+  template_code: "numbering-rule-designer",
+  template_name: "코드 채번 규칙",
+  template_name_eng: "Numbering Rule Designer",
+  description: "코드 자동 채번 규칙을 설정하는 컴포넌트",
+  category: "admin" as const,
+  icon_name: "hash",
+  default_size: {
+    width: 1200,
+    height: 800,
+  },
+  layout_config: {
+    components: [
+      {
+        type: "numbering-rule" as const,
+        label: "채번 규칙 설정",
+        position: { x: 0, y: 0 },
+        size: { width: 1200, height: 800 },
+        ruleConfig: {
+          ruleId: "new-rule",
+          ruleName: "새 채번 규칙",
+          parts: [],
+          separator: "-",
+          resetPeriod: "none",
+          currentSequence: 1,
+        },
+        maxRules: 6,
+        style: {
+          padding: "16px",
+          backgroundColor: "#ffffff",
+        },
+      },
+    ],
+  },
+});
+
+/**
+ * 템플릿 패널에서 사용할 컴포넌트 정보
+ */
+export const numberingRuleTemplate = {
+  id: "numbering-rule",
+  name: "채번 규칙",
+  description: "코드 자동 채번 규칙 설정",
+  category: "admin" as const,
+  icon: Hash,
+  defaultSize: { width: 1200, height: 800 },
+  components: [
+    {
+      type: "numbering-rule" as const,
+      widgetType: undefined,
+      label: "채번 규칙 설정",
+      position: { x: 0, y: 0 },
+      size: { width: 1200, height: 800 },
+      style: {
+        padding: "16px",
+        backgroundColor: "#ffffff",
+      },
+      ruleConfig: {
+        ruleId: "new-rule",
+        ruleName: "새 채번 규칙",
+        parts: [],
+        separator: "-",
+        resetPeriod: "none",
+        currentSequence: 1,
+      },
+      maxRules: 6,
+    },
+  ],
+};
+

frontend/components/screen/widgets/TabsWidget.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { TabsComponent, TabItem, ScreenDefinition } from "@/types";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Loader2, FileQuestion } from "lucide-react";
+import { screenApi } from "@/lib/api/screen";
+import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
+
+interface TabsWidgetProps {
+  component: TabsComponent;
+  isPreview?: boolean;
+}
+
+/**
+ * 탭 위젯 컴포넌트
+ * 각 탭에 다른 화면을 표시할 수 있습니다
+ */
+export const TabsWidget: React.FC<TabsWidgetProps> = ({ component, isPreview = false }) => {
+  // componentConfig에서 설정 읽기 (새 컴포넌트 시스템)
+  const config = (component as any).componentConfig || component;
+  const { tabs = [], defaultTab, orientation = "horizontal", variant = "default" } = config;
+  
+  // console.log("🔍 TabsWidget 렌더링:", {
+  //   component,
+  //   componentConfig: (component as any).componentConfig,
+  //   tabs,
+  //   tabsLength: tabs.length
+  // });
+
+  const [activeTab, setActiveTab] = useState<string>(defaultTab || tabs[0]?.id || "");
+  const [loadedScreens, setLoadedScreens] = useState<Record<string, any>>({});
+  const [loadingScreens, setLoadingScreens] = useState<Record<string, boolean>>({});
+  const [screenErrors, setScreenErrors] = useState<Record<string, string>>({});
+
+  // 탭 변경 시 화면 로드
+  useEffect(() => {
+    if (!activeTab) return;
+
+    const currentTab = tabs.find((tab) => tab.id === activeTab);
+    if (!currentTab || !currentTab.screenId) return;
+
+    // 이미 로드된 화면이면 스킵
+    if (loadedScreens[activeTab]) return;
+
+    // 이미 로딩 중이면 스킵
+    if (loadingScreens[activeTab]) return;
+
+    // 화면 로드 시작
+    loadScreen(activeTab, currentTab.screenId);
+  }, [activeTab, tabs]);
+
+  const loadScreen = async (tabId: string, screenId: number) => {
+    setLoadingScreens((prev) => ({ ...prev, [tabId]: true }));
+    setScreenErrors((prev) => ({ ...prev, [tabId]: "" }));
+
+    try {
+      const layoutData = await screenApi.getLayout(screenId);
+
+      if (layoutData) {
+        setLoadedScreens((prev) => ({
+          ...prev,
+          [tabId]: {
+            screenId,
+            layout: layoutData,
+          },
+        }));
+      } else {
+        setScreenErrors((prev) => ({
+          ...prev,
+          [tabId]: "화면을 불러올 수 없습니다",
+        }));
+      }
+    } catch (error: any) {
+      setScreenErrors((prev) => ({
+        ...prev,
+        [tabId]: error.message || "화면 로드 중 오류가 발생했습니다",
+      }));
+    } finally {
+      setLoadingScreens((prev) => ({ ...prev, [tabId]: false }));
+    }
+  };
+
+  // 탭 콘텐츠 렌더링
+  const renderTabContent = (tab: TabItem) => {
+    const isLoading = loadingScreens[tab.id];
+    const error = screenErrors[tab.id];
+    const screenData = loadedScreens[tab.id];
+
+    // 로딩 중
+    if (isLoading) {
+      return (
+        <div className="flex h-full flex-col items-center justify-center space-y-4">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p className="text-muted-foreground text-sm">화면을 불러오는 중...</p>
+        </div>
+      );
+    }
+
+    // 에러 발생
+    if (error) {
+      return (
+        <div className="flex h-full flex-col items-center justify-center space-y-4">
+          <FileQuestion className="h-12 w-12 text-destructive" />
+          <div className="text-center">
+            <p className="mb-2 font-medium text-destructive">화면 로드 실패</p>
+            <p className="text-muted-foreground text-sm">{error}</p>
+          </div>
+        </div>
+      );
+    }
+
+    // 화면 ID가 없는 경우
+    if (!tab.screenId) {
+      return (
+        <div className="flex h-full flex-col items-center justify-center space-y-4">
+          <FileQuestion className="text-muted-foreground h-12 w-12" />
+          <div className="text-center">
+            <p className="text-muted-foreground mb-2 text-sm">화면이 할당되지 않았습니다</p>
+            <p className="text-xs text-gray-400">상세설정에서 화면을 선택하세요</p>
+          </div>
+        </div>
+      );
+    }
+
+    // 화면 렌더링 - 원본 화면의 모든 컴포넌트를 그대로 렌더링
+    if (screenData && screenData.layout && screenData.layout.components) {
+      const components = screenData.layout.components;
+      const screenResolution = screenData.layout.screenResolution || { width: 1920, height: 1080 };
+      
+      return (
+        <div className="bg-white" style={{ width: `${screenResolution.width}px`, height: '100%' }}>
+          <div className="relative h-full">
+            {components.map((comp) => (
+              <InteractiveScreenViewerDynamic
+                key={comp.id}
+                component={comp}
+                allComponents={components}
+                screenInfo={{ id: tab.screenId }}
+              />
+            ))}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex h-full flex-col items-center justify-center space-y-4">
+        <FileQuestion className="text-muted-foreground h-12 w-12" />
+        <div className="text-center">
+          <p className="text-muted-foreground text-sm">화면 데이터를 불러올 수 없습니다</p>
+        </div>
+      </div>
+    );
+  };
+
+  // 빈 탭 목록
+  if (tabs.length === 0) {
+    return (
+      <Card className="flex h-full w-full items-center justify-center">
+        <div className="text-center">
+          <p className="text-muted-foreground text-sm">탭이 없습니다</p>
+          <p className="text-xs text-gray-400">상세설정에서 탭을 추가하세요</p>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="h-full w-full overflow-auto">
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        orientation={orientation}
+        className="flex h-full w-full flex-col"
+      >
+        <TabsList className={orientation === "horizontal" ? "justify-start shrink-0" : "flex-col shrink-0"}>
+          {tabs.map((tab) => (
+            <TabsTrigger
+              key={tab.id}
+              value={tab.id}
+              disabled={tab.disabled}
+              className={orientation === "horizontal" ? "" : "w-full justify-start"}
+            >
+              <span>{tab.label}</span>
+              {tab.screenName && (
+                <Badge variant="secondary" className="ml-2 text-[10px]">
+                  {tab.screenName}
+                </Badge>
+              )}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map((tab) => (
+          <TabsContent 
+            key={tab.id} 
+            value={tab.id} 
+            className="flex-1 mt-0 data-[state=inactive]:hidden"
+          >
+            {renderTabContent(tab)}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
+

frontend/components/screen/widgets/types/ButtonWidget.tsx

@@ -31,7 +31,11 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       onClick={handleClick}
       disabled={disabled || readonly}
       className={`rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${className || ""} `}
-      style={style}
+      style={{
+        ...style,
+        width: "100%",
+        height: "100%",
+      }}
       title={config?.tooltip || placeholder}
     >
       {config?.label || config?.text || value || placeholder || "버튼"}

frontend/lib/api/numberingRule.ts

@@ -0,0 +1,81 @@
+/**
+ * 채번 규칙 관리 API 클라이언트
+ */
+
+import { apiClient } from "./client";
+import { NumberingRuleConfig } from "@/types/numbering-rule";
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+}
+
+export async function getNumberingRules(): Promise<ApiResponse<NumberingRuleConfig[]>> {
+  try {
+    const response = await apiClient.get("/numbering-rules");
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message || "규칙 목록 조회 실패" };
+  }
+}
+
+export async function getNumberingRuleById(ruleId: string): Promise<ApiResponse<NumberingRuleConfig>> {
+  try {
+    const response = await apiClient.get(`/numbering-rules/${ruleId}`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message || "규칙 조회 실패" };
+  }
+}
+
+export async function createNumberingRule(
+  config: NumberingRuleConfig
+): Promise<ApiResponse<NumberingRuleConfig>> {
+  try {
+    const response = await apiClient.post("/numbering-rules", config);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message || "규칙 생성 실패" };
+  }
+}
+
+export async function updateNumberingRule(
+  ruleId: string,
+  config: Partial<NumberingRuleConfig>
+): Promise<ApiResponse<NumberingRuleConfig>> {
+  try {
+    const response = await apiClient.put(`/numbering-rules/${ruleId}`, config);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message || "규칙 수정 실패" };
+  }
+}
+
+export async function deleteNumberingRule(ruleId: string): Promise<ApiResponse<void>> {
+  try {
+    const response = await apiClient.delete(`/numbering-rules/${ruleId}`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message || "규칙 삭제 실패" };
+  }
+}
+
+export async function generateCode(ruleId: string): Promise<ApiResponse<{ code: string }>> {
+  try {
+    const response = await apiClient.post(`/numbering-rules/${ruleId}/generate`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message || "코드 생성 실패" };
+  }
+}
+
+export async function resetSequence(ruleId: string): Promise<ApiResponse<void>> {
+  try {
+    const response = await apiClient.post(`/numbering-rules/${ruleId}/reset`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message || "시퀀스 초기화 실패" };
+  }
+}

frontend/lib/registry/DynamicWebTypeRenderer.tsx

@@ -21,12 +21,16 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
   const { webTypes } = useWebTypes({ active: "Y" });
 
   // 디버깅: 전달받은 웹타입과 props 정보 로깅
-  console.log("🔍 DynamicWebTypeRenderer 호출:", {
+  if (webType === "button") {
-    webType,
+    console.log("🔘 DynamicWebTypeRenderer 버튼 호출:", {
-    propsKeys: Object.keys(props),
+      webType,
-    component: props.component,
+      component: props.component,
-    isFileComponent: props.component?.type === "file" || webType === "file",
+      position: props.component?.position,
-  });
+      size: props.component?.size,
+      style: props.component?.style,
+      config,
+    });
+  }
 
   const webTypeDefinition = useMemo(() => {
     return WebTypeRegistry.getWebType(webType);

frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx

@@ -223,6 +223,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일 (border 속성 분리하여 충돌 방지)

frontend/lib/registry/components/card-display/CardDisplayComponent.tsx

@@ -186,6 +186,9 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     backgroundColor: "transparent",
   };
   
+  // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+  // 카드 컴포넌트는 ...style 스프레드가 없으므로 여기서 명시적으로 설정
+
   if (isDesignMode) {
     componentStyle.border = "1px dashed hsl(var(--border))";
     componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";

frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx

@@ -48,6 +48,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/date-input/DateInputComponent.tsx

@@ -204,6 +204,8 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/divider-line/DividerLineComponent.tsx

@@ -36,6 +36,8 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx

@@ -36,6 +36,8 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/index.ts

@@ -39,6 +39,7 @@ import "./split-panel-layout/SplitPanelLayoutRenderer";
 import "./map/MapRenderer";
 import "./repeater-field-group/RepeaterFieldGroupRenderer";
 import "./flow-widget/FlowWidgetRenderer";
+import "./numbering-rule/NumberingRuleRenderer";
 
 /**
  * 컴포넌트 초기화 함수

frontend/lib/registry/components/number-input/NumberInputComponent.tsx

@@ -43,6 +43,8 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/numbering-rule/NumberingRuleComponent.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+import { NumberingRuleDesigner } from "@/components/numbering-rule/NumberingRuleDesigner";
+import { NumberingRuleComponentConfig } from "./types";
+
+interface NumberingRuleWrapperProps {
+  config: NumberingRuleComponentConfig;
+  onChange?: (config: NumberingRuleComponentConfig) => void;
+  isPreview?: boolean;
+}
+
+export const NumberingRuleWrapper: React.FC<NumberingRuleWrapperProps> = ({
+  config,
+  onChange,
+  isPreview = false,
+}) => {
+  return (
+    <div className="h-full w-full">
+      <NumberingRuleDesigner
+        maxRules={config.maxRules || 6}
+        isPreview={isPreview}
+        className="h-full"
+      />
+    </div>
+  );
+};
+
+export const NumberingRuleComponent = NumberingRuleWrapper;

frontend/lib/registry/components/numbering-rule/NumberingRuleConfigPanel.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React from "react";
+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 { NumberingRuleComponentConfig } from "./types";
+
+interface NumberingRuleConfigPanelProps {
+  config: NumberingRuleComponentConfig;
+  onChange: (config: NumberingRuleComponentConfig) => void;
+}
+
+export const NumberingRuleConfigPanel: React.FC<NumberingRuleConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  return (
+    <div className="space-y-4 p-4">
+      <div className="space-y-2">
+        <Label className="text-sm font-medium">최대 규칙 수</Label>
+        <Input
+          type="number"
+          min={1}
+          max={10}
+          value={config.maxRules || 6}
+          onChange={(e) =>
+            onChange({ ...config, maxRules: parseInt(e.target.value) || 6 })
+          }
+          className="h-9"
+        />
+        <p className="text-xs text-muted-foreground">
+          한 규칙에 추가할 수 있는 최대 파트 개수 (1-10)
+        </p>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="space-y-0.5">
+          <Label className="text-sm font-medium">읽기 전용 모드</Label>
+          <p className="text-xs text-muted-foreground">
+            편집 기능을 비활성화합니다
+          </p>
+        </div>
+        <Switch
+          checked={config.readonly || false}
+          onCheckedChange={(checked) =>
+            onChange({ ...config, readonly: checked })
+          }
+        />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="space-y-0.5">
+          <Label className="text-sm font-medium">미리보기 표시</Label>
+          <p className="text-xs text-muted-foreground">
+            코드 미리보기를 항상 표시합니다
+          </p>
+        </div>
+        <Switch
+          checked={config.showPreview !== false}
+          onCheckedChange={(checked) =>
+            onChange({ ...config, showPreview: checked })
+          }
+        />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="space-y-0.5">
+          <Label className="text-sm font-medium">규칙 목록 표시</Label>
+          <p className="text-xs text-muted-foreground">
+            저장된 규칙 목록을 표시합니다
+          </p>
+        </div>
+        <Switch
+          checked={config.showRuleList !== false}
+          onCheckedChange={(checked) =>
+            onChange({ ...config, showRuleList: checked })
+          }
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-sm font-medium">카드 레이아웃</Label>
+        <Select
+          value={config.cardLayout || "vertical"}
+          onValueChange={(value: "vertical" | "horizontal") =>
+            onChange({ ...config, cardLayout: value })
+          }
+        >
+          <SelectTrigger className="h-9">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="vertical">세로</SelectItem>
+            <SelectItem value="horizontal">가로</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          규칙 파트 카드의 배치 방향
+        </p>
+      </div>
+    </div>
+  );
+};

frontend/lib/registry/components/numbering-rule/NumberingRuleRenderer.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { NumberingRuleDefinition } from "./index";
+import { NumberingRuleComponent } from "./NumberingRuleComponent";
+
+/**
+ * 채번 규칙 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class NumberingRuleRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = NumberingRuleDefinition;
+
+  render(): React.ReactElement {
+    return <NumberingRuleComponent {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 채번 규칙 컴포넌트 특화 메서드
+   */
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+NumberingRuleRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  NumberingRuleRenderer.enableHotReload();
+}

frontend/lib/registry/components/numbering-rule/README.md

@@ -0,0 +1,102 @@
+# 코드 채번 규칙 컴포넌트
+
+## 개요
+
+시스템에서 자동으로 코드를 생성하는 규칙을 설정하고 관리하는 관리자 전용 컴포넌트입니다.
+
+## 주요 기능
+
+- **좌우 분할 레이아웃**: 좌측에서 규칙 목록, 우측에서 편집
+- **동적 파트 시스템**: 최대 6개의 파트를 자유롭게 조합
+- **실시간 미리보기**: 설정 즉시 생성될 코드 확인
+- **다양한 파트 유형**: 접두사, 순번, 날짜, 연도, 월, 커스텀
+
+## 생성 코드 예시
+
+- 제품 코드: `PROD-20251104-0001`
+- 프로젝트 코드: `PRJ-2025-001`
+- 거래처 코드: `CUST-A-0001`
+
+## 파트 유형
+
+### 1. 접두사 (prefix)
+고정된 문자열을 코드 앞에 추가합니다.
+- 예: `PROD`, `PRJ`, `CUST`
+
+### 2. 순번 (sequence)
+자동으로 증가하는 번호를 생성합니다.
+- 자릿수 설정 가능 (1-10)
+- 시작 번호 설정 가능
+- 예: `0001`, `00001`
+
+### 3. 날짜 (date)
+현재 날짜를 다양한 형식으로 추가합니다.
+- YYYY: 2025
+- YYYYMMDD: 20251104
+- YYMMDD: 251104
+
+### 4. 연도 (year)
+현재 연도를 추가합니다.
+- YYYY: 2025
+- YY: 25
+
+### 5. 월 (month)
+현재 월을 2자리로 추가합니다.
+- 예: 01, 02, ..., 12
+
+### 6. 사용자 정의 (custom)
+원하는 값을 직접 입력합니다.
+
+## 생성 방식
+
+### 자동 생성 (auto)
+시스템이 자동으로 값을 생성합니다.
+
+### 직접 입력 (manual)
+사용자가 값을 직접 입력합니다.
+
+## 설정 옵션
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `maxRules` | number | 6 | 최대 파트 개수 |
+| `readonly` | boolean | false | 읽기 전용 모드 |
+| `showPreview` | boolean | true | 미리보기 표시 |
+| `showRuleList` | boolean | true | 규칙 목록 표시 |
+| `cardLayout` | "vertical" \| "horizontal" | "vertical" | 카드 배치 방향 |
+
+## 사용 예시
+
+```typescript
+<NumberingRuleDesigner
+  maxRules={6}
+  isPreview={false}
+  className="h-full"
+/>
+```
+
+## 데이터베이스 구조
+
+### numbering_rules (마스터 테이블)
+- 규칙 ID, 규칙명, 구분자
+- 초기화 주기, 현재 시퀀스
+- 적용 대상 테이블/컬럼
+
+### numbering_rule_parts (파트 테이블)
+- 파트 순서, 파트 유형
+- 생성 방식, 설정 (JSONB)
+
+## API 엔드포인트
+
+- `GET /api/numbering-rules` - 규칙 목록 조회
+- `POST /api/numbering-rules` - 규칙 생성
+- `PUT /api/numbering-rules/:ruleId` - 규칙 수정
+- `DELETE /api/numbering-rules/:ruleId` - 규칙 삭제
+- `POST /api/numbering-rules/:ruleId/generate` - 코드 생성
+
+## 버전 정보
+
+- **버전**: 1.0.0
+- **작성일**: 2025-11-04
+- **작성자**: 개발팀
+

frontend/lib/registry/components/numbering-rule/config.ts

@@ -0,0 +1,15 @@
+/**
+ * 채번 규칙 컴포넌트 기본 설정
+ */
+
+import { NumberingRuleComponentConfig } from "./types";
+
+export const defaultConfig: NumberingRuleComponentConfig = {
+  maxRules: 6,
+  readonly: false,
+  showPreview: true,
+  showRuleList: true,
+  enableReorder: false,
+  cardLayout: "vertical",
+};
+

frontend/lib/registry/components/numbering-rule/index.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { NumberingRuleWrapper } from "./NumberingRuleComponent";
+import { NumberingRuleConfigPanel } from "./NumberingRuleConfigPanel";
+import { defaultConfig } from "./config";
+
+/**
+ * 채번 규칙 컴포넌트 정의
+ * 코드 자동 채번 규칙을 설정하고 관리하는 관리자 전용 컴포넌트
+ */
+export const NumberingRuleDefinition = createComponentDefinition({
+  id: "numbering-rule",
+  name: "코드 채번 규칙",
+  nameEng: "Numbering Rule Component",
+  description: "코드 자동 채번 규칙을 설정하고 관리하는 컴포넌트",
+  category: ComponentCategory.DISPLAY,
+  webType: "component",
+  component: NumberingRuleWrapper,
+  defaultConfig: defaultConfig,
+  defaultSize: { 
+    width: 1200, 
+    height: 800,
+    gridColumnSpan: "12",
+  },
+  configPanel: NumberingRuleConfigPanel,
+  icon: "Hash",
+  tags: ["코드", "채번", "규칙", "표시", "자동생성"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "코드 자동 채번 규칙을 설정합니다. 접두사, 날짜, 순번 등을 조합하여 고유한 코드를 생성할 수 있습니다.",
+});
+
+// 타입 내보내기
+export type { NumberingRuleComponentConfig } from "./types";
+
+// 컴포넌트 내보내기
+export { NumberingRuleComponent } from "./NumberingRuleComponent";
+export { NumberingRuleRenderer } from "./NumberingRuleRenderer";
+

frontend/lib/registry/components/numbering-rule/types.ts

@@ -0,0 +1,15 @@
+/**
+ * 채번 규칙 컴포넌트 타입 정의
+ */
+
+import { NumberingRuleConfig } from "@/types/numbering-rule";
+
+export interface NumberingRuleComponentConfig {
+  ruleConfig?: NumberingRuleConfig;
+  maxRules?: number;
+  readonly?: boolean;
+  showPreview?: boolean;
+  showRuleList?: boolean;
+  enableReorder?: boolean;
+  cardLayout?: "vertical" | "horizontal";
+}

frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx

@@ -47,6 +47,8 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx

@@ -39,6 +39,8 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -234,6 +234,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     backgroundColor: "hsl(var(--background))",
     overflow: "hidden",
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // ========================================
@@ -1167,7 +1169,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           </div>
         )}
 
-        <div style={{ flex: 1, overflow: "hidden" }}>
+        <div className="mt-10" style={{ flex: 1, overflow: "hidden" }}>
           <SingleTableWithSticky
             data={data}
             columns={visibleColumns}
@@ -1261,7 +1263,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         )}
 
         {/* 테이블 컨테이너 */}
-        <div className="flex-1 flex flex-col overflow-hidden w-full max-w-full">
+        <div className="flex-1 flex flex-col overflow-hidden w-full max-w-full mt-10">
           {/* 스크롤 영역 */}
           <div
             className="w-full max-w-full h-[400px] overflow-y-scroll overflow-x-auto bg-background sm:h-[500px]"

frontend/lib/registry/components/text-input/TextInputComponent.tsx

@@ -117,7 +117,9 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
-      // 숨김 기능: 편집 모드에서만 연하게 표시
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
+    // 숨김 기능: 편집 모드에서만 연하게 표시
       ...(isHidden &&
         isDesignMode && {
           opacity: 0.4,

frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx

@@ -39,6 +39,8 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx

@@ -39,6 +39,8 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
     height: "100%",
     ...component.style,
     ...style,
+    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    width: "100%",
   };
 
   // 디자인 모드 스타일

frontend/types/numbering-rule.ts

@@ -0,0 +1,125 @@
+/**
+ * 코드 채번 규칙 컴포넌트 타입 정의
+ * Shadcn/ui 가이드라인 기반
+ */
+
+/**
+ * 코드 파트 유형 (4가지)
+ */
+export type CodePartType =
+  | "sequence"  // 순번 (자동 증가 숫자)
+  | "number"    // 숫자 (고정 자릿수)
+  | "date"      // 날짜 (다양한 날짜 형식)
+  | "text";     // 문자 (텍스트)
+
+/**
+ * 생성 방식
+ */
+export type GenerationMethod =
+  | "auto"    // 자동 생성
+  | "manual"; // 직접 입력
+
+/**
+ * 날짜 형식
+ */
+export type DateFormat =
+  | "YYYY"      // 2025
+  | "YY"        // 25
+  | "YYYYMM"    // 202511
+  | "YYMM"      // 2511
+  | "YYYYMMDD"  // 20251104
+  | "YYMMDD";   // 251104
+
+/**
+ * 단일 규칙 파트
+ */
+export interface NumberingRulePart {
+  id: string;                           // 고유 ID
+  order: number;                        // 순서 (1-6)
+  partType: CodePartType;               // 파트 유형
+  generationMethod: GenerationMethod;   // 생성 방식
+
+  // 자동 생성 설정
+  autoConfig?: {
+    // 순번용
+    sequenceLength?: number;      // 순번 자릿수 (예: 3 → 001)
+    startFrom?: number;           // 시작 번호 (기본: 1)
+    
+    // 숫자용
+    numberLength?: number;        // 숫자 자릿수 (예: 4 → 0001)
+    numberValue?: number;         // 숫자 값
+    
+    // 날짜용
+    dateFormat?: DateFormat;      // 날짜 형식
+    
+    // 문자용
+    textValue?: string;           // 텍스트 값 (예: "PRJ", "CODE")
+  };
+
+  // 직접 입력 설정
+  manualConfig?: {
+    value: string;                // 입력값
+    placeholder?: string;         // 플레이스홀더
+  };
+
+  // 생성된 값 (미리보기용)
+  generatedValue?: string;
+}
+
+/**
+ * 전체 채번 규칙
+ */
+export interface NumberingRuleConfig {
+  ruleId: string;                 // 규칙 ID
+  ruleName: string;               // 규칙명
+  description?: string;           // 설명
+  parts: NumberingRulePart[];     // 규칙 파트 배열
+
+  // 설정
+  separator?: string;             // 구분자 (기본: "-")
+  resetPeriod?: "none" | "daily" | "monthly" | "yearly";
+  currentSequence?: number;       // 현재 시퀀스
+
+  // 적용 범위
+  scopeType?: "global" | "menu";  // 적용 범위 (전역/메뉴별)
+  menuObjid?: number;             // 적용할 메뉴 OBJID (상위 메뉴 기준)
+  
+  // 적용 대상
+  tableName?: string;             // 적용할 테이블명
+  columnName?: string;            // 적용할 컬럼명
+
+  // 메타 정보
+  companyCode?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  createdBy?: string;
+}
+
+/**
+ * UI 옵션 상수
+ */
+export const CODE_PART_TYPE_OPTIONS: Array<{ value: CodePartType; label: string; description: string }> = [
+  { value: "sequence", label: "순번", description: "자동 증가 순번 (1, 2, 3...)" },
+  { value: "number", label: "숫자", description: "고정 자릿수 숫자 (001, 002...)" },
+  { value: "date", label: "날짜", description: "날짜 형식 (2025-11-04)" },
+  { value: "text", label: "문자", description: "텍스트 또는 코드" },
+];
+
+export const DATE_FORMAT_OPTIONS: Array<{ value: DateFormat; label: string; example: string }> = [
+  { value: "YYYY", label: "연도 (4자리)", example: "2025" },
+  { value: "YY", label: "연도 (2자리)", example: "25" },
+  { value: "YYYYMM", label: "연도+월", example: "202511" },
+  { value: "YYMM", label: "연도(2)+월", example: "2511" },
+  { value: "YYYYMMDD", label: "연월일", example: "20251104" },
+  { value: "YYMMDD", label: "연(2)+월일", example: "251104" },
+];
+
+export const RESET_PERIOD_OPTIONS: Array<{
+  value: "none" | "daily" | "monthly" | "yearly";
+  label: string;
+}> = [
+  { value: "none", label: "초기화 안함" },
+  { value: "daily", label: "일별 초기화" },
+  { value: "monthly", label: "월별 초기화" },
+  { value: "yearly", label: "연별 초기화" },
+];

코드_채번_규칙_컴포넌트_구현_계획서.md

@@ -0,0 +1,494 @@
+# 코드 채번 규칙 컴포넌트 구현 계획서
+
+## 문서 정보
+- **작성일**: 2025-11-03
+- **목적**: Shadcn/ui 가이드라인 기반 코드 채번 규칙 컴포넌트 구현
+- **우선순위**: 중간
+- **디자인 원칙**: 심플하고 깔끔한 UI, 중첩 박스 금지, 일관된 컬러 시스템
+
+---
+
+## 1. 기능 요구사항
+
+### 1.1 핵심 기능
+- 코드 채번 규칙 생성/수정/삭제
+- 동적 규칙 파트 추가/삭제 (최대 6개)
+- 실시간 코드 미리보기
+- 규칙 순서 조정
+- 데이터베이스 저장 및 불러오기
+
+### 1.2 UI 요구사항
+- 좌측: 코드 목록 (선택적)
+- 우측: 규칙 설정 영역
+- 상단: 코드 미리보기 + 규칙명
+- 중앙: 규칙 카드 리스트
+- 하단: 규칙 추가 + 저장 버튼
+
+---
+
+## 2. 디자인 시스템 (Shadcn/ui 기반)
+
+### 2.1 색상 사용 규칙
+
+```tsx
+// 배경
+bg-background          // 페이지 배경
+bg-card                // 카드 배경
+bg-muted               // 약한 배경 (미리보기 등)
+
+// 텍스트
+text-foreground        // 기본 텍스트
+text-muted-foreground  // 보조 텍스트
+text-primary           // 강조 텍스트
+
+// 테두리
+border-border          // 기본 테두리
+border-input           // 입력 필드 테두리
+
+// 버튼
+bg-primary             // 주요 버튼 (저장, 추가)
+bg-destructive         // 삭제 버튼
+variant="outline"      // 보조 버튼 (취소)
+variant="ghost"        // 아이콘 버튼
+```
+
+### 2.2 간격 시스템
+
+```tsx
+// 카드 간 간격
+gap-6                  // 24px (카드 사이)
+
+// 카드 내부 패딩
+p-6                    // 24px (CardContent)
+
+// 폼 필드 간격
+space-y-4              // 16px (입력 필드들)
+space-y-3              // 12px (모바일)
+
+// 섹션 간격
+space-y-6              // 24px (큰 섹션)
+```
+
+### 2.3 타이포그래피
+
+```tsx
+// 페이지 제목
+text-2xl font-semibold
+
+// 섹션 제목
+text-lg font-semibold
+
+// 카드 제목
+text-base font-semibold
+
+// 라벨
+text-sm font-medium
+
+// 본문 텍스트
+text-sm text-muted-foreground
+
+// 작은 텍스트
+text-xs text-muted-foreground
+```
+
+### 2.4 반응형 설정
+
+```tsx
+// 모바일 우선 + 데스크톱 최적화
+className="text-xs sm:text-sm"           // 폰트 크기
+className="h-8 sm:h-10"                  // 입력 필드 높이
+className="flex-col md:flex-row"         // 레이아웃
+className="gap-2 sm:gap-4"               // 간격
+```
+
+### 2.5 중첩 박스 금지 원칙
+
+**❌ 잘못된 예시**:
+```tsx
+<Card>
+  <CardContent>
+    <div className="border rounded-lg p-4">  {/* 중첩 박스! */}
+      <div className="border rounded p-2">  {/* 또 중첩! */}
+        내용
+      </div>
+    </div>
+  </CardContent>
+</Card>
+```
+
+**✅ 올바른 예시**:
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>제목</CardTitle>
+  </CardHeader>
+  <CardContent className="space-y-4">
+    {/* 직접 컨텐츠 배치 */}
+    <div>내용 1</div>
+    <div>내용 2</div>
+  </CardContent>
+</Card>
+```
+
+---
+
+## 3. 데이터 구조
+
+### 3.1 타입 정의
+
+```typescript
+// frontend/types/numbering-rule.ts
+
+import { BaseComponent } from "./screen-management";
+
+/**
+ * 코드 파트 유형
+ */
+export type CodePartType =
+  | "prefix"           // 접두사 (고정 문자열)
+  | "sequence"         // 순번 (자동 증가)
+  | "date"             // 날짜 (YYYYMMDD 등)
+  | "year"             // 연도 (YYYY)
+  | "month"            // 월 (MM)
+  | "custom";          // 사용자 정의
+
+/**
+ * 생성 방식
+ */
+export type GenerationMethod =
+  | "auto"             // 자동 생성
+  | "manual";          // 직접 입력
+
+/**
+ * 날짜 형식
+ */
+export type DateFormat =
+  | "YYYY"             // 2025
+  | "YY"               // 25
+  | "YYYYMM"           // 202511
+  | "YYMM"             // 2511
+  | "YYYYMMDD"         // 20251103
+  | "YYMMDD";          // 251103
+
+/**
+ * 단일 규칙 파트
+ */
+export interface NumberingRulePart {
+  id: string;                       // 고유 ID
+  order: number;                    // 순서 (1-6)
+  partType: CodePartType;           // 파트 유형
+  generationMethod: GenerationMethod; // 생성 방식
+  
+  // 자동 생성 설정
+  autoConfig?: {
+    // 접두사 설정
+    prefix?: string;                // 예: "ITM"
+    
+    // 순번 설정
+    sequenceLength?: number;        // 자릿수 (예: 4 → 0001)
+    startFrom?: number;             // 시작 번호 (기본: 1)
+    
+    // 날짜 설정
+    dateFormat?: DateFormat;        // 날짜 형식
+  };
+  
+  // 직접 입력 설정
+  manualConfig?: {
+    value: string;                  // 입력값
+    placeholder?: string;           // 플레이스홀더
+  };
+  
+  // 생성된 값 (미리보기용)
+  generatedValue?: string;
+}
+
+/**
+ * 전체 채번 규칙
+ */
+export interface NumberingRuleConfig {
+  ruleId: string;                   // 규칙 ID
+  ruleName: string;                 // 규칙명
+  description?: string;             // 설명
+  parts: NumberingRulePart[];       // 규칙 파트 배열 (최대 6개)
+  
+  // 설정
+  separator?: string;               // 구분자 (기본: "-")
+  resetPeriod?: "none" | "daily" | "monthly" | "yearly"; // 초기화 주기
+  currentSequence?: number;         // 현재 시퀀스
+  
+  // 적용 대상
+  tableName?: string;               // 적용할 테이블명
+  columnName?: string;              // 적용할 컬럼명
+  
+  // 메타 정보
+  companyCode?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  createdBy?: string;
+}
+
+/**
+ * 화면관리 컴포넌트 인터페이스
+ */
+export interface NumberingRuleComponent extends BaseComponent {
+  type: "numbering-rule";
+  
+  // 채번 규칙 설정
+  ruleConfig: NumberingRuleConfig;
+  
+  // UI 설정
+  showRuleList?: boolean;           // 좌측 목록 표시 여부
+  maxRules?: number;                // 최대 규칙 개수 (기본: 6)
+  enableReorder?: boolean;          // 순서 변경 허용 여부
+  
+  // 스타일
+  cardLayout?: "vertical" | "horizontal"; // 카드 레이아웃
+}
+```
+
+### 3.2 데이터베이스 스키마
+
+```sql
+-- db/migrations/034_create_numbering_rules.sql
+
+-- 채번 규칙 마스터 테이블
+CREATE TABLE IF NOT EXISTS numbering_rules (
+  rule_id VARCHAR(50) PRIMARY KEY,
+  rule_name VARCHAR(100) NOT NULL,
+  description TEXT,
+  separator VARCHAR(10) DEFAULT '-',
+  reset_period VARCHAR(20) DEFAULT 'none',
+  current_sequence INTEGER DEFAULT 1,
+  table_name VARCHAR(100),
+  column_name VARCHAR(100),
+  company_code VARCHAR(20) NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT NOW(),
+  updated_at TIMESTAMPTZ DEFAULT NOW(),
+  created_by VARCHAR(50),
+  
+  CONSTRAINT fk_company FOREIGN KEY (company_code) 
+    REFERENCES company_info(company_code)
+);
+
+-- 채번 규칙 상세 테이블
+CREATE TABLE IF NOT EXISTS numbering_rule_parts (
+  id SERIAL PRIMARY KEY,
+  rule_id VARCHAR(50) NOT NULL,
+  part_order INTEGER NOT NULL,
+  part_type VARCHAR(50) NOT NULL,
+  generation_method VARCHAR(20) NOT NULL,
+  auto_config JSONB,
+  manual_config JSONB,
+  company_code VARCHAR(20) NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT NOW(),
+  
+  CONSTRAINT fk_numbering_rule FOREIGN KEY (rule_id) 
+    REFERENCES numbering_rules(rule_id) ON DELETE CASCADE,
+  CONSTRAINT fk_company FOREIGN KEY (company_code) 
+    REFERENCES company_info(company_code),
+  CONSTRAINT unique_rule_order UNIQUE (rule_id, part_order, company_code)
+);
+
+-- 인덱스
+CREATE INDEX idx_numbering_rules_company ON numbering_rules(company_code);
+CREATE INDEX idx_numbering_rule_parts_rule ON numbering_rule_parts(rule_id);
+CREATE INDEX idx_numbering_rules_table ON numbering_rules(table_name, column_name);
+
+-- 샘플 데이터
+INSERT INTO numbering_rules (rule_id, rule_name, description, company_code, created_by) 
+VALUES ('SAMPLE_RULE', '샘플 채번 규칙', '제품 코드 자동 생성', '*', 'system')
+ON CONFLICT (rule_id) DO NOTHING;
+
+INSERT INTO numbering_rule_parts (rule_id, part_order, part_type, generation_method, auto_config, company_code)
+VALUES 
+  ('SAMPLE_RULE', 1, 'prefix', 'auto', '{"prefix": "PROD"}', '*'),
+  ('SAMPLE_RULE', 2, 'date', 'auto', '{"dateFormat": "YYYYMMDD"}', '*'),
+  ('SAMPLE_RULE', 3, 'sequence', 'auto', '{"sequenceLength": 4, "startFrom": 1}', '*')
+ON CONFLICT (rule_id, part_order, company_code) DO NOTHING;
+```
+
+---
+
+## 4. 구현 순서
+
+### Phase 1: 타입 정의 및 스키마 생성 ✅
+1. 타입 정의 파일 생성
+2. 데이터베이스 마이그레이션 실행
+3. 샘플 데이터 삽입
+
+### Phase 2: 백엔드 API 구현
+1. Controller 생성
+2. Service 레이어 구현
+3. API 테스트
+
+### Phase 3: 프론트엔드 기본 컴포넌트
+1. NumberingRuleDesigner (메인)
+2. NumberingRulePreview (미리보기)
+3. NumberingRuleCard (단일 규칙 카드)
+
+### Phase 4: 상세 설정 패널
+1. PartTypeSelector (파트 유형 선택)
+2. AutoConfigPanel (자동 생성 설정)
+3. ManualConfigPanel (직접 입력 설정)
+
+### Phase 5: 화면관리 통합
+1. ComponentType에 "numbering-rule" 추가
+2. RealtimePreview 렌더링 추가
+3. 템플릿 등록
+4. 속성 패널 구현
+
+### Phase 6: 테스트 및 최적화
+1. 기능 테스트
+2. 반응형 테스트
+3. 성능 최적화
+4. 문서화
+
+---
+
+## 5. 구현 완료 ✅
+
+### Phase 1: 타입 정의 및 스키마 생성 ✅
+- ✅ `frontend/types/numbering-rule.ts` 생성
+- ✅ `db/migrations/034_create_numbering_rules.sql` 생성 및 실행
+- ✅ 샘플 데이터 삽입 완료
+
+### Phase 2: 백엔드 API 구현 ✅
+- ✅ `backend-node/src/services/numberingRuleService.ts` 생성
+- ✅ `backend-node/src/controllers/numberingRuleController.ts` 생성
+- ✅ `app.ts`에 라우터 등록 (`/api/numbering-rules`)
+- ✅ 백엔드 재시작 완료
+
+### Phase 3: 프론트엔드 기본 컴포넌트 ✅
+- ✅ `NumberingRulePreview.tsx` - 코드 미리보기
+- ✅ `NumberingRuleCard.tsx` - 단일 규칙 카드
+- ✅ `AutoConfigPanel.tsx` - 자동 생성 설정
+- ✅ `ManualConfigPanel.tsx` - 직접 입력 설정
+- ✅ `NumberingRuleDesigner.tsx` - 메인 디자이너
+
+### Phase 4: 상세 설정 패널 ✅
+- ✅ 파트 유형별 설정 UI (접두사, 순번, 날짜, 연도, 월, 커스텀)
+- ✅ 자동 생성 / 직접 입력 모드 전환
+- ✅ 실시간 미리보기 업데이트
+
+### Phase 5: 화면관리 시스템 통합 ✅
+- ✅ `unified-core.ts`에 "numbering-rule" ComponentType 추가
+- ✅ `screen-management.ts`에 ComponentData 유니온 타입 추가
+- ✅ `RealtimePreview.tsx`에 렌더링 로직 추가
+- ✅ `TemplatesPanel.tsx`에 "관리자" 카테고리 및 템플릿 추가
+- ✅ `NumberingRuleTemplate.ts` 생성
+
+### Phase 6: 완료 ✅
+모든 단계가 성공적으로 완료되었습니다!
+
+---
+
+## 6. 사용 방법
+
+### 6.1 화면관리에서 사용하기
+
+1. **화면관리** 페이지로 이동
+2. 좌측 **템플릿 패널**에서 **관리자** 카테고리 선택
+3. **코드 채번 규칙** 템플릿을 캔버스로 드래그
+4. 규칙 파트 추가 및 설정
+5. 저장
+
+### 6.2 API 사용하기
+
+#### 규칙 목록 조회
+```bash
+GET /api/numbering-rules
+```
+
+#### 규칙 생성
+```bash
+POST /api/numbering-rules
+{
+  "ruleId": "PROD_CODE",
+  "ruleName": "제품 코드 규칙",
+  "parts": [
+    {
+      "id": "part-1",
+      "order": 1,
+      "partType": "prefix",
+      "generationMethod": "auto",
+      "autoConfig": { "prefix": "PROD" }
+    },
+    {
+      "id": "part-2",
+      "order": 2,
+      "partType": "date",
+      "generationMethod": "auto",
+      "autoConfig": { "dateFormat": "YYYYMMDD" }
+    },
+    {
+      "id": "part-3",
+      "order": 3,
+      "partType": "sequence",
+      "generationMethod": "auto",
+      "autoConfig": { "sequenceLength": 4, "startFrom": 1 }
+    }
+  ],
+  "separator": "-"
+}
+```
+
+#### 코드 생성
+```bash
+POST /api/numbering-rules/PROD_CODE/generate
+
+응답: { "success": true, "data": { "code": "PROD-20251103-0001" } }
+```
+
+---
+
+## 7. 구현된 파일 목록
+
+### 프론트엔드
+```
+frontend/
+├── types/
+│   └── numbering-rule.ts ✅
+├── components/
+│   └── numbering-rule/
+│       ├── NumberingRuleDesigner.tsx ✅
+│       ├── NumberingRuleCard.tsx ✅
+│       ├── NumberingRulePreview.tsx ✅
+│       ├── AutoConfigPanel.tsx ✅
+│       └── ManualConfigPanel.tsx ✅
+└── components/screen/
+    ├── RealtimePreview.tsx ✅ (수정됨)
+    ├── panels/
+    │   └── TemplatesPanel.tsx ✅ (수정됨)
+    └── templates/
+        └── NumberingRuleTemplate.ts ✅
+```
+
+### 백엔드
+```
+backend-node/
+├── src/
+│   ├── services/
+│   │   └── numberingRuleService.ts ✅
+│   ├── controllers/
+│   │   └── numberingRuleController.ts ✅
+│   └── app.ts ✅ (수정됨)
+```
+
+### 데이터베이스
+```
+db/
+└── migrations/
+    └── 034_create_numbering_rules.sql ✅
+```
+
+---
+
+## 8. 다음 개선 사항 (선택사항)
+
+- [ ] 규칙 순서 드래그앤드롭으로 변경
+- [ ] 규칙 복제 기능
+- [ ] 규칙 템플릿 제공 (자주 사용하는 패턴)
+- [ ] 코드 검증 로직
+- [ ] 테이블 생성 시 자동 채번 컬럼 추가 통합
+- [ ] 화면관리에서 입력 폼에 자동 코드 생성 버튼 추가
+