메인 받은거랑 계산기 위젯, 배경색

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

backend-node/src/app.ts

@@ -32,7 +32,6 @@ import mailTemplateFileRoutes from "./routes/mailTemplateFileRoutes";
 import mailAccountFileRoutes from "./routes/mailAccountFileRoutes";
 import mailSendSimpleRoutes from "./routes/mailSendSimpleRoutes";
 import mailReceiveBasicRoutes from "./routes/mailReceiveBasicRoutes";
-import mailSentHistoryRoutes from "./routes/mailSentHistoryRoutes";
 import dataRoutes from "./routes/dataRoutes";
 import testButtonDataflowRoutes from "./routes/testButtonDataflowRoutes";
 import externalDbConnectionRoutes from "./routes/externalDbConnectionRoutes";
@@ -75,8 +74,8 @@ app.use(
   })
 );
 app.use(compression());
-app.use(express.json({ limit: "50mb" }));
+app.use(express.json({ limit: "10mb" }));
-app.use(express.urlencoded({ extended: true, limit: "50mb" }));
+app.use(express.urlencoded({ extended: true, limit: "10mb" }));
 
 // 정적 파일 서빙 전에 CORS 미들웨어 추가 (OPTIONS 요청 처리)
 app.options("/uploads/*", (req, res) => {
@@ -176,19 +175,7 @@ app.use("/api/layouts", layoutRoutes);
 app.use("/api/mail/accounts", mailAccountFileRoutes); // 파일 기반 계정
 app.use("/api/mail/templates-file", mailTemplateFileRoutes); // 파일 기반 템플릿
 app.use("/api/mail/send", mailSendSimpleRoutes); // 메일 발송
-// 메일 수신 라우트 디버깅 - 모든 요청 로깅
-app.use("/api/mail/receive", (req, res, next) => {
-  console.log(`\n🔍 [MAIL RECEIVE REQUEST]`);
-  console.log(`   Method: ${req.method}`);
-  console.log(`   URL: ${req.originalUrl}`);
-  console.log(`   Path: ${req.path}`);
-  console.log(`   Base URL: ${req.baseUrl}`);
-  console.log(`   Params: ${JSON.stringify(req.params)}`);
-  console.log(`   Query: ${JSON.stringify(req.query)}`);
-  next();
-});
 app.use("/api/mail/receive", mailReceiveBasicRoutes); // 메일 수신
-app.use("/api/mail/sent", mailSentHistoryRoutes); // 발송 이력
 app.use("/api/screen", screenStandardRoutes);
 app.use("/api/data", dataRoutes);
 app.use("/api/test-button-dataflow", testButtonDataflowRoutes);

backend-node/src/controllers/adminController.ts

@@ -17,23 +17,28 @@ export async function getAdminMenus(
   res: Response
 ): Promise<void> {
   try {
-    logger.info("=== 관리자 메뉴 목록 조회 시작 ===");
+    logger.info("=== 메뉴 목록 조회 시작 ===");
 
     // 현재 로그인한 사용자의 회사 코드와 로케일 가져오기
     const userCompanyCode = req.user?.companyCode || "ILSHIN";
     const userLang = (req.query.userLang as string) || "ko";
+    const menuType = req.query.menuType as string | undefined; // menuType 파라미터 추가
 
     logger.info(`사용자 회사 코드: ${userCompanyCode}`);
     logger.info(`사용자 로케일: ${userLang}`);
+    logger.info(`메뉴 타입: ${menuType || "전체"}`);
 
     const paramMap = {
       userCompanyCode,
       userLang,
+      menuType, // menuType 추가
     };
 
     const menuList = await AdminService.getAdminMenuList(paramMap);
 
-    logger.info(`관리자 메뉴 조회 결과: ${menuList.length}개`);
+    logger.info(
+      `메뉴 조회 결과: ${menuList.length}개 (타입: ${menuType || "전체"})`
+    );
     if (menuList.length > 0) {
       logger.info("첫 번째 메뉴:", menuList[0]);
     }

backend-node/src/services/adminService.ts

@@ -9,7 +9,11 @@ export class AdminService {
     try {
       logger.info("AdminService.getAdminMenuList 시작 - 파라미터:", paramMap);
 
-      const { userLang = "ko" } = paramMap;
+      const { userLang = "ko", menuType } = paramMap;
+
+      // menuType에 따른 WHERE 조건 생성
+      const menuTypeCondition =
+        menuType !== undefined ? `MENU_TYPE = ${parseInt(menuType)}` : "1 = 1";
 
       // 기존 Java의 selectAdminMenuList 쿼리를 Raw Query로 포팅
       // WITH RECURSIVE 쿼리 구현
@@ -91,7 +95,7 @@ export class AdminService {
               MENU.MENU_DESC
             )
           FROM MENU_INFO MENU
-          WHERE MENU_TYPE = 0
+          WHERE ${menuTypeCondition}
             AND NOT EXISTS (
               SELECT 1 FROM MENU_INFO parent_menu 
               WHERE parent_menu.OBJID = MENU.PARENT_OBJ_ID
@@ -159,11 +163,7 @@ export class AdminService {
         )
         SELECT 
           LEVEL AS LEV,
-          CASE MENU_TYPE
+          CAST(MENU_TYPE AS TEXT) AS MENU_TYPE,
-            WHEN '0' THEN 'admin'
-            WHEN '1' THEN 'user'
-            ELSE ''
-          END AS MENU_TYPE,
           A.OBJID,
           A.PARENT_OBJ_ID,
           A.MENU_NAME_KOR,
@@ -193,7 +193,9 @@ export class AdminService {
         [userLang]
       );
 
-      logger.info(`관리자 메뉴 목록 조회 결과: ${menuList.length}개`);
+      logger.info(
+        `메뉴 목록 조회 결과: ${menuList.length}개 (menuType: ${menuType || "전체"})`
+      );
       if (menuList.length > 0) {
         logger.info("첫 번째 메뉴:", menuList[0]);
       }

docs/FINAL_GRID_MIGRATION_ROADMAP.md

@@ -0,0 +1,553 @@
+# 🗺️ 화면 관리 시스템 - 최종 그리드 마이그레이션 로드맵
+
+## 🎯 최종 목표
+
+> **"Tailwind CSS 12컬럼 그리드 기반의 제한된 자유도 시스템"**
+>
+> - ❌ 픽셀 기반 width 완전 제거
+> - ✅ 컬럼 스팬(1-12)으로만 너비 제어
+> - ✅ 행(Row) 기반 레이아웃 구조
+> - ✅ 정형화된 디자인 패턴 제공
+
+---
+
+## 📊 현재 시스템 vs 새 시스템
+
+### Before (현재)
+
+```typescript
+// 픽셀 기반 절대 위치 시스템
+interface ComponentData {
+  position: { x: number; y: number }; // 픽셀 좌표
+  size: { width: number; height: number }; // 픽셀 크기
+}
+
+// 사용자 입력
+<Input type="number" value={width} onChange={...} />
+// → 예: 850px 입력 가능 (자유롭지만 일관성 없음)
+```
+
+### After (새 시스템)
+
+```typescript
+// 행 기반 그리드 시스템
+interface ComponentData {
+  gridRowIndex: number; // 몇 번째 행인가
+  gridColumnSpan: ColumnSpanPreset; // 너비 (컬럼 수)
+  gridColumnStart?: number; // 시작 위치 (선택)
+  size: { height: number }; // 높이만 픽셀 지정
+}
+
+// 사용자 선택
+<Select value={columnSpan}>
+  <SelectItem value="full">전체 (12/12)</SelectItem>
+  <SelectItem value="half">절반 (6/12)</SelectItem>
+  <SelectItem value="third">1/3 (4/12)</SelectItem>
+  // ... 정해진 옵션만
+</Select>;
+// → 예: "half" 선택 → 정확히 50% 너비 (일관성 보장)
+```
+
+---
+
+## 🏗️ 새 시스템 구조
+
+### 1. 화면 구성 방식
+
+```
+화면 (Screen)
+  ├─ 행 1 (Row 1) [12 컬럼 그리드]
+  │   ├─ 컴포넌트 A (3 컬럼)
+  │   ├─ 컴포넌트 B (9 컬럼)
+  │   └─ [자동 배치]
+  │
+  ├─ 행 2 (Row 2) [12 컬럼 그리드]
+  │   ├─ 컴포넌트 C (4 컬럼)
+  │   ├─ 컴포넌트 D (4 컬럼)
+  │   ├─ 컴포넌트 E (4 컬럼)
+  │   └─ [자동 배치]
+  │
+  └─ 행 3 (Row 3) [12 컬럼 그리드]
+      └─ 컴포넌트 F (12 컬럼 - 전체)
+```
+
+### 2. 허용되는 컬럼 스팬
+
+| 프리셋          | 컬럼 수 | 백분율 | 용도                        |
+| --------------- | ------- | ------ | --------------------------- |
+| `full`          | 12      | 100%   | 전체 너비 (테이블, 제목 등) |
+| `threeQuarters` | 9       | 75%    | 입력 필드                   |
+| `twoThirds`     | 8       | 67%    | 큰 컴포넌트                 |
+| `half`          | 6       | 50%    | 2분할 레이아웃              |
+| `third`         | 4       | 33%    | 3분할 레이아웃              |
+| `quarter`       | 3       | 25%    | 라벨, 4분할                 |
+| `label`         | 3       | 25%    | 폼 라벨 전용                |
+| `input`         | 9       | 75%    | 폼 입력 전용                |
+| `small`         | 2       | 17%    | 아이콘, 체크박스            |
+| `medium`        | 4       | 33%    | 보통 크기                   |
+| `large`         | 8       | 67%    | 큰 컴포넌트                 |
+
+### 3. 사용자 워크플로우
+
+```
+1. 새 행 추가
+   ↓
+2. 행에 컴포넌트 드래그 & 드롭
+   ↓
+3. 컴포넌트 선택 → 컬럼 스팬 선택
+   ↓
+4. 필요시 시작 위치 조정 (고급 설정)
+   ↓
+5. 행 간격, 정렬 등 설정
+```
+
+---
+
+## 📅 구현 단계 (4주 계획)
+
+### Week 1: 기반 구축
+
+**Day 1-2: 타입 시스템**
+
+- [ ] `Size` 인터페이스에서 `width` 제거
+- [ ] `BaseComponent`에 `gridColumnSpan`, `gridRowIndex` 추가
+- [ ] `ColumnSpanPreset` 타입 및 상수 정의
+- [ ] `LayoutRow` 인터페이스 정의
+
+**Day 3-4: 핵심 UI 컴포넌트**
+
+- [ ] `PropertiesPanel` - width 입력 → 컬럼 스팬 선택 UI로 변경
+- [ ] 시각적 그리드 프리뷰 추가 (12컬럼 미니 그리드)
+- [ ] `RowSettingsPanel` 신규 생성 (행 설정)
+- [ ] `ComponentGridPanel` 신규 생성 (컴포넌트 너비 설정)
+
+**Day 5: 렌더링 로직**
+
+- [ ] `LayoutRowRenderer` 신규 생성
+- [ ] `ContainerComponent` - `gridColumn` 계산 로직 수정
+- [ ] `RealtimePreview` - 그리드 클래스 적용
+
+**Day 6-7: 마이그레이션 준비**
+
+- [ ] `widthToColumnSpan.ts` 유틸리티 작성
+- [ ] 기존 데이터 변환 함수 작성
+- [ ] Y 좌표 → 행 인덱스 변환 로직
+
+### Week 2: 레이아웃 시스템
+
+**Day 1-2: GridLayoutBuilder**
+
+- [ ] `GridLayoutBuilder` 메인 컴포넌트
+- [ ] 행 추가/삭제/순서 변경 기능
+- [ ] 행 선택 및 하이라이트
+
+**Day 3-4: 드래그앤드롭**
+
+- [ ] 컴포넌트를 행에 드롭하는 기능
+- [ ] 행 내에서 컴포넌트 순서 변경
+- [ ] 행 간 컴포넌트 이동
+- [ ] 드롭 가이드라인 표시
+
+**Day 5-7: StyleEditor 정리**
+
+- [ ] `StyleEditor`에서 width 옵션 완전 제거
+- [ ] `ScreenDesigner`에서 width 관련 로직 제거
+- [ ] 높이 설정만 남기기
+
+### Week 3: 템플릿 및 패턴
+
+**Day 1-3: 템플릿 시스템**
+
+- [ ] `TemplateComponent` 타입 수정
+- [ ] 기본 폼 템플릿 업데이트
+- [ ] 검색 + 테이블 템플릿
+- [ ] 대시보드 템플릿
+- [ ] 마스터-디테일 템플릿
+
+**Day 4-5: 레이아웃 패턴**
+
+- [ ] 정형화된 레이아웃 패턴 정의
+- [ ] 패턴 선택 UI
+- [ ] 패턴 적용 로직
+- [ ] 빠른 패턴 삽입 버튼
+
+**Day 6-7: 반응형 기반 (선택)**
+
+- [ ] 브레이크포인트별 컬럼 스팬 설정
+- [ ] 반응형 편집 UI
+- [ ] 반응형 프리뷰
+
+### Week 4: 마이그레이션 및 안정화
+
+**Day 1-2: 자동 마이그레이션**
+
+- [ ] 화면 로드 시 자동 변환 로직
+- [ ] 마이그레이션 로그 및 검증
+- [ ] 에러 처리 및 fallback
+
+**Day 3-4: 통합 테스트**
+
+- [ ] 새 컴포넌트 생성 테스트
+- [ ] 기존 화면 로드 테스트
+- [ ] 템플릿 적용 테스트
+- [ ] 드래그앤드롭 테스트
+- [ ] 속성 편집 테스트
+
+**Day 5: Tailwind 설정**
+
+- [ ] `tailwind.config.js` safelist 추가
+- [ ] 불필요한 유틸리티 제거
+- [ ] 빌드 테스트
+
+**Day 6-7: 문서화 및 배포**
+
+- [ ] 사용자 가이드 작성
+- [ ] 개발자 문서 업데이트
+- [ ] 릴리즈 노트 작성
+- [ ] 점진적 배포
+
+---
+
+## 📁 수정/생성 파일 전체 목록
+
+### 🆕 신규 생성 파일 (15개)
+
+1. `frontend/types/grid-system.ts` - 그리드 시스템 타입
+2. `frontend/lib/constants/columnSpans.ts` - 컬럼 스팬 상수
+3. `frontend/lib/utils/widthToColumnSpan.ts` - 마이그레이션 유틸
+4. `frontend/lib/utils/gridLayoutUtils.ts` - 그리드 레이아웃 헬퍼
+5. `frontend/components/screen/GridLayoutBuilder.tsx` - 메인 빌더
+6. `frontend/components/screen/LayoutRowRenderer.tsx` - 행 렌더러
+7. `frontend/components/screen/AddRowButton.tsx` - 행 추가 버튼
+8. `frontend/components/screen/GridGuides.tsx` - 그리드 가이드라인
+9. `frontend/components/screen/GridDropZone.tsx` - 드롭존
+10. `frontend/components/screen/panels/RowSettingsPanel.tsx` - 행 설정
+11. `frontend/components/screen/panels/ComponentGridPanel.tsx` - 컴포넌트 너비
+12. `frontend/components/screen/panels/ResponsivePanel.tsx` - 반응형 설정
+13. `frontend/lib/templates/layoutPatterns.ts` - 레이아웃 패턴
+14. `frontend/hooks/useGridLayout.ts` - 그리드 레이아웃 훅
+15. `frontend/hooks/useRowManagement.ts` - 행 관리 훅
+
+### ✏️ 수정 파일 (20개)
+
+1. `frontend/types/screen-management.ts` - Size에서 width 제거
+2. `frontend/components/screen/panels/PropertiesPanel.tsx` - UI 대폭 수정
+3. `frontend/components/screen/StyleEditor.tsx` - width 옵션 제거
+4. `frontend/components/screen/ScreenDesigner.tsx` - 전체 로직 수정
+5. `frontend/components/screen/RealtimePreviewDynamic.tsx` - 그리드 클래스
+6. `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` - 그리드 클래스
+7. `frontend/components/screen/layout/ContainerComponent.tsx` - 렌더링 수정
+8. `frontend/components/screen/layout/ColumnComponent.tsx` - 렌더링 수정
+9. `frontend/components/screen/layout/RowComponent.tsx` - 렌더링 수정
+10. `frontend/components/screen/panels/TemplatesPanel.tsx` - 템플릿 수정
+11. `frontend/components/screen/panels/DataTableConfigPanel.tsx` - 모달 크기 유지
+12. `frontend/components/screen/panels/DetailSettingsPanel.tsx` - 검토 필요
+13. `frontend/components/screen/panels/ComponentsPanel.tsx` - 컴포넌트 생성
+14. `frontend/components/screen/panels/LayoutsPanel.tsx` - 레이아웃 적용
+15. `frontend/components/screen/templates/DataTableTemplate.tsx` - 템플릿 수정
+16. `frontend/lib/api/screen.ts` - 마이그레이션 로직 추가
+17. `tailwind.config.js` - safelist 추가
+18. `frontend/components/screen/FloatingPanel.tsx` - 검토 (패널 width 유지)
+19. `frontend/components/screen/SaveModal.tsx` - 검토
+20. `frontend/components/screen/EditModal.tsx` - 검토
+
+---
+
+## 🎨 핵심 UI 변경사항
+
+### 1. 컴포넌트 너비 설정 (Before → After)
+
+**Before**:
+
+```tsx
+<Label>너비</Label>
+<Input
+  type="number"
+  value={width}
+  onChange={(e) => setWidth(e.target.value)}
+/>
+// 사용자가 아무 숫자나 입력 가능 (850, 1234 등)
+```
+
+**After**:
+
+```tsx
+<Label>컴포넌트 너비</Label>
+<Select value={columnSpan} onValueChange={setColumnSpan}>
+  <SelectItem value="full">전체 (12/12 - 100%)</SelectItem>
+  <SelectItem value="half">절반 (6/12 - 50%)</SelectItem>
+  <SelectItem value="third">1/3 (4/12 - 33%)</SelectItem>
+  {/* ... 정해진 옵션만 */}
+</Select>
+
+{/* 시각적 프리뷰 */}
+<div className="grid grid-cols-12 gap-1 h-6">
+  {Array.from({ length: 12 }).map((_, i) => (
+    <div className={i < spanValue ? "bg-blue-500" : "bg-gray-100"} />
+  ))}
+</div>
+<p>6 / 12 컬럼</p>
+```
+
+### 2. 행(Row) 관리 UI (신규)
+
+```tsx
+{
+  /* 각 행에 설정 가능한 옵션 */
+}
+<RowSettings>
+  <Label>행 높이</Label>
+  <Select>
+    <SelectItem value="auto">자동</SelectItem>
+    <SelectItem value="fixed">고정</SelectItem>
+  </Select>
+
+  <Label>컴포넌트 간격</Label>
+  <ButtonGroup>
+    <Button>없음</Button>
+    <Button>작게 (16px)</Button>
+    <Button>보통 (24px)</Button>
+    <Button>크게 (32px)</Button>
+  </ButtonGroup>
+
+  <Label>정렬</Label>
+  <ButtonGroup>
+    <Button>왼쪽</Button>
+    <Button>중앙</Button>
+    <Button>오른쪽</Button>
+    <Button>늘림</Button>
+  </ButtonGroup>
+</RowSettings>;
+```
+
+### 3. 드래그앤드롭 경험 개선
+
+```tsx
+{
+  /* 빈 행 */
+}
+<div className="border-dashed border-2 p-8">
+  컴포넌트를 여기에 드래그하세요
+  {/* 빠른 패턴 버튼 */}
+  <div className="mt-4 flex gap-2">
+    <Button size="sm">폼 행 추가</Button>
+    <Button size="sm">2분할 추가</Button>
+    <Button size="sm">3분할 추가</Button>
+  </div>
+</div>;
+
+{
+  /* 드롭 시 그리드 가이드라인 표시 */
+}
+<div className="absolute inset-0 pointer-events-none">
+  {/* 12개 컬럼 구분선 */}
+  {Array.from({ length: 12 }).map((_, i) => (
+    <div className="border-l border-dashed border-blue-300" />
+  ))}
+</div>;
+```
+
+---
+
+## 🔍 마이그레이션 상세 전략
+
+### 1. 자동 변환 알고리즘
+
+```typescript
+// 기존 컴포넌트 변환 프로세스
+function migrateComponent(oldComponent: OldComponentData): ComponentData {
+  // Step 1: 픽셀 width → 컬럼 스팬
+  const gridColumnSpan = convertWidthToColumnSpan(
+    oldComponent.size.width,
+    1920 // 기준 캔버스 너비
+  );
+
+  // Step 2: Y 좌표 → 행 인덱스
+  const gridRowIndex = calculateRowIndex(
+    oldComponent.position.y,
+    allComponents
+  );
+
+  // Step 3: X 좌표 → 시작 컬럼 (같은 행 내)
+  const gridColumnStart = calculateColumnStart(
+    oldComponent.position.x,
+    rowComponents
+  );
+
+  return {
+    ...oldComponent,
+    gridColumnSpan,
+    gridRowIndex,
+    gridColumnStart,
+    size: {
+      height: oldComponent.size.height, // 높이만 유지
+      // width 제거
+    },
+  };
+}
+```
+
+### 2. 변환 정확도 보장
+
+```typescript
+// 변환 전후 비교
+const before = {
+  position: { x: 100, y: 50 },
+  size: { width: 960, height: 40 }, // 50% 너비
+};
+
+const after = {
+  gridRowIndex: 0,
+  gridColumnSpan: "half", // 정확히 50%
+  gridColumnStart: 1, // 자동 계산
+  size: { height: 40 },
+};
+
+// 시각적으로 동일한 결과 보장
+```
+
+### 3. 예외 처리
+
+```typescript
+// 변환 불가능한 경우 처리
+function migrateWithFallback(component: OldComponentData): ComponentData {
+  try {
+    return migrateComponent(component);
+  } catch (error) {
+    console.error("마이그레이션 실패:", error);
+
+    // Fallback: 기본값 사용
+    return {
+      ...component,
+      gridColumnSpan: "half", // 안전한 기본값
+      gridRowIndex: 0,
+      size: { height: component.size.height },
+    };
+  }
+}
+```
+
+---
+
+## ⚠️ 주의사항 및 제약
+
+### 1. 제거되는 기능
+
+- ❌ 픽셀 단위 정밀 너비 조정
+- ❌ 자유로운 width 숫자 입력
+- ❌ 커스텀 width 값
+
+### 2. 유지되는 기능
+
+- ✅ 높이(height) 픽셀 입력
+- ✅ 위치(Y 좌표) 조정
+- ✅ 모든 스타일 옵션 (width 제외)
+
+### 3. 특수 케이스 처리
+
+#### 3.1 모달/팝업
+
+```typescript
+// 모달은 컬럼 스팬 사용 안 함
+interface ModalConfig {
+  width: "sm" | "md" | "lg" | "xl" | "2xl" | "full"; // 기존 유지
+}
+```
+
+#### 3.2 FloatingPanel
+
+```typescript
+// 편집 패널 자체는 픽셀 width 유지
+<FloatingPanel width={360} height={400} />
+```
+
+#### 3.3 사이드바
+
+```typescript
+// 사이드바도 컬럼 스팬으로 변경
+interface SidebarConfig {
+  sidebarSpan: ColumnSpanPreset; // "quarter" | "third" | "half"
+}
+```
+
+---
+
+## 🎯 완료 기준
+
+### 기능 완성도
+
+- [ ] 모든 기존 화면이 새 시스템에서 정상 표시
+- [ ] 새 컴포넌트 생성 및 배치 정상 동작
+- [ ] 템플릿 적용 정상 동작
+- [ ] 드래그앤드롭 정상 동작
+
+### 코드 품질
+
+- [ ] TypeScript 에러 0개
+- [ ] Linter 경고 0개
+- [ ] 불필요한 width 관련 코드 완전 제거
+- [ ] 주석 및 문서화 완료
+
+### 성능
+
+- [ ] 렌더링 성능 저하 없음
+- [ ] 마이그레이션 속도 < 1초 (화면당)
+- [ ] 메모리 사용량 증가 없음
+
+### 사용자 경험
+
+- [ ] 직관적인 UI
+- [ ] 시각적 프리뷰 제공
+- [ ] 빠른 패턴 적용
+- [ ] 에러 메시지 명확
+
+---
+
+## 📊 예상 효과
+
+### 정량적 효과
+
+- 코드 라인 감소: ~500줄 (width 계산 로직 제거)
+- 버그 감소: width 관련 버그 100% 제거
+- 개발 속도: 화면 구성 시간 30% 단축
+- 유지보수: width 관련 이슈 0건
+
+### 정성적 효과
+
+- ✅ 일관된 디자인 시스템
+- ✅ 학습 곡선 감소
+- ✅ Tailwind 표준 준수
+- ✅ 반응형 자동 대응 (추후)
+- ✅ 디자인 품질 향상
+
+---
+
+## 🚀 다음 단계
+
+### 즉시 시작 가능
+
+1. Phase 1 타입 정의 작성
+2. PropertiesPanel UI 목업
+3. 마이그레이션 유틸리티 스켈레톤
+
+### 추후 확장
+
+1. 반응형 브레이크포인트
+2. 커스텀 레이아웃 패턴 저장
+3. AI 기반 레이아웃 추천
+4. 컴포넌트 자동 정렬
+
+---
+
+## 📚 관련 문서
+
+- [전체 그리드 시스템 설계](./GRID_SYSTEM_REDESIGN_PLAN.md)
+- [Width 제거 상세 계획](./WIDTH_REMOVAL_MIGRATION_PLAN.md)
+- Tailwind CSS 그리드 문서
+- 사용자 가이드 (작성 예정)
+
+---
+
+이 로드맵을 따라 진행하면 **4주 내에 완전히 새로운 그리드 시스템**을 구축할 수 있습니다! 🎉
+
+**준비되셨나요? 어디서부터 시작하시겠습니까?** 💪

frontend/components/admin/dashboard/CLOCK_WIDGET_PLAN.md

@@ -0,0 +1,635 @@
+# ⏰ 시계 위젯 구현 계획
+
+## 📋 개요
+
+대시보드에 실시간 시계 위젯을 추가하여 사용자가 현재 시간을 한눈에 확인할 수 있도록 합니다.
+
+---
+
+## 🎯 목표
+
+- 실시간으로 업데이트되는 시계 위젯 구현
+- 다양한 시계 스타일 제공 (아날로그/디지털)
+- 여러 시간대(타임존) 지원
+- 깔끔하고 직관적인 UI
+
+---
+
+## 📦 구현 범위
+
+### 1. 타입 정의 (`types.ts`)
+
+```typescript
+export type ElementSubtype =
+  | "bar"
+  | "pie"
+  | "line"
+  | "area"
+  | "stacked-bar"
+  | "donut"
+  | "combo" // 차트
+  | "exchange"
+  | "weather"
+  | "clock"; // 위젯 (+ clock 추가)
+
+// 시계 위젯 설정
+export interface ClockConfig {
+  style: "analog" | "digital" | "both"; // 시계 스타일
+  timezone: string; // 타임존 (예: 'Asia/Seoul', 'America/New_York')
+  showDate: boolean; // 날짜 표시 여부
+  showSeconds: boolean; // 초 표시 여부 (디지털)
+  format24h: boolean; // 24시간 형식 (true) vs 12시간 형식 (false)
+  theme: "light" | "dark" | "blue" | "gradient"; // 테마
+}
+
+// DashboardElement에 clockConfig 추가
+export interface DashboardElement {
+  // ... 기존 필드
+  clockConfig?: ClockConfig; // 시계 설정
+}
+```
+
+---
+
+### 2. 사이드바에 시계 위젯 추가 (`DashboardSidebar.tsx`)
+
+```tsx
+<DraggableItem
+  icon="⏰"
+  title="시계 위젯"
+  type="widget"
+  subtype="clock"
+  onDragStart={handleDragStart}
+  className="border-l-4 border-teal-500"
+/>
+```
+
+---
+
+### 3. 시계 위젯 컴포넌트 생성
+
+#### 📁 파일 구조
+
+```
+frontend/components/admin/dashboard/
+├── widgets/
+│   ├── ClockWidget.tsx          # 메인 시계 컴포넌트
+│   ├── AnalogClock.tsx          # 아날로그 시계
+│   ├── DigitalClock.tsx         # 디지털 시계
+│   └── ClockConfigModal.tsx     # 시계 설정 모달
+```
+
+#### 📄 `ClockWidget.tsx` - 메인 컴포넌트
+
+**기능:**
+
+- 현재 시간을 1초마다 업데이트
+- `clockConfig`에 따라 아날로그/디지털 시계 렌더링
+- 타임존 지원 (`Intl.DateTimeFormat` 또는 `date-fns-tz` 사용)
+
+**주요 코드:**
+
+```tsx
+"use client";
+import { useState, useEffect } from "react";
+import { DashboardElement } from "../types";
+import { AnalogClock } from "./AnalogClock";
+import { DigitalClock } from "./DigitalClock";
+
+interface ClockWidgetProps {
+  element: DashboardElement;
+}
+
+export function ClockWidget({ element }: ClockWidgetProps) {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const config = element.clockConfig || {
+    style: "digital",
+    timezone: "Asia/Seoul",
+    showDate: true,
+    showSeconds: true,
+    format24h: true,
+    theme: "light",
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      {(config.style === "analog" || config.style === "both") && (
+        <AnalogClock time={currentTime} theme={config.theme} />
+      )}
+
+      {(config.style === "digital" || config.style === "both") && (
+        <DigitalClock
+          time={currentTime}
+          timezone={config.timezone}
+          showDate={config.showDate}
+          showSeconds={config.showSeconds}
+          format24h={config.format24h}
+          theme={config.theme}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+---
+
+#### 📄 `DigitalClock.tsx` - 디지털 시계
+
+**기능:**
+
+- 시간을 디지털 형식으로 표시
+- 날짜 표시 옵션
+- 12/24시간 형식 지원
+- 초 표시 옵션
+
+**UI 예시:**
+
+```
+┌─────────────────────┐
+│   2025년 1월 15일   │
+│                     │
+│      14:30:45       │
+│                     │
+│     서울 (KST)      │
+└─────────────────────┘
+```
+
+**주요 코드:**
+
+```tsx
+interface DigitalClockProps {
+  time: Date;
+  timezone: string;
+  showDate: boolean;
+  showSeconds: boolean;
+  format24h: boolean;
+  theme: string;
+}
+
+export function DigitalClock({ time, timezone, showDate, showSeconds, format24h, theme }: DigitalClockProps) {
+  // Intl.DateTimeFormat으로 타임존 처리
+  const timeString = new Intl.DateTimeFormat("ko-KR", {
+    timeZone: timezone,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: showSeconds ? "2-digit" : undefined,
+    hour12: !format24h,
+  }).format(time);
+
+  const dateString = showDate
+    ? new Intl.DateTimeFormat("ko-KR", {
+        timeZone: timezone,
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        weekday: "long",
+      }).format(time)
+    : null;
+
+  return (
+    <div className={`text-center ${getThemeClass(theme)}`}>
+      {showDate && <div className="mb-2 text-sm opacity-80">{dateString}</div>}
+      <div className="text-4xl font-bold tabular-nums">{timeString}</div>
+      <div className="mt-2 text-xs opacity-60">{getTimezoneLabel(timezone)}</div>
+    </div>
+  );
+}
+```
+
+---
+
+#### 📄 `AnalogClock.tsx` - 아날로그 시계
+
+**기능:**
+
+- SVG로 아날로그 시계 그리기
+- 시침, 분침, 초침 애니메이션
+- 숫자/눈금 표시
+
+**UI 예시:**
+
+```
+     12
+  11    1
+10        2
+9          3
+8          4
+  7    5
+     6
+```
+
+**주요 코드:**
+
+```tsx
+interface AnalogClockProps {
+  time: Date;
+  theme: string;
+}
+
+export function AnalogClock({ time, theme }: AnalogClockProps) {
+  const hours = time.getHours() % 12;
+  const minutes = time.getMinutes();
+  const seconds = time.getSeconds();
+
+  // 각도 계산
+  const secondAngle = seconds * 6 - 90; // 6도씩 회전
+  const minuteAngle = minutes * 6 + seconds * 0.1 - 90;
+  const hourAngle = hours * 30 + minutes * 0.5 - 90;
+
+  return (
+    <svg viewBox="0 0 200 200" className="w-full max-w-[200px]">
+      {/* 시계판 */}
+      <circle cx="100" cy="100" r="95" fill="white" stroke="black" strokeWidth="2" />
+
+      {/* 숫자 표시 */}
+      {[...Array(12)].map((_, i) => {
+        const angle = (i * 30 - 90) * (Math.PI / 180);
+        const x = 100 + 75 * Math.cos(angle);
+        const y = 100 + 75 * Math.sin(angle);
+        return (
+          <text key={i} x={x} y={y} textAnchor="middle" dy="5" fontSize="14">
+            {i === 0 ? 12 : i}
+          </text>
+        );
+      })}
+
+      {/* 시침 */}
+      <line
+        x1="100"
+        y1="100"
+        x2={100 + 40 * Math.cos((hourAngle * Math.PI) / 180)}
+        y2={100 + 40 * Math.sin((hourAngle * Math.PI) / 180)}
+        stroke="black"
+        strokeWidth="6"
+        strokeLinecap="round"
+      />
+
+      {/* 분침 */}
+      <line
+        x1="100"
+        y1="100"
+        x2={100 + 60 * Math.cos((minuteAngle * Math.PI) / 180)}
+        y2={100 + 60 * Math.sin((minuteAngle * Math.PI) / 180)}
+        stroke="black"
+        strokeWidth="4"
+        strokeLinecap="round"
+      />
+
+      {/* 초침 */}
+      <line
+        x1="100"
+        y1="100"
+        x2={100 + 70 * Math.cos((secondAngle * Math.PI) / 180)}
+        y2={100 + 70 * Math.sin((secondAngle * Math.PI) / 180)}
+        stroke="red"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+
+      {/* 중심점 */}
+      <circle cx="100" cy="100" r="5" fill="black" />
+    </svg>
+  );
+}
+```
+
+---
+
+#### 📄 `ClockConfigModal.tsx` - 설정 모달
+
+**설정 항목:**
+
+1. **시계 스타일**
+   - 아날로그
+   - 디지털
+   - 둘 다
+
+2. **타임존 선택**
+   - 서울 (Asia/Seoul)
+   - 뉴욕 (America/New_York)
+   - 런던 (Europe/London)
+   - 도쿄 (Asia/Tokyo)
+   - 기타...
+
+3. **디지털 시계 옵션**
+   - 날짜 표시
+   - 초 표시
+   - 24시간 형식 / 12시간 형식
+
+4. **테마**
+   - Light
+   - Dark
+   - Blue
+   - Gradient
+
+---
+
+### 4. 기존 컴포넌트 수정
+
+#### 📄 `CanvasElement.tsx`
+
+시계 위젯을 렌더링하도록 수정:
+
+```tsx
+import { ClockWidget } from "./widgets/ClockWidget";
+
+// 렌더링 부분
+{
+  element.type === "widget" && element.subtype === "clock" && <ClockWidget element={element} />;
+}
+```
+
+#### 📄 `DashboardDesigner.tsx`
+
+시계 위젯 기본 설정 추가:
+
+```tsx
+function getElementContent(type: ElementType, subtype: ElementSubtype): string {
+  // ...
+  if (type === "widget") {
+    if (subtype === "clock") return "clock";
+    // ...
+  }
+}
+
+function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
+  // ...
+  if (type === "widget") {
+    if (subtype === "clock") return "⏰ 시계";
+    // ...
+  }
+}
+```
+
+---
+
+## 🎨 디자인 가이드
+
+### 테마별 색상
+
+```typescript
+const themes = {
+  light: {
+    background: "bg-white",
+    text: "text-gray-900",
+    border: "border-gray-200",
+  },
+  dark: {
+    background: "bg-gray-900",
+    text: "text-white",
+    border: "border-gray-700",
+  },
+  blue: {
+    background: "bg-gradient-to-br from-blue-400 to-blue-600",
+    text: "text-white",
+    border: "border-blue-500",
+  },
+  gradient: {
+    background: "bg-gradient-to-br from-purple-400 via-pink-500 to-red-500",
+    text: "text-white",
+    border: "border-pink-500",
+  },
+};
+```
+
+### 크기 가이드
+
+- **최소 크기**: 2×2 셀 (디지털만)
+- **권장 크기**: 3×3 셀 (아날로그 + 디지털)
+- **최대 크기**: 4×4 셀
+
+---
+
+## 🔧 기술 스택
+
+### 사용 라이브러리
+
+**Option 1: 순수 JavaScript (권장)**
+
+- `Date` 객체
+- `Intl.DateTimeFormat` - 타임존 처리
+- `setInterval` - 1초마다 업데이트
+
+**Option 2: 외부 라이브러리**
+
+- `date-fns` + `date-fns-tz` - 날짜/시간 처리
+- `moment-timezone` - 타임존 처리 (무겁지만 강력)
+
+**추천: Option 1 (순수 JavaScript)**
+
+- 외부 의존성 없음
+- 가볍고 빠름
+- 브라우저 네이티브 API 사용
+
+---
+
+## 📝 구현 순서
+
+### Step 1: 타입 정의
+
+- [x] `types.ts`에 `'clock'` 추가
+- [x] `ClockConfig` 인터페이스 정의
+- [x] `DashboardElement`에 `clockConfig` 추가
+
+### Step 2: UI 추가
+
+- [x] `DashboardSidebar.tsx`에 시계 위젯 아이템 추가
+
+### Step 3: 디지털 시계 구현
+
+- [x] `DigitalClock.tsx` 생성
+- [x] 시간 포맷팅 구현
+- [x] 타임존 처리 구현
+- [x] 테마 스타일 적용
+
+### Step 4: 아날로그 시계 구현
+
+- [x] `AnalogClock.tsx` 생성
+- [x] SVG 시계판 그리기
+- [x] 시침/분침/초침 계산 및 렌더링
+- [x] 애니메이션 적용
+
+### Step 5: 메인 위젯 컴포넌트
+
+- [x] `ClockWidget.tsx` 생성
+- [x] 실시간 업데이트 로직 구현
+- [x] 아날로그/디지털 조건부 렌더링
+
+### Step 6: 설정 모달
+
+- [x] `ClockConfigModal.tsx` 생성 ✨
+- [x] 스타일 선택 UI (아날로그/디지털/둘다) ✨
+- [x] 타임존 선택 UI (8개 주요 도시) ✨
+- [x] 옵션 토글 UI (날짜/초/24시간) ✨
+- [x] 테마 선택 UI (light/dark/blue/gradient) ✨
+- [x] ElementConfigModal 통합 ✨
+
+### Step 7: 통합
+
+- [x] `CanvasElement.tsx`에 시계 위젯 렌더링 추가
+- [x] `DashboardDesigner.tsx`에 기본값 추가
+- [x] ClockWidget 임포트 및 조건부 렌더링 추가
+
+### Step 8: 테스트 & 최적화
+
+- [x] 기본 구현 완료
+- [x] 린터 에러 체크 완료
+- [ ] 브라우저 테스트 필요 (사용자 테스트)
+- [ ] 다양한 타임존 테스트 (향후)
+- [ ] 성능 최적화 (향후)
+- [ ] 테마 전환 테스트 (향후)
+
+---
+
+## 🚀 향후 개선 사항
+
+### 추가 기능
+
+- [ ] **세계 시계**: 여러 타임존 동시 표시
+- [ ] **알람 기능**: 특정 시간에 알림
+- [ ] **타이머/스톱워치**: 시간 측정 기능
+- [ ] **애니메이션**: 부드러운 시계 애니메이션
+- [ ] **사운드**: 정각마다 종소리
+
+### 디자인 개선
+
+- [ ] 더 많은 테마 추가
+- [ ] 커스텀 색상 선택
+- [ ] 폰트 선택 옵션
+- [ ] 배경 이미지 지원
+
+---
+
+## 📚 참고 자료
+
+### 타임존 목록
+
+```typescript
+const TIMEZONES = [
+  { label: "서울", value: "Asia/Seoul", offset: "+9" },
+  { label: "도쿄", value: "Asia/Tokyo", offset: "+9" },
+  { label: "베이징", value: "Asia/Shanghai", offset: "+8" },
+  { label: "뉴욕", value: "America/New_York", offset: "-5" },
+  { label: "런던", value: "Europe/London", offset: "+0" },
+  { label: "LA", value: "America/Los_Angeles", offset: "-8" },
+  { label: "파리", value: "Europe/Paris", offset: "+1" },
+  { label: "시드니", value: "Australia/Sydney", offset: "+11" },
+];
+```
+
+### Date Format 예시
+
+```typescript
+// 24시간 형식
+"14:30:45";
+
+// 12시간 형식
+"2:30:45 PM";
+
+// 날짜 포함
+"2025년 1월 15일 (수) 14:30:45";
+
+// 영문 날짜
+"Wednesday, January 15, 2025 2:30:45 PM";
+```
+
+---
+
+## ✅ 완료 기준
+
+- [x] 시계가 실시간으로 정확하게 업데이트됨 (1초마다 업데이트)
+- [x] 아날로그/디지털 스타일 모두 정상 작동 (코드 구현 완료)
+- [x] 타임존 변경이 즉시 반영됨 (Intl.DateTimeFormat 사용)
+- [x] 설정 모달에서 모든 옵션 변경 가능 ✨ (ClockConfigModal 완성!)
+- [x] 테마 전환이 자연스러움 (4가지 테마 구현)
+- [x] 메모리 누수 없음 (컴포넌트 unmount 시 타이머 정리 - useEffect cleanup)
+- [x] 크기 조절 시 레이아웃이 깨지지 않음 (그리드 스냅 적용)
+
+---
+
+## 💡 팁
+
+### 성능 최적화
+
+```tsx
+// ❌ 나쁜 예: 컴포넌트 전체 리렌더링
+setInterval(() => {
+  setTime(new Date());
+}, 1000);
+
+// ✅ 좋은 예: 필요한 부분만 업데이트 + cleanup
+useEffect(() => {
+  const timer = setInterval(() => {
+    setTime(new Date());
+  }, 1000);
+
+  return () => clearInterval(timer); // cleanup
+}, []);
+```
+
+### 타임존 처리
+
+```typescript
+// Intl.DateTimeFormat 사용 (권장)
+const formatter = new Intl.DateTimeFormat("ko-KR", {
+  timeZone: "America/New_York",
+  hour: "2-digit",
+  minute: "2-digit",
+});
+console.log(formatter.format(new Date())); // "05:30"
+```
+
+---
+
+---
+
+## 🎉 구현 완료!
+
+**구현 날짜**: 2025년 1월 15일
+
+### ✅ 완료된 기능
+
+1. **타입 정의** - `ClockConfig` 인터페이스 및 `'clock'` subtype 추가
+2. **디지털 시계** - 타임존, 날짜, 초 표시, 12/24시간 형식 지원
+3. **아날로그 시계** - SVG 기반 시계판, 시침/분침/초침 애니메이션
+4. **메인 위젯** - 실시간 업데이트, 스타일별 조건부 렌더링
+5. **통합** - CanvasElement, DashboardDesigner, Sidebar 연동
+6. **테마** - light, dark, blue, gradient 4가지 테마
+
+### ✅ 최종 완료 기능
+
+1. **시계 위젯 컴포넌트** - 아날로그/디지털/둘다
+2. **실시간 업데이트** - 1초마다 정확한 시간
+3. **타임존 지원** - 8개 주요 도시
+4. **4가지 테마** - light, dark, blue, gradient
+5. **설정 모달** - 모든 옵션 UI로 변경 가능 ✨
+
+### 🔜 향후 추가 예정
+
+- 세계 시계 (여러 타임존 동시 표시)
+- 알람 기능
+- 타이머/스톱워치
+- 커스텀 색상 선택
+
+---
+
+## 🎯 사용 방법
+
+1. **시계 추가**: 우측 사이드바에서 "⏰ 시계 위젯" 드래그
+2. **설정 변경**: 시계 위에 마우스 올리고 ⚙️ 버튼 클릭
+3. **옵션 선택**:
+   - 스타일 (디지털/아날로그/둘다)
+   - 타임존 (서울, 뉴욕, 런던 등)
+   - 테마 (4가지)
+   - 날짜/초/24시간 형식
+
+이제 완벽하게 작동하는 시계 위젯을 사용할 수 있습니다! 🚀⏰

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -17,6 +17,14 @@ const ExchangeWidget = dynamic(() => import("@/components/dashboard/widgets/Exch
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });
 
+const CalculatorWidget = dynamic(() => import("@/components/dashboard/widgets/CalculatorWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
+// 시계 위젯 임포트
+import { ClockWidget } from "./widgets/ClockWidget";
+
 interface CanvasElementProps {
   element: DashboardElement;
   isSelected: boolean;
@@ -276,6 +284,8 @@ export function CanvasElement({
           return "bg-gradient-to-br from-pink-400 to-yellow-400";
         case "weather":
           return "bg-gradient-to-br from-cyan-400 to-indigo-800";
+        case "clock":
+          return "bg-gradient-to-br from-teal-400 to-cyan-600";
         default:
           return "bg-gray-200";
       }
@@ -305,8 +315,8 @@ export function CanvasElement({
       <div className="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 p-3">
         <span className="text-sm font-bold text-gray-800">{element.title}</span>
         <div className="flex gap-1">
-          {/* 설정 버튼 */}
+          {/* 설정 버튼 (시계 위젯은 자체 설정 UI 사용) */}
-          {onConfigure && (
+          {onConfigure && !(element.type === "widget" && element.subtype === "clock") && (
             <button
               className="hover:bg-accent0 flex h-6 w-6 items-center justify-center rounded text-gray-400 transition-colors duration-200 hover:text-white"
               onClick={() => onConfigure(element)}
@@ -349,18 +359,33 @@ export function CanvasElement({
           </div>
         ) : element.type === "widget" && element.subtype === "weather" ? (
           // 날씨 위젯 렌더링
-          <div className="h-full w-full widget-interactive-area">
+          <div className="widget-interactive-area h-full w-full">
             <WeatherWidget city={element.config?.city || "서울"} refreshInterval={600000} />
           </div>
         ) : element.type === "widget" && element.subtype === "exchange" ? (
           // 환율 위젯 렌더링
-          <div className="h-full w-full widget-interactive-area">
+          <div className="widget-interactive-area h-full w-full">
             <ExchangeWidget
               baseCurrency={element.config?.baseCurrency || "KRW"}
               targetCurrency={element.config?.targetCurrency || "USD"}
               refreshInterval={600000}
             />
           </div>
+        ) : element.type === "widget" && element.subtype === "clock" ? (
+          // 시계 위젯 렌더링
+          <div className="h-full w-full">
+            <ClockWidget
+              element={element}
+              onConfigUpdate={(newConfig) => {
+                onUpdate(element.id, { clockConfig: newConfig });
+              }}
+            />
+          </div>
+        ) : element.type === "widget" && element.subtype === "calculator" ? (
+          // 계산기 위젯 렌더링
+          <div className="widget-interactive-area h-full w-full">
+            <CalculatorWidget />
+          </div>
         ) : (
           // 기타 위젯 렌더링
           <div

frontend/components/admin/dashboard/DashboardCanvas.tsx

@@ -13,6 +13,7 @@ interface DashboardCanvasProps {
   onRemoveElement: (id: string) => void;
   onSelectElement: (id: string | null) => void;
   onConfigureElement?: (element: DashboardElement) => void;
+  backgroundColor?: string;
 }
 
 /**
@@ -32,6 +33,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
       onRemoveElement,
       onSelectElement,
       onConfigureElement,
+      backgroundColor = '#f9fafb',
     },
     ref,
   ) => {
@@ -104,8 +106,9 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
     return (
       <div
         ref={ref}
-        className={`relative rounded-lg bg-gray-50 shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
+        className={`relative rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
         style={{
+          backgroundColor,
           width: `${GRID_CONFIG.CANVAS_WIDTH}px`,
           minHeight: `${minCanvasHeight}px`,
           // 12 컬럼 그리드 배경

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -232,7 +232,7 @@ export default function DashboardDesigner() {
       <div className="relative flex-1 overflow-auto border-r-2 border-gray-300 bg-gray-100">
         {/* 편집 중인 대시보드 표시 */}
         {dashboardTitle && (
-          <div className="bg-accent0 absolute top-6 left-6 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
+          <div className="bg-accent0 absolute left-6 top-6 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
             📝 편집 중: {dashboardTitle}
           </div>
         )}
@@ -289,6 +289,10 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
         return "💱 환율 위젯";
       case "weather":
         return "☁️ 날씨 위젯";
+      case "clock":
+        return "⏰ 시계 위젯";
+      case "calculator":
+        return "🧮 계산기 위젯";
       default:
         return "🔧 위젯";
     }
@@ -315,6 +319,10 @@ function getElementContent(type: ElementType, subtype: ElementSubtype): string {
         return "USD: ₩1,320\nJPY: ₩900\nEUR: ₩1,450";
       case "weather":
         return "서울\n23°C\n구름 많음";
+      case "clock":
+        return "clock";
+      case "calculator":
+        return "calculator";
       default:
         return "위젯 내용이 여기에 표시됩니다";
     }

frontend/components/admin/dashboard/DashboardSidebar.tsx

@@ -101,7 +101,23 @@ export function DashboardSidebar() {
             type="widget"
             subtype="weather"
             onDragStart={handleDragStart}
-            className="border-l-4 border-orange-500"
+            className="border-l-4 border-cyan-500"
+          />
+          <DraggableItem
+            icon="🧮"
+            title="계산기 위젯"
+            type="widget"
+            subtype="calculator"
+            onDragStart={handleDragStart}
+            className="border-l-4 border-green-500"
+          />
+          <DraggableItem
+            icon="⏰"
+            title="시계 위젯"
+            type="widget"
+            subtype="clock"
+            onDragStart={handleDragStart}
+            className="border-l-4 border-teal-500"
           />
         </div>
       </div>

frontend/components/admin/dashboard/DashboardToolbar.tsx

@@ -1,17 +1,20 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 
 interface DashboardToolbarProps {
   onClearCanvas: () => void;
   onSaveLayout: () => void;
+  canvasBackgroundColor: string;
+  onCanvasBackgroundColorChange: (color: string) => void;
 }
 
 /**
  * 대시보드 툴바 컴포넌트
  * - 전체 삭제, 레이아웃 저장 등 주요 액션 버튼
  */
-export function DashboardToolbar({ onClearCanvas, onSaveLayout }: DashboardToolbarProps) {
+export function DashboardToolbar({ onClearCanvas, onSaveLayout, canvasBackgroundColor, onCanvasBackgroundColorChange }: DashboardToolbarProps) {
+  const [showColorPicker, setShowColorPicker] = useState(false);
   return (
     <div className="absolute top-5 left-5 bg-white p-3 rounded-lg shadow-lg z-50 flex gap-3">
       <button
@@ -37,6 +40,71 @@ export function DashboardToolbar({ onClearCanvas, onSaveLayout }: DashboardToolb
       >
         💾 레이아웃 저장
       </button>
+
+      {/* 캔버스 배경색 변경 버튼 */}
+      <div className="relative">
+        <button
+          onClick={() => setShowColorPicker(!showColorPicker)}
+          className="
+            px-4 py-2 border border-gray-300 bg-white rounded-md
+            text-sm font-medium text-gray-700
+            hover:bg-gray-50 hover:border-gray-400
+            transition-colors duration-200
+            flex items-center gap-2
+          "
+        >
+          🎨 캔버스 색상
+          <div 
+            className="w-4 h-4 rounded border border-gray-300"
+            style={{ backgroundColor: canvasBackgroundColor }}
+          />
+        </button>
+
+        {/* 색상 선택 패널 */}
+        {showColorPicker && (
+          <div className="absolute top-full left-0 mt-2 bg-white p-4 rounded-lg shadow-xl z-50 border border-gray-200 w-[280px]">
+            <div className="flex items-center gap-3 mb-3">
+              <input
+                type="color"
+                value={canvasBackgroundColor}
+                onChange={(e) => onCanvasBackgroundColorChange(e.target.value)}
+                className="h-10 w-16 border border-gray-300 rounded cursor-pointer"
+              />
+              <input
+                type="text"
+                value={canvasBackgroundColor}
+                onChange={(e) => onCanvasBackgroundColorChange(e.target.value)}
+                placeholder="#ffffff"
+                className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded"
+              />
+            </div>
+
+            {/* 프리셋 색상 */}
+            <div className="grid grid-cols-6 gap-2 mb-3">
+              {[
+                '#ffffff', '#f9fafb', '#f3f4f6', '#e5e7eb',
+                '#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b',
+                '#10b981', '#06b6d4', '#6366f1', '#84cc16',
+              ].map((color) => (
+                <button
+                  key={color}
+                  onClick={() => onCanvasBackgroundColorChange(color)}
+                  className={`h-8 rounded border-2 ${canvasBackgroundColor === color ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'}`}
+                  style={{ backgroundColor: color }}
+                  title={color}
+                />
+              ))}
+            </div>
+
+            <button
+              onClick={() => setShowColorPicker(false)}
+              className="w-full px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
+            >
+              닫기
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -1,9 +1,10 @@
-'use client';
+"use client";
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback } from "react";
-import { DashboardElement, ChartDataSource, ChartConfig, QueryResult } from './types';
+import { DashboardElement, ChartDataSource, ChartConfig, QueryResult, ClockConfig } from "./types";
-import { QueryEditor } from './QueryEditor';
+import { QueryEditor } from "./QueryEditor";
-import { ChartConfigPanel } from './ChartConfigPanel';
+import { ChartConfigPanel } from "./ChartConfigPanel";
+import { ClockConfigModal } from "./widgets/ClockConfigModal";
 
 interface ElementConfigModalProps {
   element: DashboardElement;
@@ -20,13 +21,11 @@ interface ElementConfigModalProps {
  */
 export function ElementConfigModal({ element, isOpen, onClose, onSave }: ElementConfigModalProps) {
   const [dataSource, setDataSource] = useState<ChartDataSource>(
-    element.dataSource || { type: 'database', refreshInterval: 30000 }
+    element.dataSource || { type: "database", refreshInterval: 30000 },
-  );
-  const [chartConfig, setChartConfig] = useState<ChartConfig>(
-    element.chartConfig || {}
   );
+  const [chartConfig, setChartConfig] = useState<ChartConfig>(element.chartConfig || {});
   const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
-  const [activeTab, setActiveTab] = useState<'query' | 'chart'>('query');
+  const [activeTab, setActiveTab] = useState<"query" | "chart">("query");
 
   // 데이터 소스 변경 처리
   const handleDataSourceChange = useCallback((newDataSource: ChartDataSource) => {
@@ -43,7 +42,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     setQueryResult(result);
     // 쿼리 결과가 나오면 자동으로 차트 설정 탭으로 이동
     if (result.rows.length > 0) {
-      setActiveTab('chart');
+      setActiveTab("chart");
     }
   }, []);
 
@@ -58,26 +57,56 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     onClose();
   }, [element, dataSource, chartConfig, onSave, onClose]);
 
+  // 시계 위젯 설정 저장
+  const handleClockConfigSave = useCallback(
+    (clockConfig: ClockConfig) => {
+      const updatedElement: DashboardElement = {
+        ...element,
+        clockConfig,
+      };
+      onSave(updatedElement);
+    },
+    [element, onSave],
+  );
+
   // 모달이 열려있지 않으면 렌더링하지 않음
   if (!isOpen) return null;
 
+  // 시계 위젯은 자체 설정 UI를 가지고 있으므로 모달 표시하지 않음
+  if (element.type === "widget" && element.subtype === "clock") {
+    return null;
+  }
+
+  // 이전 코드 호환성 유지 (아래 주석 처리된 코드는 제거 예정)
+  if (false && element.type === "widget" && element.subtype === "clock") {
+    return (
+      <ClockConfigModal
+        config={
+          element.clockConfig || {
+            style: "digital",
+            timezone: "Asia/Seoul",
+            showDate: true,
+            showSeconds: true,
+            format24h: true,
+            theme: "light",
+          }
+        }
+        onSave={handleClockConfigSave}
+        onClose={onClose}
+      />
+    );
+  }
+
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl h-[80vh] flex flex-col">
+      <div className="flex h-[80vh] w-full max-w-4xl flex-col rounded-lg bg-white shadow-xl">
         {/* 모달 헤더 */}
-        <div className="flex justify-between items-center p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between border-b border-gray-200 p-6">
           <div>
-            <h2 className="text-xl font-semibold text-gray-800">
+            <h2 className="text-xl font-semibold text-gray-800">{element.title} 설정</h2>
-              {element.title} 설정
+            <p className="text-muted-foreground mt-1 text-sm">데이터 소스와 차트 설정을 구성하세요</p>
-            </h2>
-            <p className="text-sm text-muted-foreground mt-1">
-              데이터 소스와 차트 설정을 구성하세요
-            </p>
           </div>
-          <button
+          <button onClick={onClose} className="hover:text-muted-foreground text-2xl text-gray-400">
-            onClick={onClose}
-            className="text-gray-400 hover:text-muted-foreground text-2xl"
-          >
             ×
           </button>
         </div>
@@ -85,28 +114,26 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
         {/* 탭 네비게이션 */}
         <div className="flex border-b border-gray-200">
           <button
-            onClick={() => setActiveTab('query')}
+            onClick={() => setActiveTab("query")}
-            className={`
+            className={`border-b-2 px-6 py-3 text-sm font-medium transition-colors ${
-              px-6 py-3 text-sm font-medium border-b-2 transition-colors
+              activeTab === "query"
-              ${activeTab === 'query' 
+                ? "border-primary text-primary bg-accent"
-                ? 'border-primary text-primary bg-accent' 
+                : "border-transparent text-gray-500 hover:text-gray-700"
-                : 'border-transparent text-gray-500 hover:text-gray-700'}
+            } `}
-            `}
           >
             📝 쿼리 & 데이터
           </button>
           <button
-            onClick={() => setActiveTab('chart')}
+            onClick={() => setActiveTab("chart")}
-            className={`
+            className={`border-b-2 px-6 py-3 text-sm font-medium transition-colors ${
-              px-6 py-3 text-sm font-medium border-b-2 transition-colors
+              activeTab === "chart"
-              ${activeTab === 'chart' 
+                ? "border-primary text-primary bg-accent"
-                ? 'border-primary text-primary bg-accent' 
+                : "border-transparent text-gray-500 hover:text-gray-700"
-                : 'border-transparent text-gray-500 hover:text-gray-700'}
+            } `}
-            `}
           >
             📊 차트 설정
             {queryResult && (
-              <span className="ml-2 px-2 py-0.5 bg-green-100 text-green-800 text-xs rounded-full">
+              <span className="ml-2 rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800">
                 {queryResult.rows.length}
               </span>
             )}
@@ -115,7 +142,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
 
         {/* 탭 내용 */}
         <div className="flex-1 overflow-auto p-6">
-          {activeTab === 'query' && (
+          {activeTab === "query" && (
             <QueryEditor
               dataSource={dataSource}
               onDataSourceChange={handleDataSourceChange}
@@ -123,41 +150,32 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
             />
           )}
 
-          {activeTab === 'chart' && (
+          {activeTab === "chart" && (
-            <ChartConfigPanel
+            <ChartConfigPanel config={chartConfig} queryResult={queryResult} onConfigChange={handleChartConfigChange} />
-              config={chartConfig}
-              queryResult={queryResult}
-              onConfigChange={handleChartConfigChange}
-            />
           )}
         </div>
 
         {/* 모달 푸터 */}
-        <div className="flex justify-between items-center p-6 border-t border-gray-200">
+        <div className="flex items-center justify-between border-t border-gray-200 p-6">
           <div className="text-sm text-gray-500">
             {dataSource.query && (
               <>
-                💾 쿼리: {dataSource.query.length > 50 
+                💾 쿼리: {dataSource.query.length > 50 ? `${dataSource.query.substring(0, 50)}...` : dataSource.query}
-                  ? `${dataSource.query.substring(0, 50)}...` 
-                  : dataSource.query}
               </>
             )}
           </div>
-          
+
           <div className="flex gap-3">
             <button
               onClick={onClose}
-              className="px-4 py-2 text-muted-foreground border border-gray-300 rounded-lg hover:bg-gray-50"
+              className="text-muted-foreground rounded-lg border border-gray-300 px-4 py-2 hover:bg-gray-50"
             >
               취소
             </button>
             <button
               onClick={handleSave}
-              disabled={!dataSource.query || (!chartConfig.xAxis || !chartConfig.yAxis)}
+              disabled={!dataSource.query || !chartConfig.xAxis || !chartConfig.yAxis}
-              className="
+              className="bg-accent0 rounded-lg px-4 py-2 text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-300"
-                px-4 py-2 bg-accent0 text-white rounded-lg
-                hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed
-              "
             >
               저장
             </button>

frontend/components/admin/dashboard/types.ts

@@ -2,11 +2,20 @@
  * 대시보드 관리 시스템 타입 정의
  */
 
-export type ElementType = 'chart' | 'widget';
+export type ElementType = "chart" | "widget";
 
-export type ElementSubtype = 
+export type ElementSubtype =
-  | 'bar' | 'pie' | 'line' | 'area' | 'stacked-bar' | 'donut' | 'combo'  // 차트 타입
+  | "bar"
-  | 'exchange' | 'weather'; // 위젯 타입
+  | "pie"
+  | "line"
+  | "area"
+  | "stacked-bar"
+  | "donut"
+  | "combo" // 차트 타입
+  | "exchange"
+  | "weather"
+  | "clock"
+  | "calculator"; // 위젯 타입
 
 export interface Position {
   x: number;
@@ -26,8 +35,9 @@ export interface DashboardElement {
   size: Size;
   title: string;
   content: string;
-  dataSource?: ChartDataSource;  // 데이터 소스 설정
+  dataSource?: ChartDataSource; // 데이터 소스 설정
-  chartConfig?: ChartConfig;     // 차트 설정
+  chartConfig?: ChartConfig; // 차트 설정
+  clockConfig?: ClockConfig; // 시계 설정
 }
 
 export interface DragData {
@@ -36,33 +46,44 @@ export interface DragData {
 }
 
 export interface ResizeHandle {
-  direction: 'nw' | 'ne' | 'sw' | 'se';
+  direction: "nw" | "ne" | "sw" | "se";
   cursor: string;
 }
 
 export interface ChartDataSource {
-  type: 'api' | 'database' | 'static';
+  type: "api" | "database" | "static";
-  endpoint?: string;        // API 엔드포인트
+  endpoint?: string; // API 엔드포인트
-  query?: string;          // SQL 쿼리
+  query?: string; // SQL 쿼리
   refreshInterval?: number; // 자동 새로고침 간격 (ms)
-  filters?: any[];         // 필터 조건
+  filters?: any[]; // 필터 조건
-  lastExecuted?: string;   // 마지막 실행 시간
+  lastExecuted?: string; // 마지막 실행 시간
 }
 
 export interface ChartConfig {
-  xAxis?: string;                // X축 데이터 필드
+  xAxis?: string; // X축 데이터 필드
-  yAxis?: string | string[];     // Y축 데이터 필드 (단일 또는 다중)
+  yAxis?: string | string[]; // Y축 데이터 필드 (단일 또는 다중)
-  groupBy?: string;              // 그룹핑 필드
+  groupBy?: string; // 그룹핑 필드
-  aggregation?: 'sum' | 'avg' | 'count' | 'max' | 'min';
+  aggregation?: "sum" | "avg" | "count" | "max" | "min";
-  colors?: string[];             // 차트 색상
+  colors?: string[]; // 차트 색상
-  title?: string;                // 차트 제목
+  title?: string; // 차트 제목
-  showLegend?: boolean;          // 범례 표시 여부
+  showLegend?: boolean; // 범례 표시 여부
 }
 
 export interface QueryResult {
-  columns: string[];       // 컬럼명 배열
+  columns: string[]; // 컬럼명 배열
   rows: Record<string, any>[]; // 데이터 행 배열
-  totalRows: number;       // 전체 행 수
+  totalRows: number; // 전체 행 수
-  executionTime: number;   // 실행 시간 (ms)
+  executionTime: number; // 실행 시간 (ms)
-  error?: string;          // 오류 메시지
+  error?: string; // 오류 메시지
+}
+
+// 시계 위젯 설정
+export interface ClockConfig {
+  style: "analog" | "digital" | "both"; // 시계 스타일
+  timezone: string; // 타임존 (예: 'Asia/Seoul')
+  showDate: boolean; // 날짜 표시 여부
+  showSeconds: boolean; // 초 표시 여부 (디지털)
+  format24h: boolean; // 24시간 형식 (true) vs 12시간 형식 (false)
+  theme: "light" | "dark" | "custom"; // 테마
+  customColor?: string; // 사용자 지정 색상 (custom 테마일 때)
 }

frontend/components/admin/dashboard/widgets/AnalogClock.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+interface AnalogClockProps {
+  time: Date;
+  theme: "light" | "dark" | "custom";
+  timezone?: string;
+  customColor?: string; // 사용자 지정 색상
+}
+
+/**
+ * 아날로그 시계 컴포넌트
+ * - SVG 기반 아날로그 시계
+ * - 시침, 분침, 초침 애니메이션
+ * - 테마별 색상 지원
+ * - 타임존 표시
+ */
+export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockProps) {
+  const hours = time.getHours() % 12;
+  const minutes = time.getMinutes();
+  const seconds = time.getSeconds();
+
+  // 각도 계산 (12시 방향을 0도로, 시계방향으로 회전)
+  const secondAngle = seconds * 6 - 90; // 6도씩 회전 (360/60)
+  const minuteAngle = minutes * 6 + seconds * 0.1 - 90; // 6도씩 + 초당 0.1도
+  const hourAngle = hours * 30 + minutes * 0.5 - 90; // 30도씩 + 분당 0.5도
+
+  // 테마별 색상
+  const colors = getThemeColors(theme, customColor);
+
+  // 타임존 라벨
+  const timezoneLabel = timezone ? getTimezoneLabel(timezone) : "";
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center p-2">
+      <svg viewBox="0 0 200 200" className="h-full max-h-[200px] w-full max-w-[200px]">
+        {/* 시계판 배경 */}
+        <circle cx="100" cy="100" r="98" fill={colors.background} stroke={colors.border} strokeWidth="2" />
+
+        {/* 눈금 표시 */}
+        {[...Array(60)].map((_, i) => {
+          const angle = (i * 6 - 90) * (Math.PI / 180);
+          const isHour = i % 5 === 0;
+          const startRadius = isHour ? 85 : 90;
+          const endRadius = 95;
+
+          return (
+            <line
+              key={i}
+              x1={100 + startRadius * Math.cos(angle)}
+              y1={100 + startRadius * Math.sin(angle)}
+              x2={100 + endRadius * Math.cos(angle)}
+              y2={100 + endRadius * Math.sin(angle)}
+              stroke={colors.tick}
+              strokeWidth={isHour ? 2 : 1}
+            />
+          );
+        })}
+
+        {/* 숫자 표시 (12시, 3시, 6시, 9시) */}
+        {[12, 3, 6, 9].map((num, idx) => {
+          const angle = (idx * 90 - 90) * (Math.PI / 180);
+          const radius = 70;
+          const x = 100 + radius * Math.cos(angle);
+          const y = 100 + radius * Math.sin(angle);
+
+          return (
+            <text
+              key={num}
+              x={x}
+              y={y}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fontSize="20"
+              fontWeight="bold"
+              fill={colors.number}
+            >
+              {num}
+            </text>
+          );
+        })}
+
+        {/* 시침 (짧고 굵음) */}
+        <line
+          x1="100"
+          y1="100"
+          x2={100 + 40 * Math.cos((hourAngle * Math.PI) / 180)}
+          y2={100 + 40 * Math.sin((hourAngle * Math.PI) / 180)}
+          stroke={colors.hourHand}
+          strokeWidth="6"
+          strokeLinecap="round"
+        />
+
+        {/* 분침 (중간 길이) */}
+        <line
+          x1="100"
+          y1="100"
+          x2={100 + 60 * Math.cos((minuteAngle * Math.PI) / 180)}
+          y2={100 + 60 * Math.sin((minuteAngle * Math.PI) / 180)}
+          stroke={colors.minuteHand}
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+
+        {/* 초침 (가늘고 긴) */}
+        <line
+          x1="100"
+          y1="100"
+          x2={100 + 75 * Math.cos((secondAngle * Math.PI) / 180)}
+          y2={100 + 75 * Math.sin((secondAngle * Math.PI) / 180)}
+          stroke={colors.secondHand}
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+
+        {/* 중심점 */}
+        <circle cx="100" cy="100" r="6" fill={colors.center} />
+        <circle cx="100" cy="100" r="3" fill={colors.background} />
+      </svg>
+
+      {/* 타임존 표시 */}
+      {timezoneLabel && (
+        <div className="mt-1 text-center text-xs font-medium" style={{ color: colors.number }}>
+          {timezoneLabel}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 타임존 라벨 반환
+ */
+function getTimezoneLabel(timezone: string): string {
+  const timezoneLabels: Record<string, string> = {
+    "Asia/Seoul": "서울 (KST)",
+    "Asia/Tokyo": "도쿄 (JST)",
+    "Asia/Shanghai": "베이징 (CST)",
+    "America/New_York": "뉴욕 (EST)",
+    "America/Los_Angeles": "LA (PST)",
+    "Europe/London": "런던 (GMT)",
+    "Europe/Paris": "파리 (CET)",
+    "Australia/Sydney": "시드니 (AEDT)",
+  };
+
+  return timezoneLabels[timezone] || timezone.split("/")[1];
+}
+
+/**
+ * 테마별 색상 반환
+ */
+function getThemeColors(theme: string, customColor?: string) {
+  if (theme === "custom" && customColor) {
+    // 사용자 지정 색상 사용 (약간 밝게/어둡게 조정)
+    const lighterColor = adjustColor(customColor, 40);
+    const darkerColor = adjustColor(customColor, -40);
+
+    return {
+      background: lighterColor,
+      border: customColor,
+      tick: customColor,
+      number: darkerColor,
+      hourHand: darkerColor,
+      minuteHand: customColor,
+      secondHand: "#ef4444",
+      center: darkerColor,
+    };
+  }
+
+  const themes = {
+    light: {
+      background: "#ffffff",
+      border: "#d1d5db",
+      tick: "#9ca3af",
+      number: "#374151",
+      hourHand: "#1f2937",
+      minuteHand: "#4b5563",
+      secondHand: "#ef4444",
+      center: "#1f2937",
+    },
+    dark: {
+      background: "#1f2937",
+      border: "#4b5563",
+      tick: "#6b7280",
+      number: "#f9fafb",
+      hourHand: "#f9fafb",
+      minuteHand: "#d1d5db",
+      secondHand: "#ef4444",
+      center: "#f9fafb",
+    },
+    custom: {
+      background: "#e0e7ff",
+      border: "#6366f1",
+      tick: "#818cf8",
+      number: "#4338ca",
+      hourHand: "#4338ca",
+      minuteHand: "#6366f1",
+      secondHand: "#ef4444",
+      center: "#4338ca",
+    },
+  };
+
+  return themes[theme as keyof typeof themes] || themes.light;
+}
+
+/**
+ * 색상 밝기 조정
+ */
+function adjustColor(color: string, amount: number): string {
+  const clamp = (num: number) => Math.min(255, Math.max(0, num));
+
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  const newR = clamp(r + amount);
+  const newG = clamp(g + amount);
+  const newB = clamp(b + amount);
+
+  return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+}

frontend/components/admin/dashboard/widgets/ClockConfigModal.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { useState } from "react";
+import { ClockConfig } from "../types";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import { X } from "lucide-react";
+
+interface ClockConfigModalProps {
+  config: ClockConfig;
+  onSave: (config: ClockConfig) => void;
+  onClose: () => void;
+}
+
+/**
+ * 시계 위젯 설정 모달
+ * - 스타일 선택 (아날로그/디지털/둘다)
+ * - 타임존 선택
+ * - 테마 선택
+ * - 옵션 토글 (날짜, 초, 24시간)
+ */
+export function ClockConfigModal({ config, onSave, onClose }: ClockConfigModalProps) {
+  const [localConfig, setLocalConfig] = useState<ClockConfig>(config);
+
+  const handleSave = () => {
+    onSave(localConfig);
+    onClose();
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent className="max-h-[90vh] max-w-2xl overflow-hidden p-0">
+        <DialogHeader className="border-b p-6">
+          <DialogTitle className="flex items-center gap-2 text-xl">
+            <span>⏰</span>
+            시계 위젯 설정
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* 내용 - 스크롤 가능 */}
+        <div className="flex-1 space-y-6 overflow-y-auto px-6 py-4">
+          {/* 스타일 선택 */}
+          <div className="space-y-3">
+            <Label className="text-sm font-semibold">시계 스타일</Label>
+            <div className="grid grid-cols-3 gap-3">
+              {[
+                { value: "digital", label: "디지털", icon: "🔢" },
+                { value: "analog", label: "아날로그", icon: "🕐" },
+                { value: "both", label: "둘 다", icon: "⏰" },
+              ].map((style) => (
+                <Button
+                  key={style.value}
+                  type="button"
+                  variant={localConfig.style === style.value ? "default" : "outline"}
+                  onClick={() => setLocalConfig({ ...localConfig, style: style.value as any })}
+                  className="flex h-auto flex-col items-center gap-2 p-4"
+                >
+                  <span className="text-3xl">{style.icon}</span>
+                  <span className="text-sm font-medium">{style.label}</span>
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          {/* 타임존 선택 */}
+          <div className="space-y-3">
+            <Label className="text-sm font-semibold">타임존</Label>
+            <Select
+              value={localConfig.timezone}
+              onValueChange={(value) => setLocalConfig({ ...localConfig, timezone: value })}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Asia/Seoul">🇰🇷 서울 (KST)</SelectItem>
+                <SelectItem value="Asia/Tokyo">🇯🇵 도쿄 (JST)</SelectItem>
+                <SelectItem value="Asia/Shanghai">🇨🇳 베이징 (CST)</SelectItem>
+                <SelectItem value="America/New_York">🇺🇸 뉴욕 (EST)</SelectItem>
+                <SelectItem value="America/Los_Angeles">🇺🇸 LA (PST)</SelectItem>
+                <SelectItem value="Europe/London">🇬🇧 런던 (GMT)</SelectItem>
+                <SelectItem value="Europe/Paris">🇫🇷 파리 (CET)</SelectItem>
+                <SelectItem value="Australia/Sydney">🇦🇺 시드니 (AEDT)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 테마 선택 */}
+          <div className="space-y-3">
+            <Label className="text-sm font-semibold">테마</Label>
+            <div className="grid grid-cols-3 gap-3">
+              {[
+                {
+                  value: "light",
+                  label: "Light",
+                  gradient: "bg-gradient-to-br from-white to-gray-100",
+                  text: "text-gray-900",
+                },
+                {
+                  value: "dark",
+                  label: "Dark",
+                  gradient: "bg-gradient-to-br from-gray-800 to-gray-900",
+                  text: "text-white",
+                },
+                {
+                  value: "custom",
+                  label: "사용자 지정",
+                  gradient: "bg-gradient-to-br from-blue-400 to-purple-600",
+                  text: "text-white",
+                },
+              ].map((theme) => (
+                <Button
+                  key={theme.value}
+                  type="button"
+                  variant="outline"
+                  onClick={() => setLocalConfig({ ...localConfig, theme: theme.value as any })}
+                  className={`relative h-auto overflow-hidden p-0 ${
+                    localConfig.theme === theme.value ? "ring-primary ring-2 ring-offset-2" : ""
+                  }`}
+                >
+                  <div className={`${theme.gradient} ${theme.text} w-full rounded p-3 text-center text-xs font-medium`}>
+                    {theme.label}
+                  </div>
+                </Button>
+              ))}
+            </div>
+
+            {/* 사용자 지정 색상 선택 */}
+            {localConfig.theme === "custom" && (
+              <Card className="border p-4">
+                <Label className="mb-2 block text-sm font-medium">배경 색상 선택</Label>
+                <div className="flex items-center gap-3">
+                  <Input
+                    type="color"
+                    value={localConfig.customColor || "#3b82f6"}
+                    onChange={(e) => setLocalConfig({ ...localConfig, customColor: e.target.value })}
+                    className="h-12 w-20 cursor-pointer"
+                  />
+                  <div className="flex-1">
+                    <Input
+                      type="text"
+                      value={localConfig.customColor || "#3b82f6"}
+                      onChange={(e) => setLocalConfig({ ...localConfig, customColor: e.target.value })}
+                      placeholder="#3b82f6"
+                      className="font-mono"
+                    />
+                    <p className="text-muted-foreground mt-1 text-xs">시계의 배경색이나 강조색으로 사용됩니다</p>
+                  </div>
+                </div>
+              </Card>
+            )}
+          </div>
+
+          {/* 옵션 토글 */}
+          <div className="space-y-3">
+            <Label className="text-sm font-semibold">표시 옵션</Label>
+            <div className="grid grid-cols-3 gap-3">
+              {/* 날짜 표시 */}
+              <Card className="hover:bg-accent flex cursor-pointer flex-col items-center justify-center border p-4 text-center transition-colors">
+                <span className="mb-2 text-2xl">📅</span>
+                <Label className="mb-1 cursor-pointer text-sm font-medium">날짜 표시</Label>
+                <Switch
+                  checked={localConfig.showDate}
+                  onCheckedChange={(checked) => setLocalConfig({ ...localConfig, showDate: checked })}
+                />
+              </Card>
+
+              {/* 초 표시 */}
+              <Card className="hover:bg-accent flex cursor-pointer flex-col items-center justify-center border p-4 text-center transition-colors">
+                <span className="mb-2 text-2xl">⏱️</span>
+                <Label className="mb-1 cursor-pointer text-sm font-medium">초 표시</Label>
+                <Switch
+                  checked={localConfig.showSeconds}
+                  onCheckedChange={(checked) => setLocalConfig({ ...localConfig, showSeconds: checked })}
+                />
+              </Card>
+
+              {/* 24시간 형식 */}
+              <Card className="hover:bg-accent flex cursor-pointer flex-col items-center justify-center border p-4 text-center transition-colors">
+                <span className="mb-2 text-2xl">🕐</span>
+                <Label className="mb-1 cursor-pointer text-sm font-medium">24시간 형식</Label>
+                <Switch
+                  checked={localConfig.format24h}
+                  onCheckedChange={(checked) => setLocalConfig({ ...localConfig, format24h: checked })}
+                />
+              </Card>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="border-t p-6">
+          <Button variant="outline" onClick={onClose}>
+            취소
+          </Button>
+          <Button onClick={handleSave}>저장</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/components/admin/dashboard/widgets/ClockSettings.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { useState } from "react";
+import { ClockConfig } from "../types";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+interface ClockSettingsProps {
+  config: ClockConfig;
+  onSave: (config: ClockConfig) => void;
+  onClose: () => void;
+}
+
+/**
+ * 시계 위젯 설정 UI (Popover 내부용)
+ * - 모달 없이 순수 설정 폼만 제공
+ */
+export function ClockSettings({ config, onSave, onClose }: ClockSettingsProps) {
+  const [localConfig, setLocalConfig] = useState<ClockConfig>(config);
+
+  const handleSave = () => {
+    onSave(localConfig);
+  };
+
+  return (
+    <div className="flex max-h-[600px] flex-col">
+      {/* 헤더 */}
+      <div className="border-b p-4">
+        <h3 className="flex items-center gap-2 text-lg font-semibold">
+          <span>⏰</span>
+          시계 설정
+        </h3>
+      </div>
+
+      {/* 내용 - 스크롤 가능 */}
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {/* 스타일 선택 */}
+        <div className="space-y-2">
+          <Label className="text-sm font-semibold">시계 스타일</Label>
+          <div className="grid grid-cols-3 gap-2">
+            {[
+              { value: "digital", label: "디지털", icon: "🔢" },
+              { value: "analog", label: "아날로그", icon: "🕐" },
+              { value: "both", label: "둘 다", icon: "⏰" },
+            ].map((style) => (
+              <Button
+                key={style.value}
+                type="button"
+                variant={localConfig.style === style.value ? "default" : "outline"}
+                onClick={() => setLocalConfig({ ...localConfig, style: style.value as any })}
+                className="flex h-auto flex-col items-center gap-1 py-3"
+                size="sm"
+              >
+                <span className="text-2xl">{style.icon}</span>
+                <span className="text-xs">{style.label}</span>
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* 타임존 선택 */}
+        <div className="space-y-2">
+          <Label className="text-sm font-semibold">타임존</Label>
+          <Select
+            value={localConfig.timezone}
+            onValueChange={(value) => setLocalConfig({ ...localConfig, timezone: value })}
+          >
+            <SelectTrigger className="w-full" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Asia/Seoul">🇰🇷 서울 (KST)</SelectItem>
+              <SelectItem value="Asia/Tokyo">🇯🇵 도쿄 (JST)</SelectItem>
+              <SelectItem value="Asia/Shanghai">🇨🇳 베이징 (CST)</SelectItem>
+              <SelectItem value="America/New_York">🇺🇸 뉴욕 (EST)</SelectItem>
+              <SelectItem value="America/Los_Angeles">🇺🇸 LA (PST)</SelectItem>
+              <SelectItem value="Europe/London">🇬🇧 런던 (GMT)</SelectItem>
+              <SelectItem value="Europe/Paris">🇫🇷 파리 (CET)</SelectItem>
+              <SelectItem value="Australia/Sydney">🇦🇺 시드니 (AEDT)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Separator />
+
+        {/* 테마 선택 */}
+        <div className="space-y-2">
+          <Label className="text-sm font-semibold">테마</Label>
+          <div className="grid grid-cols-3 gap-2">
+            {[
+              {
+                value: "light",
+                label: "Light",
+                gradient: "bg-gradient-to-br from-white to-gray-100",
+                text: "text-gray-900",
+              },
+              {
+                value: "dark",
+                label: "Dark",
+                gradient: "bg-gradient-to-br from-gray-800 to-gray-900",
+                text: "text-white",
+              },
+              {
+                value: "custom",
+                label: "사용자",
+                gradient: "bg-gradient-to-br from-blue-400 to-purple-600",
+                text: "text-white",
+              },
+            ].map((theme) => (
+              <Button
+                key={theme.value}
+                type="button"
+                variant="outline"
+                onClick={() => setLocalConfig({ ...localConfig, theme: theme.value as any })}
+                className={`relative h-auto overflow-hidden p-0 ${
+                  localConfig.theme === theme.value ? "ring-primary ring-2 ring-offset-2" : ""
+                }`}
+                size="sm"
+              >
+                <div className={`${theme.gradient} ${theme.text} w-full rounded px-3 py-2 text-xs font-medium`}>
+                  {theme.label}
+                </div>
+              </Button>
+            ))}
+          </div>
+
+          {/* 사용자 지정 색상 */}
+          {localConfig.theme === "custom" && (
+            <Card className="mt-2 border p-3">
+              <Label className="mb-2 block text-xs font-medium">배경 색상</Label>
+              <div className="flex items-center gap-2">
+                <Input
+                  type="color"
+                  value={localConfig.customColor || "#3b82f6"}
+                  onChange={(e) => setLocalConfig({ ...localConfig, customColor: e.target.value })}
+                  className="h-10 w-16 cursor-pointer"
+                />
+                <Input
+                  type="text"
+                  value={localConfig.customColor || "#3b82f6"}
+                  onChange={(e) => setLocalConfig({ ...localConfig, customColor: e.target.value })}
+                  placeholder="#3b82f6"
+                  className="flex-1 font-mono text-xs"
+                />
+              </div>
+            </Card>
+          )}
+        </div>
+
+        <Separator />
+
+        {/* 옵션 토글 */}
+        <div className="space-y-2">
+          <Label className="text-sm font-semibold">표시 옵션</Label>
+          <div className="space-y-2">
+            {/* 날짜 표시 */}
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <div className="flex items-center gap-2">
+                <span className="text-lg">📅</span>
+                <Label className="cursor-pointer text-sm">날짜 표시</Label>
+              </div>
+              <Switch
+                checked={localConfig.showDate}
+                onCheckedChange={(checked) => setLocalConfig({ ...localConfig, showDate: checked })}
+              />
+            </div>
+
+            {/* 초 표시 */}
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <div className="flex items-center gap-2">
+                <span className="text-lg">⏱️</span>
+                <Label className="cursor-pointer text-sm">초 표시</Label>
+              </div>
+              <Switch
+                checked={localConfig.showSeconds}
+                onCheckedChange={(checked) => setLocalConfig({ ...localConfig, showSeconds: checked })}
+              />
+            </div>
+
+            {/* 24시간 형식 */}
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <div className="flex items-center gap-2">
+                <span className="text-lg">🕐</span>
+                <Label className="cursor-pointer text-sm">24시간 형식</Label>
+              </div>
+              <Switch
+                checked={localConfig.format24h}
+                onCheckedChange={(checked) => setLocalConfig({ ...localConfig, format24h: checked })}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 푸터 */}
+      <div className="flex justify-end gap-2 border-t p-4">
+        <Button variant="outline" size="sm" onClick={onClose}>
+          취소
+        </Button>
+        <Button size="sm" onClick={handleSave}>
+          저장
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/components/admin/dashboard/widgets/ClockWidget.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { DashboardElement, ClockConfig } from "../types";
+import { AnalogClock } from "./AnalogClock";
+import { DigitalClock } from "./DigitalClock";
+import { ClockSettings } from "./ClockSettings";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Settings } from "lucide-react";
+
+interface ClockWidgetProps {
+  element: DashboardElement;
+  onConfigUpdate?: (config: ClockConfig) => void;
+}
+
+/**
+ * 시계 위젯 메인 컴포넌트
+ * - 실시간으로 1초마다 업데이트
+ * - 아날로그/디지털/둘다 스타일 지원
+ * - 타임존 지원
+ * - 내장 설정 UI
+ */
+export function ClockWidget({ element, onConfigUpdate }: ClockWidgetProps) {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  // 기본 설정값
+  const config = element.clockConfig || {
+    style: "digital",
+    timezone: "Asia/Seoul",
+    showDate: true,
+    showSeconds: true,
+    format24h: true,
+    theme: "light",
+    customColor: "#3b82f6",
+  };
+
+  // 설정 저장 핸들러
+  const handleSaveSettings = (newConfig: ClockConfig) => {
+    onConfigUpdate?.(newConfig);
+    setSettingsOpen(false);
+  };
+
+  // 1초마다 시간 업데이트
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    // cleanup: 컴포넌트 unmount 시 타이머 정리
+    return () => clearInterval(timer);
+  }, []);
+
+  // 시계 콘텐츠 렌더링
+  const renderClockContent = () => {
+    if (config.style === "analog") {
+      return (
+        <AnalogClock
+          time={currentTime}
+          theme={config.theme}
+          timezone={config.timezone}
+          customColor={config.customColor}
+        />
+      );
+    }
+
+    if (config.style === "digital") {
+      return (
+        <DigitalClock
+          time={currentTime}
+          timezone={config.timezone}
+          showDate={config.showDate}
+          showSeconds={config.showSeconds}
+          format24h={config.format24h}
+          theme={config.theme}
+          customColor={config.customColor}
+        />
+      );
+    }
+
+    // 'both' - 아날로그 + 디지털
+    return (
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <div className="flex-[55] overflow-hidden">
+          <AnalogClock
+            time={currentTime}
+            theme={config.theme}
+            timezone={config.timezone}
+            customColor={config.customColor}
+          />
+        </div>
+        <div className="flex-[45] overflow-hidden">
+          <DigitalClock
+            time={currentTime}
+            timezone={config.timezone}
+            showDate={false}
+            showSeconds={config.showSeconds}
+            format24h={config.format24h}
+            theme={config.theme}
+            customColor={config.customColor}
+            compact={true}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative h-full w-full">
+      {/* 시계 콘텐츠 */}
+      {renderClockContent()}
+
+      {/* 설정 버튼 - 우측 상단 */}
+      <div className="absolute top-2 right-2">
+        <Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8 bg-white/80 hover:bg-white">
+              <Settings className="h-4 w-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[500px] p-0" align="end">
+            <ClockSettings config={config} onSave={handleSaveSettings} onClose={() => setSettingsOpen(false)} />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}

frontend/components/admin/dashboard/widgets/DigitalClock.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+interface DigitalClockProps {
+  time: Date;
+  timezone: string;
+  showDate: boolean;
+  showSeconds: boolean;
+  format24h: boolean;
+  theme: "light" | "dark" | "custom";
+  compact?: boolean; // 작은 크기에서 사용
+  customColor?: string; // 사용자 지정 색상
+}
+
+/**
+ * 디지털 시계 컴포넌트
+ * - 실시간 시간 표시
+ * - 타임존 지원
+ * - 날짜/초 표시 옵션
+ * - 12/24시간 형식 지원
+ */
+export function DigitalClock({
+  time,
+  timezone,
+  showDate,
+  showSeconds,
+  format24h,
+  theme,
+  compact = false,
+  customColor,
+}: DigitalClockProps) {
+  // 시간 포맷팅 (타임존 적용)
+  const timeString = new Intl.DateTimeFormat("ko-KR", {
+    timeZone: timezone,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: showSeconds ? "2-digit" : undefined,
+    hour12: !format24h,
+  }).format(time);
+
+  // 날짜 포맷팅 (타임존 적용)
+  const dateString = showDate
+    ? new Intl.DateTimeFormat("ko-KR", {
+        timeZone: timezone,
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        weekday: "long",
+      }).format(time)
+    : null;
+
+  // 타임존 라벨
+  const timezoneLabel = getTimezoneLabel(timezone);
+
+  // 테마별 스타일
+  const themeClasses = getThemeClasses(theme, customColor);
+
+  return (
+    <div
+      className={`flex h-full flex-col items-center justify-center ${compact ? "p-1" : "p-4"} text-center ${themeClasses.container}`}
+      style={themeClasses.style}
+    >
+      {/* 날짜 표시 (compact 모드에서는 숨김) */}
+      {!compact && showDate && dateString && (
+        <div className={`mb-3 text-sm font-medium ${themeClasses.date}`}>{dateString}</div>
+      )}
+
+      {/* 시간 표시 */}
+      <div className={`font-bold tabular-nums ${themeClasses.time} ${compact ? "text-xl" : "text-5xl"}`}>
+        {timeString}
+      </div>
+
+      {/* 타임존 표시 */}
+      <div className={`${compact ? "mt-0.5" : "mt-3"} text-xs font-medium ${themeClasses.timezone}`}>
+        {timezoneLabel}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 타임존 라벨 반환
+ */
+function getTimezoneLabel(timezone: string): string {
+  const timezoneLabels: Record<string, string> = {
+    "Asia/Seoul": "서울 (KST)",
+    "Asia/Tokyo": "도쿄 (JST)",
+    "Asia/Shanghai": "베이징 (CST)",
+    "America/New_York": "뉴욕 (EST)",
+    "America/Los_Angeles": "LA (PST)",
+    "Europe/London": "런던 (GMT)",
+    "Europe/Paris": "파리 (CET)",
+    "Australia/Sydney": "시드니 (AEDT)",
+  };
+
+  return timezoneLabels[timezone] || timezone;
+}
+
+/**
+ * 테마별 클래스 반환
+ */
+function getThemeClasses(theme: string, customColor?: string) {
+  if (theme === "custom" && customColor) {
+    // 사용자 지정 색상 사용
+    return {
+      container: "text-white",
+      date: "text-white/80",
+      time: "text-white",
+      timezone: "text-white/70",
+      style: { backgroundColor: customColor },
+    };
+  }
+
+  const themes = {
+    light: {
+      container: "bg-white text-gray-900",
+      date: "text-gray-600",
+      time: "text-gray-900",
+      timezone: "text-gray-500",
+    },
+    dark: {
+      container: "bg-gray-900 text-white",
+      date: "text-gray-300",
+      time: "text-white",
+      timezone: "text-gray-400",
+    },
+    custom: {
+      container: "bg-gradient-to-br from-blue-400 to-purple-600 text-white",
+      date: "text-blue-100",
+      time: "text-white",
+      timezone: "text-blue-200",
+    },
+  };
+
+  return themes[theme as keyof typeof themes] || themes.light;
+}

frontend/components/dashboard/widgets/CalculatorWidget.tsx

@@ -0,0 +1,286 @@
+'use client';
+
+/**
+ * 계산기 위젯 컴포넌트
+ * - 기본 사칙연산 지원
+ * - 실시간 계산
+ * - 대시보드 위젯으로 사용 가능
+ */
+
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+interface CalculatorWidgetProps {
+  className?: string;
+}
+
+export default function CalculatorWidget({ className = '' }: CalculatorWidgetProps) {
+  const [display, setDisplay] = useState<string>('0');
+  const [previousValue, setPreviousValue] = useState<number | null>(null);
+  const [operation, setOperation] = useState<string | null>(null);
+  const [waitingForOperand, setWaitingForOperand] = useState<boolean>(false);
+
+  // 숫자 입력 처리
+  const handleNumber = (num: string) => {
+    if (waitingForOperand) {
+      setDisplay(num);
+      setWaitingForOperand(false);
+    } else {
+      setDisplay(display === '0' ? num : display + num);
+    }
+  };
+
+  // 소수점 입력
+  const handleDecimal = () => {
+    if (waitingForOperand) {
+      setDisplay('0.');
+      setWaitingForOperand(false);
+    } else if (display.indexOf('.') === -1) {
+      setDisplay(display + '.');
+    }
+  };
+
+  // 연산자 입력
+  const handleOperation = (nextOperation: string) => {
+    const inputValue = parseFloat(display);
+
+    if (previousValue === null) {
+      setPreviousValue(inputValue);
+    } else if (operation) {
+      const currentValue = previousValue || 0;
+      const newValue = calculate(currentValue, inputValue, operation);
+      
+      setDisplay(String(newValue));
+      setPreviousValue(newValue);
+    }
+
+    setWaitingForOperand(true);
+    setOperation(nextOperation);
+  };
+
+  // 계산 수행
+  const calculate = (firstValue: number, secondValue: number, operation: string): number => {
+    switch (operation) {
+      case '+':
+        return firstValue + secondValue;
+      case '-':
+        return firstValue - secondValue;
+      case '×':
+        return firstValue * secondValue;
+      case '÷':
+        return secondValue !== 0 ? firstValue / secondValue : 0;
+      default:
+        return secondValue;
+    }
+  };
+
+  // 등호 처리
+  const handleEquals = () => {
+    const inputValue = parseFloat(display);
+
+    if (previousValue !== null && operation) {
+      const newValue = calculate(previousValue, inputValue, operation);
+      setDisplay(String(newValue));
+      setPreviousValue(null);
+      setOperation(null);
+      setWaitingForOperand(true);
+    }
+  };
+
+  // 초기화
+  const handleClear = () => {
+    setDisplay('0');
+    setPreviousValue(null);
+    setOperation(null);
+    setWaitingForOperand(false);
+  };
+
+  // 백스페이스
+  const handleBackspace = () => {
+    if (!waitingForOperand) {
+      const newDisplay = display.slice(0, -1);
+      setDisplay(newDisplay || '0');
+    }
+  };
+
+  // 부호 변경
+  const handleSign = () => {
+    const value = parseFloat(display);
+    setDisplay(String(value * -1));
+  };
+
+  // 퍼센트
+  const handlePercent = () => {
+    const value = parseFloat(display);
+    setDisplay(String(value / 100));
+  };
+
+  return (
+    <div className={`h-full w-full p-3 bg-gradient-to-br from-slate-50 to-gray-100 ${className}`}>
+      <div className="h-full flex flex-col justify-center gap-2">
+        {/* 디스플레이 */}
+        <div className="bg-white border-2 border-gray-200 rounded-lg p-4 shadow-inner min-h-[80px]">
+          <div className="text-right h-full flex flex-col justify-center">
+            <div className="h-4 mb-1">
+              {operation && previousValue !== null && (
+                <div className="text-xs text-gray-400">
+                  {previousValue} {operation}
+                </div>
+              )}
+            </div>
+            <div className="text-2xl font-bold text-gray-900 truncate">
+              {display}
+            </div>
+          </div>
+        </div>
+
+        {/* 버튼 그리드 */}
+        <div className="flex-1 grid grid-cols-4 gap-2">
+          {/* 첫 번째 줄 */}
+          <Button
+            variant="outline"
+            onClick={handleClear}
+            className="h-full text-red-600 hover:bg-red-50 hover:text-red-700 font-semibold select-none"
+          >
+            AC
+          </Button>
+          <Button
+            variant="outline"
+            onClick={handleSign}
+            className="h-full text-gray-600 hover:bg-gray-100 font-semibold select-none"
+          >
+            +/-
+          </Button>
+          <Button
+            variant="outline"
+            onClick={handlePercent}
+            className="h-full text-gray-600 hover:bg-gray-100 font-semibold select-none"
+          >
+            %
+          </Button>
+          <Button
+            variant="default"
+            onClick={() => handleOperation('÷')}
+            className="h-full bg-blue-500 hover:bg-blue-600 text-white font-semibold select-none"
+          >
+            ÷
+          </Button>
+
+          {/* 두 번째 줄 */}
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('7')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            7
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('8')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            8
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('9')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            9
+          </Button>
+          <Button
+            variant="default"
+            onClick={() => handleOperation('×')}
+            className="h-full bg-blue-500 hover:bg-blue-600 text-white font-semibold select-none"
+          >
+            ×
+          </Button>
+
+          {/* 세 번째 줄 */}
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('4')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            4
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('5')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            5
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('6')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            6
+          </Button>
+          <Button
+            variant="default"
+            onClick={() => handleOperation('-')}
+            className="h-full bg-blue-500 hover:bg-blue-600 text-white font-semibold select-none"
+          >
+            -
+          </Button>
+
+          {/* 네 번째 줄 */}
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('1')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            1
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('2')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            2
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('3')}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            3
+          </Button>
+          <Button
+            variant="default"
+            onClick={() => handleOperation('+')}
+            className="h-full bg-blue-500 hover:bg-blue-600 text-white font-semibold select-none"
+          >
+            +
+          </Button>
+
+          {/* 다섯 번째 줄 */}
+          <Button
+            variant="outline"
+            onClick={() => handleNumber('0')}
+            className="h-full col-span-2 hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            0
+          </Button>
+          <Button
+            variant="outline"
+            onClick={handleDecimal}
+            className="h-full hover:bg-gray-100 font-semibold text-lg select-none"
+          >
+            .
+          </Button>
+          <Button
+            variant="default"
+            onClick={handleEquals}
+            className="h-full bg-green-500 hover:bg-green-600 text-white font-semibold select-none"
+          >
+            =
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/components/layout/AppLayout.tsx

@@ -240,8 +240,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const isAdminMode = pathname.startsWith("/admin") || searchParams.get("mode") === "admin";
 
   // 현재 모드에 따라 표시할 메뉴 결정
-  // 관리자 모드에서는 관리자 메뉴 + 사용자 메뉴(툴 생성 메뉴 포함)를 모두 표시
+  // 관리자 모드에서는 관리자 메뉴만, 사용자 모드에서는 사용자 메뉴만 표시
-  const currentMenus = isAdminMode ? [...adminMenus, ...userMenus] : userMenus;
+  const currentMenus = isAdminMode ? adminMenus : userMenus;
 
   // 메뉴 토글 함수
   const toggleMenu = (menuId: string) => {
@@ -324,7 +324,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         <div
           className={`group flex h-10 cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out ${
             pathname === menu.url
-              ? "border-l-4 border-primary bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
+              ? "border-primary border-l-4 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
               : isExpanded
                 ? "bg-slate-100 text-slate-900"
                 : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
@@ -352,7 +352,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 key={child.id}
                 className={`flex cursor-pointer items-center rounded-lg px-3 py-2 text-sm transition-colors hover:cursor-pointer ${
                   pathname === child.url
-                    ? "border-l-4 border-primary bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
+                    ? "border-primary border-l-4 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
                     : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
                 }`}
                 onClick={() => handleMenuClick(child)}
@@ -376,7 +376,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     return (
       <div className="flex h-screen items-center justify-center">
         <div className="flex flex-col items-center">
-          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+          <div className="border-primary mb-4 h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
           <p>로딩중...</p>
         </div>
       </div>
@@ -423,7 +423,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 className={`flex w-full items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 hover:cursor-pointer ${
                   isAdminMode
                     ? "border border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100"
-                    : "border border-primary/20 bg-accent text-blue-700 hover:bg-primary/20"
+                    : "border-primary/20 bg-accent hover:bg-primary/20 border text-blue-700"
                 }`}
               >
                 {isAdminMode ? (
@@ -486,7 +486,7 @@ export function AppLayout({ children }: AppLayoutProps) {
       fallback={
         <div className="flex h-screen items-center justify-center">
           <div className="flex flex-col items-center">
-            <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+            <div className="border-primary mb-4 h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
             <p>로딩중...</p>
           </div>
         </div>

frontend/components/report/designer/ReportDesignerCanvas.tsx

@@ -6,7 +6,6 @@ import { useReportDesigner } from "@/contexts/ReportDesignerContext";
 import { ComponentConfig } from "@/types/report";
 import { CanvasComponent } from "./CanvasComponent";
 import { Ruler } from "./Ruler";
-import { GridLayer } from "./GridLayer";
 import { v4 as uuidv4 } from "uuid";
 
 export function ReportDesignerCanvas() {
@@ -33,7 +32,6 @@ export function ReportDesignerCanvas() {
     undo,
     redo,
     showRuler,
-    gridConfig,
   } = useReportDesigner();
 
   const [{ isOver }, drop] = useDrop(() => ({
@@ -333,16 +331,16 @@ export function ReportDesignerCanvas() {
               style={{
                 width: `${canvasWidth}mm`,
                 minHeight: `${canvasHeight}mm`,
+                backgroundImage: showGrid
+                  ? `
+                    linear-gradient(to right, #e5e7eb 1px, transparent 1px),
+                    linear-gradient(to bottom, #e5e7eb 1px, transparent 1px)
+                  `
+                  : undefined,
+                backgroundSize: showGrid ? `${gridSize}px ${gridSize}px` : undefined,
               }}
               onClick={handleCanvasClick}
             >
-              {/* 그리드 레이어 */}
-              <GridLayer
-                gridConfig={gridConfig}
-                pageWidth={canvasWidth * 3.7795} // mm to px
-                pageHeight={canvasHeight * 3.7795}
-              />
-
               {/* 페이지 여백 가이드 */}
               {currentPage && (
                 <div

frontend/components/report/designer/ReportDesignerRightPanel.tsx

@@ -13,7 +13,6 @@ import { useReportDesigner } from "@/contexts/ReportDesignerContext";
 import { QueryManager } from "./QueryManager";
 import { SignaturePad } from "./SignaturePad";
 import { SignatureGenerator } from "./SignatureGenerator";
-import { GridSettingsPanel } from "./GridSettingsPanel";
 import { reportApi } from "@/lib/api/reportApi";
 import { useToast } from "@/hooks/use-toast";
 
@@ -103,7 +102,7 @@ export function ReportDesignerRightPanel() {
     <div className="w-[450px] border-l bg-white">
       <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full">
         <div className="border-b p-2">
-          <TabsList className="grid w-full grid-cols-4">
+          <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="page" className="gap-1 text-xs">
               <Settings className="h-3 w-3" />
               페이지
@@ -112,10 +111,6 @@ export function ReportDesignerRightPanel() {
               <Settings className="h-3 w-3" />
               속성
             </TabsTrigger>
-            <TabsTrigger value="grid" className="gap-1 text-xs">
-              <Settings className="h-3 w-3" />
-              그리드
-            </TabsTrigger>
             <TabsTrigger value="queries" className="gap-1 text-xs">
               <Database className="h-3 w-3" />
               쿼리
@@ -1401,15 +1396,6 @@ export function ReportDesignerRightPanel() {
         </TabsContent>
 
         {/* 쿼리 탭 */}
-        {/* 그리드 탭 */}
-        <TabsContent value="grid" className="mt-0 h-[calc(100vh-120px)]">
-          <ScrollArea className="h-full">
-            <div className="space-y-4 p-4">
-              <GridSettingsPanel />
-            </div>
-          </ScrollArea>
-        </TabsContent>
-
         <TabsContent value="queries" className="mt-0 h-[calc(100vh-120px)]">
           <QueryManager />
         </TabsContent>

frontend/components/screen/CreateScreenModal.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 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 { Search, X } from "lucide-react";
 import { screenApi, tableTypeApi } from "@/lib/api/screen";
 import { ScreenDefinition } from "@/types/screen";
 import { useAuth } from "@/hooks/useAuth";
@@ -24,6 +26,8 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
   const [description, setDescription] = useState("");
   const [tables, setTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
   const [submitting, setSubmitting] = useState(false);
+  const [tableSearchTerm, setTableSearchTerm] = useState("");
+  const searchInputRef = useRef<HTMLInputElement>(null);
   // 화면 코드 자동 생성
   const generateCode = async () => {
     try {
@@ -65,6 +69,16 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
     return screenName.trim().length > 0 && screenCode.trim().length > 0 && tableName.trim().length > 0;
   }, [screenName, screenCode, tableName]);
 
+  // 테이블 필터링
+  const filteredTables = useMemo(() => {
+    if (!tableSearchTerm) return tables;
+    const searchLower = tableSearchTerm.toLowerCase();
+    return tables.filter(
+      (table) =>
+        table.displayName.toLowerCase().includes(searchLower) || table.tableName.toLowerCase().includes(searchLower),
+    );
+  }, [tables, tableSearchTerm]);
+
   const handleSubmit = async () => {
     if (!isValid || submitting) return;
     try {
@@ -124,19 +138,82 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
           </div>
           <div className="space-y-2">
             <Label htmlFor="tableName">테이블</Label>
-            <select
+            <Select
-              id="tableName"
-              className="w-full rounded-md border px-3 py-2 text-sm"
               value={tableName}
-              onChange={(e) => setTableName(e.target.value)}
+              onValueChange={setTableName}
+              onOpenChange={(open) => {
+                if (open) {
+                  // Select가 열릴 때 검색창에 포커스
+                  setTimeout(() => {
+                    searchInputRef.current?.focus();
+                  }, 100);
+                }
+              }}
             >
-              <option value="">테이블 선택...</option>
+              <SelectTrigger className="w-full">
-              {tables.map((t) => (
+                <SelectValue placeholder="테이블을 선택하세요" />
-                <option key={t.tableName} value={t.tableName}>
+              </SelectTrigger>
-                  {t.displayName} ({t.tableName})
+              <SelectContent className="max-h-80">
-                </option>
+                {/* 검색 입력 필드 */}
-              ))}
+                <div
-            </select>
+                  className="sticky top-0 z-10 border-b bg-white p-2"
+                  onKeyDown={(e) => {
+                    // 이 div 내에서 발생하는 모든 키 이벤트를 차단
+                    e.stopPropagation();
+                  }}
+                >
+                  <div className="relative">
+                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+                    <input
+                      ref={searchInputRef}
+                      type="text"
+                      placeholder="테이블명으로 검색..."
+                      value={tableSearchTerm}
+                      autoFocus
+                      onChange={(e) => {
+                        e.stopPropagation();
+                        setTableSearchTerm(e.target.value);
+                      }}
+                      onKeyDown={(e) => {
+                        // 이벤트가 Select로 전파되지 않도록 완전 차단
+                        e.stopPropagation();
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      onFocus={(e) => e.stopPropagation()}
+                      onMouseDown={(e) => e.stopPropagation()}
+                      className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-8 w-full rounded-md border px-3 py-2 pr-8 pl-10 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                    />
+                    {tableSearchTerm && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setTableSearchTerm("");
+                        }}
+                        className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                {/* 테이블 옵션들 */}
+                <div className="max-h-60 overflow-y-auto">
+                  {filteredTables.length === 0 ? (
+                    <div className="px-2 py-6 text-center text-sm text-gray-500">
+                      {tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
+                    </div>
+                  ) : (
+                    filteredTables.map((table) => (
+                      <SelectItem key={table.tableName} value={table.tableName}>
+                        {table.displayName} ({table.tableName})
+                      </SelectItem>
+                    ))
+                  )}
+                </div>
+              </SelectContent>
+            </Select>
           </div>
           <div className="space-y-2">
             <Label htmlFor="description">설명</Label>

frontend/components/screen/GridLayoutBuilder.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { GridLayout, LayoutRow, RowComponent, CreateRowOptions } from "@/types/grid-system";
+import { ComponentData } from "@/types/screen";
+import { LayoutRowRenderer } from "./LayoutRowRenderer";
+import { Button } from "@/components/ui/button";
+import { Plus, Grid3x3 } from "lucide-react";
+import { GAP_PRESETS } from "@/lib/constants/columnSpans";
+
+interface GridLayoutBuilderProps {
+  layout: GridLayout;
+  onUpdateLayout: (layout: GridLayout) => void;
+  selectedRowId?: string;
+  selectedComponentId?: string;
+  onSelectRow?: (rowId: string) => void;
+  onSelectComponent?: (componentId: string) => void;
+  showGridGuides?: boolean;
+}
+
+export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
+  layout,
+  onUpdateLayout,
+  selectedRowId,
+  selectedComponentId,
+  onSelectRow,
+  onSelectComponent,
+  showGridGuides = true,
+}) => {
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  // 새 행 추가
+  const addNewRow = useCallback(
+    (options?: CreateRowOptions) => {
+      const newRow: LayoutRow = {
+        id: `row-${Date.now()}`,
+        rowIndex: layout.rows.length,
+        height: options?.height || "auto",
+        fixedHeight: options?.fixedHeight,
+        gap: options?.gap || "sm",
+        padding: options?.padding || "sm",
+        alignment: options?.alignment || "start",
+        verticalAlignment: "middle",
+        components: [],
+      };
+
+      onUpdateLayout({
+        ...layout,
+        rows: [...layout.rows, newRow],
+      });
+
+      // 새로 추가된 행 선택
+      if (onSelectRow) {
+        onSelectRow(newRow.id);
+      }
+    },
+    [layout, onUpdateLayout, onSelectRow],
+  );
+
+  // 행 삭제
+  const deleteRow = useCallback(
+    (rowId: string) => {
+      const updatedRows = layout.rows
+        .filter((row) => row.id !== rowId)
+        .map((row, index) => ({
+          ...row,
+          rowIndex: index,
+        }));
+
+      onUpdateLayout({
+        ...layout,
+        rows: updatedRows,
+      });
+    },
+    [layout, onUpdateLayout],
+  );
+
+  // 행 순서 변경
+  const moveRow = useCallback(
+    (rowId: string, direction: "up" | "down") => {
+      const rowIndex = layout.rows.findIndex((row) => row.id === rowId);
+      if (rowIndex === -1) return;
+
+      const newIndex = direction === "up" ? rowIndex - 1 : rowIndex + 1;
+      if (newIndex < 0 || newIndex >= layout.rows.length) return;
+
+      const updatedRows = [...layout.rows];
+      [updatedRows[rowIndex], updatedRows[newIndex]] = [updatedRows[newIndex], updatedRows[rowIndex]];
+
+      // 인덱스 재정렬
+      updatedRows.forEach((row, index) => {
+        row.rowIndex = index;
+      });
+
+      onUpdateLayout({
+        ...layout,
+        rows: updatedRows,
+      });
+    },
+    [layout, onUpdateLayout],
+  );
+
+  // 행 업데이트
+  const updateRow = useCallback(
+    (rowId: string, updates: Partial<LayoutRow>) => {
+      const updatedRows = layout.rows.map((row) => (row.id === rowId ? { ...row, ...updates } : row));
+
+      onUpdateLayout({
+        ...layout,
+        rows: updatedRows,
+      });
+    },
+    [layout, onUpdateLayout],
+  );
+
+  // 컴포넌트 선택
+  const handleSelectComponent = useCallback(
+    (componentId: string) => {
+      if (onSelectComponent) {
+        onSelectComponent(componentId);
+      }
+    },
+    [onSelectComponent],
+  );
+
+  // 행 선택
+  const handleSelectRow = useCallback(
+    (rowId: string) => {
+      if (onSelectRow) {
+        onSelectRow(rowId);
+      }
+    },
+    [onSelectRow],
+  );
+
+  // 컨테이너 클래스
+  const containerClasses = cn("w-full h-full overflow-auto bg-gray-50 relative", isDraggingOver && "bg-blue-50");
+
+  // 글로벌 컨테이너 클래스
+  const globalContainerClasses = cn(
+    "mx-auto relative",
+    layout.globalSettings.containerMaxWidth === "full" ? "w-full" : `max-w-${layout.globalSettings.containerMaxWidth}`,
+    GAP_PRESETS[layout.globalSettings.containerPadding].class.replace("gap-", "px-"),
+  );
+
+  return (
+    <div className={containerClasses}>
+      {/* 그리드 가이드라인 */}
+      {showGridGuides && (
+        <div className="pointer-events-none absolute inset-0 z-0">
+          <div className={globalContainerClasses}>
+            <div className="grid h-full grid-cols-12">
+              {Array.from({ length: 12 }).map((_, i) => (
+                <div key={i} className="h-full border-l border-dashed border-gray-300 opacity-30" />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 메인 컨테이너 */}
+      <div className={cn(globalContainerClasses, "relative z-10 py-8")}>
+        {layout.rows.length === 0 ? (
+          // 빈 레이아웃
+          <div className="flex min-h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-white">
+            <Grid3x3 className="mb-4 h-16 w-16 text-gray-300" />
+            <h3 className="mb-2 text-lg font-medium text-gray-600">레이아웃이 비어있습니다</h3>
+            <p className="mb-6 text-sm text-gray-500">첫 번째 행을 추가하여 시작하세요</p>
+            <Button onClick={() => addNewRow()} size="lg">
+              <Plus className="mr-2 h-5 w-5" />첫 행 추가
+            </Button>
+          </div>
+        ) : (
+          // 행 목록
+          <div className="space-y-4">
+            {layout.rows.map((row) => (
+              <LayoutRowRenderer
+                key={row.id}
+                row={row}
+                components={layout.components}
+                isSelected={selectedRowId === row.id}
+                selectedComponentId={selectedComponentId}
+                onSelectRow={() => handleSelectRow(row.id)}
+                onSelectComponent={handleSelectComponent}
+                onUpdateRow={(updatedRow) => updateRow(row.id, updatedRow)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* 새 행 추가 버튼 */}
+        {layout.rows.length > 0 && (
+          <div className="mt-6 flex justify-center">
+            <div className="inline-flex flex-col gap-2">
+              <Button onClick={() => addNewRow()} variant="outline" size="lg" className="w-full">
+                <Plus className="mr-2 h-5 w-5" />새 행 추가
+              </Button>
+
+              {/* 빠른 추가 버튼들 */}
+              <div className="flex gap-2">
+                <Button
+                  onClick={() =>
+                    addNewRow({
+                      gap: "sm",
+                      padding: "sm",
+                      alignment: "start",
+                    })
+                  }
+                  variant="ghost"
+                  size="sm"
+                  className="flex-1"
+                >
+                  폼 행
+                </Button>
+                <Button
+                  onClick={() =>
+                    addNewRow({
+                      gap: "md",
+                      padding: "md",
+                      alignment: "stretch",
+                    })
+                  }
+                  variant="ghost"
+                  size="sm"
+                  className="flex-1"
+                >
+                  2분할
+                </Button>
+                <Button
+                  onClick={() =>
+                    addNewRow({
+                      gap: "none",
+                      padding: "md",
+                      alignment: "stretch",
+                    })
+                  }
+                  variant="ghost"
+                  size="sm"
+                  className="flex-1"
+                >
+                  전체
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 레이아웃 정보 */}
+        <div className="mt-8 rounded-lg border bg-white p-4">
+          <div className="flex items-center justify-between text-sm text-gray-600">
+            <div className="flex items-center gap-4">
+              <span>행: {layout.rows.length}</span>
+              <span>컴포넌트: {layout.components.size}</span>
+              <span>
+                컨테이너:{" "}
+                {layout.globalSettings.containerMaxWidth === "full" ? "전체" : layout.globalSettings.containerMaxWidth}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-gray-400">12컬럼 그리드</span>
+              {showGridGuides && <span className="text-xs text-green-600">가이드 표시됨</span>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -43,6 +43,8 @@ import { FormValidationIndicator } from "@/components/common/FormValidationIndic
 import { useFormValidation } from "@/hooks/useFormValidation";
 import { UnifiedColumnInfo as ColumnInfo } from "@/types";
 import { isFileComponent } from "@/lib/utils/componentTypeUtils";
+import { buildGridClasses } from "@/lib/constants/columnSpans";
+import { cn } from "@/lib/utils";
 
 interface InteractiveScreenViewerProps {
   component: ComponentData;

frontend/components/screen/LayoutRowRenderer.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { LayoutRow } from "@/types/grid-system";
+import { ComponentData } from "@/types/screen";
+import { GAP_PRESETS, buildGridClasses } from "@/lib/constants/columnSpans";
+import { RealtimePreviewDynamic } from "./RealtimePreviewDynamic";
+
+interface LayoutRowRendererProps {
+  row: LayoutRow;
+  components: Map<string, ComponentData>;
+  isSelected: boolean;
+  selectedComponentId?: string;
+  onSelectRow: () => void;
+  onSelectComponent: (componentId: string) => void;
+  onUpdateRow?: (row: LayoutRow) => void;
+}
+
+export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
+  row,
+  components,
+  isSelected,
+  selectedComponentId,
+  onSelectRow,
+  onSelectComponent,
+  onUpdateRow,
+}) => {
+  // 행 클래스 생성
+  const rowClasses = cn(
+    // 그리드 기본
+    "grid grid-cols-12 w-full relative",
+
+    // Gap (컴포넌트 간격)
+    GAP_PRESETS[row.gap].class,
+
+    // Padding
+    GAP_PRESETS[row.padding].class.replace("gap-", "p-"),
+
+    // 높이
+    row.height === "auto" && "h-auto",
+    row.height === "fixed" && row.fixedHeight && `h-[${row.fixedHeight}px]`,
+    row.height === "min" && row.minHeight && `min-h-[${row.minHeight}px]`,
+    row.height === "max" && row.maxHeight && `max-h-[${row.maxHeight}px]`,
+
+    // 수평 정렬
+    row.alignment === "start" && "justify-items-start",
+    row.alignment === "center" && "justify-items-center",
+    row.alignment === "end" && "justify-items-end",
+    row.alignment === "stretch" && "justify-items-stretch",
+    row.alignment === "baseline" && "justify-items-baseline",
+
+    // 수직 정렬
+    row.verticalAlignment === "top" && "items-start",
+    row.verticalAlignment === "middle" && "items-center",
+    row.verticalAlignment === "bottom" && "items-end",
+    row.verticalAlignment === "stretch" && "items-stretch",
+
+    // 선택 상태
+    isSelected && "ring-2 ring-blue-500 ring-inset",
+
+    // 호버 효과
+    "hover:bg-gray-50 transition-colors cursor-pointer border-2 border-dashed border-transparent hover:border-gray-300",
+  );
+
+  // 배경색 스타일
+  const rowStyle: React.CSSProperties = {
+    ...(row.backgroundColor && { backgroundColor: row.backgroundColor }),
+  };
+
+  return (
+    <div className={rowClasses} style={rowStyle} onClick={onSelectRow} data-row-id={row.id}>
+      {/* 행 인덱스 표시 */}
+      <div className="absolute top-1/2 -left-8 -translate-y-1/2 font-mono text-xs text-gray-400">
+        {row.rowIndex + 1}
+      </div>
+
+      {row.components.length === 0 ? (
+        // 빈 행
+        <div className="col-span-12 flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8">
+          <div className="text-center">
+            <p className="mb-2 text-sm text-gray-400">컴포넌트를 여기에 드래그하세요</p>
+            <div className="flex justify-center gap-2">
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">폼 행 추가</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">2분할</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">전체</button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        // 컴포넌트 렌더링
+        row.components.map((rowComponent) => {
+          const component = components.get(rowComponent.componentId);
+          if (!component) return null;
+
+          // 그리드 클래스 생성
+          const componentClasses = cn(
+            // 컬럼 스팬
+            buildGridClasses(rowComponent.columnSpan, rowComponent.columnStart),
+
+            // 정렬 순서
+            rowComponent.order && `order-${rowComponent.order}`,
+
+            // 선택 상태
+            selectedComponentId === component.id && "ring-2 ring-green-500 ring-inset",
+          );
+
+          // 오프셋 스타일 (여백)
+          const componentStyle: React.CSSProperties = {
+            ...(rowComponent.offset && {
+              marginLeft: `${(GAP_PRESETS[rowComponent.offset as any]?.value || 0) * 4}px`,
+            }),
+          };
+
+          return (
+            <div
+              key={rowComponent.id}
+              className={componentClasses}
+              style={componentStyle}
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelectComponent(component.id);
+              }}
+            >
+              <RealtimePreviewDynamic
+                component={component}
+                isSelected={selectedComponentId === component.id}
+                isDesignMode={true}
+                onClick={(e) => {
+                  e?.stopPropagation();
+                  onSelectComponent(component.id);
+                }}
+              />
+            </div>
+          );
+        })
+      )}
+
+      {/* 선택 시 행 설정 버튼 */}
+      {isSelected && (
+        <div className="absolute top-1/2 -right-8 flex -translate-y-1/2 flex-col gap-1">
+          <button
+            className="rounded border bg-white p-1 shadow-sm hover:bg-gray-50"
+            title="행 설정"
+            onClick={(e) => {
+              e.stopPropagation();
+              // 행 설정 패널 열기
+            }}
+          >
+            <svg className="h-4 w-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+              />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </button>
+          <button
+            className="rounded border bg-white p-1 shadow-sm hover:bg-red-50 hover:text-red-600"
+            title="행 삭제"
+            onClick={(e) => {
+              e.stopPropagation();
+              // 행 삭제
+            }}
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              />
+            </svg>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/components/screen/MenuAssignmentModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   Dialog,
   DialogContent,
@@ -12,7 +12,6 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
 import { Search, Monitor, Settings, X, Plus } from "lucide-react";
@@ -46,36 +45,51 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
   const [showReplaceDialog, setShowReplaceDialog] = useState(false);
   const [assignmentSuccess, setAssignmentSuccess] = useState(false);
   const [assignmentMessage, setAssignmentMessage] = useState("");
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
-  // 메뉴 목록 로드 (관리자 메뉴만)
+  // 메뉴 목록 로드 (관리자 메뉴 + 사용자 메뉴)
   const loadMenus = async () => {
     try {
       setLoading(true);
 
-      // 화면관리는 관리자 전용 기능이므로 관리자 메뉴만 가져오기
+      // 관리자 메뉴 가져오기
       const adminResponse = await apiClient.get("/admin/menus", { params: { menuType: "0" } });
       const adminMenus = adminResponse.data?.data || [];
 
-      // 관리자 메뉴 정규화
+      // 사용자 메뉴 가져오기
-      const normalizedAdminMenus = adminMenus.map((menu: any) => ({
+      const userResponse = await apiClient.get("/admin/menus", { params: { menuType: "1" } });
+      const userMenus = userResponse.data?.data || [];
+
+      // 메뉴 정규화 함수
+      const normalizeMenu = (menu: any) => ({
         objid: menu.objid || menu.OBJID,
         parent_obj_id: menu.parent_obj_id || menu.PARENT_OBJ_ID,
         menu_name_kor: menu.menu_name_kor || menu.MENU_NAME_KOR,
         menu_url: menu.menu_url || menu.MENU_URL,
         menu_desc: menu.menu_desc || menu.MENU_DESC,
         seq: menu.seq || menu.SEQ,
-        menu_type: "0", // 관리자 메뉴
+        menu_type: menu.menu_type || menu.MENU_TYPE,
         status: menu.status || menu.STATUS,
         lev: menu.lev || menu.LEV,
         company_code: menu.company_code || menu.COMPANY_CODE,
         company_name: menu.company_name || menu.COMPANY_NAME,
-      }));
+      });
 
-      // console.log("로드된 관리자 메뉴 목록:", {
+      // 관리자 메뉴 정규화
-        // total: normalizedAdminMenus.length,
+      const normalizedAdminMenus = adminMenus.map((menu: any) => normalizeMenu(menu));
-        // sample: normalizedAdminMenus.slice(0, 3),
+
+      // 사용자 메뉴 정규화
+      const normalizedUserMenus = userMenus.map((menu: any) => normalizeMenu(menu));
+
+      // 모든 메뉴 합치기
+      const allMenus = [...normalizedAdminMenus, ...normalizedUserMenus];
+
+      // console.log("로드된 전체 메뉴 목록:", {
+      // totalAdmin: normalizedAdminMenus.length,
+      // totalUser: normalizedUserMenus.length,
+      // total: allMenus.length,
       // });
-      setMenus(normalizedAdminMenus);
+      setMenus(allMenus);
     } catch (error) {
       // console.error("메뉴 목록 로드 실패:", error);
       toast.error("메뉴 목록을 불러오는데 실패했습니다.");
@@ -244,8 +258,8 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
     );
   });
 
-  // 메뉴 옵션 생성 (계층 구조 표시)
+  // 메뉴 옵션 생성 (계층 구조 표시, 타입별 그룹화)
-  const getMenuOptions = (): JSX.Element[] => {
+  const getMenuOptions = (): React.ReactNode[] => {
     if (loading) {
       return [
         <SelectItem key="loading" value="loading" disabled>
@@ -262,19 +276,58 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
       ];
     }
 
-    return filteredMenus
+    // 관리자 메뉴와 사용자 메뉴 분리
-      .filter((menu) => menu.objid && menu.objid.toString().trim() !== "") // objid가 유효한 메뉴만 필터링
+    const adminMenus = filteredMenus.filter(
-      .map((menu) => {
+      (menu) => menu.menu_type === "0" && menu.objid && menu.objid.toString().trim() !== "",
-        const indent = "　".repeat(Math.max(0, menu.lev || 0));
+    );
-        const menuId = menu.objid!.toString(); // 이미 필터링했으므로 non-null assertion 사용
+    const userMenus = filteredMenus.filter(
+      (menu) => menu.menu_type === "1" && menu.objid && menu.objid.toString().trim() !== "",
+    );
 
-        return (
+    const options: React.ReactNode[] = [];
+
+    // 관리자 메뉴 섹션
+    if (adminMenus.length > 0) {
+      options.push(
+        <div key="admin-header" className="bg-blue-50 px-2 py-1.5 text-xs font-semibold text-blue-600">
+          👤 관리자 메뉴
+        </div>,
+      );
+      adminMenus.forEach((menu) => {
+        const indent = "　".repeat(Math.max(0, menu.lev || 0));
+        const menuId = menu.objid!.toString();
+        options.push(
           <SelectItem key={menuId} value={menuId}>
             {indent}
             {menu.menu_name_kor}
-          </SelectItem>
+          </SelectItem>,
         );
       });
+    }
+
+    // 사용자 메뉴 섹션
+    if (userMenus.length > 0) {
+      if (adminMenus.length > 0) {
+        options.push(<div key="separator" className="my-1 border-t" />);
+      }
+      options.push(
+        <div key="user-header" className="bg-green-50 px-2 py-1.5 text-xs font-semibold text-green-600">
+          👥 사용자 메뉴
+        </div>,
+      );
+      userMenus.forEach((menu) => {
+        const indent = "　".repeat(Math.max(0, menu.lev || 0));
+        const menuId = menu.objid!.toString();
+        options.push(
+          <SelectItem key={menuId} value={menuId}>
+            {indent}
+            {menu.menu_name_kor}
+          </SelectItem>,
+        );
+      });
+    }
+
+    return options;
   };
 
   return (
@@ -348,9 +401,9 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                   저장된 화면을 메뉴에 할당하여 사용자가 접근할 수 있도록 설정합니다.
                 </DialogDescription>
                 {screenInfo && (
-                  <div className="mt-2 rounded-lg border bg-accent p-3">
+                  <div className="bg-accent mt-2 rounded-lg border p-3">
                     <div className="flex items-center gap-2">
-                      <Monitor className="h-4 w-4 text-primary" />
+                      <Monitor className="text-primary h-4 w-4" />
                       <span className="font-medium text-blue-900">{screenInfo.screenName}</span>
                       <Badge variant="outline" className="font-mono text-xs">
                         {screenInfo.screenCode}
@@ -365,29 +418,51 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 {/* 메뉴 선택 (검색 기능 포함) */}
                 <div>
                   <Label htmlFor="menu-select">할당할 메뉴 선택</Label>
-                  <Select value={selectedMenuId} onValueChange={handleMenuSelect} disabled={loading}>
+                  <Select
+                    value={selectedMenuId}
+                    onValueChange={handleMenuSelect}
+                    disabled={loading}
+                    onOpenChange={(open) => {
+                      if (open) {
+                        // Select가 열릴 때 검색창에 포커스
+                        setTimeout(() => {
+                          searchInputRef.current?.focus();
+                        }, 100);
+                      }
+                    }}
+                  >
                     <SelectTrigger>
                       <SelectValue placeholder={loading ? "메뉴 로딩 중..." : "메뉴를 선택하세요"} />
                     </SelectTrigger>
                     <SelectContent className="max-h-64">
                       {/* 검색 입력 필드 */}
-                      <div className="sticky top-0 z-10 border-b bg-white p-2">
+                      <div
+                        className="sticky top-0 z-10 border-b bg-white p-2"
+                        onKeyDown={(e) => {
+                          // 이 div 내에서 발생하는 모든 키 이벤트를 차단
+                          e.stopPropagation();
+                        }}
+                      >
                         <div className="relative">
                           <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
-                          <Input
+                          <input
+                            ref={searchInputRef}
+                            type="text"
                             placeholder="메뉴명, URL, 설명으로 검색..."
                             value={searchTerm}
+                            autoFocus
                             onChange={(e) => {
-                              e.stopPropagation(); // 이벤트 전파 방지
+                              e.stopPropagation();
                               setSearchTerm(e.target.value);
                             }}
                             onKeyDown={(e) => {
-                              e.stopPropagation(); // 키보드 이벤트 전파 방지
+                              // 이벤트가 Select로 전파되지 않도록 완전 차단
+                              e.stopPropagation();
                             }}
-                            onClick={(e) => {
+                            onClick={(e) => e.stopPropagation()}
-                              e.stopPropagation(); // 클릭 이벤트 전파 방지
+                            onFocus={(e) => e.stopPropagation()}
-                            }}
+                            onMouseDown={(e) => e.stopPropagation()}
-                            className="h-8 pr-8 pl-10 text-sm"
+                            className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-8 w-full rounded-md border px-3 py-2 pr-8 pl-10 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                           />
                           {searchTerm && (
                             <button
@@ -396,7 +471,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                                 e.stopPropagation();
                                 setSearchTerm("");
                               }}
-                              className="absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400 hover:text-muted-foreground"
+                              className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400"
                             >
                               <X className="h-3 w-3" />
                             </button>
@@ -416,12 +491,14 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                       <div className="flex-1">
                         <div className="flex items-center gap-2">
                           <h4 className="font-medium">{selectedMenu.menu_name_kor}</h4>
-                          <Badge variant="default">관리자</Badge>
+                          <Badge variant={selectedMenu.menu_type === "0" ? "default" : "secondary"}>
+                            {selectedMenu.menu_type === "0" ? "관리자" : "사용자"}
+                          </Badge>
                           <Badge variant={selectedMenu.status === "active" ? "default" : "outline"}>
                             {selectedMenu.status === "active" ? "활성" : "비활성"}
                           </Badge>
                         </div>
-                        <div className="mt-1 space-y-1 text-sm text-muted-foreground">
+                        <div className="text-muted-foreground mt-1 space-y-1 text-sm">
                           {selectedMenu.menu_url && <p>URL: {selectedMenu.menu_url}</p>}
                           {selectedMenu.menu_desc && <p>설명: {selectedMenu.menu_desc}</p>}
                           {selectedMenu.company_name && <p>회사: {selectedMenu.company_name}</p>}
@@ -494,7 +571,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
           <div className="space-y-4">
             {/* 기존 화면 목록 */}
-            <div className="rounded-lg border bg-destructive/10 p-3">
+            <div className="bg-destructive/10 rounded-lg border p-3">
               <p className="mb-2 text-sm font-medium text-red-800">제거될 화면 ({existingScreens.length}개):</p>
               <div className="space-y-1">
                 {existingScreens.map((screen) => (

frontend/components/screen/ScreenDesigner.tsx

@@ -42,6 +42,7 @@ import { MenuAssignmentModal } from "./MenuAssignmentModal";
 import { FileAttachmentDetailModal } from "./FileAttachmentDetailModal";
 import { initializeComponents } from "@/lib/registry/components";
 import { ScreenFileAPI } from "@/lib/api/screenFile";
+import { safeMigrateLayout, needsMigration } from "@/lib/utils/widthToColumnSpan";
 
 import StyleEditor from "./StyleEditor";
 import { RealtimePreview } from "./RealtimePreviewDynamic";
@@ -198,83 +199,88 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   const [forceRenderTrigger, setForceRenderTrigger] = useState(0);
 
   // 파일 컴포넌트 데이터 복원 함수 (실제 DB에서 조회)
-  const restoreFileComponentsData = useCallback(async (components: ComponentData[]) => {
+  const restoreFileComponentsData = useCallback(
-    if (!selectedScreen?.screenId) return;
+    async (components: ComponentData[]) => {
-    
+      if (!selectedScreen?.screenId) return;
-    // console.log("🔄 파일 컴포넌트 데이터 복원 시작:", components.length);
-    
-    try {
-      // 실제 DB에서 화면의 모든 파일 정보 조회
-      const fileResponse = await ScreenFileAPI.getScreenComponentFiles(selectedScreen.screenId);
-      
-      if (!fileResponse.success) {
-        // console.warn("⚠️ 파일 정보 조회 실패:", fileResponse);
-        return;
-      }
 
-      const { componentFiles } = fileResponse;
+      // console.log("🔄 파일 컴포넌트 데이터 복원 시작:", components.length);
-      
-      if (typeof window !== 'undefined') {
-        // 전역 파일 상태 초기화
-        const globalFileState: {[key: string]: any[]} = {};
-        let restoredCount = 0;
 
-        // DB에서 조회한 파일 정보를 전역 상태로 복원
+      try {
-        Object.keys(componentFiles).forEach(componentId => {
+        // 실제 DB에서 화면의 모든 파일 정보 조회
-          const files = componentFiles[componentId];
+        const fileResponse = await ScreenFileAPI.getScreenComponentFiles(selectedScreen.screenId);
-          if (files && files.length > 0) {
-            globalFileState[componentId] = files;
-            restoredCount++;
-            
-            // localStorage에도 백업
-            const backupKey = `fileComponent_${componentId}_files`;
-            localStorage.setItem(backupKey, JSON.stringify(files));
-            
-            console.log("📁 DB에서 파일 컴포넌트 데이터 복원:", {
-              componentId: componentId,
-              fileCount: files.length,
-              files: files.map(f => ({ objid: f.objid, name: f.realFileName }))
-            });
-          }
-        });
 
-        // 전역 상태 업데이트
+        if (!fileResponse.success) {
-        (window as any).globalFileState = globalFileState;
+          // console.warn("⚠️ 파일 정보 조회 실패:", fileResponse);
-        
+          return;
-        // 모든 파일 컴포넌트에 복원 완료 이벤트 발생
+        }
-        Object.keys(globalFileState).forEach(componentId => {
+
-          const files = globalFileState[componentId];
+        const { componentFiles } = fileResponse;
-          const syncEvent = new CustomEvent('globalFileStateChanged', {
+
-            detail: {
+        if (typeof window !== "undefined") {
-              componentId: componentId,
+          // 전역 파일 상태 초기화
-              files: files,
+          const globalFileState: { [key: string]: any[] } = {};
-              fileCount: files.length,
+          let restoredCount = 0;
-              timestamp: Date.now(),
+
-              isRestore: true
+          // DB에서 조회한 파일 정보를 전역 상태로 복원
+          Object.keys(componentFiles).forEach((componentId) => {
+            const files = componentFiles[componentId];
+            if (files && files.length > 0) {
+              globalFileState[componentId] = files;
+              restoredCount++;
+
+              // localStorage에도 백업
+              const backupKey = `fileComponent_${componentId}_files`;
+              localStorage.setItem(backupKey, JSON.stringify(files));
+
+              console.log("📁 DB에서 파일 컴포넌트 데이터 복원:", {
+                componentId: componentId,
+                fileCount: files.length,
+                files: files.map((f) => ({ objid: f.objid, name: f.realFileName })),
+              });
             }
           });
-          window.dispatchEvent(syncEvent);
-        });
 
-        console.log("✅ DB 파일 컴포넌트 데이터 복원 완료:", {
+          // 전역 상태 업데이트
-          totalComponents: components.length,
+          (window as any).globalFileState = globalFileState;
-          restoredFileComponents: restoredCount,
-          totalFiles: fileResponse.totalFiles,
-          globalFileState: Object.keys(globalFileState).map(id => ({
-            id,
-            fileCount: globalFileState[id]?.length || 0
-          }))
-        });
 
-        if (restoredCount > 0) {
+          // 모든 파일 컴포넌트에 복원 완료 이벤트 발생
-          toast.success(`${restoredCount}개 파일 컴포넌트 데이터가 DB에서 복원되었습니다. (총 ${fileResponse.totalFiles}개 파일)`);
+          Object.keys(globalFileState).forEach((componentId) => {
+            const files = globalFileState[componentId];
+            const syncEvent = new CustomEvent("globalFileStateChanged", {
+              detail: {
+                componentId: componentId,
+                files: files,
+                fileCount: files.length,
+                timestamp: Date.now(),
+                isRestore: true,
+              },
+            });
+            window.dispatchEvent(syncEvent);
+          });
+
+          console.log("✅ DB 파일 컴포넌트 데이터 복원 완료:", {
+            totalComponents: components.length,
+            restoredFileComponents: restoredCount,
+            totalFiles: fileResponse.totalFiles,
+            globalFileState: Object.keys(globalFileState).map((id) => ({
+              id,
+              fileCount: globalFileState[id]?.length || 0,
+            })),
+          });
+
+          if (restoredCount > 0) {
+            toast.success(
+              `${restoredCount}개 파일 컴포넌트 데이터가 DB에서 복원되었습니다. (총 ${fileResponse.totalFiles}개 파일)`,
+            );
+          }
         }
+      } catch (error) {
+        // console.error("❌ 파일 컴포넌트 데이터 복원 실패:", error);
+        toast.error("파일 데이터 복원 중 오류가 발생했습니다.");
       }
-    } catch (error) {
+    },
-      // console.error("❌ 파일 컴포넌트 데이터 복원 실패:", error);
+    [selectedScreen?.screenId],
-      toast.error("파일 데이터 복원 중 오류가 발생했습니다.");
+  );
-    }
-  }, [selectedScreen?.screenId]);
 
   // 드래그 선택 상태
   const [selectionDrag, setSelectionDrag] = useState({
@@ -747,22 +753,22 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
     try {
       // console.log("🔄 화면 파일 복원 시작:", selectedScreen.screenId);
-      
+
       // 해당 화면의 모든 파일 조회
       const response = await ScreenFileAPI.getScreenComponentFiles(selectedScreen.screenId);
-      
+
       if (response.success && response.componentFiles) {
         // console.log("📁 복원할 파일 데이터:", response.componentFiles);
-        
+
         // 각 컴포넌트별로 파일 복원 (전역 상태와 localStorage 우선 적용)
         Object.entries(response.componentFiles).forEach(([componentId, serverFiles]) => {
           if (Array.isArray(serverFiles) && serverFiles.length > 0) {
             // 🎯 전역 상태와 localStorage에서 현재 파일 상태 확인
-            const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
+            const globalFileState = typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
             const currentGlobalFiles = globalFileState[componentId] || [];
-            
+
             let currentLocalStorageFiles: any[] = [];
-            if (typeof window !== 'undefined') {
+            if (typeof window !== "undefined") {
               try {
                 const storedFiles = localStorage.getItem(`fileComponent_${componentId}_files`);
                 if (storedFiles) {
@@ -772,7 +778,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                 // console.warn("localStorage 파일 파싱 실패:", e);
               }
             }
-            
+
             // 🎯 우선순위: 전역 상태 > localStorage > 서버 데이터
             let finalFiles = serverFiles;
             if (currentGlobalFiles.length > 0) {
@@ -784,43 +790,43 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             } else {
               // console.log(`📂 컴포넌트 ${componentId} 서버 데이터 적용:`, finalFiles.length, "개");
             }
-            
+
             // 전역 상태에 파일 저장
             globalFileState[componentId] = finalFiles;
-            if (typeof window !== 'undefined') {
+            if (typeof window !== "undefined") {
               (window as any).globalFileState = globalFileState;
             }
-            
+
             // localStorage에도 백업
-            if (typeof window !== 'undefined') {
+            if (typeof window !== "undefined") {
               localStorage.setItem(`fileComponent_${componentId}_files`, JSON.stringify(finalFiles));
             }
           }
         });
-        
+
         // 레이아웃의 컴포넌트들에 파일 정보 적용 (전역 상태 우선)
-        setLayout(prevLayout => {
+        setLayout((prevLayout) => {
-          const updatedComponents = prevLayout.components.map(comp => {
+          const updatedComponents = prevLayout.components.map((comp) => {
             // 🎯 전역 상태에서 최신 파일 정보 가져오기
-            const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
+            const globalFileState = typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
             const finalFiles = globalFileState[comp.id] || [];
-            
+
             if (finalFiles.length > 0) {
               return {
                 ...comp,
                 uploadedFiles: finalFiles,
-                lastFileUpdate: Date.now()
+                lastFileUpdate: Date.now(),
               };
             }
             return comp;
           });
-          
+
           return {
             ...prevLayout,
-            components: updatedComponents
+            components: updatedComponents,
           };
         });
-        
+
         // console.log("✅ 화면 파일 복원 완료");
       }
     } catch (error) {
@@ -832,14 +838,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   useEffect(() => {
     const handleGlobalFileStateChange = (event: CustomEvent) => {
       // console.log("🔄 ScreenDesigner: 전역 파일 상태 변경 감지", event.detail);
-      setForceRenderTrigger(prev => prev + 1);
+      setForceRenderTrigger((prev) => prev + 1);
     };
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
-      window.addEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
+      window.addEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
-      
+
       return () => {
-        window.removeEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
+        window.removeEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
       };
     }
   }, []);
@@ -897,17 +903,35 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   useEffect(() => {
     if (selectedScreen?.screenId) {
       // 현재 화면 ID를 전역 변수로 설정 (파일 업로드 시 사용)
-      if (typeof window !== 'undefined') {
+      if (typeof window !== "undefined") {
         (window as any).__CURRENT_SCREEN_ID__ = selectedScreen.screenId;
       }
-      
+
       const loadLayout = async () => {
         try {
           const response = await screenApi.getLayout(selectedScreen.screenId);
           if (response) {
+            // 🔄 마이그레이션 필요 여부 확인
+            let layoutToUse = response;
+
+            if (needsMigration(response)) {
+              console.log("🔄 픽셀 기반 레이아웃 감지 - 그리드 시스템으로 마이그레이션 시작...");
+
+              const canvasWidth = response.screenResolution?.width || 1920;
+              layoutToUse = safeMigrateLayout(response, canvasWidth);
+
+              console.log("✅ 마이그레이션 완료:", {
+                originalComponents: response.components.length,
+                migratedComponents: layoutToUse.components.length,
+                sampleComponent: layoutToUse.components[0],
+              });
+
+              toast.success("레이아웃이 새로운 그리드 시스템으로 자동 변환되었습니다.");
+            }
+
             // 기본 격자 설정 보장 (격자 표시와 스냅 기본 활성화)
             const layoutWithDefaultGrid = {
-              ...response,
+              ...layoutToUse,
               gridSettings: {
                 columns: 12,
                 gap: 16,
@@ -916,14 +940,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                 showGrid: true,
                 gridColor: "#d1d5db",
                 gridOpacity: 0.5,
-                ...response.gridSettings, // 기존 설정이 있으면 덮어쓰기
+                ...layoutToUse.gridSettings, // 기존 설정이 있으면 덮어쓰기
               },
             };
 
             // 저장된 해상도 정보가 있으면 적용, 없으면 기본값 사용
-            if (response.screenResolution) {
+            if (layoutToUse.screenResolution) {
-              setScreenResolution(response.screenResolution);
+              setScreenResolution(layoutToUse.screenResolution);
-              // console.log("💾 저장된 해상도 불러옴:", response.screenResolution);
+              // console.log("💾 저장된 해상도 불러옴:", layoutToUse.screenResolution);
             } else {
               // 기본 해상도 (Full HD)
               const defaultResolution =
@@ -1728,7 +1752,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       let componentSize = component.defaultSize;
       const isCardDisplay = component.id === "card-display";
       const isTableList = component.id === "table-list";
-      
+
       // 컴포넌트별 기본 그리드 컬럼 수 설정
       const gridColumns = isCardDisplay ? 8 : isTableList ? 1 : 1;
 
@@ -1742,7 +1766,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
         // 컴포넌트별 최소 크기 보장
         const minWidth = isTableList ? 120 : isCardDisplay ? 400 : 100;
-        
+
         componentSize = {
           ...component.defaultSize,
           width: Math.max(calculatedWidth, minWidth),
@@ -2197,22 +2221,20 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     (updates: Partial<ComponentData>) => {
       if (!selectedFileComponent) return;
 
-      const updatedComponents = layout.components.map(comp =>
+      const updatedComponents = layout.components.map((comp) =>
-        comp.id === selectedFileComponent.id
+        comp.id === selectedFileComponent.id ? { ...comp, ...updates } : comp,
-          ? { ...comp, ...updates }
-          : comp
       );
 
       const newLayout = { ...layout, components: updatedComponents };
       setLayout(newLayout);
       saveToHistory(newLayout);
-      
+
       // selectedFileComponent도 업데이트
-      setSelectedFileComponent(prev => prev ? { ...prev, ...updates } : null);
+      setSelectedFileComponent((prev) => (prev ? { ...prev, ...updates } : null));
-      
+
       // selectedComponent가 같은 컴포넌트라면 업데이트
       if (selectedComponent?.id === selectedFileComponent.id) {
-        setSelectedComponent(prev => prev ? { ...prev, ...updates } : null);
+        setSelectedComponent((prev) => (prev ? { ...prev, ...updates } : null));
       }
     },
     [selectedFileComponent, layout, saveToHistory, selectedComponent],
@@ -2225,22 +2247,19 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   }, []);
 
   // 컴포넌트 더블클릭 처리
-  const handleComponentDoubleClick = useCallback(
+  const handleComponentDoubleClick = useCallback((component: ComponentData, event?: React.MouseEvent) => {
-    (component: ComponentData, event?: React.MouseEvent) => {
+    event?.stopPropagation();
-      event?.stopPropagation();
 
-      // 파일 컴포넌트인 경우 상세 모달 열기
+    // 파일 컴포넌트인 경우 상세 모달 열기
-      if (component.type === "file") {
+    if (component.type === "file") {
-        setSelectedFileComponent(component);
+      setSelectedFileComponent(component);
-        setShowFileAttachmentModal(true);
+      setShowFileAttachmentModal(true);
-        return;
+      return;
-      }
+    }
 
-      // 다른 컴포넌트 타입의 더블클릭 처리는 여기에 추가
+    // 다른 컴포넌트 타입의 더블클릭 처리는 여기에 추가
-      // console.log("더블클릭된 컴포넌트:", component.type, component.id);
+    // console.log("더블클릭된 컴포넌트:", component.type, component.id);
-    },
+  }, []);
-    [],
-  );
 
   // 컴포넌트 클릭 처리 (다중선택 지원)
   const handleComponentClick = useCallback(
@@ -3429,10 +3448,10 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         {/* 실제 작업 캔버스 (해상도 크기) - 반응형 개선 */}
         <div
           className="mx-auto bg-white shadow-lg"
-          style={{ 
+          style={{
             width: screenResolution.width,
             height: Math.max(screenResolution.height, 800), // 최소 높이 보장
-            minHeight: screenResolution.height 
+            minHeight: screenResolution.height,
           }}
         >
           <div
@@ -3533,7 +3552,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                 }
 
                 // 전역 파일 상태도 key에 포함하여 실시간 리렌더링
-                const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
+                const globalFileState = typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
                 const globalFiles = globalFileState[component.id] || [];
                 const componentFiles = (component as any).uploadedFiles || [];
                 const fileStateKey = `${globalFiles.length}-${JSON.stringify(globalFiles.map((f: any) => f.objid) || [])}-${componentFiles.length}`;
@@ -3556,16 +3575,16 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     // 설정 변경 핸들러 (테이블 페이지 크기 등 설정을 상세설정에 반영)
                     onConfigChange={(config) => {
                       // console.log("📤 테이블 설정 변경을 상세설정에 반영:", config);
-                      
+
                       // 컴포넌트의 componentConfig 업데이트
-                      const updatedComponents = layout.components.map(comp => {
+                      const updatedComponents = layout.components.map((comp) => {
                         if (comp.id === component.id) {
                           return {
                             ...comp,
                             componentConfig: {
                               ...comp.componentConfig,
-                              ...config
+                              ...config,
-                            }
+                            },
                           };
                         }
                         return comp;
@@ -3573,15 +3592,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
                       const newLayout = {
                         ...layout,
-                        components: updatedComponents
+                        components: updatedComponents,
                       };
 
                       setLayout(newLayout);
                       saveToHistory(newLayout);
-                      
+
                       console.log("✅ 컴포넌트 설정 업데이트 완료:", {
                         componentId: component.id,
-                        updatedConfig: config
+                        updatedConfig: config,
                       });
                     }}
                   >
@@ -3858,36 +3877,25 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             <StyleEditor
               style={selectedComponent.style || {}}
               onStyleChange={(newStyle) => {
-                console.log("🔧 StyleEditor 크기 변경:", {
+                console.log("🔧 StyleEditor 스타일 변경:", {
                   componentId: selectedComponent.id,
                   newStyle,
-                  currentSize: selectedComponent.size,
-                  hasWidth: !!newStyle.width,
                   hasHeight: !!newStyle.height,
                 });
 
                 // 스타일 업데이트
                 updateComponentProperty(selectedComponent.id, "style", newStyle);
 
-                // 크기가 변경된 경우 component.size도 업데이트
+                // ✅ 높이만 업데이트 (너비는 gridColumnSpan으로 제어)
-                if (newStyle.width || newStyle.height) {
+                if (newStyle.height) {
-                  const width = newStyle.width
+                  const height = parseInt(newStyle.height.replace("px", ""));
-                    ? parseInt(newStyle.width.replace("px", ""))
-                    : selectedComponent.size.width;
-                  const height = newStyle.height
-                    ? parseInt(newStyle.height.replace("px", ""))
-                    : selectedComponent.size.height;
 
-                  console.log("📏 크기 업데이트:", {
+                  console.log("📏 높이 업데이트:", {
-                    originalWidth: selectedComponent.size.width,
                     originalHeight: selectedComponent.size.height,
-                    newWidth: width,
                     newHeight: height,
-                    styleWidth: newStyle.width,
                     styleHeight: newStyle.height,
                   });
 
-                  updateComponentProperty(selectedComponent.id, "size.width", width);
                   updateComponentProperty(selectedComponent.id, "size.height", height);
                 }
               }}

frontend/components/screen/layout/ContainerComponent.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { ContainerComponent as ContainerComponentType } from "@/types/screen";
+import { buildGridClasses, COLUMN_SPAN_VALUES } from "@/lib/constants/columnSpans";
 
 interface ContainerComponentProps {
   component: ContainerComponentType;
@@ -22,12 +23,20 @@ export default function ContainerComponent({
   onMouseDown,
   isMoving,
 }: ContainerComponentProps) {
+  // 그리드 클래스 생성
+  const gridClasses = component.gridColumnSpan
+    ? buildGridClasses(component.gridColumnSpan, component.gridColumnStart)
+    : "";
+
   // 스타일 객체 생성
   const style: React.CSSProperties = {
-    gridColumn: `span ${component.size.width}`,
+    // 🔄 레거시 호환: gridColumnSpan이 없으면 기존 width 사용
+    ...(!component.gridColumnSpan && {
+      gridColumn: `span ${component.size.width}`,
+    }),
     minHeight: `${component.size.height}px`,
     ...(component.style && {
-      width: component.style.width,
+      // ❌ width는 제거 (그리드 클래스로 제어)
       height: component.style.height,
       margin: component.style.margin,
       padding: component.style.padding,
@@ -63,6 +72,7 @@ export default function ContainerComponent({
     <div
       className={cn(
         "rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
+        gridClasses, // 🆕 그리드 클래스 추가
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,

frontend/components/screen/panels/PropertiesPanel.tsx

@@ -6,8 +6,10 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; // 임시 비활성화
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-// import { Checkbox } from "@/components/ui/checkbox";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ChevronDown } from "lucide-react";
 import { Settings, Move, Type, Trash2, Copy, Group, Ungroup } from "lucide-react";
 import {
   ComponentData,
@@ -19,6 +21,8 @@ import {
   AreaLayoutType,
   TableInfo,
 } from "@/types/screen";
+import { ColumnSpanPreset, COLUMN_SPAN_PRESETS, COLUMN_SPAN_VALUES } from "@/lib/constants/columnSpans";
+import { cn } from "@/lib/utils";
 import DataTableConfigPanel from "./DataTableConfigPanel";
 import { useWebTypes } from "@/hooks/admin/useWebTypes";
 
@@ -124,16 +128,16 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
 }) => {
   // 🔍 디버깅: PropertiesPanel 렌더링 및 dragState 전달 확인
   // console.log("📍 PropertiesPanel 렌더링:", {
-    // renderTime: Date.now(),
+  // renderTime: Date.now(),
-    // selectedComponentId: selectedComponent?.id,
+  // selectedComponentId: selectedComponent?.id,
-    // dragState: dragState
+  // dragState: dragState
-      // ? {
+  // ? {
-          // isDragging: dragState.isDragging,
+  // isDragging: dragState.isDragging,
-          // draggedComponentId: dragState.draggedComponent?.id,
+  // draggedComponentId: dragState.draggedComponent?.id,
-          // currentPosition: dragState.currentPosition,
+  // currentPosition: dragState.currentPosition,
-          // dragStateRef: dragState, // 객체 참조 확인
+  // dragStateRef: dragState, // 객체 참조 확인
-        // }
+  // }
-      // : "null",
+  // : "null",
   // });
 
   // 동적 웹타입 목록 가져오기 - API에서 직접 조회
@@ -161,9 +165,9 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
   const getCurrentPosition = () => {
     if (dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id) {
       // console.log("🎯 드래그 중 실시간 위치:", {
-        // draggedId: dragState.draggedComponent?.id,
+      // draggedId: dragState.draggedComponent?.id,
-        // selectedId: selectedComponent?.id,
+      // selectedId: selectedComponent?.id,
-        // currentPosition: dragState.currentPosition,
+      // currentPosition: dragState.currentPosition,
       // });
       return {
         x: Math.round(dragState.currentPosition.x),
@@ -226,20 +230,20 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
       const area = selectedComponent.type === "area" ? (selectedComponent as AreaComponent) : null;
 
       // console.log("🔄 PropertiesPanel: 컴포넌트 변경 감지", {
-        // componentId: selectedComponent.id,
+      // componentId: selectedComponent.id,
-        // componentType: selectedComponent.type,
+      // componentType: selectedComponent.type,
-        // isDragging: dragState?.isDragging,
+      // isDragging: dragState?.isDragging,
-        // justFinishedDrag: dragState?.justFinishedDrag,
+      // justFinishedDrag: dragState?.justFinishedDrag,
-        // currentValues: {
+      // currentValues: {
-          // placeholder: widget?.placeholder,
+      // placeholder: widget?.placeholder,
-          // title: group?.title || area?.title,
+      // title: group?.title || area?.title,
-          // description: area?.description,
+      // description: area?.description,
-          // actualPositionX: selectedComponent.position.x,
+      // actualPositionX: selectedComponent.position.x,
-          // actualPositionY: selectedComponent.position.y,
+      // actualPositionY: selectedComponent.position.y,
-          // dragPositionX: dragState?.currentPosition.x,
+      // dragPositionX: dragState?.currentPosition.x,
-          // dragPositionY: dragState?.currentPosition.y,
+      // dragPositionY: dragState?.currentPosition.y,
-        // },
+      // },
-        // getCurrentPosResult: getCurrentPosition(),
+      // getCurrentPosResult: getCurrentPosition(),
       // });
 
       // 드래그 중이 아닐 때만 localInputs 업데이트 (드래그 완료 후 최종 위치 반영)
@@ -271,8 +275,8 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         });
 
         // console.log("✅ localInputs 업데이트 완료:", {
-          // positionX: currentPos.x.toString(),
+        // positionX: currentPos.x.toString(),
-          // positionY: currentPos.y.toString(),
+        // positionY: currentPos.y.toString(),
         // });
       }
     }
@@ -290,65 +294,66 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     if (selectedComponent && selectedComponent.type === "component") {
       // 삭제 액션 감지 로직 (실제 필드명 사용)
       const isDeleteAction = () => {
-        const deleteKeywords = ['삭제', 'delete', 'remove', '제거', 'del'];
+        const deleteKeywords = ["삭제", "delete", "remove", "제거", "del"];
         return (
-          selectedComponent.componentConfig?.action?.type === 'delete' || 
+          selectedComponent.componentConfig?.action?.type === "delete" ||
-          selectedComponent.config?.action?.type === 'delete' ||
+          selectedComponent.config?.action?.type === "delete" ||
-          selectedComponent.webTypeConfig?.actionType === 'delete' ||
+          selectedComponent.webTypeConfig?.actionType === "delete" ||
-          selectedComponent.text?.toLowerCase().includes('삭제') ||
+          selectedComponent.text?.toLowerCase().includes("삭제") ||
-          selectedComponent.text?.toLowerCase().includes('delete') ||
+          selectedComponent.text?.toLowerCase().includes("delete") ||
-          selectedComponent.label?.toLowerCase().includes('삭제') ||
+          selectedComponent.label?.toLowerCase().includes("삭제") ||
-          selectedComponent.label?.toLowerCase().includes('delete') ||
+          selectedComponent.label?.toLowerCase().includes("delete") ||
-          deleteKeywords.some(keyword => 
+          deleteKeywords.some(
-            selectedComponent.config?.buttonText?.toLowerCase().includes(keyword) ||
+            (keyword) =>
-            selectedComponent.config?.text?.toLowerCase().includes(keyword)
+              selectedComponent.config?.buttonText?.toLowerCase().includes(keyword) ||
+              selectedComponent.config?.text?.toLowerCase().includes(keyword),
           )
         );
       };
 
       // 🔍 디버깅: 컴포넌트 구조 확인
       // console.log("🔍 PropertiesPanel 삭제 액션 디버깅:", {
-        // componentType: selectedComponent.type,
+      // componentType: selectedComponent.type,
-        // componentId: selectedComponent.id,
+      // componentId: selectedComponent.id,
-        // componentConfig: selectedComponent.componentConfig,
+      // componentConfig: selectedComponent.componentConfig,
-        // config: selectedComponent.config,
+      // config: selectedComponent.config,
-        // webTypeConfig: selectedComponent.webTypeConfig,
+      // webTypeConfig: selectedComponent.webTypeConfig,
-        // actionType1: selectedComponent.componentConfig?.action?.type,
+      // actionType1: selectedComponent.componentConfig?.action?.type,
-        // actionType2: selectedComponent.config?.action?.type,
+      // actionType2: selectedComponent.config?.action?.type,
-        // actionType3: selectedComponent.webTypeConfig?.actionType,
+      // actionType3: selectedComponent.webTypeConfig?.actionType,
-        // isDeleteAction: isDeleteAction(),
+      // isDeleteAction: isDeleteAction(),
-        // currentLabelColor: selectedComponent.style?.labelColor,
+      // currentLabelColor: selectedComponent.style?.labelColor,
       // });
 
       // 액션에 따른 라벨 색상 자동 설정
       if (isDeleteAction()) {
         // 삭제 액션일 때 빨간색으로 설정 (이미 빨간색이 아닌 경우에만)
-        if (selectedComponent.style?.labelColor !== '#ef4444') {
+        if (selectedComponent.style?.labelColor !== "#ef4444") {
           // console.log("🔴 삭제 액션 감지: 라벨 색상을 빨간색으로 자동 설정");
           onUpdateProperty("style", {
             ...selectedComponent.style,
-            labelColor: '#ef4444'
+            labelColor: "#ef4444",
           });
-          
+
           // 로컬 입력 상태도 업데이트
-          setLocalInputs(prev => ({
+          setLocalInputs((prev) => ({
             ...prev,
-            labelColor: '#ef4444'
+            labelColor: "#ef4444",
           }));
         }
       } else {
         // 다른 액션일 때 기본 파란색으로 리셋 (현재 빨간색인 경우에만)
-        if (selectedComponent.style?.labelColor === '#ef4444') {
+        if (selectedComponent.style?.labelColor === "#ef4444") {
           // console.log("🔵 일반 액션 감지: 라벨 색상을 기본 파란색으로 리셋");
           onUpdateProperty("style", {
             ...selectedComponent.style,
-            labelColor: '#212121'
+            labelColor: "#212121",
           });
-          
+
           // 로컬 입력 상태도 업데이트
-          setLocalInputs(prev => ({
+          setLocalInputs((prev) => ({
             ...prev,
-            labelColor: '#212121'
+            labelColor: "#212121",
           }));
         }
       }
@@ -360,16 +365,16 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     selectedComponent?.id,
     selectedComponent?.style?.labelColor, // 라벨 색상 변경도 감지
     JSON.stringify(selectedComponent?.componentConfig), // 전체 componentConfig 변경 감지
-    onUpdateProperty
+    onUpdateProperty,
   ]);
 
   // 렌더링 시마다 실행되는 직접적인 드래그 상태 체크
   if (dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id) {
     // console.log("🎯 렌더링 중 드래그 상태 감지:", {
-      // isDragging: dragState.isDragging,
+    // isDragging: dragState.isDragging,
-      // draggedId: dragState.draggedComponent?.id,
+    // draggedId: dragState.draggedComponent?.id,
-      // selectedId: selectedComponent?.id,
+    // selectedId: selectedComponent?.id,
-      // currentPosition: dragState.currentPosition,
+    // currentPosition: dragState.currentPosition,
     // });
 
     const newPosition = {
@@ -380,8 +385,8 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     // 위치가 변경되었는지 확인
     if (lastDragPosition.x !== newPosition.x || lastDragPosition.y !== newPosition.y) {
       // console.log("🔄 위치 변경 감지됨:", {
-        // oldPosition: lastDragPosition,
+      // oldPosition: lastDragPosition,
-        // newPosition: newPosition,
+      // newPosition: newPosition,
       // });
       // 다음 렌더링 사이클에서 업데이트
       setTimeout(() => {
@@ -409,7 +414,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         <div className="border-b border-gray-200 p-4">
           <div className="mb-3 flex items-center justify-between">
             <div className="flex items-center space-x-2">
-              <Settings className="h-5 w-5 text-muted-foreground" />
+              <Settings className="text-muted-foreground h-5 w-5" />
               <span className="text-lg font-semibold">데이터 테이블 설정</span>
             </div>
             <Badge variant="secondary" className="text-xs">
@@ -450,7 +455,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
       <div className="border-b border-gray-200 p-4">
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <Settings className="h-4 w-4 text-muted-foreground" />
+            <Settings className="text-muted-foreground h-4 w-4" />
             <h3 className="font-medium text-gray-900">속성 편집</h3>
           </div>
           <Badge variant="secondary" className="text-xs">
@@ -491,7 +496,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         {/* 기본 정보 */}
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
-            <Type className="h-4 w-4 text-muted-foreground" />
+            <Type className="text-muted-foreground h-4 w-4" />
             <h4 className="font-medium text-gray-900">기본 정보</h4>
           </div>
 
@@ -507,7 +512,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                     value={selectedComponent.columnName || ""}
                     readOnly
                     placeholder="데이터베이스 컬럼명"
-                    className="mt-1 bg-gray-50 text-muted-foreground"
+                    className="text-muted-foreground mt-1 bg-gray-50"
                     title="컬럼명은 변경할 수 없습니다"
                   />
                 </div>
@@ -517,7 +522,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                     위젯 타입
                   </Label>
                   <select
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                     value={localInputs.widgetType}
                     onChange={(e) => {
                       const value = e.target.value as WebType;
@@ -594,7 +599,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         {/* 위치 및 크기 */}
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
-            <Move className="h-4 w-4 text-muted-foreground" />
+            <Move className="text-muted-foreground h-4 w-4" />
             <h4 className="font-medium text-gray-900">위치 및 크기</h4>
           </div>
 
@@ -622,7 +627,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "border-blue-300 bg-accent text-blue-700"
+                    ? "bg-accent border-blue-300 text-blue-700"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -652,7 +657,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "border-blue-300 bg-accent text-blue-700"
+                    ? "bg-accent border-blue-300 text-blue-700"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -662,26 +667,94 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             {/* 카드 레이아웃은 자동 크기 계산으로 너비/높이 설정 숨김 */}
             {selectedComponent?.type !== "layout" || (selectedComponent as any)?.layoutType !== "card" ? (
               <>
-                <div>
+                {/* 🆕 컬럼 스팬 선택 (width 대체) */}
-                  <Label htmlFor="width" className="text-sm font-medium">
+                <div className="col-span-2">
-                    너비
+                  <Label className="text-sm font-medium">컴포넌트 너비</Label>
-                  </Label>
+                  <Select
-                  <Input
+                    value={selectedComponent.gridColumnSpan || "half"}
-                    id="width"
+                    onValueChange={(value) => {
-                    type="number"
+                      onUpdateProperty("gridColumnSpan", value as ColumnSpanPreset);
-                    value={localInputs.width}
-                    onChange={(e) => {
-                      const newValue = e.target.value;
-                      setLocalInputs((prev) => ({ ...prev, width: newValue }));
-                      onUpdateProperty("size.width", Number(newValue));
                     }}
-                    className="mt-1"
+                  >
-                  />
+                    <SelectTrigger className="mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(COLUMN_SPAN_PRESETS)
+                        .filter(([key]) => key !== "auto")
+                        .map(([key, info]) => (
+                          <SelectItem key={key} value={key}>
+                            <div className="flex w-full items-center justify-between gap-4">
+                              <span>{info.label}</span>
+                              <span className="text-xs text-gray-500">
+                                {info.value}/12 ({info.percentage})
+                              </span>
+                            </div>
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
+
+                  {/* 시각적 프리뷰 */}
+                  <div className="mt-3 space-y-2">
+                    <Label className="text-xs text-gray-500">미리보기</Label>
+                    <div className="grid h-6 grid-cols-12 gap-0.5 overflow-hidden rounded border">
+                      {Array.from({ length: 12 }).map((_, i) => {
+                        const spanValue = COLUMN_SPAN_VALUES[selectedComponent.gridColumnSpan || "half"];
+                        const startCol = selectedComponent.gridColumnStart || 1;
+                        const isActive = i + 1 >= startCol && i + 1 < startCol + spanValue;
+
+                        return (
+                          <div
+                            key={i}
+                            className={cn("h-full transition-colors", isActive ? "bg-blue-500" : "bg-gray-100")}
+                          />
+                        );
+                      })}
+                    </div>
+                    <p className="text-center text-xs text-gray-500">
+                      {COLUMN_SPAN_VALUES[selectedComponent.gridColumnSpan || "half"]} / 12 컬럼
+                    </p>
+                  </div>
+
+                  {/* 고급 설정 */}
+                  <Collapsible className="mt-3">
+                    <CollapsibleTrigger asChild>
+                      <Button variant="ghost" size="sm" className="w-full justify-between">
+                        <span className="text-xs">고급 설정</span>
+                        <ChevronDown className="h-3 w-3" />
+                      </Button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="mt-2 space-y-2">
+                      <div>
+                        <Label className="text-xs">시작 컬럼 위치</Label>
+                        <Select
+                          value={selectedComponent.gridColumnStart?.toString() || "auto"}
+                          onValueChange={(value) => {
+                            onUpdateProperty("gridColumnStart", value === "auto" ? undefined : parseInt(value));
+                          }}
+                        >
+                          <SelectTrigger className="mt-1">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="auto">자동</SelectItem>
+                            {Array.from({ length: 12 }, (_, i) => (
+                              <SelectItem key={i + 1} value={(i + 1).toString()}>
+                                {i + 1}번 컬럼부터
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <p className="mt-1 text-xs text-gray-500">"자동"을 선택하면 이전 컴포넌트 다음에 배치됩니다</p>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
                 </div>
 
                 <div>
                   <Label htmlFor="height" className="text-sm font-medium">
-                    높이
+                    높이 (px)
                   </Label>
                   <Input
                     id="height"
@@ -697,8 +770,8 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 </div>
               </>
             ) : (
-              <div className="col-span-2 rounded-lg bg-accent p-3 text-center">
+              <div className="bg-accent col-span-2 rounded-lg p-3 text-center">
-                <p className="text-sm text-primary">카드 레이아웃은 자동으로 크기가 계산됩니다</p>
+                <p className="text-primary text-sm">카드 레이아웃은 자동으로 크기가 계산됩니다</p>
                 <p className="mt-1 text-xs text-blue-500">카드 개수와 간격 설정은 상세설정에서 조정하세요</p>
               </div>
             )}
@@ -756,7 +829,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         {/* 라벨 스타일 */}
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
-            <Type className="h-4 w-4 text-muted-foreground" />
+            <Type className="text-muted-foreground h-4 w-4" />
             <h4 className="font-medium text-gray-900">라벨 설정</h4>
           </div>
 
@@ -840,7 +913,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 폰트 굵기
               </Label>
               <select
-                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                 value={selectedComponent.style?.labelFontWeight || "500"}
                 onChange={(e) => onUpdateProperty("style.labelFontWeight", e.target.value)}
               >
@@ -863,7 +936,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 텍스트 정렬
               </Label>
               <select
-                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                 value={selectedComponent.style?.labelTextAlign || "left"}
                 onChange={(e) => onUpdateProperty("style.labelTextAlign", e.target.value)}
               >
@@ -900,7 +973,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             {/* 그룹 설정 */}
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
-                <Group className="h-4 w-4 text-muted-foreground" />
+                <Group className="text-muted-foreground h-4 w-4" />
                 <h4 className="font-medium text-gray-900">그룹 설정</h4>
               </div>
 
@@ -931,7 +1004,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             {/* 영역 설정 */}
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
-                <Settings className="h-4 w-4 text-muted-foreground" />
+                <Settings className="text-muted-foreground h-4 w-4" />
                 <h4 className="font-medium text-gray-900">영역 설정</h4>
               </div>
 
@@ -974,7 +1047,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   레이아웃 타입
                 </Label>
                 <select
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   value={(selectedComponent as AreaComponent).layoutType}
                   onChange={(e) => onUpdateProperty("layoutType", e.target.value as AreaLayoutType)}
                 >
@@ -1035,7 +1108,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">정렬 방식</Label>
                     <select
-                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.justifyContent || "flex-start"}
                       onChange={(e) => onUpdateProperty("layoutConfig.justifyContent", e.target.value)}
                     >
@@ -1069,7 +1142,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">사이드바 위치</Label>
                     <select
-                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.sidebarPosition || "left"}
                       onChange={(e) => onUpdateProperty("layoutConfig.sidebarPosition", e.target.value)}
                     >

frontend/components/screen/panels/RowSettingsPanel.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { LayoutRow } from "@/types/grid-system";
+import { GapPreset, GAP_PRESETS } from "@/lib/constants/columnSpans";
+import { Rows, AlignHorizontalJustifyCenter, AlignVerticalJustifyCenter } from "lucide-react";
+
+interface RowSettingsPanelProps {
+  row: LayoutRow;
+  onUpdateRow: (updates: Partial<LayoutRow>) => void;
+}
+
+export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdateRow }) => {
+  return (
+    <div className="space-y-6 p-4">
+      {/* 헤더 */}
+      <div className="flex items-center gap-2">
+        <Rows className="text-primary h-5 w-5" />
+        <h3 className="text-lg font-semibold">행 설정</h3>
+        <span className="text-sm text-gray-500">#{row.rowIndex + 1}</span>
+      </div>
+
+      <Separator />
+
+      {/* 높이 설정 */}
+      <div className="space-y-3">
+        <Label className="text-sm font-medium">행 높이</Label>
+        <Select
+          value={row.height}
+          onValueChange={(value: "auto" | "fixed" | "min" | "max") => onUpdateRow({ height: value })}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="auto">자동 (컨텐츠에 맞춤)</SelectItem>
+            <SelectItem value="fixed">고정 높이</SelectItem>
+            <SelectItem value="min">최소 높이</SelectItem>
+            <SelectItem value="max">최대 높이</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {/* 고정 높이 입력 */}
+        {row.height === "fixed" && (
+          <div>
+            <Label className="text-xs text-gray-500">높이 (px)</Label>
+            <Input
+              type="number"
+              value={row.fixedHeight || 100}
+              onChange={(e) => onUpdateRow({ fixedHeight: parseInt(e.target.value) })}
+              className="mt-1"
+              placeholder="100"
+              min={50}
+              max={1000}
+            />
+          </div>
+        )}
+
+        {/* 최소 높이 입력 */}
+        {row.height === "min" && (
+          <div>
+            <Label className="text-xs text-gray-500">최소 높이 (px)</Label>
+            <Input
+              type="number"
+              value={row.minHeight || 50}
+              onChange={(e) => onUpdateRow({ minHeight: parseInt(e.target.value) })}
+              className="mt-1"
+              placeholder="50"
+              min={0}
+              max={1000}
+            />
+          </div>
+        )}
+
+        {/* 최대 높이 입력 */}
+        {row.height === "max" && (
+          <div>
+            <Label className="text-xs text-gray-500">최대 높이 (px)</Label>
+            <Input
+              type="number"
+              value={row.maxHeight || 500}
+              onChange={(e) => onUpdateRow({ maxHeight: parseInt(e.target.value) })}
+              className="mt-1"
+              placeholder="500"
+              min={0}
+              max={2000}
+            />
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* 간격 설정 */}
+      <div className="space-y-3">
+        <Label className="text-sm font-medium">컴포넌트 간격</Label>
+        <div className="grid grid-cols-3 gap-2">
+          {(Object.keys(GAP_PRESETS) as GapPreset[]).map((preset) => (
+            <Button
+              key={preset}
+              variant={row.gap === preset ? "default" : "outline"}
+              size="sm"
+              onClick={() => onUpdateRow({ gap: preset })}
+              className="text-xs"
+            >
+              {GAP_PRESETS[preset].label}
+            </Button>
+          ))}
+        </div>
+        <p className="text-xs text-gray-500">현재: {GAP_PRESETS[row.gap].pixels}</p>
+      </div>
+
+      <Separator />
+
+      {/* 패딩 설정 */}
+      <div className="space-y-3">
+        <Label className="text-sm font-medium">행 패딩</Label>
+        <div className="grid grid-cols-3 gap-2">
+          {(Object.keys(GAP_PRESETS) as GapPreset[]).map((preset) => (
+            <Button
+              key={preset}
+              variant={row.padding === preset ? "default" : "outline"}
+              size="sm"
+              onClick={() => onUpdateRow({ padding: preset })}
+              className="text-xs"
+            >
+              {GAP_PRESETS[preset].label}
+            </Button>
+          ))}
+        </div>
+        <p className="text-xs text-gray-500">현재: {GAP_PRESETS[row.padding].pixels}</p>
+      </div>
+
+      <Separator />
+
+      {/* 수평 정렬 */}
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <AlignHorizontalJustifyCenter className="h-4 w-4 text-gray-600" />
+          <Label className="text-sm font-medium">수평 정렬</Label>
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <Button
+            variant={row.alignment === "start" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ alignment: "start" })}
+          >
+            왼쪽
+          </Button>
+          <Button
+            variant={row.alignment === "center" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ alignment: "center" })}
+          >
+            중앙
+          </Button>
+          <Button
+            variant={row.alignment === "end" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ alignment: "end" })}
+          >
+            오른쪽
+          </Button>
+          <Button
+            variant={row.alignment === "stretch" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ alignment: "stretch" })}
+          >
+            늘림
+          </Button>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 수직 정렬 */}
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <AlignVerticalJustifyCenter className="h-4 w-4 text-gray-600" />
+          <Label className="text-sm font-medium">수직 정렬</Label>
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <Button
+            variant={row.verticalAlignment === "top" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ verticalAlignment: "top" })}
+          >
+            위
+          </Button>
+          <Button
+            variant={row.verticalAlignment === "middle" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ verticalAlignment: "middle" })}
+          >
+            중앙
+          </Button>
+          <Button
+            variant={row.verticalAlignment === "bottom" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ verticalAlignment: "bottom" })}
+          >
+            아래
+          </Button>
+          <Button
+            variant={row.verticalAlignment === "stretch" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onUpdateRow({ verticalAlignment: "stretch" })}
+          >
+            늘림
+          </Button>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 배경색 */}
+      <div className="space-y-3">
+        <Label className="text-sm font-medium">배경색</Label>
+        <div className="flex gap-2">
+          <Input
+            type="color"
+            value={row.backgroundColor || "#ffffff"}
+            onChange={(e) => onUpdateRow({ backgroundColor: e.target.value })}
+            className="h-10 w-20 cursor-pointer p-1"
+          />
+          <Input
+            type="text"
+            value={row.backgroundColor || ""}
+            onChange={(e) => onUpdateRow({ backgroundColor: e.target.value })}
+            placeholder="#ffffff"
+            className="flex-1"
+          />
+          {row.backgroundColor && (
+            <Button variant="ghost" size="sm" onClick={() => onUpdateRow({ backgroundColor: undefined })}>
+              초기화
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/contexts/ReportDesignerContext.tsx

@@ -1,23 +1,10 @@
 "use client";
 
 import { createContext, useContext, useState, useCallback, ReactNode, useEffect, useRef } from "react";
-import {
+import { ComponentConfig, ReportDetail, ReportLayout, ReportPage, ReportLayoutConfig } from "@/types/report";
-  ComponentConfig,
-  ReportDetail,
-  ReportLayout,
-  ReportPage,
-  ReportLayoutConfig,
-  GridConfig,
-} from "@/types/report";
 import { reportApi } from "@/lib/api/reportApi";
 import { useToast } from "@/hooks/use-toast";
 import { v4 as uuidv4 } from "uuid";
-import {
-  snapComponentToGrid,
-  createDefaultGridConfig,
-  calculateGridDimensions,
-  detectGridCollision,
-} from "@/lib/utils/gridUtils";
 
 export interface ReportQuery {
   id: string;
@@ -84,10 +71,6 @@ interface ReportDesignerContextType {
   // 템플릿 적용
   applyTemplate: (templateId: string) => void;
 
-  // 그리드 관리
-  gridConfig: GridConfig;
-  updateGridConfig: (updates: Partial<GridConfig>) => void;
-
   // 캔버스 설정
   canvasWidth: number;
   canvasHeight: number;
@@ -226,50 +209,10 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     [], // ref를 사용하므로 의존성 배열 비움
   );
 
-  // 그리드 설정
+  // 레이아웃 도구 설정
-  const [gridConfig, setGridConfig] = useState<GridConfig>(() => {
+  const [gridSize, setGridSize] = useState(10); // Grid Snap 크기 (px)
-    // 기본 페이지 크기 (A4: 794 x 1123 px at 96 DPI)
+  const [showGrid, setShowGrid] = useState(true); // Grid 표시 여부
-    const defaultPageWidth = 794;
+  const [snapToGrid, setSnapToGrid] = useState(true); // Grid Snap 활성화
-    const defaultPageHeight = 1123;
-    return createDefaultGridConfig(defaultPageWidth, defaultPageHeight);
-  });
-
-  // gridConfig 업데이트 함수
-  const updateGridConfig = useCallback(
-    (updates: Partial<GridConfig>) => {
-      setGridConfig((prev) => {
-        const newConfig = { ...prev, ...updates };
-
-        // cellWidth나 cellHeight가 변경되면 rows/columns 재계산
-        if (updates.cellWidth || updates.cellHeight) {
-          const pageWidth = currentPage?.width ? currentPage.width * 3.7795275591 : 794; // mm to px
-          const pageHeight = currentPage?.height ? currentPage.height * 3.7795275591 : 1123;
-          const { rows, columns } = calculateGridDimensions(
-            pageWidth,
-            pageHeight,
-            newConfig.cellWidth,
-            newConfig.cellHeight,
-          );
-          newConfig.rows = rows;
-          newConfig.columns = columns;
-        }
-
-        return newConfig;
-      });
-    },
-    [currentPage],
-  );
-
-  // 레거시 호환성을 위한 별칭
-  const gridSize = gridConfig.cellWidth;
-  const showGrid = gridConfig.visible;
-  const snapToGrid = gridConfig.snapToGrid;
-  const setGridSize = useCallback(
-    (size: number) => updateGridConfig({ cellWidth: size, cellHeight: size }),
-    [updateGridConfig],
-  );
-  const setShowGrid = useCallback((visible: boolean) => updateGridConfig({ visible }), [updateGridConfig]);
-  const setSnapToGrid = useCallback((snap: boolean) => updateGridConfig({ snapToGrid: snap }), [updateGridConfig]);
 
   // 눈금자 표시
   const [showRuler, setShowRuler] = useState(true);
@@ -1235,23 +1178,9 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
   // 컴포넌트 추가 (현재 페이지에)
   const addComponent = useCallback(
     (component: ComponentConfig) => {
-      // 그리드 스냅 적용
+      setComponents((prev) => [...prev, component]);
-      const snappedComponent = snapComponentToGrid(component, gridConfig);
-
-      // 충돌 감지
-      const currentComponents = currentPage?.components || [];
-      if (detectGridCollision(snappedComponent, currentComponents, gridConfig)) {
-        toast({
-          title: "경고",
-          description: "다른 컴포넌트와 겹칩니다. 다른 위치에 배치해주세요.",
-          variant: "destructive",
-        });
-        return;
-      }
-
-      setComponents((prev) => [...prev, snappedComponent]);
     },
-    [setComponents, gridConfig, currentPage, toast],
+    [setComponents],
   );
 
   // 컴포넌트 업데이트 (현재 페이지에서)
@@ -1259,60 +1188,18 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     (id: string, updates: Partial<ComponentConfig>) => {
       if (!currentPageId) return;
 
-      setLayoutConfig((prev) => {
+      setLayoutConfig((prev) => ({
-        let hasCollision = false;
+        pages: prev.pages.map((page) =>
-
+          page.page_id === currentPageId
-        const newPages = prev.pages.map((page) => {
+            ? {
-          if (page.page_id !== currentPageId) return page;
+                ...page,
-
+                components: page.components.map((comp) => (comp.id === id ? { ...comp, ...updates } : comp)),
-          const newComponents = page.components.map((comp) => {
-            if (comp.id !== id) return comp;
-
-            // 업데이트된 컴포넌트에 그리드 스냅 적용
-            const updated = { ...comp, ...updates };
-
-            // 위치나 크기가 변경된 경우에만 스냅 적용 및 충돌 감지
-            if (
-              updates.x !== undefined ||
-              updates.y !== undefined ||
-              updates.width !== undefined ||
-              updates.height !== undefined
-            ) {
-              const snapped = snapComponentToGrid(updated, gridConfig);
-
-              // 충돌 감지 (자신을 제외한 다른 컴포넌트와)
-              const otherComponents = page.components.filter((c) => c.id !== id);
-              if (detectGridCollision(snapped, otherComponents, gridConfig)) {
-                hasCollision = true;
-                return comp; // 충돌 시 원래 상태 유지
               }
-
+            : page,
-              return snapped;
+        ),
-            }
+      }));
-
-            return updated;
-          });
-
-          return {
-            ...page,
-            components: newComponents,
-          };
-        });
-
-        // 충돌이 감지된 경우 토스트 메시지 표시 및 업데이트 취소
-        if (hasCollision) {
-          toast({
-            title: "경고",
-            description: "다른 컴포넌트와 겹칩니다.",
-            variant: "destructive",
-          });
-          return prev;
-        }
-
-        return { pages: newPages };
-      });
     },
-    [currentPageId, gridConfig, toast],
+    [currentPageId],
   );
 
   // 컴포넌트 삭제 (현재 페이지에서)
@@ -1426,36 +1313,14 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
         window.history.replaceState({}, "", `/admin/report/designer/${actualReportId}`);
       }
 
-      // 백엔드 호환성을 위해 첫 번째 페이지 정보를 레거시 필드로 변환
+      // 레이아웃 저장 (페이지 구조로)
-      const firstPage = layoutConfig.pages[0];
+      await reportApi.saveLayout(actualReportId, {
-      const legacyFormat = firstPage
+        layoutConfig, // 페이지 기반 구조
-        ? {
+        queries: queries.map((q) => ({
-            canvasWidth: firstPage.width,
+          ...q,
-            canvasHeight: firstPage.height,
+          externalConnectionId: q.externalConnectionId || undefined,
-            pageOrientation: firstPage.orientation,
+        })),
-            components: firstPage.components,
+      });
-            margins: firstPage.margins,
-            // 새로운 페이지 기반 구조도 함께 전송
-            layoutConfig,
-            queries: queries.map((q) => ({
-              ...q,
-              externalConnectionId: q.externalConnectionId || undefined,
-            })),
-          }
-        : {
-            canvasWidth: 210,
-            canvasHeight: 297,
-            pageOrientation: "portrait" as const,
-            components: [],
-            layoutConfig,
-            queries: queries.map((q) => ({
-              ...q,
-              externalConnectionId: q.externalConnectionId || undefined,
-            })),
-          };
-
-      // 레이아웃 저장
-      await reportApi.saveLayout(actualReportId, legacyFormat);
 
       toast({
         title: "성공",
@@ -1676,9 +1541,6 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     // 그룹화
     groupComponents,
     ungroupComponents,
-    // 그리드 관리
-    gridConfig,
-    updateGridConfig,
   };
 
   return <ReportDesignerContext.Provider value={value}>{children}</ReportDesignerContext.Provider>;

frontend/lib/api/client.ts

@@ -12,12 +12,12 @@ const getApiBaseUrl = (): string => {
     const currentHost = window.location.hostname;
     const currentPort = window.location.port;
 
-    // 🎯 로컬 개발환경: Next.js 프록시 사용 (대용량 요청 안정성)
+    // 로컬 개발환경: localhost:9771 또는 localhost:3000 → localhost:8080
     if (
       (currentHost === "localhost" || currentHost === "127.0.0.1") &&
       (currentPort === "9771" || currentPort === "3000")
     ) {
-      return "/api"; // 프록시 사용
+      return "http://localhost:8080/api";
     }
   }
 

frontend/lib/api/menu.ts

@@ -78,7 +78,7 @@ export interface ApiResponse<T> {
 export const menuApi = {
   // 관리자 메뉴 목록 조회
   getAdminMenus: async (): Promise<ApiResponse<MenuItem[]>> => {
-    const response = await apiClient.get("/admin/menus");
+    const response = await apiClient.get("/admin/menus", { params: { menuType: "0" } });
     if (response.data.success && response.data.data && response.data.data.length > 0) {
     }
     return response.data;
@@ -86,7 +86,7 @@ export const menuApi = {
 
   // 사용자 메뉴 목록 조회
   getUserMenus: async (): Promise<ApiResponse<MenuItem[]>> => {
-    const response = await apiClient.get("/admin/user-menus");
+    const response = await apiClient.get("/admin/menus", { params: { menuType: "1" } });
     return response.data;
   },
 

frontend/lib/constants/columnSpans.ts

@@ -0,0 +1,264 @@
+/**
+ * 🎨 그리드 시스템 - 컬럼 스팬 상수 정의
+ *
+ * Tailwind CSS 12컬럼 그리드 시스템을 위한 프리셋 정의
+ */
+
+/**
+ * 컬럼 스팬 프리셋 타입
+ */
+export type ColumnSpanPreset =
+  | "full" // 12 컬럼 (100%)
+  | "half" // 6 컬럼 (50%)
+  | "third" // 4 컬럼 (33%)
+  | "twoThirds" // 8 컬럼 (67%)
+  | "quarter" // 3 컬럼 (25%)
+  | "threeQuarters" // 9 컬럼 (75%)
+  | "label" // 3 컬럼 (25%) - 폼 라벨 전용
+  | "input" // 9 컬럼 (75%) - 폼 입력 전용
+  | "small" // 2 컬럼 (17%)
+  | "medium" // 4 컬럼 (33%)
+  | "large" // 8 컬럼 (67%)
+  | "auto"; // 자동 계산
+
+/**
+ * 컬럼 스팬 값 매핑
+ */
+export const COLUMN_SPAN_VALUES: Record<ColumnSpanPreset, number> = {
+  full: 12,
+  half: 6,
+  third: 4,
+  twoThirds: 8,
+  quarter: 3,
+  threeQuarters: 9,
+  label: 3,
+  input: 9,
+  small: 2,
+  medium: 4,
+  large: 8,
+  auto: 0, // 자동 계산 시 0
+};
+
+/**
+ * 컬럼 스팬 프리셋 정보
+ */
+export interface ColumnSpanPresetInfo {
+  value: number;
+  label: string;
+  percentage: string;
+  class: string;
+  description?: string;
+}
+
+/**
+ * 컬럼 스팬 프리셋 상세 정보
+ */
+export const COLUMN_SPAN_PRESETS: Record<ColumnSpanPreset, ColumnSpanPresetInfo> = {
+  full: {
+    value: 12,
+    label: "전체",
+    percentage: "100%",
+    class: "col-span-12",
+    description: "전체 너비 (테이블, 제목 등)",
+  },
+  half: {
+    value: 6,
+    label: "절반",
+    percentage: "50%",
+    class: "col-span-6",
+    description: "2분할 레이아웃",
+  },
+  third: {
+    value: 4,
+    label: "1/3",
+    percentage: "33%",
+    class: "col-span-4",
+    description: "3분할 레이아웃",
+  },
+  twoThirds: {
+    value: 8,
+    label: "2/3",
+    percentage: "67%",
+    class: "col-span-8",
+    description: "큰 컴포넌트",
+  },
+  quarter: {
+    value: 3,
+    label: "1/4",
+    percentage: "25%",
+    class: "col-span-3",
+    description: "4분할 레이아웃",
+  },
+  threeQuarters: {
+    value: 9,
+    label: "3/4",
+    percentage: "75%",
+    class: "col-span-9",
+    description: "입력 필드",
+  },
+  label: {
+    value: 3,
+    label: "라벨용",
+    percentage: "25%",
+    class: "col-span-3",
+    description: "폼 라벨 전용",
+  },
+  input: {
+    value: 9,
+    label: "입력용",
+    percentage: "75%",
+    class: "col-span-9",
+    description: "폼 입력 전용",
+  },
+  small: {
+    value: 2,
+    label: "작게",
+    percentage: "17%",
+    class: "col-span-2",
+    description: "아이콘, 체크박스",
+  },
+  medium: {
+    value: 4,
+    label: "보통",
+    percentage: "33%",
+    class: "col-span-4",
+    description: "보통 크기 컴포넌트",
+  },
+  large: {
+    value: 8,
+    label: "크게",
+    percentage: "67%",
+    class: "col-span-8",
+    description: "큰 컴포넌트",
+  },
+  auto: {
+    value: 0,
+    label: "자동",
+    percentage: "auto",
+    class: "",
+    description: "자동 계산",
+  },
+};
+
+/**
+ * Gap/Spacing 프리셋 타입
+ */
+export type GapPreset = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+/**
+ * Gap 프리셋 정보
+ */
+export interface GapPresetInfo {
+  value: number;
+  label: string;
+  pixels: string;
+  class: string;
+}
+
+/**
+ * Gap 프리셋 상세 정보
+ */
+export const GAP_PRESETS: Record<GapPreset, GapPresetInfo> = {
+  none: {
+    value: 0,
+    label: "없음",
+    pixels: "0px",
+    class: "gap-0",
+  },
+  xs: {
+    value: 2,
+    label: "매우 작게",
+    pixels: "8px",
+    class: "gap-2",
+  },
+  sm: {
+    value: 4,
+    label: "작게",
+    pixels: "16px",
+    class: "gap-4",
+  },
+  md: {
+    value: 6,
+    label: "보통",
+    pixels: "24px",
+    class: "gap-6",
+  },
+  lg: {
+    value: 8,
+    label: "크게",
+    pixels: "32px",
+    class: "gap-8",
+  },
+  xl: {
+    value: 12,
+    label: "매우 크게",
+    pixels: "48px",
+    class: "gap-12",
+  },
+};
+
+/**
+ * 컬럼 스팬 유효성 검사
+ */
+export function isValidColumnSpan(value: string): value is ColumnSpanPreset {
+  return value in COLUMN_SPAN_VALUES;
+}
+
+/**
+ * 컬럼 스팬 값 가져오기
+ */
+export function getColumnSpanValue(preset: ColumnSpanPreset): number {
+  return COLUMN_SPAN_VALUES[preset];
+}
+
+/**
+ * Tailwind 그리드 클래스 생성
+ */
+export function getColumnSpanClass(preset: ColumnSpanPreset): string {
+  return COLUMN_SPAN_PRESETS[preset].class;
+}
+
+/**
+ * 컬럼 시작 위치 클래스 생성
+ */
+export function getColumnStartClass(start: number): string {
+  if (start < 1 || start > 12) {
+    console.warn(`Invalid column start: ${start}. Must be between 1 and 12.`);
+    return "";
+  }
+  return `col-start-${start}`;
+}
+
+/**
+ * 전체 그리드 클래스 조합
+ */
+export function buildGridClasses(columnSpan: ColumnSpanPreset, columnStart?: number): string {
+  const classes: string[] = [];
+
+  // 컬럼 스팬
+  const spanClass = getColumnSpanClass(columnSpan);
+  if (spanClass) {
+    classes.push(spanClass);
+  }
+
+  // 시작 위치
+  if (columnStart !== undefined && columnStart > 0) {
+    classes.push(getColumnStartClass(columnStart));
+  }
+
+  return classes.join(" ");
+}
+
+/**
+ * Gap 클래스 생성
+ */
+export function getGapClass(preset: GapPreset): string {
+  return GAP_PRESETS[preset].class;
+}
+
+/**
+ * Padding 클래스 생성 (gap 클래스를 padding으로 변환)
+ */
+export function getPaddingClass(preset: GapPreset): string {
+  return GAP_PRESETS[preset].class.replace("gap-", "p-");
+}

frontend/lib/utils/widthToColumnSpan.ts

@@ -0,0 +1,266 @@
+/**
+ * 🔄 Width를 컬럼 스팬으로 변환하는 마이그레이션 유틸리티
+ *
+ * 기존 픽셀 기반 width 값을 새로운 그리드 시스템의 컬럼 스팬으로 변환
+ */
+
+import { ColumnSpanPreset, COLUMN_SPAN_VALUES, getColumnSpanValue } from "@/lib/constants/columnSpans";
+import { ComponentData, LayoutData } from "@/types/screen";
+
+/**
+ * 픽셀 width를 가장 가까운 ColumnSpanPreset으로 변환
+ *
+ * @param width 픽셀 너비
+ * @param canvasWidth 캔버스 전체 너비 (기본: 1920px)
+ * @returns 가장 가까운 컬럼 스팬 프리셋
+ */
+export function convertWidthToColumnSpan(width: number, canvasWidth: number = 1920): ColumnSpanPreset {
+  if (width <= 0 || canvasWidth <= 0) {
+    return "half"; // 기본값
+  }
+
+  const percentage = (width / canvasWidth) * 100;
+
+  // 각 프리셋의 백분율 계산
+  const presetPercentages: Array<[ColumnSpanPreset, number]> = [
+    ["full", 100],
+    ["threeQuarters", 75],
+    ["twoThirds", 67],
+    ["half", 50],
+    ["third", 33],
+    ["quarter", 25],
+    ["label", 25],
+    ["input", 75],
+    ["small", 17],
+    ["medium", 33],
+    ["large", 67],
+  ];
+
+  // 가장 가까운 값 찾기
+  let closestPreset: ColumnSpanPreset = "half";
+  let minDiff = Infinity;
+
+  for (const [preset, presetPercentage] of presetPercentages) {
+    const diff = Math.abs(percentage - presetPercentage);
+    if (diff < minDiff) {
+      minDiff = diff;
+      closestPreset = preset;
+    }
+  }
+
+  return closestPreset;
+}
+
+/**
+ * Y 좌표를 기준으로 행 인덱스 계산
+ *
+ * @param components 컴포넌트 배열
+ * @param threshold 같은 행으로 간주할 Y 좌표 차이 (기본: 50px)
+ * @returns 행 인덱스가 추가된 컴포넌트 배열
+ */
+export function calculateRowIndices(components: ComponentData[], threshold: number = 50): ComponentData[] {
+  if (components.length === 0) return [];
+
+  // Y 좌표로 정렬
+  const sorted = [...components].sort((a, b) => a.position.y - b.position.y);
+
+  let currentRowIndex = 0;
+  let currentY = sorted[0]?.position.y ?? 0;
+
+  return sorted.map((component) => {
+    if (Math.abs(component.position.y - currentY) > threshold) {
+      currentRowIndex++;
+      currentY = component.position.y;
+    }
+
+    return {
+      ...component,
+      gridRowIndex: currentRowIndex,
+    };
+  });
+}
+
+/**
+ * 같은 행 내에서 X 좌표로 시작 컬럼 계산
+ *
+ * @param components 컴포넌트 배열 (gridRowIndex 필요)
+ * @returns 시작 컬럼이 추가된 컴포넌트 배열
+ */
+export function calculateColumnStarts(components: ComponentData[]): ComponentData[] {
+  // 행별로 그룹화
+  const rowGroups = new Map<number, ComponentData[]>();
+
+  for (const component of components) {
+    const rowIndex = component.gridRowIndex ?? 0;
+    if (!rowGroups.has(rowIndex)) {
+      rowGroups.set(rowIndex, []);
+    }
+    rowGroups.get(rowIndex)!.push(component);
+  }
+
+  // 각 행 내에서 X 좌표로 정렬하고 시작 컬럼 계산
+  const result: ComponentData[] = [];
+
+  for (const [rowIndex, rowComponents] of rowGroups) {
+    // X 좌표로 정렬
+    const sorted = rowComponents.sort((a, b) => a.position.x - b.position.x);
+
+    let currentColumn = 1;
+
+    for (const component of sorted) {
+      const columnSpan = component.gridColumnSpan || "half";
+      const spanValue = getColumnSpanValue(columnSpan);
+
+      // 현재 컬럼이 12를 넘으면 다음 줄로 (실제로는 같은 행이지만 자동 줄바꿈)
+      if (currentColumn + spanValue > 13) {
+        currentColumn = 1;
+      }
+
+      result.push({
+        ...component,
+        gridColumnStart: currentColumn,
+      });
+
+      // 다음 컴포넌트는 현재 컴포넌트 뒤에 배치
+      currentColumn += spanValue;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * 컴포넌트 배열에서 width를 gridColumnSpan으로 일괄 변환
+ *
+ * @param components 컴포넌트 배열
+ * @param canvasWidth 캔버스 너비 (기본: 1920px)
+ * @returns gridColumnSpan이 추가된 컴포넌트 배열
+ */
+export function migrateComponentsToColumnSpan(
+  components: ComponentData[],
+  canvasWidth: number = 1920,
+): ComponentData[] {
+  return components.map((component) => {
+    // 이미 gridColumnSpan이 있으면 유지
+    if (component.gridColumnSpan) {
+      return component;
+    }
+
+    // width를 컬럼 스팬으로 변환
+    const gridColumnSpan = convertWidthToColumnSpan(component.size.width, canvasWidth);
+
+    return {
+      ...component,
+      gridColumnSpan,
+      gridRowIndex: component.gridRowIndex ?? 0, // 초기값
+    };
+  });
+}
+
+/**
+ * 전체 레이아웃 마이그레이션
+ *
+ * @param layout 기존 레이아웃 데이터
+ * @param canvasWidth 캔버스 너비 (기본: 1920px)
+ * @returns 새로운 그리드 시스템으로 변환된 레이아웃
+ */
+export function migrateLayoutToGridSystem(layout: LayoutData, canvasWidth: number = 1920): LayoutData {
+  console.log("🔄 레이아웃 마이그레이션 시작:", {
+    screenId: layout.screenId,
+    componentCount: layout.components.length,
+  });
+
+  // 1단계: width를 gridColumnSpan으로 변환
+  let migratedComponents = migrateComponentsToColumnSpan(layout.components, canvasWidth);
+
+  // 2단계: Y 좌표로 행 인덱스 계산
+  migratedComponents = calculateRowIndices(migratedComponents);
+
+  // 3단계: 같은 행 내에서 X 좌표로 gridColumnStart 계산
+  migratedComponents = calculateColumnStarts(migratedComponents);
+
+  console.log("✅ 마이그레이션 완료:", {
+    componentCount: migratedComponents.length,
+    sampleComponent: migratedComponents[0],
+  });
+
+  return {
+    ...layout,
+    components: migratedComponents,
+  };
+}
+
+/**
+ * 단일 컴포넌트 마이그레이션
+ *
+ * @param component 기존 컴포넌트
+ * @param canvasWidth 캔버스 너비
+ * @returns 마이그레이션된 컴포넌트
+ */
+export function migrateComponent(component: ComponentData, canvasWidth: number = 1920): ComponentData {
+  // 이미 그리드 속성이 있으면 그대로 반환
+  if (component.gridColumnSpan && component.gridRowIndex !== undefined) {
+    return component;
+  }
+
+  const gridColumnSpan = component.gridColumnSpan || convertWidthToColumnSpan(component.size.width, canvasWidth);
+
+  return {
+    ...component,
+    gridColumnSpan,
+    gridRowIndex: component.gridRowIndex ?? 0,
+    gridColumnStart: component.gridColumnStart,
+  };
+}
+
+/**
+ * 마이그레이션 필요 여부 확인
+ *
+ * @param layout 레이아웃 데이터
+ * @returns 마이그레이션 필요 여부
+ */
+export function needsMigration(layout: LayoutData): boolean {
+  return layout.components.some((c) => !c.gridColumnSpan || c.gridRowIndex === undefined);
+}
+
+/**
+ * 안전한 마이그레이션 (에러 처리 포함)
+ *
+ * @param layout 레이아웃 데이터
+ * @param canvasWidth 캔버스 너비
+ * @returns 마이그레이션된 레이아웃 또는 원본 (실패 시)
+ */
+export function safeMigrateLayout(layout: LayoutData, canvasWidth: number = 1920): LayoutData {
+  try {
+    if (!needsMigration(layout)) {
+      console.log("⏭️ 마이그레이션 불필요 - 이미 최신 형식");
+      return layout;
+    }
+
+    return migrateLayoutToGridSystem(layout, canvasWidth);
+  } catch (error) {
+    console.error("❌ 마이그레이션 실패:", error);
+    console.warn("⚠️ 원본 레이아웃 반환 - 수동 확인 필요");
+    return layout;
+  }
+}
+
+/**
+ * 백업 데이터 생성
+ *
+ * @param layout 레이아웃 데이터
+ * @returns JSON 문자열
+ */
+export function createLayoutBackup(layout: LayoutData): string {
+  return JSON.stringify(layout, null, 2);
+}
+
+/**
+ * 백업에서 복원
+ *
+ * @param backupJson JSON 문자열
+ * @returns 레이아웃 데이터
+ */
+export function restoreFromBackup(backupJson: string): LayoutData {
+  return JSON.parse(backupJson);
+}

frontend/types/grid-system.ts

@@ -0,0 +1,107 @@
+/**
+ * 🎨 그리드 시스템 타입 정의
+ *
+ * 행(Row) 기반 12컬럼 그리드 레이아웃 시스템
+ */
+
+import { ColumnSpanPreset, GapPreset } from "@/lib/constants/columnSpans";
+import { ComponentData } from "./screen-management";
+
+/**
+ * 레이아웃 행 정의
+ */
+export interface LayoutRow {
+  id: string;
+  rowIndex: number;
+  height: "auto" | "fixed" | "min" | "max";
+  minHeight?: number;
+  maxHeight?: number;
+  fixedHeight?: number;
+  gap: GapPreset;
+  padding: GapPreset;
+  backgroundColor?: string;
+  alignment: "start" | "center" | "end" | "stretch" | "baseline";
+  verticalAlignment: "top" | "middle" | "bottom" | "stretch";
+  components: RowComponent[];
+}
+
+/**
+ * 행 내 컴포넌트
+ */
+export interface RowComponent {
+  id: string;
+  componentId: string; // 실제 ComponentData의 ID
+  columnSpan: ColumnSpanPreset;
+  columnStart?: number; // 명시적 시작 위치 (선택)
+  order?: number; // 정렬 순서
+  offset?: ColumnSpanPreset; // 왼쪽 여백
+}
+
+/**
+ * 전체 그리드 레이아웃 정의
+ */
+export interface GridLayout {
+  screenId: number;
+  rows: LayoutRow[];
+  components: Map<string, ComponentData>; // 컴포넌트 저장소
+  globalSettings: GridGlobalSettings;
+}
+
+/**
+ * 그리드 전역 설정
+ */
+export interface GridGlobalSettings {
+  containerMaxWidth?: "full" | "7xl" | "6xl" | "5xl" | "4xl";
+  containerPadding: GapPreset;
+}
+
+/**
+ * 행 생성 옵션
+ */
+export interface CreateRowOptions {
+  height?: "auto" | "fixed";
+  fixedHeight?: number;
+  gap?: GapPreset;
+  padding?: GapPreset;
+  alignment?: "start" | "center" | "end" | "stretch";
+}
+
+/**
+ * 컴포넌트 배치 옵션
+ */
+export interface PlaceComponentOptions {
+  columnSpan: ColumnSpanPreset;
+  columnStart?: number;
+  rowIndex: number;
+}
+
+/**
+ * 행 업데이트 옵션
+ */
+export type UpdateRowOptions = Partial<Omit<LayoutRow, "id" | "rowIndex" | "components">>;
+
+/**
+ * 드래그앤드롭 상태
+ */
+export interface GridDragState {
+  isDragging: boolean;
+  draggedComponentId?: string;
+  targetRowId?: string;
+  targetColumnIndex?: number;
+  previewPosition?: {
+    rowIndex: number;
+    columnStart: number;
+    columnSpan: ColumnSpanPreset;
+  };
+}
+
+/**
+ * 그리드 가이드라인 옵션
+ */
+export interface GridGuideOptions {
+  showGrid: boolean;
+  showColumnLines: boolean;
+  showRowBorders: boolean;
+  gridColor?: string;
+  gridOpacity?: number;
+}

frontend/types/report.ts

@@ -81,18 +81,6 @@ export interface ExternalConnection {
   is_active: string;
 }
 
-// 그리드 설정
-export interface GridConfig {
-  cellWidth: number; // 그리드 셀 너비 (px)
-  cellHeight: number; // 그리드 셀 높이 (px)
-  rows: number; // 세로 그리드 수 (계산값: pageHeight / cellHeight)
-  columns: number; // 가로 그리드 수 (계산값: pageWidth / cellHeight)
-  visible: boolean; // 그리드 표시 여부
-  snapToGrid: boolean; // 그리드 스냅 활성화 여부
-  gridColor: string; // 그리드 선 색상
-  gridOpacity: number; // 그리드 투명도 (0-1)
-}
-
 // 페이지 설정
 export interface ReportPage {
   page_id: string;
@@ -108,7 +96,6 @@ export interface ReportPage {
     right: number;
   };
   background_color: string;
-  gridConfig?: GridConfig; // 그리드 설정 (옵셔널)
   components: ComponentConfig[];
 }
 
@@ -126,11 +113,6 @@ export interface ComponentConfig {
   width: number;
   height: number;
   zIndex: number;
-  // 그리드 좌표 (옵셔널)
-  gridX?: number; // 시작 열 (0부터 시작)
-  gridY?: number; // 시작 행 (0부터 시작)
-  gridWidth?: number; // 차지하는 열 수
-  gridHeight?: number; // 차지하는 행 수
   fontSize?: number;
   fontFamily?: string;
   fontWeight?: string;

frontend/types/screen-management.ts

@@ -17,6 +17,7 @@ import {
   ActiveStatus,
   isWebType,
 } from "./unified-core";
+import { ColumnSpanPreset } from "@/lib/constants/columnSpans";
 
 // ===== 기본 컴포넌트 인터페이스 =====
 
@@ -26,16 +27,25 @@ import {
 export interface BaseComponent {
   id: string;
   type: ComponentType;
-  position: Position;
+
-  size: Size;
+  // 🔄 레거시 위치/크기 (단계적 제거 예정)
+  position: Position; // y 좌표는 유지 (행 정렬용)
+  size: Size; // height만 사용
+
+  // 🆕 그리드 시스템 속성
+  gridColumnSpan?: ColumnSpanPreset; // 컬럼 너비
+  gridColumnStart?: number; // 시작 컬럼 (1-12)
+  gridRowIndex?: number; // 행 인덱스
+
   parentId?: string;
   label?: string;
   required?: boolean;
   readonly?: boolean;
   style?: ComponentStyle;
   className?: string;
+
   // 새 컴포넌트 시스템에서 필요한 속성들
-  gridColumns?: number; // 그리드에서 차지할 컬럼 수 (1-12)
+  gridColumns?: number; // 🔄 deprecated - gridColumnSpan 사용
   zoneId?: string; // 레이아웃 존 ID
   componentConfig?: any; // 컴포넌트별 설정
   componentType?: string; // 새 컴포넌트 시스템의 ID
@@ -132,7 +142,13 @@ export interface ComponentComponent extends BaseComponent {
 /**
  * 통합 컴포넌트 데이터 타입
  */
-export type ComponentData = WidgetComponent | ContainerComponent | GroupComponent | DataTableComponent | FileComponent | ComponentComponent;
+export type ComponentData =
+  | WidgetComponent
+  | ContainerComponent
+  | GroupComponent
+  | DataTableComponent
+  | FileComponent
+  | ComponentComponent;
 
 // ===== 웹타입별 설정 인터페이스 =====