POP 레이아웃 v3.0 아키텍처로 전환 - Section 요소 완전 제거

디자이너/뷰어 렌더링 통일 - react-grid-layout 제거, CSS Grid 1fr 단위 사용
반응형 모드 자동 전환 - useResponsiveMode 훅 추가
디자이너 UI 개선 - 컴포넌트 헤더/삭제 아이콘 제거, 전체 영역 드래그

BUGFIX_CANVAS_ROWS.md

@@ -0,0 +1,227 @@
+# POP 레이아웃 canvasGrid.rows 버그 수정
+
+## 문제점
+
+### 1. 데이터 불일치
+- **DB에 저장된 데이터**: `canvasGrid.rowHeight: 20` (고정 픽셀)
+- **코드에서 기대하는 데이터**: `canvasGrid.rows: 24` (비율 기반)
+- **결과**: `rows`가 `undefined`로 인한 렌더링 오류
+
+### 2. 타입 정의 불일치
+- **PopCanvas.tsx 타입**: `{ columns: number; rowHeight: number; gap: number }`
+- **실제 사용**: `canvasGrid.rows`로 계산
+- **결과**: 타입 안정성 저하
+
+### 3. 렌더링 오류
+- **디자이너**: `rowHeight = resolution.height / undefined` → `NaN`
+- **뷰어**: `gridTemplateRows: repeat(undefined, 1fr)` → CSS 무효
+- **결과**: 섹션이 매우 작게 표시됨
+
+---
+
+## 수정 내용
+
+### 1. ensureV2Layout 강화
+**파일**: `frontend/components/pop/designer/types/pop-layout.ts`
+
+```typescript
+export const ensureV2Layout = (data: PopLayoutData): PopLayoutDataV2 => {
+  let result: PopLayoutDataV2;
+  
+  if (isV2Layout(data)) {
+    result = data;
+  } else if (isV1Layout(data)) {
+    result = migrateV1ToV2(data);
+  } else {
+    console.warn("알 수 없는 레이아웃 버전, 빈 v2 레이아웃 생성");
+    result = createEmptyPopLayoutV2();
+  }
+  
+  // ✅ canvasGrid.rows 보장 (구버전 데이터 호환)
+  if (!result.settings.canvasGrid.rows) {
+    console.warn("canvasGrid.rows 없음, 기본값 24로 설정");
+    result.settings.canvasGrid = {
+      ...result.settings.canvasGrid,
+      rows: DEFAULT_CANVAS_GRID.rows, // 24
+    };
+  }
+  
+  return result;
+};
+```
+
+**효과**: DB에서 로드한 구버전 데이터도 자동으로 `rows: 24` 보장
+
+---
+
+### 2. PopCanvas.tsx 타입 수정 및 fallback
+**파일**: `frontend/components/pop/designer/PopCanvas.tsx`
+
+**타입 정의 수정**:
+```typescript
+interface DeviceFrameProps {
+  canvasGrid: { columns: number; rows: number; gap: number }; // rowHeight → rows
+  // ...
+}
+```
+
+**fallback 추가**:
+```typescript
+// ✅ rows가 없으면 24 사용
+const rows = canvasGrid.rows || 24;
+const rowHeight = Math.floor(resolution.height / rows);
+```
+
+**효과**: 
+- 타입 일관성 확보
+- `NaN` 방지
+
+---
+
+### 3. PopLayoutRenderer.tsx fallback
+**파일**: `frontend/components/pop/designer/renderers/PopLayoutRenderer.tsx`
+
+```typescript
+style={{
+  display: "grid",
+  gridTemplateColumns: `repeat(${canvasGrid.columns}, 1fr)`,
+  // ✅ fallback 추가
+  gridTemplateRows: `repeat(${canvasGrid.rows || 24}, 1fr)`,
+  gap: `${canvasGrid.gap}px`,
+  padding: `${canvasGrid.gap}px`,
+}}
+```
+
+**효과**: 뷰어에서도 안전하게 렌더링
+
+---
+
+### 4. 백엔드 저장 로직 강화
+**파일**: `backend-node/src/services/screenManagementService.ts`
+
+```typescript
+if (isV2) {
+  dataToSave = {
+    ...layoutData,
+    version: "pop-2.0",
+  };
+  
+  // ✅ canvasGrid.rows 검증 및 보정
+  if (dataToSave.settings?.canvasGrid) {
+    if (!dataToSave.settings.canvasGrid.rows) {
+      console.warn("canvasGrid.rows 없음, 기본값 24로 설정");
+      dataToSave.settings.canvasGrid.rows = 24;
+    }
+    // ✅ 구버전 rowHeight 필드 제거
+    if (dataToSave.settings.canvasGrid.rowHeight) {
+      console.warn("구버전 rowHeight 필드 제거");
+      delete dataToSave.settings.canvasGrid.rowHeight;
+    }
+  }
+}
+```
+
+**효과**: 앞으로 저장되는 모든 데이터는 올바른 구조 보장
+
+---
+
+## 원칙 준수 여부
+
+### 1. 데스크톱과 완전 분리 ✅
+- POP 전용 파일만 수정
+- 데스크톱 코드 0% 영향
+
+### 2. 4모드 반응형 디자인 ✅
+- 변경 없음
+
+### 3. 비율 기반 그리드 시스템 ✅
+- **오히려 원칙을 바로잡는 수정**
+- 고정 픽셀(`rowHeight`) → 비율(`rows`) 강제
+
+---
+
+## 해결된 문제
+
+| 문제 | 수정 전 | 수정 후 |
+|------|---------|---------|
+| 섹션 크기 | 매우 작게 표시 | 정상 크기 (24x24 그리드) |
+| 디자이너 렌더링 | `NaN` 오류 | 정상 계산 |
+| 뷰어 렌더링 | CSS 무효 | 비율 기반 렌더링 |
+| 타입 안정성 | `rowHeight` vs `rows` 불일치 | `rows`로 통일 |
+| 구버전 데이터 | 호환 불가 | 자동 보정 |
+
+---
+
+## 테스트 방법
+
+### 1. 기존 화면 확인 (screen_id: 3884)
+```bash
+# 디자이너 접속
+http://localhost:9771/screen-management/pop-designer/3884
+
+# 저장 후 뷰어 확인
+http://localhost:9771/pop/screens/3884
+```
+
+**기대 결과**:
+- 섹션이 화면 전체 크기로 정상 표시
+- 가로/세로 모드 전환 시 비율 유지
+
+### 2. 새로운 화면 생성
+- POP 디자이너에서 새 화면 생성
+- 섹션 추가 및 배치
+- 저장 후 DB 확인
+
+**DB 확인**:
+```sql
+SELECT 
+  screen_id,
+  layout_data->'settings'->'canvasGrid' as canvas_grid
+FROM screen_layouts_pop 
+WHERE screen_id = 3884;
+```
+
+**기대 결과**:
+```json
+{
+  "gap": 4,
+  "rows": 24,
+  "columns": 24
+}
+```
+
+---
+
+## 추가 조치 사항
+
+### 1. 기존 DB 데이터 마이그레이션 (선택)
+만약 프론트엔드 자동 보정이 아닌 DB 마이그레이션을 원한다면:
+
+```sql
+UPDATE screen_layouts_pop
+SET layout_data = jsonb_set(
+  jsonb_set(
+    layout_data,
+    '{settings,canvasGrid,rows}',
+    '24'
+  ),
+  '{settings,canvasGrid}',
+  (layout_data->'settings'->'canvasGrid') - 'rowHeight'
+)
+WHERE layout_data->'settings'->'canvasGrid'->>'rows' IS NULL
+  AND layout_data->>'version' = 'pop-2.0';
+```
+
+### 2. 모드별 컴포넌트 위치 반대 문제
+**별도 이슈**: `activeModeKey` 상태 관리 점검 필요
+- DeviceFrame 클릭 시 모드 전환
+- 저장 시 올바른 `modeKey` 전달 확인
+
+---
+
+## 결론
+
+✅ **원칙 준수**: 데스크톱 분리, 4모드 반응형 유지  
+✅ **비율 기반 강제**: 고정 픽셀 제거  
+✅ **하위 호환**: 구버전 데이터 자동 보정  
+✅ **안정성 향상**: 타입 일관성 확보

POPUPDATE.md

@@ -887,6 +887,117 @@ const filteredMoveGroups = useMemo(() => {
 
 ---
 
+## 14. 비율 기반 그리드 시스템 (2026-02-03)
+
+### 문제 발견
+
+POP 디자이너에서 섹션을 크게 설정해도 뷰어에서 매우 얇게(약 20px) 렌더링되는 문제 발생.
+
+### 근본 원인 분석
+
+1. **기존 구조**: `canvasGrid.rowHeight = 20` (고정 픽셀)
+2. **react-grid-layout 동작**: 작은 리사이즈 → `rowSpan: 1`로 반올림 → DB 저장
+3. **뷰어 렌더링**: `gridAutoRows: 20px` → 섹션 높이 = 20px (매우 얇음)
+4. **비교**: 가로(columns)는 `1fr` 비율 기반으로 잘 작동
+
+### 해결책: 비율 기반 행 시스템
+
+| 구분 | 이전 | 이후 |
+|------|------|------|
+| 타입 | `rowHeight: number` (px) | `rows: number` (개수) |
+| 기본값 | `rowHeight: 20` | `rows: 24` |
+| 뷰어 CSS | `gridAutoRows: 20px` | `gridTemplateRows: repeat(24, 1fr)` |
+| 디자이너 계산 | 고정 20px | `resolution.height / 24` |
+
+### 수정된 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `types/pop-layout.ts` | `PopCanvasGrid.rowHeight` → `rows`, `DEFAULT_CANVAS_GRID.rows = 24` |
+| `renderers/PopLayoutRenderer.tsx` | `gridAutoRows` → `gridTemplateRows: repeat(rows, 1fr)` |
+| `PopCanvas.tsx` | `rowHeight = Math.floor(resolution.height / canvasGrid.rows)` |
+
+### 모드별 행 높이 계산
+
+| 모드 | 해상도 높이 | 행 높이 (24행 기준) |
+|------|-------------|---------------------|
+| tablet_landscape | 768px | 32px |
+| tablet_portrait | 1024px | 42.7px |
+| mobile_landscape | 375px | 15.6px |
+| mobile_portrait | 667px | 27.8px |
+
+### 기존 데이터 호환성
+
+- 기존 `rowHeight: 20` 데이터는 `rows || 24` fallback으로 처리
+- 기존 `rowSpan: 1` 데이터는 1/24 = 4.17%로 렌더링 (여전히 작음)
+- **권장**: 디자이너에서 섹션 재조정 후 재저장
+
+---
+
+## 15. 화면 삭제 기능 추가 (2026-02-03)
+
+### 추가된 기능
+
+POP 카테고리 트리에서 화면 자체를 삭제하는 기능 추가.
+
+### UI 변경
+
+| 위치 | 메뉴 항목 | 동작 |
+|------|----------|------|
+| 그룹 내 화면 드롭다운 | "화면 삭제" | 휴지통으로 이동 |
+| 미분류 화면 드롭다운 | "화면 삭제" | 휴지통으로 이동 |
+
+### 삭제 흐름
+
+```
+1. 드롭다운 메뉴에서 "화면 삭제" 클릭
+2. 확인 다이얼로그 표시 ("삭제된 화면은 휴지통으로 이동됩니다")
+3. 확인 → DELETE /api/screen-management/screens/:id
+4. 화면 is_deleted = 'Y'로 변경 (soft delete)
+5. 그룹 목록 새로고침
+```
+
+### 완전 삭제 vs 휴지통 이동
+
+| API | 동작 | 복원 가능 |
+|-----|------|----------|
+| `DELETE /screens/:id` | 휴지통으로 이동 (is_deleted='Y') | O |
+| `DELETE /screens/:id/permanent` | DB에서 완전 삭제 | X |
+
+### 수정된 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `PopCategoryTree.tsx` | `handleDeleteScreen`, `confirmDeleteScreen` 함수 추가 |
+| `PopCategoryTree.tsx` | `isScreenDeleteDialogOpen`, `deletingScreen` 상태 추가 |
+| `PopCategoryTree.tsx` | TreeNode에 `onDeleteScreen` prop 추가 |
+| `PopCategoryTree.tsx` | 화면 삭제 확인 AlertDialog 추가 |
+
+---
+
+## 16. 멀티테넌시 이슈 해결 (2026-02-03)
+
+### 문제
+
+화면 그룹에서 제거 시 404 에러 발생.
+
+### 원인
+
+- DB 데이터: `company_code = "*"` (최고 관리자 전용)
+- 현재 세션: `company_code = "COMPANY_7"`
+- 컨트롤러 WHERE 조건: `id = $1 AND company_code = $2` → 0 rows
+
+### 해결
+
+세션 불일치 문제로 DB에서 직접 삭제 처리.
+
+### 교훈
+
+- 최고 관리자로 생성한 데이터는 일반 회사 사용자가 삭제 불가
+- 로그인 후 토큰 갱신 필요 시 브라우저 완전 새로고침
+
+---
+
 ## 트러블슈팅
 
 ### Export default doesn't exist in target module
@@ -897,6 +1008,22 @@ const filteredMoveGroups = useMemo(() => {
 
 **해결:** `import { apiClient } from "@/lib/api/client"` 사용
 
+### 섹션이 매우 얇게 렌더링되는 문제
+
+**문제:** 디자이너에서 크게 설정한 섹션이 뷰어에서 20px 높이로 표시
+
+**원인:** `canvasGrid.rowHeight = 20` 고정값 + react-grid-layout의 rowSpan 반올림
+
+**해결:** 비율 기반 rows 시스템으로 변경 (섹션 14 참조)
+
+### 화면 삭제 404 에러
+
+**문제:** 화면 그룹에서 제거 시 404 에러
+
+**원인:** company_code 불일치 (세션 vs DB)
+
+**해결:** 브라우저 새로고침으로 토큰 갱신 또는 DB 직접 처리
+
 ### 관련 파일
 
 | 파일 | 역할 |
@@ -905,7 +1032,10 @@ const filteredMoveGroups = useMemo(() => {
 | `frontend/lib/api/popScreenGroup.ts` | POP 그룹 API 클라이언트 |
 | `backend-node/src/controllers/screenGroupController.ts` | 그룹 CRUD 컨트롤러 |
 | `backend-node/src/routes/screenGroupRoutes.ts` | 그룹 API 라우트 |
+| `frontend/components/pop/designer/types/pop-layout.ts` | POP 레이아웃 타입 정의 |
+| `frontend/components/pop/designer/renderers/PopLayoutRenderer.tsx` | CSS Grid 기반 렌더러 |
+| `frontend/components/pop/designer/PopCanvas.tsx` | react-grid-layout 디자이너 캔버스 |
 
 ---
 
-*최종 업데이트: 2026-01-29*
+*최종 업데이트: 2026-02-03*

backend-node/src/services/screenManagementService.ts

@@ -4894,7 +4894,8 @@ export class ScreenManagementService {
   /**
    * POP 레이아웃 저장
    * - screen_layouts_pop 테이블에 화면당 1개 레코드 저장
-   * - v2 형식으로 저장 (version: "pop-2.0")
+   * - v3 형식 지원 (version: "pop-3.0", 섹션 제거)
+   * - v2/v1 하위 호환
    */
   async saveLayoutPop(
     screenId: number,
@@ -4905,11 +4906,16 @@ export class ScreenManagementService {
     console.log(`=== POP 레이아웃 저장 시작 ===`);
     console.log(`화면 ID: ${screenId}, 회사: ${companyCode}`);
     
-    // v2 구조 확인
+    // 버전 감지
+    const isV3 = layoutData.version === "pop-3.0" || 
+                 (layoutData.layouts && layoutData.components && !layoutData.sections);
     const isV2 = layoutData.version === "pop-2.0" || 
                  (layoutData.layouts && layoutData.sections && layoutData.components);
     
-    if (isV2) {
+    if (isV3) {
+      const componentCount = Object.keys(layoutData.components || {}).length;
+      console.log(`v3 레이아웃: ${componentCount}개 컴포넌트 (섹션 없음)`);
+    } else if (isV2) {
       const sectionCount = Object.keys(layoutData.sections || {}).length;
       const componentCount = Object.keys(layoutData.components || {}).length;
       console.log(`v2 레이아웃: ${sectionCount}개 섹션, ${componentCount}개 컴포넌트`);
@@ -4933,13 +4939,50 @@ export class ScreenManagementService {
       throw new Error("이 화면의 POP 레이아웃을 저장할 권한이 없습니다.");
     }
 
-    // 버전 정보 보장 (v2 우선, v1은 프론트엔드에서 마이그레이션 후 저장 권장)
+    // SUPER_ADMIN인 경우: 화면 정의의 company_code로 저장 (로드와 동일하게)
+    const targetCompanyCode = companyCode === "*" 
+      ? (existingScreen.company_code || "*") 
+      : companyCode;
+    
+    console.log(`저장 대상 company_code: ${targetCompanyCode} (사용자: ${companyCode}, 화면: ${existingScreen.company_code})`);
+
+    // 버전 정보 보장
     let dataToSave: any;
-    if (isV2) {
+    if (isV3) {
+      dataToSave = {
+        ...layoutData,
+        version: "pop-3.0",
+      };
+      
+      // canvasGrid.rows 검증 및 보정
+      if (dataToSave.settings?.canvasGrid) {
+        if (!dataToSave.settings.canvasGrid.rows) {
+          console.warn("canvasGrid.rows 없음, 기본값 24로 설정");
+          dataToSave.settings.canvasGrid.rows = 24;
+        }
+        // 구버전 rowHeight 필드 제거
+        if (dataToSave.settings.canvasGrid.rowHeight) {
+          console.warn("구버전 rowHeight 필드 제거");
+          delete dataToSave.settings.canvasGrid.rowHeight;
+        }
+      }
+    } else if (isV2) {
       dataToSave = {
         ...layoutData,
         version: "pop-2.0",
       };
+      
+      // canvasGrid.rows 검증 및 보정
+      if (dataToSave.settings?.canvasGrid) {
+        if (!dataToSave.settings.canvasGrid.rows) {
+          console.warn("canvasGrid.rows 없음, 기본값 24로 설정");
+          dataToSave.settings.canvasGrid.rows = 24;
+        }
+        if (dataToSave.settings.canvasGrid.rowHeight) {
+          console.warn("구버전 rowHeight 필드 제거");
+          delete dataToSave.settings.canvasGrid.rowHeight;
+        }
+      }
     } else {
       // v1 형식으로 저장 (하위 호환)
       dataToSave = {
@@ -4954,10 +4997,10 @@ export class ScreenManagementService {
        VALUES ($1, $2, $3, NOW(), NOW(), $4, $4)
        ON CONFLICT (screen_id, company_code) 
        DO UPDATE SET layout_data = $3, updated_at = NOW(), updated_by = $4`,
-      [screenId, companyCode, JSON.stringify(dataToSave), userId || null],
+      [screenId, targetCompanyCode, JSON.stringify(dataToSave), userId || null],
     );
 
-    console.log(`POP 레이아웃 저장 완료 (version: ${dataToSave.version})`);
+    console.log(`POP 레이아웃 저장 완료 (version: ${dataToSave.version}, company: ${targetCompanyCode})`);
   }
 
   /**

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

@@ -1,11 +1,11 @@
 "use client";
 
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { Loader2, ArrowLeft, Smartphone, Tablet, Monitor, RotateCcw } from "lucide-react";
+import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
-import { ScreenDefinition, LayoutData, ComponentData } from "@/types/screen";
+import { ScreenDefinition, LayoutData } from "@/types/screen";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { initializeComponents } from "@/lib/registry/components";
@@ -18,35 +18,89 @@ import { ScreenContextProvider } from "@/contexts/ScreenContext";
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
 import { ActiveTabProvider } from "@/contexts/ActiveTabContext";
 import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext";
-import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter";
+import {
+  PopLayoutDataV3,
+  PopLayoutModeKey,
+  ensureV3Layout,
+  isV3Layout,
+} from "@/components/pop/designer/types/pop-layout";
+import {
+  PopLayoutRenderer,
+  hasBaseLayout,
+  getEffectiveModeLayout,
+} from "@/components/pop/designer/renderers";
+import { 
+  useResponsiveMode, 
+  useResponsiveModeWithOverride,
+  type DeviceType,
+} from "@/hooks/useDeviceOrientation";
 
-// POP 디바이스 타입
+// 디바이스별 크기 (프리뷰 모드용)
-type DeviceType = "mobile" | "tablet";
+const DEVICE_SIZES: Record<DeviceType, Record<"landscape" | "portrait", { width: number; height: number; label: string }>> = {
-
+  mobile: {
-// 디바이스별 크기
+    landscape: { width: 667, height: 375, label: "모바일 가로" },
-const DEVICE_SIZES = {
+    portrait: { width: 375, height: 667, label: "모바일 세로" },
-  mobile: { width: 375, height: 812, label: "모바일" },
+  },
-  tablet: { width: 768, height: 1024, label: "태블릿" },
+  tablet: {
+    landscape: { width: 1024, height: 768, label: "태블릿 가로" },
+    portrait: { width: 768, height: 1024, label: "태블릿 세로" },
+  },
 };
 
+// ========================================
+// 헬퍼 함수
+// ========================================
+
+const getModeKey = (device: DeviceType, isLandscape: boolean): PopLayoutModeKey => {
+  if (device === "tablet") {
+    return isLandscape ? "tablet_landscape" : "tablet_portrait";
+  }
+  return isLandscape ? "mobile_landscape" : "mobile_portrait";
+};
+
+// v3.0 레이아웃인지 확인
+const isPopLayoutV3 = (layout: any): layout is PopLayoutDataV3 => {
+  return layout && layout.version === "pop-3.0" && layout.layouts && layout.components;
+};
+
+// v1/v2 레이아웃인지 확인 (마이그레이션 대상)
+const isPopLayout = (layout: any): boolean => {
+  return layout && (
+    layout.version === "pop-1.0" ||
+    layout.version === "pop-2.0" ||
+    layout.version === "pop-3.0"
+  );
+};
+
+// ========================================
+// 메인 컴포넌트
+// ========================================
+
 function PopScreenViewPage() {
   const params = useParams();
   const searchParams = useSearchParams();
   const router = useRouter();
   const screenId = parseInt(params.screenId as string);
 
-  // URL 쿼리에서 디바이스 타입 가져오기 (기본: tablet)
-  const deviceParam = searchParams.get("device") as DeviceType | null;
-  const [deviceType, setDeviceType] = useState<DeviceType>(deviceParam || "tablet");
-
-  // 프리뷰 모드 (디자이너에서 열렸을 때)
   const isPreviewMode = searchParams.get("preview") === "true";
 
-  // 사용자 정보
+  // 반응형 모드 감지 (화면 크기에 따라 tablet/mobile, landscape/portrait 자동 전환)
+  // 프리뷰 모드에서는 수동 전환 가능
+  const { mode, setDevice, setOrientation, isAutoDetect } = useResponsiveModeWithOverride(
+    isPreviewMode ? "tablet" : undefined,
+    isPreviewMode ? true : undefined
+  );
+
+  // 현재 모드 정보
+  const deviceType = mode.device;
+  const isLandscape = mode.isLandscape;
+  const currentModeKey = mode.modeKey;
+
   const { user, userName, companyCode } = useAuth();
 
   const [screen, setScreen] = useState<ScreenDefinition | null>(null);
   const [layout, setLayout] = useState<LayoutData | null>(null);
+  const [popLayoutV3, setPopLayoutV3] = useState<PopLayoutDataV3 | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -73,62 +127,39 @@ function PopScreenViewPage() {
         setLoading(true);
         setError(null);
 
-        // 화면 정보 로드
         const screenData = await screenApi.getScreen(screenId);
         setScreen(screenData);
 
-        // POP 레이아웃 로드 (screen_layouts_pop 테이블에서)
-        // POP 레이아웃은 sections[] 구조 사용 (데스크톱의 components[]와 다름)
         try {
           const popLayout = await screenApi.getLayoutPop(screenId);
 
-          if (popLayout && popLayout.sections && popLayout.sections.length > 0) {
+          if (popLayout && isPopLayout(popLayout)) {
-            // POP 레이아웃 (sections 구조) - 그대로 저장
+            // v1/v2/v3 → v3로 변환
-            console.log("POP 레이아웃 로드:", popLayout.sections?.length || 0, "개 섹션");
+            const v3Layout = ensureV3Layout(popLayout);
-            setLayout(popLayout as any); // sections 구조 그대로 사용
+            setPopLayoutV3(v3Layout);
-          } else if (popLayout && popLayout.components && popLayout.components.length > 0) {
+            
-            // 이전 형식 (components 구조) - 호환성 유지
+            const componentCount = Object.keys(v3Layout.components).length;
-            console.log("POP 레이아웃 로드 (이전 형식):", popLayout.components?.length || 0, "개 컴포넌트");
+            console.log(`[POP] v3 레이아웃 로드됨: ${componentCount}개 컴포넌트`);
+            
+            if (!isV3Layout(popLayout)) {
+              console.log("[POP] v1/v2 → v3 자동 마이그레이션 완료");
+            }
+          } else if (popLayout && popLayout.components && Array.isArray(popLayout.components) && popLayout.components.length > 0) {
+            // 이전 형식 (레거시 components 구조)
+            console.log("[POP] 레거시 레이아웃 로드:", popLayout.components.length, "개 컴포넌트");
             setLayout(popLayout as LayoutData);
           } else {
-            // POP 레이아웃이 비어있으면 빈 레이아웃
+            console.log("[POP] 레이아웃 없음");
-            console.log("POP 레이아웃 없음, 빈 화면 표시");
+            setPopLayoutV3(null);
-            setLayout({
+            setLayout(null);
-              screenId,
-              sections: [],
-              components: [],
-              gridSettings: {
-                columns: 12,
-                gap: 8,
-                padding: 16,
-                enabled: true,
-                size: 8,
-                color: "#e0e0e0",
-                opacity: 0.5,
-                snapToGrid: true,
-              },
-            } as any);
           }
         } catch (layoutError) {
-          console.warn("POP 레이아웃 로드 실패:", layoutError);
+          console.warn("[POP] 레이아웃 로드 실패:", layoutError);
-          setLayout({
+          setPopLayoutV3(null);
-            screenId,
+          setLayout(null);
-            sections: [],
-            components: [],
-            gridSettings: {
-              columns: 12,
-              gap: 8,
-              padding: 16,
-              enabled: true,
-              size: 8,
-              color: "#e0e0e0",
-              opacity: 0.5,
-              snapToGrid: true,
-            },
-          } as any);
         }
       } catch (error) {
-        console.error("POP 화면 로드 실패:", error);
+        console.error("[POP] 화면 로드 실패:", error);
         setError("화면을 불러오는데 실패했습니다.");
         toast.error("화면을 불러오는데 실패했습니다.");
       } finally {
@@ -141,8 +172,7 @@ function PopScreenViewPage() {
     }
   }, [screenId]);
 
-  // 현재 디바이스 크기
+  const currentDevice = DEVICE_SIZES[deviceType][isLandscape ? "landscape" : "portrait"];
-  const currentDevice = DEVICE_SIZES[deviceType];
 
   if (loading) {
     return (
@@ -177,7 +207,7 @@ function PopScreenViewPage() {
     <ScreenPreviewProvider isPreviewMode={isPreviewMode}>
       <ActiveTabProvider>
         <TableOptionsProvider>
-          <div className="min-h-screen bg-gray-100">
+          <div className="h-screen bg-gray-100 flex flex-col overflow-hidden">
             {/* 상단 툴바 (프리뷰 모드에서만) */}
             {isPreviewMode && (
               <div className="sticky top-0 z-50 bg-white border-b shadow-sm">
@@ -188,14 +218,17 @@ function PopScreenViewPage() {
                       닫기
                     </Button>
                     <span className="text-sm font-medium">{screen.screenName}</span>
+                    <span className="text-xs text-gray-400">
+                      ({currentModeKey.replace("_", " ")})
+                    </span>
                   </div>
 
-                  {/* 디바이스 전환 버튼 */}
+                  <div className="flex items-center gap-2">
                     <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
                       <Button
                         variant={deviceType === "mobile" ? "default" : "ghost"}
                         size="sm"
-                      onClick={() => setDeviceType("mobile")}
+                        onClick={() => setDevice("mobile")}
                         className="gap-1"
                       >
                         <Smartphone className="h-4 w-4" />
@@ -204,7 +237,7 @@ function PopScreenViewPage() {
                       <Button
                         variant={deviceType === "tablet" ? "default" : "ghost"}
                         size="sm"
-                      onClick={() => setDeviceType("tablet")}
+                        onClick={() => setDevice("tablet")}
                         className="gap-1"
                       >
                         <Tablet className="h-4 w-4" />
@@ -212,6 +245,41 @@ function PopScreenViewPage() {
                       </Button>
                     </div>
 
+                    <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+                      <Button
+                        variant={isLandscape ? "default" : "ghost"}
+                        size="sm"
+                        onClick={() => setOrientation(true)}
+                        className="gap-1"
+                      >
+                        <RotateCw className="h-4 w-4" />
+                        가로
+                      </Button>
+                      <Button
+                        variant={!isLandscape ? "default" : "ghost"}
+                        size="sm"
+                        onClick={() => setOrientation(false)}
+                        className="gap-1"
+                      >
+                        <RotateCcw className="h-4 w-4" />
+                        세로
+                      </Button>
+                    </div>
+
+                    {/* 자동 감지 모드 버튼 */}
+                    <Button
+                      variant={isAutoDetect ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => {
+                        setDevice(undefined);
+                        setOrientation(undefined);
+                      }}
+                      className="gap-1"
+                    >
+                      자동
+                    </Button>
+                  </div>
+
                   <Button variant="ghost" size="sm" onClick={() => window.location.reload()}>
                     <RotateCcw className="h-4 w-4" />
                   </Button>
@@ -220,67 +288,30 @@ function PopScreenViewPage() {
             )}
 
             {/* POP 화면 컨텐츠 */}
-            <div className={`flex justify-center ${isPreviewMode ? "py-4" : "py-0"}`}>
+            <div className={`flex-1 flex flex-col ${isPreviewMode ? "py-4 overflow-auto items-center" : ""}`}>
-              <div
+              {/* 현재 모드 표시 (일반 모드) */}
-                className={`bg-white ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-hidden border-8 border-gray-800" : ""}`}
+              {!isPreviewMode && (
-                style={{
+                <div className="absolute top-2 right-2 z-10 bg-black/50 text-white text-xs px-2 py-1 rounded">
-                  width: isPreviewMode ? currentDevice.width : "100%",
+                  {currentModeKey.replace("_", " ")}
-                  minHeight: isPreviewMode ? currentDevice.height : "100vh",
-                  maxWidth: isPreviewMode ? currentDevice.width : "100%",
-                }}
-              >
-                {/* POP 레이아웃: sections 구조 렌더링 */}
-                {layout && (layout as any).sections && (layout as any).sections.length > 0 ? (
-                  <div className="w-full min-h-full p-2">
-                    {/* 그리드 레이아웃으로 섹션 배치 */}
-                    <div
-                      className="grid gap-1"
-                      style={{
-                        gridTemplateColumns: `repeat(${(layout as any).canvasGrid?.columns || 24}, 1fr)`,
-                      }}
-                    >
-                      {(layout as any).sections.map((section: any) => (
-                        <div
-                          key={section.id}
-                          className="bg-gray-50 border border-gray-200 rounded-lg p-2"
-                          style={{
-                            gridColumn: `${section.grid?.col || 1} / span ${section.grid?.colSpan || 6}`,
-                            gridRow: `${section.grid?.row || 1} / span ${section.grid?.rowSpan || 4}`,
-                            minHeight: `${(section.grid?.rowSpan || 4) * 20}px`,
-                          }}
-                        >
-                          {/* 섹션 라벨 */}
-                          {section.label && (
-                            <div className="text-xs font-medium text-gray-500 mb-1">
-                              {section.label}
                 </div>
               )}
-                          {/* 섹션 내 컴포넌트들 */}
+
-                          {section.components && section.components.length > 0 ? (
-                            <div className="space-y-1">
-                              {section.components.map((comp: any) => (
               <div
-                                  key={comp.id}
+                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-hidden border-8 border-gray-800" : "w-full h-full"}`}
-                                  className="bg-white border border-gray-100 rounded p-2 text-sm"
+                style={isPreviewMode ? {
+                  width: currentDevice.width,
+                  height: currentDevice.height,
+                  flexShrink: 0,
+                } : undefined}
               >
-                                  {/* TODO: POP 전용 컴포넌트 렌더러 구현 필요 */}
+                {/* POP 레이아웃 v3.0 렌더링 */}
-                                  <span className="text-gray-600">
+                {popLayoutV3 ? (
-                                    {comp.label || comp.type || comp.id}
+                  <PopLayoutV3Renderer
-                                  </span>
+                    layout={popLayoutV3}
-                                </div>
+                    modeKey={currentModeKey}
-                              ))}
+                  />
-                            </div>
-                          ) : (
-                            <div className="text-xs text-gray-400 text-center py-2">
-                              빈 섹션
-                            </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
                 ) : layout && layout.components && layout.components.length > 0 ? (
-                  // 이전 형식 (components 구조) - 호환성 유지
+                  // 레거시 형식 (components 구조) - 호환성 유지
                   <ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
                     <div className="relative w-full min-h-full p-4">
                       {layout.components
@@ -348,6 +379,55 @@ function PopScreenViewPage() {
   );
 }
 
+// ========================================
+// POP 레이아웃 v3.0 렌더러
+// ========================================
+interface PopLayoutV3RendererProps {
+  layout: PopLayoutDataV3;
+  modeKey: PopLayoutModeKey;
+}
+
+function PopLayoutV3Renderer({ layout, modeKey }: PopLayoutV3RendererProps) {
+  // 태블릿 가로 모드가 기준으로 설정되어 있는지 확인
+  if (!hasBaseLayout(layout)) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[400px] p-8 text-center">
+        <div className="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-4">
+          <span className="text-2xl">!</span>
+        </div>
+        <h3 className="text-lg font-semibold text-gray-800 mb-2">
+          화면이 설정되지 않았습니다
+        </h3>
+        <p className="text-sm text-gray-500 max-w-xs">
+          POP 화면 디자이너에서 태블릿 가로 모드 레이아웃을 먼저 설정해주세요.
+        </p>
+      </div>
+    );
+  }
+
+  // 현재 모드에 맞는 레이아웃 가져오기
+  const { modeLayout, isConverted, sourceModeKey } = getEffectiveModeLayout(layout, modeKey);
+
+  return (
+    <div className="w-full h-full flex flex-col">
+      {isConverted && (
+        <div className="mx-2 mt-2 px-2 py-1 bg-yellow-50 border border-yellow-200 rounded text-xs text-yellow-700 shrink-0">
+          {sourceModeKey} 기준 자동 변환됨
+        </div>
+      )}
+
+      <PopLayoutRenderer
+        layout={layout}
+        modeKey={modeKey}
+        customModeLayout={isConverted ? modeLayout : undefined}
+        isDesignMode={false}
+        className="flex-1"
+        style={{ height: "100%" }}
+      />
+    </div>
+  );
+}
+
 // Provider 래퍼
 export default function PopScreenViewPageWrapper() {
   return (

frontend/components/pop/designer/PopCanvas.tsx

@@ -1,23 +1,18 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState, useEffect } from "react";
+import { useCallback, useRef, useState, useEffect } from "react";
 import { useDrop } from "react-dnd";
-import GridLayout, { Layout } from "react-grid-layout";
 import { cn } from "@/lib/utils";
 import {
-  PopLayoutDataV2,
+  PopLayoutDataV3,
   PopLayoutModeKey,
   PopComponentType,
   GridPosition,
   MODE_RESOLUTIONS,
 } from "./types/pop-layout";
-import { DND_ITEM_TYPES, DragItemSection } from "./panels/PopPanel";
+import { DND_ITEM_TYPES, DragItemComponent } from "./panels/PopPanel";
-import { GripVertical, Trash2, ZoomIn, ZoomOut, Maximize2 } from "lucide-react";
+import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { SectionGridV2 } from "./SectionGridV2";
-
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
 
 // ========================================
 // 타입 정의
@@ -32,24 +27,29 @@ const MODE_LABELS: Record<PopLayoutModeKey, string> = {
   mobile_portrait: "모바일 세로",
 };
 
+// 컴포넌트 타입별 라벨
+const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
+  "pop-field": "필드",
+  "pop-button": "버튼",
+  "pop-list": "리스트",
+  "pop-indicator": "인디케이터",
+  "pop-scanner": "스캐너",
+  "pop-numpad": "숫자패드",
+};
+
 // ========================================
 // Props
 // ========================================
 interface PopCanvasProps {
-  layout: PopLayoutDataV2;
+  layout: PopLayoutDataV3;
   activeDevice: DeviceType;
   activeModeKey: PopLayoutModeKey;
   onModeKeyChange: (modeKey: PopLayoutModeKey) => void;
-  selectedSectionId: string | null;
   selectedComponentId: string | null;
-  onSelectSection: (id: string | null) => void;
   onSelectComponent: (id: string | null) => void;
-  onUpdateSectionPosition: (sectionId: string, position: GridPosition, modeKey?: PopLayoutModeKey) => void;
   onUpdateComponentPosition: (componentId: string, position: GridPosition, modeKey?: PopLayoutModeKey) => void;
-  onDeleteSection: (id: string) => void;
+  onDropComponent: (type: PopComponentType, gridPosition: GridPosition) => void;
-  onDropSection: (gridPosition: GridPosition) => void;
+  onDeleteComponent: (componentId: string) => void;
-  onDropComponent: (sectionId: string, type: PopComponentType, gridPosition: GridPosition) => void;
-  onDeleteComponent: (sectionId: string, componentId: string) => void;
 }
 
 // ========================================
@@ -60,51 +60,33 @@ export function PopCanvas({
   activeDevice,
   activeModeKey,
   onModeKeyChange,
-  selectedSectionId,
   selectedComponentId,
-  onSelectSection,
   onSelectComponent,
-  onUpdateSectionPosition,
   onUpdateComponentPosition,
-  onDeleteSection,
-  onDropSection,
   onDropComponent,
   onDeleteComponent,
 }: PopCanvasProps) {
-  const { settings, sections, components, layouts } = layout;
+  const { settings, components, layouts } = layout;
   const canvasGrid = settings.canvasGrid;
 
-  // 줌 상태 (0.3 ~ 1.0 범위)
+  // 줌 상태 (0.3 ~ 1.5 범위)
   const [canvasScale, setCanvasScale] = useState(0.6);
 
   // 패닝 상태
   const [isPanning, setIsPanning] = useState(false);
   const [panStart, setPanStart] = useState({ x: 0, y: 0 });
-  const [isSpacePressed, setIsSpacePressed] = useState(false); // Space 키 눌림 상태
+  const [isSpacePressed, setIsSpacePressed] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  // 줌 인 (최대 1.5로 증가)
+  // 줌 컨트롤
-  const handleZoomIn = () => {
+  const handleZoomIn = () => setCanvasScale((prev) => Math.min(1.5, prev + 0.1));
-    setCanvasScale((prev) => Math.min(1.5, prev + 0.1));
+  const handleZoomOut = () => setCanvasScale((prev) => Math.max(0.3, prev - 0.1));
-  };
+  const handleZoomFit = () => setCanvasScale(1.0);
 
-  // 줌 아웃 (최소 0.3)
+  // 패닝
-  const handleZoomOut = () => {
-    setCanvasScale((prev) => Math.max(0.3, prev - 0.1));
-  };
-
-  // 맞춤 (1.0)
-  const handleZoomFit = () => {
-    setCanvasScale(1.0);
-  };
-
-  // 패닝 시작 (중앙 마우스 버튼 또는 배경 영역 드래그)
   const handlePanStart = (e: React.MouseEvent) => {
-    // 중앙 마우스 버튼(휠 버튼, button === 1) 또는 Space 키 누른 상태
-    // 또는 내부 컨테이너(스크롤 영역) 직접 클릭 시
     const isMiddleButton = e.button === 1;
     const isScrollAreaClick = (e.target as HTMLElement).classList.contains("canvas-scroll-area");
-    
     if (isMiddleButton || isSpacePressed || isScrollAreaClick) {
       setIsPanning(true);
       setPanStart({ x: e.clientX, y: e.clientY });
@@ -112,60 +94,44 @@ export function PopCanvas({
     }
   };
 
-  // 패닝 중
   const handlePanMove = (e: React.MouseEvent) => {
     if (!isPanning || !containerRef.current) return;
-
     const deltaX = e.clientX - panStart.x;
     const deltaY = e.clientY - panStart.y;
-
     containerRef.current.scrollLeft -= deltaX;
     containerRef.current.scrollTop -= deltaY;
-
     setPanStart({ x: e.clientX, y: e.clientY });
   };
 
-  // 패닝 종료
+  const handlePanEnd = () => setIsPanning(false);
-  const handlePanEnd = () => {
-    setIsPanning(false);
-  };
 
-  // 마우스 휠 줌 (0.3 ~ 1.5 범위)
+  // 마우스 휠 줌
   const handleWheel = useCallback((e: React.WheelEvent) => {
-    e.preventDefault(); // 브라우저 스크롤 방지
+    e.preventDefault();
-    
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
-    const delta = e.deltaY > 0 ? -0.1 : 0.1; // 위로 스크롤: 줌인, 아래로 스크롤: 줌아웃
     setCanvasScale((prev) => Math.max(0.3, Math.min(1.5, prev + delta)));
   }, []);
 
   // Space 키 감지
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.code === "Space" && !isSpacePressed) {
+      if (e.code === "Space" && !isSpacePressed) setIsSpacePressed(true);
-        setIsSpacePressed(true);
-      }
     };
-
     const handleKeyUp = (e: KeyboardEvent) => {
-      if (e.code === "Space") {
+      if (e.code === "Space") setIsSpacePressed(false);
-        setIsSpacePressed(false);
-      }
     };
-
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
-
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
     };
   }, [isSpacePressed]);
 
-  // 초기 로드 시 캔버스를 중앙으로 스크롤
+  // 초기 로드 시 캔버스 중앙 스크롤
   useEffect(() => {
     if (containerRef.current) {
       const container = containerRef.current;
-      // 약간의 딜레이 후 중앙으로 스크롤 (DOM이 완전히 렌더링된 후)
       const timer = setTimeout(() => {
         const scrollX = (container.scrollWidth - container.clientWidth) / 2;
         const scrollY = (container.scrollHeight - container.clientHeight) / 2;
@@ -173,7 +139,7 @@ export function PopCanvas({
       }, 100);
       return () => clearTimeout(timer);
     }
-  }, [activeDevice]); // 디바이스 변경 시 재중앙화
+  }, [activeDevice]);
 
   // 현재 디바이스의 가로/세로 모드 키
   const landscapeModeKey: PopLayoutModeKey = activeDevice === "tablet" 
@@ -183,117 +149,6 @@ export function PopCanvas({
     ? "tablet_portrait" 
     : "mobile_portrait";
 
-  // 단일 캔버스 프레임 렌더링
-  const renderDeviceFrame = (modeKey: PopLayoutModeKey) => {
-    const resolution = MODE_RESOLUTIONS[modeKey];
-    const isActive = modeKey === activeModeKey;
-    const modeLayout = layouts[modeKey];
-
-    // 이 모드의 섹션 위치 목록
-    const sectionPositions = modeLayout.sectionPositions;
-    const sectionIds = Object.keys(sectionPositions);
-
-    // GridLayout용 레이아웃 아이템 생성
-    const gridLayoutItems: Layout[] = sectionIds.map((sectionId) => {
-      const pos = sectionPositions[sectionId];
-      return {
-        i: sectionId,
-        x: pos.col - 1,
-        y: pos.row - 1,
-        w: pos.colSpan,
-        h: pos.rowSpan,
-        minW: 2,
-        minH: 1,
-      };
-    });
-
-    const cols = canvasGrid.columns;
-    const rowHeight = canvasGrid.rowHeight;
-    const margin: [number, number] = [canvasGrid.gap, canvasGrid.gap];
-
-    const sizeLabel = `${resolution.width}x${resolution.height}`;
-    const modeLabel = `${MODE_LABELS[modeKey]} (${sizeLabel})`;
-
-    // 드래그/리사이즈 완료 핸들러
-    const handleDragResizeStop = (
-      layoutItems: Layout[],
-      oldItem: Layout,
-      newItem: Layout
-    ) => {
-      const newPos: GridPosition = {
-        col: newItem.x + 1,
-        row: newItem.y + 1,
-        colSpan: newItem.w,
-        rowSpan: newItem.h,
-      };
-      onUpdateSectionPosition(newItem.i, newPos, modeKey);
-    };
-
-    return (
-      <div
-        key={modeKey}
-        className={cn(
-          "relative shrink-0 cursor-pointer rounded-lg border-4 bg-white shadow-xl transition-all",
-          isActive 
-            ? "border-primary ring-2 ring-primary/30" 
-            : "border-gray-300 hover:border-gray-400"
-        )}
-        style={{
-          width: resolution.width * canvasScale,
-          height: resolution.height * canvasScale,
-        }}
-        onClick={() => {
-          if (!isActive) {
-            onModeKeyChange(modeKey);
-          }
-        }}
-      >
-        {/* 모드 라벨 */}
-        <div
-          className={cn(
-            "absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-medium",
-            isActive ? "text-primary" : "text-muted-foreground"
-          )}
-        >
-          {modeLabel}
-        </div>
-
-        {/* 활성 표시 배지 */}
-        {isActive && (
-          <div className="absolute right-2 top-2 rounded-full bg-primary px-2 py-0.5 text-[10px] font-bold text-white shadow-lg">
-            편집 중
-          </div>
-        )}
-
-        {/* 드롭 영역 */}
-        <CanvasDropZone
-          modeKey={modeKey}
-          isActive={isActive}
-          resolution={resolution}
-          scale={canvasScale}
-          cols={cols}
-          rowHeight={rowHeight}
-          margin={margin}
-          sections={sections}
-          components={components}
-          sectionPositions={sectionPositions}
-          componentPositions={modeLayout.componentPositions}
-          gridLayoutItems={gridLayoutItems}
-          selectedSectionId={selectedSectionId}
-          selectedComponentId={selectedComponentId}
-          onSelectSection={onSelectSection}
-          onSelectComponent={onSelectComponent}
-          onDragResizeStop={handleDragResizeStop}
-          onDropSection={onDropSection}
-          onDropComponent={onDropComponent}
-          onUpdateComponentPosition={(compId, pos) => onUpdateComponentPosition(compId, pos, modeKey)}
-          onDeleteSection={onDeleteSection}
-          onDeleteComponent={onDeleteComponent}
-        />
-      </div>
-    );
-  };
-
   return (
     <div className="relative flex h-full flex-col bg-gray-50">
       {/* 줌 컨트롤 바 */}
@@ -301,36 +156,18 @@ export function PopCanvas({
         <span className="text-xs text-muted-foreground">
           줌: {Math.round(canvasScale * 100)}%
         </span>
-        <Button
+        <Button variant="outline" size="icon" className="h-7 w-7" onClick={handleZoomOut} title="줌 아웃">
-          variant="outline"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleZoomOut}
-          title="줌 아웃"
-        >
           <ZoomOut className="h-4 w-4" />
         </Button>
-        <Button
+        <Button variant="outline" size="icon" className="h-7 w-7" onClick={handleZoomIn} title="줌 인">
-          variant="outline"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleZoomIn}
-          title="줌 인"
-        >
           <ZoomIn className="h-4 w-4" />
         </Button>
-        <Button
+        <Button variant="outline" size="icon" className="h-7 w-7" onClick={handleZoomFit} title="맞춤 (100%)">
-          variant="outline"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleZoomFit}
-          title="맞춤 (100%)"
-        >
           <Maximize2 className="h-4 w-4" />
         </Button>
       </div>
 
-      {/* 캔버스 영역 (패닝 가능) */}
+      {/* 캔버스 영역 */}
       <div
         ref={containerRef}
         className={cn(
@@ -344,21 +181,39 @@ export function PopCanvas({
         onMouseLeave={handlePanEnd}
         onWheel={handleWheel}
       >
-        {/* 스크롤 가능한 큰 영역 - 빈 공간 클릭 시 패닝 가능 */}
         <div 
           className="canvas-scroll-area flex items-center justify-center gap-16"
-          style={{
+          style={{ padding: "500px", minWidth: "fit-content", minHeight: "fit-content" }}
-            // 캔버스 주변에 충분한 여백 확보 (상하좌우 500px씩)
-            padding: "500px",
-            minWidth: "fit-content",
-            minHeight: "fit-content",
-          }}
         >
-          {/* 가로 모드 캔버스 */}
+          {/* 가로 모드 */}
-          {renderDeviceFrame(landscapeModeKey)}
+          <DeviceFrame
+            modeKey={landscapeModeKey}
+            isActive={landscapeModeKey === activeModeKey}
+            scale={canvasScale}
+            canvasGrid={canvasGrid}
+            layout={layout}
+            selectedComponentId={selectedComponentId}
+            onModeKeyChange={onModeKeyChange}
+            onSelectComponent={onSelectComponent}
+            onUpdateComponentPosition={onUpdateComponentPosition}
+            onDropComponent={onDropComponent}
+            onDeleteComponent={onDeleteComponent}
+          />
           
-          {/* 세로 모드 캔버스 */}
+          {/* 세로 모드 */}
-          {renderDeviceFrame(portraitModeKey)}
+          <DeviceFrame
+            modeKey={portraitModeKey}
+            isActive={portraitModeKey === activeModeKey}
+            scale={canvasScale}
+            canvasGrid={canvasGrid}
+            layout={layout}
+            selectedComponentId={selectedComponentId}
+            onModeKeyChange={onModeKeyChange}
+            onSelectComponent={onSelectComponent}
+            onUpdateComponentPosition={onUpdateComponentPosition}
+            onDropComponent={onDropComponent}
+            onDeleteComponent={onDeleteComponent}
+          />
         </div>
       </div>
     </div>
@@ -366,89 +221,202 @@ export function PopCanvas({
 }
 
 // ========================================
-// 캔버스 드롭 영역 컴포넌트
+// CSS Grid 기반 디바이스 프레임 (v3: 컴포넌트 직접 배치)
 // ========================================
-interface CanvasDropZoneProps {
+interface DeviceFrameProps {
   modeKey: PopLayoutModeKey;
   isActive: boolean;
-  resolution: { width: number; height: number };
   scale: number;
-  cols: number;
+  canvasGrid: { columns: number; rows: number; gap: number };
-  rowHeight: number;
+  layout: PopLayoutDataV3;
-  margin: [number, number];
-  sections: PopLayoutDataV2["sections"];
-  components: PopLayoutDataV2["components"];
-  sectionPositions: Record<string, GridPosition>;
-  componentPositions: Record<string, GridPosition>;
-  gridLayoutItems: Layout[];
-  selectedSectionId: string | null;
   selectedComponentId: string | null;
-  onSelectSection: (id: string | null) => void;
+  onModeKeyChange: (modeKey: PopLayoutModeKey) => void;
   onSelectComponent: (id: string | null) => void;
-  onDragResizeStop: (layout: Layout[], oldItem: Layout, newItem: Layout) => void;
+  onUpdateComponentPosition: (componentId: string, position: GridPosition, modeKey?: PopLayoutModeKey) => void;
-  onDropSection: (gridPosition: GridPosition) => void;
+  onDropComponent: (type: PopComponentType, gridPosition: GridPosition) => void;
-  onDropComponent: (sectionId: string, type: PopComponentType, gridPosition: GridPosition) => void;
+  onDeleteComponent: (componentId: string) => void;
-  onUpdateComponentPosition: (componentId: string, position: GridPosition) => void;
-  onDeleteSection: (id: string) => void;
-  onDeleteComponent: (sectionId: string, componentId: string) => void;
 }
 
-function CanvasDropZone({
+function DeviceFrame({
   modeKey,
   isActive,
-  resolution,
   scale,
-  cols,
+  canvasGrid,
-  rowHeight,
+  layout,
-  margin,
-  sections,
-  components,
-  sectionPositions,
-  componentPositions,
-  gridLayoutItems,
-  selectedSectionId,
   selectedComponentId,
-  onSelectSection,
+  onModeKeyChange,
   onSelectComponent,
-  onDragResizeStop,
-  onDropSection,
-  onDropComponent,
   onUpdateComponentPosition,
-  onDeleteSection,
+  onDropComponent,
   onDeleteComponent,
-}: CanvasDropZoneProps) {
+}: DeviceFrameProps) {
+  const gridRef = useRef<HTMLDivElement>(null);
   const dropRef = useRef<HTMLDivElement>(null);
   
-  // 스케일 적용된 크기
+  const { components, layouts } = layout;
-  const scaledWidth = resolution.width * scale;
+  const resolution = MODE_RESOLUTIONS[modeKey];
-  const scaledHeight = resolution.height * scale;
+  const modeLayout = layouts[modeKey];
+  const componentPositions = modeLayout.componentPositions;
+  const componentIds = Object.keys(componentPositions);
 
-  // 섹션 드롭 핸들러
+  const cols = canvasGrid.columns;
+  const rows = canvasGrid.rows || 24;
+  const gap = canvasGrid.gap;
+
+  // 드래그 상태
+  const [dragState, setDragState] = useState<{
+    componentId: string;
+    startPos: GridPosition;
+    currentPos: GridPosition;
+    isDragging: boolean;
+  } | null>(null);
+
+  // 리사이즈 상태
+  const [resizeState, setResizeState] = useState<{
+    componentId: string;
+    startPos: GridPosition;
+    currentPos: GridPosition;
+    handle: "se" | "sw" | "ne" | "nw" | "e" | "w" | "n" | "s";
+    isResizing: boolean;
+  } | null>(null);
+
+  // 라벨
+  const sizeLabel = `${resolution.width}x${resolution.height}`;
+  const modeLabel = `${MODE_LABELS[modeKey]} (${sizeLabel})`;
+
+  // 마우스 → 그리드 좌표 변환
+  const getGridPosition = useCallback((clientX: number, clientY: number): { col: number; row: number } => {
+    if (!gridRef.current) return { col: 1, row: 1 };
+    const rect = gridRef.current.getBoundingClientRect();
+    const x = (clientX - rect.left) / scale;
+    const y = (clientY - rect.top) / scale;
+    const cellWidth = (resolution.width - gap * (cols + 1)) / cols;
+    const cellHeight = (resolution.height - gap * (rows + 1)) / rows;
+    const col = Math.max(1, Math.min(cols, Math.floor((x - gap) / (cellWidth + gap)) + 1));
+    const row = Math.max(1, Math.min(rows, Math.floor((y - gap) / (cellHeight + gap)) + 1));
+    return { col, row };
+  }, [scale, resolution, cols, rows, gap]);
+
+  // 드래그 시작
+  const handleDragStart = useCallback((e: React.MouseEvent, componentId: string) => {
+    if (!isActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const pos = componentPositions[componentId];
+    setDragState({
+      componentId,
+      startPos: { ...pos },
+      currentPos: { ...pos },
+      isDragging: true,
+    });
+  }, [isActive, componentPositions]);
+
+  // 마우스 이동
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (dragState?.isDragging && gridRef.current) {
+      const { col, row } = getGridPosition(e.clientX, e.clientY);
+      const newCol = Math.max(1, Math.min(cols - dragState.startPos.colSpan + 1, col));
+      const newRow = Math.max(1, Math.min(rows - dragState.startPos.rowSpan + 1, row));
+      setDragState(prev => prev ? {
+        ...prev,
+        currentPos: { ...prev.startPos, col: newCol, row: newRow }
+      } : null);
+    }
+    
+    if (resizeState?.isResizing && gridRef.current) {
+      const { col, row } = getGridPosition(e.clientX, e.clientY);
+      const startPos = resizeState.startPos;
+      let newPos = { ...startPos };
+      
+      switch (resizeState.handle) {
+        case "se":
+          newPos.colSpan = Math.max(2, col - startPos.col + 1);
+          newPos.rowSpan = Math.max(2, row - startPos.row + 1);
+          break;
+        case "e":
+          newPos.colSpan = Math.max(2, col - startPos.col + 1);
+          break;
+        case "s":
+          newPos.rowSpan = Math.max(2, row - startPos.row + 1);
+          break;
+        case "sw":
+          const newColSW = Math.min(col, startPos.col + startPos.colSpan - 2);
+          newPos.col = newColSW;
+          newPos.colSpan = startPos.col + startPos.colSpan - newColSW;
+          newPos.rowSpan = Math.max(2, row - startPos.row + 1);
+          break;
+        case "w":
+          const newColW = Math.min(col, startPos.col + startPos.colSpan - 2);
+          newPos.col = newColW;
+          newPos.colSpan = startPos.col + startPos.colSpan - newColW;
+          break;
+        case "ne":
+          const newRowNE = Math.min(row, startPos.row + startPos.rowSpan - 2);
+          newPos.row = newRowNE;
+          newPos.rowSpan = startPos.row + startPos.rowSpan - newRowNE;
+          newPos.colSpan = Math.max(2, col - startPos.col + 1);
+          break;
+        case "n":
+          const newRowN = Math.min(row, startPos.row + startPos.rowSpan - 2);
+          newPos.row = newRowN;
+          newPos.rowSpan = startPos.row + startPos.rowSpan - newRowN;
+          break;
+        case "nw":
+          const newColNW = Math.min(col, startPos.col + startPos.colSpan - 2);
+          const newRowNW = Math.min(row, startPos.row + startPos.rowSpan - 2);
+          newPos.col = newColNW;
+          newPos.row = newRowNW;
+          newPos.colSpan = startPos.col + startPos.colSpan - newColNW;
+          newPos.rowSpan = startPos.row + startPos.rowSpan - newRowNW;
+          break;
+      }
+      
+      newPos.col = Math.max(1, newPos.col);
+      newPos.row = Math.max(1, newPos.row);
+      newPos.colSpan = Math.min(cols - newPos.col + 1, newPos.colSpan);
+      newPos.rowSpan = Math.min(rows - newPos.row + 1, newPos.rowSpan);
+      
+      setResizeState(prev => prev ? { ...prev, currentPos: newPos } : null);
+    }
+  }, [dragState, resizeState, getGridPosition, cols, rows]);
+
+  // 드래그/리사이즈 종료
+  const handleMouseUp = useCallback(() => {
+    if (dragState?.isDragging) {
+      onUpdateComponentPosition(dragState.componentId, dragState.currentPos, modeKey);
+      setDragState(null);
+    }
+    if (resizeState?.isResizing) {
+      onUpdateComponentPosition(resizeState.componentId, resizeState.currentPos, modeKey);
+      setResizeState(null);
+    }
+  }, [dragState, resizeState, onUpdateComponentPosition, modeKey]);
+
+  // 리사이즈 시작
+  const handleResizeStart = useCallback((e: React.MouseEvent, componentId: string, handle: string) => {
+    if (!isActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const pos = componentPositions[componentId];
+    setResizeState({
+      componentId,
+      startPos: { ...pos },
+      currentPos: { ...pos },
+      handle: handle as any,
+      isResizing: true,
+    });
+  }, [isActive, componentPositions]);
+
+  // 컴포넌트 드롭
   const [{ isOver, canDrop }, drop] = useDrop(
     () => ({
-      accept: DND_ITEM_TYPES.SECTION,
+      accept: DND_ITEM_TYPES.COMPONENT,
-      drop: (item: DragItemSection, monitor) => {
+      drop: (item: DragItemComponent, monitor) => {
         if (!isActive) return;
-
         const clientOffset = monitor.getClientOffset();
-        if (!clientOffset || !dropRef.current) return;
+        if (!clientOffset || !gridRef.current) return;
-
+        const { col, row } = getGridPosition(clientOffset.x, clientOffset.y);
-        const dropRect = dropRef.current.getBoundingClientRect();
+        onDropComponent(item.componentType, { col, row, colSpan: 4, rowSpan: 3 });
-        // 스케일 보정
-        const x = (clientOffset.x - dropRect.left) / scale;
-        const y = (clientOffset.y - dropRect.top) / scale;
-
-        // 그리드 위치 계산
-        const colWidth = (resolution.width - 16) / cols;
-        const col = Math.max(1, Math.min(cols, Math.floor(x / colWidth) + 1));
-        const row = Math.max(1, Math.floor(y / (rowHeight * scale)) + 1);
-
-        onDropSection({
-          col,
-          row,
-          colSpan: 3,
-          rowSpan: 4,
-        });
       },
       canDrop: () => isActive,
       collect: (monitor) => ({
@@ -456,133 +424,139 @@ function CanvasDropZone({
         canDrop: monitor.canDrop(),
       }),
     }),
-    [isActive, resolution, scale, cols, rowHeight, onDropSection]
+    [isActive, getGridPosition, onDropComponent]
   );
 
   drop(dropRef);
 
-  const sectionIds = Object.keys(sectionPositions);
+  // 현재 표시할 위치
+  const getDisplayPosition = (componentId: string): GridPosition => {
+    if (dragState?.componentId === componentId && dragState.isDragging) {
+      return dragState.currentPos;
+    }
+    if (resizeState?.componentId === componentId && resizeState.isResizing) {
+      return resizeState.currentPos;
+    }
+    return componentPositions[componentId];
+  };
 
   return (
+    <div className="relative shrink-0">
+      {/* 모드 라벨 */}
+      <div
+        className={cn(
+          "absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-medium",
+          isActive ? "text-primary" : "text-muted-foreground"
+        )}
+      >
+        {modeLabel}
+      </div>
+
+      {/* 디바이스 프레임 */}
       <div
         ref={dropRef}
         className={cn(
-        "h-full w-full overflow-hidden rounded-md bg-gray-100 p-1 transition-colors",
+          "relative cursor-pointer overflow-hidden rounded-xl bg-white shadow-lg transition-all",
-        isOver && canDrop && "bg-primary/10 ring-2 ring-primary ring-inset"
+          isActive ? "ring-2 ring-primary ring-offset-2" : "ring-1 ring-gray-200 hover:ring-gray-300",
+          isOver && canDrop && "ring-2 ring-primary bg-primary/5"
         )}
         style={{
-        // 내부 컨텐츠를 스케일 조정
+          width: resolution.width * scale,
-        transform: `scale(${scale})`,
+          height: resolution.height * scale,
-        transformOrigin: "top left",
-        width: resolution.width,
-        height: resolution.height,
         }}
         onClick={(e) => {
           if (e.target === e.currentTarget) {
-          onSelectSection(null);
+            if (!isActive) onModeKeyChange(modeKey);
-          onSelectComponent(null);
+            else onSelectComponent(null);
           }
         }}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
       >
-      {sectionIds.length > 0 ? (
+        {/* CSS Grid (뷰어와 동일) */}
-        <GridLayout
+        <div
-          className="layout"
+          ref={gridRef}
-          layout={gridLayoutItems}
+          className="origin-top-left"
-          cols={cols}
+          style={{
-          rowHeight={rowHeight}
+            transform: `scale(${scale})`,
-          width={resolution.width - 8}
+            width: resolution.width,
-          margin={margin}
+            height: resolution.height,
-          containerPadding={[0, 0]}
+            display: "grid",
-          onDragStop={onDragResizeStop}
+            gridTemplateColumns: `repeat(${cols}, 1fr)`,
-          onResizeStop={onDragResizeStop}
+            gridTemplateRows: `repeat(${rows}, 1fr)`,
-          isDraggable={isActive}
+            gap: `${gap}px`,
-          isResizable={isActive}
+            padding: `${gap}px`,
-          compactType={null}
+          }}
-          preventCollision={false}
-          useCSSTransforms={true}
-          draggableHandle=".section-drag-handle"
         >
-          {sectionIds.map((sectionId) => {
+          {componentIds.length > 0 ? (
-            const sectionDef = sections[sectionId];
+            componentIds.map((componentId) => {
-            if (!sectionDef) return null;
+              const compDef = components[componentId];
+              if (!compDef) return null;
+
+              const pos = getDisplayPosition(componentId);
+              const isSelected = selectedComponentId === componentId;
+              const isDragging = dragState?.componentId === componentId && dragState.isDragging;
+              const isResizing = resizeState?.componentId === componentId && resizeState.isResizing;
 
               return (
                 <div
-                key={sectionId}
+                  key={componentId}
                   className={cn(
-                  "group relative flex flex-col overflow-hidden rounded-lg border-2 bg-white transition-all",
+                    "group relative flex cursor-move items-center justify-center overflow-hidden rounded-lg border-2 bg-white transition-all",
-                  selectedSectionId === sectionId
+                    isSelected
                       ? "border-primary ring-2 ring-primary/30"
-                    : "border-gray-200 hover:border-gray-400"
+                      : "border-gray-200 hover:border-gray-300",
+                    (isDragging || isResizing) && "opacity-80 shadow-xl z-50"
                   )}
+                  style={{
+                    gridColumn: `${pos.col} / span ${pos.colSpan}`,
+                    gridRow: `${pos.row} / span ${pos.rowSpan}`,
+                  }}
                   onClick={(e) => {
                     e.stopPropagation();
-                  onSelectSection(sectionId);
+                    if (!isActive) onModeKeyChange(modeKey);
+                    onSelectComponent(componentId);
                   }}
+                  onMouseDown={(e) => handleDragStart(e, componentId)}
                 >
-                {/* 섹션 헤더 */}
+                  {/* 컴포넌트 라벨 */}
-                <div
+                  <span className="text-xs text-gray-500 select-none">
-                  className={cn(
+                    {compDef.label || COMPONENT_TYPE_LABELS[compDef.type]}
-                    "section-drag-handle flex h-7 shrink-0 cursor-move items-center justify-between border-b px-2",
-                    selectedSectionId === sectionId ? "bg-primary/10" : "bg-gray-50"
-                  )}
-                >
-                  <div className="flex items-center gap-1">
-                    <GripVertical className="h-3 w-3 text-gray-400" />
-                    <span className="text-xs font-medium text-gray-600">
-                      {sectionDef.label || "섹션"}
                   </span>
-                  </div>
-                  {selectedSectionId === sectionId && isActive && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5 text-destructive hover:bg-destructive/10"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteSection(sectionId);
-                      }}
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </Button>
-                  )}
-                </div>
 
-                {/* 섹션 내부 - 컴포넌트들 */}
+                  {/* 리사이즈 핸들 */}
-                <div className="relative flex-1">
+                  {isActive && isSelected && (
-                  <SectionGridV2
+                    <>
-                    sectionId={sectionId}
+                      <div className="absolute -right-1 -bottom-1 h-3 w-3 cursor-se-resize rounded-full bg-primary" onMouseDown={(e) => handleResizeStart(e, componentId, "se")} />
-                    sectionDef={sectionDef}
+                      <div className="absolute -left-1 -bottom-1 h-3 w-3 cursor-sw-resize rounded-full bg-primary" onMouseDown={(e) => handleResizeStart(e, componentId, "sw")} />
-                    components={components}
+                      <div className="absolute -right-1 -top-1 h-3 w-3 cursor-ne-resize rounded-full bg-primary" onMouseDown={(e) => handleResizeStart(e, componentId, "ne")} />
-                    componentPositions={componentPositions}
+                      <div className="absolute -left-1 -top-1 h-3 w-3 cursor-nw-resize rounded-full bg-primary" onMouseDown={(e) => handleResizeStart(e, componentId, "nw")} />
-                    isActive={isActive}
+                      <div className="absolute right-0 top-1/2 h-6 w-1.5 -translate-y-1/2 cursor-e-resize rounded bg-primary/50" onMouseDown={(e) => handleResizeStart(e, componentId, "e")} />
-                    selectedComponentId={selectedComponentId}
+                      <div className="absolute left-0 top-1/2 h-6 w-1.5 -translate-y-1/2 cursor-w-resize rounded bg-primary/50" onMouseDown={(e) => handleResizeStart(e, componentId, "w")} />
-                    onSelectComponent={onSelectComponent}
+                      <div className="absolute bottom-0 left-1/2 h-1.5 w-6 -translate-x-1/2 cursor-s-resize rounded bg-primary/50" onMouseDown={(e) => handleResizeStart(e, componentId, "s")} />
-                    onDropComponent={onDropComponent}
+                      <div className="absolute top-0 left-1/2 h-1.5 w-6 -translate-x-1/2 cursor-n-resize rounded bg-primary/50" onMouseDown={(e) => handleResizeStart(e, componentId, "n")} />
-                    onUpdateComponentPosition={onUpdateComponentPosition}
+                    </>
-                    onDeleteComponent={onDeleteComponent}
+                  )}
-                  />
-                </div>
                 </div>
               );
-          })}
+            })
-        </GridLayout>
           ) : (
             <div
               className={cn(
-            "flex h-full items-center justify-center rounded-lg border-2 border-dashed text-sm",
+                "col-span-full row-span-full flex items-center justify-center text-sm",
-            isOver && canDrop
+                isOver && canDrop ? "text-primary" : "text-gray-400"
-              ? "border-primary bg-primary/5 text-primary"
-              : "border-gray-300 text-gray-400"
               )}
             >
               {isOver && canDrop
-            ? "여기에 섹션을 놓으세요"
+                ? "여기에 컴포넌트를 놓으세요"
                 : isActive
-            ? "왼쪽 패널에서 섹션을 드래그하세요"
+                ? "왼쪽 패널에서 컴포넌트를 드래그하세요"
-            : "클릭하여 편집 모드로 전환"}
+                : "클릭하여 편집"}
             </div>
           )}
         </div>
+      </div>
+    </div>
   );
 }

frontend/components/pop/designer/PopDesigner.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { ArrowLeft, Save, Smartphone, Tablet } from "lucide-react";
@@ -16,22 +16,17 @@ import { toast } from "sonner";
 import { PopCanvas } from "./PopCanvas";
 import { PopPanel } from "./panels/PopPanel";
 import {
-  PopLayoutDataV2,
+  PopLayoutDataV3,
   PopLayoutModeKey,
   PopComponentType,
   GridPosition,
-  PopSectionDefinition,
+  PopComponentDefinition,
-  createEmptyPopLayoutV2,
+  createEmptyPopLayoutV3,
-  createSectionDefinition,
+  ensureV3Layout,
-  createComponentDefinition,
+  addComponentToV3Layout,
-  ensureV2Layout,
+  removeComponentFromV3Layout,
-  addSectionToV2Layout,
+  updateComponentPositionInModeV3,
-  addComponentToV2Layout,
+  isV3Layout,
-  removeSectionFromV2Layout,
-  removeComponentFromV2Layout,
-  updateSectionPositionInMode,
-  updateComponentPositionInMode,
-  isV2Layout,
 } from "./types/pop-layout";
 import { screenApi } from "@/lib/api/screen";
 import { ScreenDefinition } from "@/types/screen";
@@ -41,16 +36,6 @@ import { ScreenDefinition } from "@/types/screen";
 // ========================================
 type DeviceType = "mobile" | "tablet";
 
-/**
- * 디바이스 + 방향 → 모드 키 변환
- */
-const getModeKey = (device: DeviceType, isLandscape: boolean): PopLayoutModeKey => {
-  if (device === "tablet") {
-    return isLandscape ? "tablet_landscape" : "tablet_portrait";
-  }
-  return isLandscape ? "mobile_landscape" : "mobile_portrait";
-};
-
 // ========================================
 // Props
 // ========================================
@@ -61,7 +46,7 @@ interface PopDesignerProps {
 }
 
 // ========================================
-// 메인 컴포넌트
+// 메인 컴포넌트 (v3: 섹션 없이 컴포넌트 직접 배치)
 // ========================================
 export default function PopDesigner({
   selectedScreen,
@@ -69,9 +54,9 @@ export default function PopDesigner({
   onScreenUpdate,
 }: PopDesignerProps) {
   // ========================================
-  // 레이아웃 상태 (v2)
+  // 레이아웃 상태 (v3)
   // ========================================
-  const [layout, setLayout] = useState<PopLayoutDataV2>(createEmptyPopLayoutV2());
+  const [layout, setLayout] = useState<PopLayoutDataV3>(createEmptyPopLayoutV3());
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
@@ -80,31 +65,17 @@ export default function PopDesigner({
   // 디바이스/모드 상태
   // ========================================
   const [activeDevice, setActiveDevice] = useState<DeviceType>("tablet");
-  
-  // 활성 모드 키 (가로/세로 중 현재 포커스된 캔버스)
-  // 기본값: 태블릿 가로
   const [activeModeKey, setActiveModeKey] = useState<PopLayoutModeKey>("tablet_landscape");
 
   // ========================================
-  // 선택 상태
+  // 선택 상태 (v3: 섹션 없음, 컴포넌트만)
   // ========================================
-  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
   const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null);
 
-  // ========================================
+  // 선택된 컴포넌트 정의
-  // 파생 상태
+  const selectedComponent: PopComponentDefinition | null = selectedComponentId
-  // ========================================
+    ? layout.components[selectedComponentId] || null
-  
+    : null;
-  // 선택된 섹션 정의
-  const selectedSection: PopSectionDefinition | null = useMemo(() => {
-    if (!selectedSectionId) return null;
-    return layout.sections[selectedSectionId] || null;
-  }, [layout.sections, selectedSectionId]);
-
-  // 현재 활성 모드의 섹션 ID 목록
-  const activeSectionIds = useMemo(() => {
-    return Object.keys(layout.layouts[activeModeKey].sectionPositions);
-  }, [layout.layouts, activeModeKey]);
 
   // ========================================
   // 레이아웃 로드
@@ -115,31 +86,27 @@ export default function PopDesigner({
 
       setIsLoading(true);
       try {
-        // API가 layout_data 내용을 직접 반환 (언래핑 상태)
         const loadedLayout = await screenApi.getLayoutPop(selectedScreen.screenId);
 
         if (loadedLayout) {
-          // v1 또는 v2 → v2로 변환
+          // v1, v2, v3 → v3로 변환
-          const v2Layout = ensureV2Layout(loadedLayout);
+          const v3Layout = ensureV3Layout(loadedLayout);
-          setLayout(v2Layout);
+          setLayout(v3Layout);
           
-          const sectionCount = Object.keys(v2Layout.sections).length;
+          const componentCount = Object.keys(v3Layout.components).length;
-          const componentCount = Object.keys(v2Layout.components).length;
+          console.log(`POP v3 레이아웃 로드 성공: ${componentCount}개 컴포넌트`);
-          console.log(`POP v2 레이아웃 로드 성공: ${sectionCount}개 섹션, ${componentCount}개 컴포넌트`);
           
-          // v1에서 마이그레이션된 경우 알림
+          if (!isV3Layout(loadedLayout)) {
-          if (!isV2Layout(loadedLayout)) {
+            console.log("v1/v2 → v3 자동 마이그레이션 완료");
-            console.log("v1 → v2 자동 마이그레이션 완료");
           }
         } else {
-          // 레이아웃 없음 - 빈 v2 레이아웃 생성
+          console.log("POP 레이아웃 없음, 빈 v3 레이아웃 생성");
-          console.log("POP 레이아웃 없음, 빈 v2 레이아웃 생성");
+          setLayout(createEmptyPopLayoutV3());
-          setLayout(createEmptyPopLayoutV2());
         }
       } catch (error) {
         console.error("레이아웃 로드 실패:", error);
         toast.error("레이아웃을 불러오는데 실패했습니다");
-        setLayout(createEmptyPopLayoutV2());
+        setLayout(createEmptyPopLayoutV3());
       } finally {
         setIsLoading(false);
       }
@@ -167,25 +134,13 @@ export default function PopDesigner({
     }
   }, [selectedScreen?.screenId, layout]);
 
-  // ========================================
-  // 섹션 추가 (4모드 동기화)
-  // ========================================
-  const handleDropSection = useCallback((gridPosition: GridPosition) => {
-    const newId = `section-${Date.now()}`;
-    
-    setLayout((prev) => addSectionToV2Layout(prev, newId, gridPosition));
-    setSelectedSectionId(newId);
-    setHasChanges(true);
-  }, []);
-
   // ========================================
   // 컴포넌트 추가 (4모드 동기화)
   // ========================================
   const handleDropComponent = useCallback(
-    (sectionId: string, type: PopComponentType, gridPosition: GridPosition) => {
+    (type: PopComponentType, gridPosition: GridPosition) => {
       const newId = `${type}-${Date.now()}`;
-      
+      setLayout((prev) => addComponentToV3Layout(prev, newId, type, gridPosition));
-      setLayout((prev) => addComponentToV2Layout(prev, sectionId, newId, type, gridPosition));
       setSelectedComponentId(newId);
       setHasChanges(true);
     },
@@ -193,16 +148,16 @@ export default function PopDesigner({
   );
 
   // ========================================
-  // 섹션 정의 업데이트 (공유)
+  // 컴포넌트 정의 업데이트
   // ========================================
-  const handleUpdateSectionDefinition = useCallback(
+  const handleUpdateComponentDefinition = useCallback(
-    (sectionId: string, updates: Partial<PopSectionDefinition>) => {
+    (componentId: string, updates: Partial<PopComponentDefinition>) => {
       setLayout((prev) => ({
         ...prev,
-        sections: {
+        components: {
-          ...prev.sections,
+          ...prev.components,
-          [sectionId]: {
+          [componentId]: {
-            ...prev.sections[sectionId],
+            ...prev.components[componentId],
             ...updates,
           },
         },
@@ -212,63 +167,37 @@ export default function PopDesigner({
     []
   );
 
-  // ========================================
-  // 섹션 위치 업데이트 (현재 모드만)
-  // ========================================
-  const handleUpdateSectionPosition = useCallback(
-    (sectionId: string, position: GridPosition, modeKey?: PopLayoutModeKey) => {
-      const targetMode = modeKey || activeModeKey;
-      setLayout((prev) => updateSectionPositionInMode(prev, targetMode, sectionId, position));
-      setHasChanges(true);
-    },
-    [activeModeKey]
-  );
-
   // ========================================
   // 컴포넌트 위치 업데이트 (현재 모드만)
   // ========================================
   const handleUpdateComponentPosition = useCallback(
     (componentId: string, position: GridPosition, modeKey?: PopLayoutModeKey) => {
       const targetMode = modeKey || activeModeKey;
-      setLayout((prev) => updateComponentPositionInMode(prev, targetMode, componentId, position));
+      setLayout((prev) => updateComponentPositionInModeV3(prev, targetMode, componentId, position));
       setHasChanges(true);
     },
     [activeModeKey]
   );
 
   // ========================================
-  // 섹션 삭제 (4모드 동기화)
+  // 컴포넌트 삭제 (4모드 동기화)
   // ========================================
-  const handleDeleteSection = useCallback((sectionId: string) => {
+  const handleDeleteComponent = useCallback((componentId: string) => {
-    setLayout((prev) => removeSectionFromV2Layout(prev, sectionId));
+    setLayout((prev) => removeComponentFromV3Layout(prev, componentId));
-    setSelectedSectionId(null);
     setSelectedComponentId(null);
     setHasChanges(true);
   }, []);
 
-  // ========================================
-  // 컴포넌트 삭제 (4모드 동기화)
-  // ========================================
-  const handleDeleteComponent = useCallback(
-    (sectionId: string, componentId: string) => {
-      setLayout((prev) => removeComponentFromV2Layout(prev, sectionId, componentId));
-      setSelectedComponentId(null);
-      setHasChanges(true);
-    },
-    []
-  );
-
   // ========================================
   // 디바이스 전환
   // ========================================
   const handleDeviceChange = useCallback((device: DeviceType) => {
     setActiveDevice(device);
-    // 기본 모드 키 설정 (가로)
     setActiveModeKey(device === "tablet" ? "tablet_landscape" : "mobile_landscape");
   }, []);
 
   // ========================================
-  // 모드 키 전환 (캔버스 포커스)
+  // 모드 키 전환
   // ========================================
   const handleModeKeyChange = useCallback((modeKey: PopLayoutModeKey) => {
     setActiveModeKey(modeKey);
@@ -292,7 +221,6 @@ export default function PopDesigner({
   // ========================================
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      // input/textarea 포커스 시 제외
       const target = e.target as HTMLElement;
       if (
         target.tagName === "INPUT" ||
@@ -302,44 +230,17 @@ export default function PopDesigner({
         return;
       }
 
-      // Delete 또는 Backspace 키
       if (e.key === "Delete" || e.key === "Backspace") {
-        e.preventDefault(); // 브라우저 뒤로가기 방지
+        e.preventDefault();
-
-        // 컴포넌트가 선택되어 있으면 컴포넌트 삭제
         if (selectedComponentId) {
-          // v2 구조: 컴포넌트가 속한 섹션을 sections의 componentIds에서 찾기
+          handleDeleteComponent(selectedComponentId);
-          // (PopComponentDefinition에는 sectionId가 없으므로 섹션을 순회하여 찾음)
-          let foundSectionId: string | null = null;
-          for (const [sectionId, sectionDef] of Object.entries(layout.sections)) {
-            if (sectionDef.componentIds.includes(selectedComponentId)) {
-              foundSectionId = sectionId;
-              break;
-            }
-          }
-          
-          if (foundSectionId) {
-            handleDeleteComponent(foundSectionId, selectedComponentId);
-          }
-        }
-        // 컴포넌트가 선택되지 않았고 섹션이 선택되어 있으면 섹션 삭제
-        else if (selectedSectionId) {
-          handleDeleteSection(selectedSectionId);
         }
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
-    return () => {
+    return () => window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedComponentId, handleDeleteComponent]);
-    };
-  }, [
-    selectedComponentId,
-    selectedSectionId,
-    layout.sections,
-    handleDeleteComponent,
-    handleDeleteSection,
-  ]);
 
   // ========================================
   // 로딩 상태
@@ -374,7 +275,7 @@ export default function PopDesigner({
             )}
           </div>
 
-          {/* 중앙: 디바이스 전환 (가로/세로 전환 버튼 제거 - 캔버스 2개 동시 표시) */}
+          {/* 중앙: 디바이스 전환 */}
           <div className="flex items-center gap-2">
             <Tabs
               value={activeDevice}
@@ -406,9 +307,9 @@ export default function PopDesigner({
           </div>
         </div>
 
-        {/* 메인 영역: 리사이즈 가능한 패널 */}
+        {/* 메인 영역 */}
         <ResizablePanelGroup direction="horizontal" className="flex-1">
-          {/* 왼쪽: 패널 (컴포넌트/편집 탭) */}
+          {/* 왼쪽: 패널 */}
           <ResizablePanel
             defaultSize={20}
             minSize={15}
@@ -418,31 +319,26 @@ export default function PopDesigner({
             <PopPanel
               layout={layout}
               activeModeKey={activeModeKey}
-              selectedSectionId={selectedSectionId}
+              selectedComponentId={selectedComponentId}
-              selectedSection={selectedSection}
+              selectedComponent={selectedComponent}
-              onUpdateSectionDefinition={handleUpdateSectionDefinition}
+              onUpdateComponentDefinition={handleUpdateComponentDefinition}
-              onDeleteSection={handleDeleteSection}
+              onDeleteComponent={handleDeleteComponent}
               activeDevice={activeDevice}
             />
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 오른쪽: 캔버스 (가로+세로 2개 동시 표시) */}
+          {/* 오른쪽: 캔버스 */}
           <ResizablePanel defaultSize={80}>
             <PopCanvas
               layout={layout}
               activeDevice={activeDevice}
               activeModeKey={activeModeKey}
               onModeKeyChange={handleModeKeyChange}
-              selectedSectionId={selectedSectionId}
               selectedComponentId={selectedComponentId}
-              onSelectSection={setSelectedSectionId}
               onSelectComponent={setSelectedComponentId}
-              onUpdateSectionPosition={handleUpdateSectionPosition}
               onUpdateComponentPosition={handleUpdateComponentPosition}
-              onDeleteSection={handleDeleteSection}
-              onDropSection={handleDropSection}
               onDropComponent={handleDropComponent}
               onDeleteComponent={handleDeleteComponent}
             />

frontend/components/pop/designer/SectionGrid.tsx

@@ -1,352 +0,0 @@
-"use client";
-
-import { useCallback, useMemo, useRef, useState, useEffect } from "react";
-import { useDrop } from "react-dnd";
-import GridLayout, { Layout } from "react-grid-layout";
-import { cn } from "@/lib/utils";
-import {
-  PopSectionData,
-  PopComponentData,
-  PopComponentType,
-  GridPosition,
-} from "./types/pop-layout";
-import { DND_ITEM_TYPES, DragItemComponent } from "./panels/PopPanel";
-import { Trash2, Move } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
-
-interface SectionGridProps {
-  section: PopSectionData;
-  isActive: boolean;
-  selectedComponentId: string | null;
-  onSelectComponent: (id: string | null) => void;
-  onDropComponent: (sectionId: string, type: PopComponentType, gridPosition: GridPosition) => void;
-  onUpdateComponent: (sectionId: string, componentId: string, updates: Partial<PopComponentData>) => void;
-  onDeleteComponent: (sectionId: string, componentId: string) => void;
-}
-
-export function SectionGrid({
-  section,
-  isActive,
-  selectedComponentId,
-  onSelectComponent,
-  onDropComponent,
-  onUpdateComponent,
-  onDeleteComponent,
-}: SectionGridProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { components } = section;
-  
-  // 컨테이너 크기 측정
-  const [containerSize, setContainerSize] = useState({ width: 300, height: 200 });
-  
-  useEffect(() => {
-    const updateSize = () => {
-      if (containerRef.current) {
-        setContainerSize({
-          width: containerRef.current.offsetWidth,
-          height: containerRef.current.offsetHeight,
-        });
-      }
-    };
-    
-    updateSize();
-    
-    const resizeObserver = new ResizeObserver(updateSize);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    
-    return () => resizeObserver.disconnect();
-  }, []);
-
-  // 셀 크기 계산 - 고정 셀 크기 기반으로 자동 계산
-  const padding = 8; // p-2 = 8px
-  const gap = 4; // 고정 간격
-  const availableWidth = containerSize.width - padding * 2;
-  const availableHeight = containerSize.height - padding * 2;
-  
-  // 고정 셀 크기 (40px) 기반으로 열/행 수 자동 계산
-  const CELL_SIZE = 40;
-  const cols = Math.max(1, Math.floor((availableWidth + gap) / (CELL_SIZE + gap)));
-  const rows = Math.max(1, Math.floor((availableHeight + gap) / (CELL_SIZE + gap)));
-  const cellHeight = CELL_SIZE;
-
-  // GridLayout용 레이아웃 변환 (자동 계산된 cols/rows 사용)
-  const gridLayoutItems: Layout[] = useMemo(() => {
-    return components.map((comp) => {
-      // 컴포넌트 위치가 그리드 범위를 벗어나지 않도록 조정
-      const x = Math.min(Math.max(0, comp.grid.col - 1), Math.max(0, cols - 1));
-      const y = Math.min(Math.max(0, comp.grid.row - 1), Math.max(0, rows - 1));
-      // colSpan/rowSpan도 범위 제한
-      const w = Math.min(Math.max(1, comp.grid.colSpan), Math.max(1, cols - x));
-      const h = Math.min(Math.max(1, comp.grid.rowSpan), Math.max(1, rows - y));
-      
-      return {
-        i: comp.id,
-        x,
-        y,
-        w,
-        h,
-        minW: 1,
-        minH: 1,
-      };
-    });
-  }, [components, cols, rows]);
-
-  // 드래그/리사이즈 완료 핸들러 (onDragStop, onResizeStop 사용)
-  const handleDragStop = useCallback(
-    (layout: Layout[], oldItem: Layout, newItem: Layout) => {
-      const comp = components.find((c) => c.id === newItem.i);
-      if (!comp) return;
-
-      const newGrid: GridPosition = {
-        col: newItem.x + 1,
-        row: newItem.y + 1,
-        colSpan: newItem.w,
-        rowSpan: newItem.h,
-      };
-
-      if (
-        comp.grid.col !== newGrid.col ||
-        comp.grid.row !== newGrid.row
-      ) {
-        onUpdateComponent(section.id, comp.id, { grid: newGrid });
-      }
-    },
-    [components, section.id, onUpdateComponent]
-  );
-
-  const handleResizeStop = useCallback(
-    (layout: Layout[], oldItem: Layout, newItem: Layout) => {
-      const comp = components.find((c) => c.id === newItem.i);
-      if (!comp) return;
-
-      const newGrid: GridPosition = {
-        col: newItem.x + 1,
-        row: newItem.y + 1,
-        colSpan: newItem.w,
-        rowSpan: newItem.h,
-      };
-
-      if (
-        comp.grid.colSpan !== newGrid.colSpan ||
-        comp.grid.rowSpan !== newGrid.rowSpan
-      ) {
-        onUpdateComponent(section.id, comp.id, { grid: newGrid });
-      }
-    },
-    [components, section.id, onUpdateComponent]
-  );
-
-  // 빈 셀 찾기 (드롭 위치용) - 자동 계산된 cols/rows 사용
-  const findEmptyCell = useCallback((): GridPosition => {
-    const occupied = new Set<string>();
-    
-    components.forEach((comp) => {
-      for (let c = comp.grid.col; c < comp.grid.col + comp.grid.colSpan; c++) {
-        for (let r = comp.grid.row; r < comp.grid.row + comp.grid.rowSpan; r++) {
-          occupied.add(`${c}-${r}`);
-        }
-      }
-    });
-
-    // 빈 셀 찾기
-    for (let r = 1; r <= rows; r++) {
-      for (let c = 1; c <= cols; c++) {
-        if (!occupied.has(`${c}-${r}`)) {
-          return { col: c, row: r, colSpan: 1, rowSpan: 1 };
-        }
-      }
-    }
-
-    // 빈 셀 없으면 첫 번째 위치에
-    return { col: 1, row: 1, colSpan: 1, rowSpan: 1 };
-  }, [components, cols, rows]);
-
-  // 컴포넌트 드롭 핸들러
-  const [{ isOver, canDrop }, drop] = useDrop(() => ({
-    accept: DND_ITEM_TYPES.COMPONENT,
-    drop: (item: DragItemComponent) => {
-      if (!isActive) return;
-      const emptyCell = findEmptyCell();
-      onDropComponent(section.id, item.componentType, emptyCell);
-      return { dropped: true };
-    },
-    canDrop: () => isActive,
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop(),
-    }),
-  }), [isActive, section.id, findEmptyCell, onDropComponent]);
-
-
-  return (
-    <div
-      ref={(node) => {
-        containerRef.current = node;
-        drop(node);
-      }}
-      className={cn(
-        "relative h-full w-full p-2 transition-colors",
-        isOver && canDrop && "bg-blue-50"
-      )}
-      onClick={(e) => {
-        e.stopPropagation();
-        onSelectComponent(null);
-      }}
-      onMouseDown={(e) => {
-        e.stopPropagation();
-      }}
-    >
-
-      {/* 빈 상태 안내 텍스트 */}
-      {components.length === 0 && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center z-10">
-          <span className={cn(
-            "rounded bg-white/80 px-2 py-1 text-xs",
-            isOver && canDrop ? "text-primary font-medium" : "text-gray-400"
-          )}>
-            {isOver && canDrop ? "여기에 놓으세요" : "컴포넌트를 드래그하세요"}
-          </span>
-        </div>
-      )}
-
-      {/* 컴포넌트 GridLayout */}
-      {components.length > 0 && availableWidth > 0 && cols > 0 && (
-        <GridLayout
-          className="layout relative z-10"
-          layout={gridLayoutItems}
-          cols={cols}
-          rowHeight={cellHeight}
-          width={availableWidth}
-          margin={[gap, gap]}
-          containerPadding={[0, 0]}
-          onDragStop={handleDragStop}
-          onResizeStop={handleResizeStop}
-          isDraggable={isActive}
-          isResizable={isActive}
-          compactType={null}
-          preventCollision={false}
-          useCSSTransforms={true}
-          draggableHandle=".component-drag-handle"
-          resizeHandles={["se", "e", "s"]}
-        >
-          {components.map((comp) => (
-            <div
-              key={comp.id}
-              className={cn(
-                "group relative flex flex-col rounded border bg-white text-xs transition-all overflow-hidden",
-                selectedComponentId === comp.id
-                  ? "border-primary ring-2 ring-primary/30"
-                  : "border-gray-200 hover:border-gray-400"
-              )}
-              onClick={(e) => {
-                e.stopPropagation();
-                onSelectComponent(comp.id);
-              }}
-              onMouseDown={(e) => e.stopPropagation()}
-            >
-              {/* 드래그 핸들 바 */}
-              <div className="component-drag-handle flex h-5 cursor-move items-center justify-center border-b bg-gray-50 opacity-60 hover:opacity-100 transition-opacity">
-                <Move className="h-3 w-3 text-gray-400" />
-              </div>
-
-              {/* 컴포넌트 내용 */}
-              <div className="flex flex-1 items-center justify-center p-1">
-                <ComponentPreview component={comp} />
-              </div>
-
-              {/* 삭제 버튼 */}
-              {selectedComponentId === comp.id && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="absolute -right-2 -top-2 h-5 w-5 rounded-full bg-white shadow text-destructive hover:bg-destructive/10 z-10"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onDeleteComponent(section.id, comp.id);
-                  }}
-                >
-                  <Trash2 className="h-3 w-3" />
-                </Button>
-              )}
-            </div>
-          ))}
-        </GridLayout>
-      )}
-    </div>
-  );
-}
-
-// 컴포넌트 미리보기
-interface ComponentPreviewProps {
-  component: PopComponentData;
-}
-
-function ComponentPreview({ component }: ComponentPreviewProps) {
-  const { type, label } = component;
-
-  // 타입별 미리보기 렌더링
-  const renderPreview = () => {
-    switch (type) {
-      case "pop-field":
-        return (
-          <div className="flex w-full flex-col gap-1">
-            <span className="text-[10px] text-gray-500">{label || "필드"}</span>
-            <div className="h-6 w-full rounded border border-gray-200 bg-gray-50" />
-          </div>
-        );
-      case "pop-button":
-        return (
-          <div className="flex h-8 w-full items-center justify-center rounded bg-primary/10 text-primary font-medium">
-            {label || "버튼"}
-          </div>
-        );
-      case "pop-list":
-        return (
-          <div className="flex w-full flex-col gap-0.5">
-            <span className="text-[10px] text-gray-500">{label || "리스트"}</span>
-            <div className="h-3 w-full rounded bg-gray-100" />
-            <div className="h-3 w-3/4 rounded bg-gray-100" />
-            <div className="h-3 w-full rounded bg-gray-100" />
-          </div>
-        );
-      case "pop-indicator":
-        return (
-          <div className="flex w-full flex-col items-center gap-1">
-            <span className="text-[10px] text-gray-500">{label || "KPI"}</span>
-            <span className="text-lg font-bold text-primary">0</span>
-          </div>
-        );
-      case "pop-scanner":
-        return (
-          <div className="flex w-full flex-col items-center gap-1">
-            <div className="h-8 w-8 rounded border-2 border-dashed border-gray-300 flex items-center justify-center">
-              <span className="text-[8px] text-gray-400">QR</span>
-            </div>
-            <span className="text-[10px] text-gray-500">{label || "스캐너"}</span>
-          </div>
-        );
-      case "pop-numpad":
-        return (
-          <div className="grid grid-cols-3 gap-0.5 w-full">
-            {[1, 2, 3, 4, 5, 6, 7, 8, 9, "C", 0, "OK"].map((key) => (
-              <div
-                key={key}
-                className="flex h-4 items-center justify-center rounded bg-gray-100 text-[8px]"
-              >
-                {key}
-              </div>
-            ))}
-          </div>
-        );
-      default:
-        return <span className="text-gray-500">{label || type}</span>;
-    }
-  };
-
-  return <div className="w-full overflow-hidden">{renderPreview()}</div>;
-}

frontend/components/pop/designer/SectionGridV2.tsx

@@ -1,373 +0,0 @@
-"use client";
-
-import { useCallback, useMemo, useRef, useState, useEffect } from "react";
-import { useDrop } from "react-dnd";
-import GridLayout, { Layout } from "react-grid-layout";
-import { cn } from "@/lib/utils";
-import {
-  PopSectionDefinition,
-  PopComponentDefinition,
-  PopComponentType,
-  GridPosition,
-} from "./types/pop-layout";
-import { DND_ITEM_TYPES, DragItemComponent } from "./panels/PopPanel";
-import { Trash2, Move } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
-
-// ========================================
-// Props
-// ========================================
-interface SectionGridV2Props {
-  sectionId: string;
-  sectionDef: PopSectionDefinition;
-  components: Record<string, PopComponentDefinition>;
-  componentPositions: Record<string, GridPosition>;
-  isActive: boolean;
-  selectedComponentId: string | null;
-  onSelectComponent: (id: string | null) => void;
-  onDropComponent: (sectionId: string, type: PopComponentType, gridPosition: GridPosition) => void;
-  onUpdateComponentPosition: (componentId: string, position: GridPosition) => void;
-  onDeleteComponent: (sectionId: string, componentId: string) => void;
-}
-
-// ========================================
-// 메인 컴포넌트
-// ========================================
-export function SectionGridV2({
-  sectionId,
-  sectionDef,
-  components,
-  componentPositions,
-  isActive,
-  selectedComponentId,
-  onSelectComponent,
-  onDropComponent,
-  onUpdateComponentPosition,
-  onDeleteComponent,
-}: SectionGridV2Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  
-  // 이 섹션에 포함된 컴포넌트 ID 목록
-  const componentIds = sectionDef.componentIds || [];
-  
-  // 컨테이너 크기 측정
-  const [containerSize, setContainerSize] = useState({ width: 300, height: 200 });
-  
-  useEffect(() => {
-    const updateSize = () => {
-      if (containerRef.current) {
-        setContainerSize({
-          width: containerRef.current.offsetWidth,
-          height: containerRef.current.offsetHeight,
-        });
-      }
-    };
-    
-    updateSize();
-    
-    const resizeObserver = new ResizeObserver(updateSize);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    
-    return () => resizeObserver.disconnect();
-  }, []);
-
-  // 셀 크기 계산 - 고정 셀 크기 기반으로 자동 계산
-  const padding = 8; // p-2 = 8px
-  const gap = 4; // 고정 간격
-  const availableWidth = containerSize.width - padding * 2;
-  const availableHeight = containerSize.height - padding * 2;
-  
-  // 고정 셀 크기 (40px) 기반으로 열/행 수 자동 계산
-  const CELL_SIZE = 40;
-  const cols = Math.max(1, Math.floor((availableWidth + gap) / (CELL_SIZE + gap)));
-  const rows = Math.max(1, Math.floor((availableHeight + gap) / (CELL_SIZE + gap)));
-  const cellHeight = CELL_SIZE;
-
-  // GridLayout용 레이아웃 변환
-  const gridLayoutItems: Layout[] = useMemo(() => {
-    return componentIds
-      .map((compId) => {
-        const pos = componentPositions[compId];
-        if (!pos) return null;
-        
-        // 위치가 그리드 범위를 벗어나지 않도록 조정
-        const x = Math.min(Math.max(0, pos.col - 1), Math.max(0, cols - 1));
-        const y = Math.min(Math.max(0, pos.row - 1), Math.max(0, rows - 1));
-        const w = Math.min(Math.max(1, pos.colSpan), Math.max(1, cols - x));
-        const h = Math.min(Math.max(1, pos.rowSpan), Math.max(1, rows - y));
-        
-        return {
-          i: compId,
-          x,
-          y,
-          w,
-          h,
-          minW: 1,
-          minH: 1,
-        };
-      })
-      .filter((item): item is Layout => item !== null);
-  }, [componentIds, componentPositions, cols, rows]);
-
-  // 드래그 완료 핸들러
-  const handleDragStop = useCallback(
-    (layout: Layout[], oldItem: Layout, newItem: Layout) => {
-      const newPos: GridPosition = {
-        col: newItem.x + 1,
-        row: newItem.y + 1,
-        colSpan: newItem.w,
-        rowSpan: newItem.h,
-      };
-      
-      const oldPos = componentPositions[newItem.i];
-      if (!oldPos || oldPos.col !== newPos.col || oldPos.row !== newPos.row) {
-        onUpdateComponentPosition(newItem.i, newPos);
-      }
-    },
-    [componentPositions, onUpdateComponentPosition]
-  );
-
-  // 리사이즈 완료 핸들러
-  const handleResizeStop = useCallback(
-    (layout: Layout[], oldItem: Layout, newItem: Layout) => {
-      const newPos: GridPosition = {
-        col: newItem.x + 1,
-        row: newItem.y + 1,
-        colSpan: newItem.w,
-        rowSpan: newItem.h,
-      };
-      
-      const oldPos = componentPositions[newItem.i];
-      if (!oldPos || oldPos.colSpan !== newPos.colSpan || oldPos.rowSpan !== newPos.rowSpan) {
-        onUpdateComponentPosition(newItem.i, newPos);
-      }
-    },
-    [componentPositions, onUpdateComponentPosition]
-  );
-
-  // 빈 셀 찾기 (드롭 위치용)
-  const findEmptyCell = useCallback((): GridPosition => {
-    const occupied = new Set<string>();
-    
-    componentIds.forEach((compId) => {
-      const pos = componentPositions[compId];
-      if (!pos) return;
-      
-      for (let c = pos.col; c < pos.col + pos.colSpan; c++) {
-        for (let r = pos.row; r < pos.row + pos.rowSpan; r++) {
-          occupied.add(`${c}-${r}`);
-        }
-      }
-    });
-
-    // 빈 셀 찾기
-    for (let r = 1; r <= rows; r++) {
-      for (let c = 1; c <= cols; c++) {
-        if (!occupied.has(`${c}-${r}`)) {
-          return { col: c, row: r, colSpan: 1, rowSpan: 1 };
-        }
-      }
-    }
-
-    // 빈 셀 없으면 첫 번째 위치
-    return { col: 1, row: 1, colSpan: 1, rowSpan: 1 };
-  }, [componentIds, componentPositions, cols, rows]);
-
-  // 컴포넌트 드롭 핸들러
-  const [{ isOver, canDrop }, drop] = useDrop(
-    () => ({
-      accept: DND_ITEM_TYPES.COMPONENT,
-      drop: (item: DragItemComponent) => {
-        if (!isActive) return;
-        const emptyCell = findEmptyCell();
-        onDropComponent(sectionId, item.componentType, emptyCell);
-        return { dropped: true };
-      },
-      canDrop: () => isActive,
-      collect: (monitor) => ({
-        isOver: monitor.isOver(),
-        canDrop: monitor.canDrop(),
-      }),
-    }),
-    [isActive, sectionId, findEmptyCell, onDropComponent]
-  );
-
-  return (
-    <div
-      ref={(node) => {
-        containerRef.current = node;
-        drop(node);
-      }}
-      className={cn(
-        "relative h-full w-full p-2 transition-colors",
-        isOver && canDrop && "bg-blue-50"
-      )}
-      onClick={(e) => {
-        e.stopPropagation();
-        onSelectComponent(null);
-      }}
-      onMouseDown={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      {/* 빈 상태 안내 텍스트 */}
-      {componentIds.length === 0 && (
-        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
-          <span
-            className={cn(
-              "rounded bg-white/80 px-2 py-1 text-xs",
-              isOver && canDrop ? "font-medium text-primary" : "text-gray-400"
-            )}
-          >
-            {isOver && canDrop ? "여기에 놓으세요" : "컴포넌트를 드래그하세요"}
-          </span>
-        </div>
-      )}
-
-      {/* 컴포넌트 GridLayout */}
-      {componentIds.length > 0 && availableWidth > 0 && cols > 0 && (
-        <GridLayout
-          className="layout relative z-10"
-          layout={gridLayoutItems}
-          cols={cols}
-          rowHeight={cellHeight}
-          width={availableWidth}
-          margin={[gap, gap]}
-          containerPadding={[0, 0]}
-          onDragStop={handleDragStop}
-          onResizeStop={handleResizeStop}
-          isDraggable={isActive}
-          isResizable={isActive}
-          compactType={null}
-          preventCollision={false}
-          useCSSTransforms={true}
-          draggableHandle=".component-drag-handle"
-          resizeHandles={["se", "e", "s"]}
-        >
-          {componentIds.map((compId) => {
-            const compDef = components[compId];
-            if (!compDef) return null;
-
-            return (
-              <div
-                key={compId}
-                className={cn(
-                  "group relative flex flex-col overflow-hidden rounded border bg-white text-xs transition-all",
-                  selectedComponentId === compId
-                    ? "border-primary ring-2 ring-primary/30"
-                    : "border-gray-200 hover:border-gray-400"
-                )}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onSelectComponent(compId);
-                }}
-                onMouseDown={(e) => e.stopPropagation()}
-              >
-                {/* 드래그 핸들 바 */}
-                <div className="component-drag-handle flex h-5 cursor-move items-center justify-center border-b bg-gray-50 opacity-60 transition-opacity hover:opacity-100">
-                  <Move className="h-3 w-3 text-gray-400" />
-                </div>
-
-                {/* 컴포넌트 내용 */}
-                <div className="flex flex-1 items-center justify-center p-1">
-                  <ComponentPreviewV2 component={compDef} />
-                </div>
-
-                {/* 삭제 버튼 */}
-                {selectedComponentId === compId && isActive && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="absolute -right-2 -top-2 z-10 h-5 w-5 rounded-full bg-white text-destructive shadow hover:bg-destructive/10"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDeleteComponent(sectionId, compId);
-                    }}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                )}
-              </div>
-            );
-          })}
-        </GridLayout>
-      )}
-    </div>
-  );
-}
-
-// ========================================
-// 컴포넌트 미리보기
-// ========================================
-interface ComponentPreviewV2Props {
-  component: PopComponentDefinition;
-}
-
-function ComponentPreviewV2({ component }: ComponentPreviewV2Props) {
-  const { type, label } = component;
-
-  const renderPreview = () => {
-    switch (type) {
-      case "pop-field":
-        return (
-          <div className="flex w-full flex-col gap-1">
-            <span className="text-[10px] text-gray-500">{label || "필드"}</span>
-            <div className="h-6 w-full rounded border border-gray-200 bg-gray-50" />
-          </div>
-        );
-      case "pop-button":
-        return (
-          <div className="flex h-8 w-full items-center justify-center rounded bg-primary/10 font-medium text-primary">
-            {label || "버튼"}
-          </div>
-        );
-      case "pop-list":
-        return (
-          <div className="flex w-full flex-col gap-0.5">
-            <span className="text-[10px] text-gray-500">{label || "리스트"}</span>
-            <div className="h-3 w-full rounded bg-gray-100" />
-            <div className="h-3 w-3/4 rounded bg-gray-100" />
-            <div className="h-3 w-full rounded bg-gray-100" />
-          </div>
-        );
-      case "pop-indicator":
-        return (
-          <div className="flex w-full flex-col items-center gap-1">
-            <span className="text-[10px] text-gray-500">{label || "KPI"}</span>
-            <span className="text-lg font-bold text-primary">0</span>
-          </div>
-        );
-      case "pop-scanner":
-        return (
-          <div className="flex w-full flex-col items-center gap-1">
-            <div className="flex h-8 w-8 items-center justify-center rounded border-2 border-dashed border-gray-300">
-              <span className="text-[8px] text-gray-400">QR</span>
-            </div>
-            <span className="text-[10px] text-gray-500">{label || "스캐너"}</span>
-          </div>
-        );
-      case "pop-numpad":
-        return (
-          <div className="grid w-full grid-cols-3 gap-0.5">
-            {[1, 2, 3, 4, 5, 6, 7, 8, 9, "C", 0, "OK"].map((key) => (
-              <div
-                key={key}
-                className="flex h-4 items-center justify-center rounded bg-gray-100 text-[8px]"
-              >
-                {key}
-              </div>
-            ))}
-          </div>
-        );
-      default:
-        return <span className="text-gray-500">{label || type}</span>;
-    }
-  };
-
-  return <div className="w-full overflow-hidden">{renderPreview()}</div>;
-}

frontend/components/pop/designer/panels/ComponentEditorPanel.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { PopComponentDefinition, PopComponentConfig } from "../types/pop-layout";
+import { Settings, Database, Link2 } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+// ========================================
+// Props 정의
+// ========================================
+
+interface ComponentEditorPanelProps {
+  /** 선택된 컴포넌트 (없으면 null) */
+  component: PopComponentDefinition | null;
+  /** 컴포넌트 설정 변경 시 호출 */
+  onConfigChange?: (config: Partial<PopComponentConfig>) => void;
+  /** 컴포넌트 라벨 변경 시 호출 */
+  onLabelChange?: (label: string) => void;
+  /** 추가 className */
+  className?: string;
+}
+
+// ========================================
+// 컴포넌트 편집 패널
+//
+// 역할:
+// - 선택된 컴포넌트의 설정을 편집
+// - 3개 탭: 기본 설정 / 데이터 바인딩 / 데이터 연결
+//
+// TODO:
+// - 타입별 상세 설정 UI 구현
+// - 데이터 바인딩 UI 구현
+// - 데이터 플로우 UI 구현
+// ========================================
+
+export function ComponentEditorPanel({
+  component,
+  onConfigChange,
+  onLabelChange,
+  className,
+}: ComponentEditorPanelProps) {
+  // 컴포넌트가 선택되지 않은 경우
+  if (!component) {
+    return (
+      <div className={cn("flex h-full flex-col", className)}>
+        <div className="border-b px-4 py-3">
+          <h3 className="text-sm font-medium">컴포넌트 편집</h3>
+        </div>
+        <div className="flex flex-1 items-center justify-center p-4 text-sm text-muted-foreground">
+          컴포넌트를 선택하세요
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex h-full flex-col", className)}>
+      {/* 헤더 */}
+      <div className="border-b px-4 py-3">
+        <h3 className="text-sm font-medium">
+          {component.label || getComponentTypeLabel(component.type)}
+        </h3>
+        <p className="text-xs text-muted-foreground">{component.type}</p>
+      </div>
+
+      {/* 탭 컨텐츠 */}
+      <Tabs defaultValue="settings" className="flex-1">
+        <TabsList className="w-full justify-start rounded-none border-b bg-transparent px-2">
+          <TabsTrigger value="settings" className="gap-1 text-xs">
+            <Settings className="h-3 w-3" />
+            설정
+          </TabsTrigger>
+          <TabsTrigger value="data" className="gap-1 text-xs">
+            <Database className="h-3 w-3" />
+            데이터
+          </TabsTrigger>
+          <TabsTrigger value="flow" className="gap-1 text-xs">
+            <Link2 className="h-3 w-3" />
+            연결
+          </TabsTrigger>
+        </TabsList>
+
+        {/* 기본 설정 탭 */}
+        <TabsContent value="settings" className="flex-1 overflow-auto p-4">
+          <ComponentSettingsForm
+            component={component}
+            onConfigChange={onConfigChange}
+            onLabelChange={onLabelChange}
+          />
+        </TabsContent>
+
+        {/* 데이터 바인딩 탭 (뼈대) */}
+        <TabsContent value="data" className="flex-1 overflow-auto p-4">
+          <DataBindingPlaceholder />
+        </TabsContent>
+
+        {/* 데이터 연결 탭 (뼈대) */}
+        <TabsContent value="flow" className="flex-1 overflow-auto p-4">
+          <DataFlowPlaceholder />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+// ========================================
+// 컴포넌트 설정 폼
+// ========================================
+
+interface ComponentSettingsFormProps {
+  component: PopComponentDefinition;
+  onConfigChange?: (config: Partial<PopComponentConfig>) => void;
+  onLabelChange?: (label: string) => void;
+}
+
+function ComponentSettingsForm({
+  component,
+  onConfigChange,
+  onLabelChange,
+}: ComponentSettingsFormProps) {
+  return (
+    <div className="space-y-4">
+      {/* 라벨 입력 */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium">라벨</label>
+        <input
+          type="text"
+          className="h-8 w-full rounded border border-input bg-background px-2 text-sm"
+          value={component.label || ""}
+          onChange={(e) => onLabelChange?.(e.target.value)}
+          placeholder="컴포넌트 라벨"
+        />
+      </div>
+
+      {/* 타입별 설정 (TODO: 상세 구현) */}
+      <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4">
+        <p className="text-center text-xs text-muted-foreground">
+          {getComponentTypeLabel(component.type)} 상세 설정
+        </p>
+        <p className="mt-1 text-center text-xs text-muted-foreground">
+          (추후 구현 예정)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ========================================
+// 데이터 바인딩 플레이스홀더 (뼈대)
+// ========================================
+
+function DataBindingPlaceholder() {
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4">
+        <div className="flex flex-col items-center gap-2">
+          <Database className="h-8 w-8 text-gray-400" />
+          <p className="text-center text-xs text-muted-foreground">
+            데이터 바인딩 설정
+          </p>
+          <p className="text-center text-xs text-muted-foreground">
+            테이블 선택 → 칼럼 선택 → 조인 설정
+          </p>
+          <p className="mt-2 text-center text-xs text-gray-400">
+            (추후 구현 예정)
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ========================================
+// 데이터 플로우 플레이스홀더 (뼈대)
+// ========================================
+
+function DataFlowPlaceholder() {
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4">
+        <div className="flex flex-col items-center gap-2">
+          <Link2 className="h-8 w-8 text-gray-400" />
+          <p className="text-center text-xs text-muted-foreground">
+            데이터 연결 설정
+          </p>
+          <p className="text-center text-xs text-muted-foreground">
+            컴포넌트 간 / 섹션 간 / 화면 간 연결
+          </p>
+          <p className="mt-2 text-center text-xs text-gray-400">
+            (추후 구현 예정)
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ========================================
+// 헬퍼 함수
+// ========================================
+
+function getComponentTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    "pop-field": "필드",
+    "pop-button": "버튼",
+    "pop-list": "리스트",
+    "pop-indicator": "인디케이터",
+    "pop-scanner": "스캐너",
+    "pop-numpad": "넘패드",
+  };
+  return labels[type] || type;
+}
+
+export default ComponentEditorPanel;

frontend/components/pop/designer/panels/PopPanel.tsx

@@ -6,13 +6,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 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 {
   Collapsible,
   CollapsibleContent,
@@ -21,7 +14,6 @@ import {
 import {
   Plus,
   Settings,
-  LayoutGrid,
   Type,
   MousePointer,
   List,
@@ -34,9 +26,9 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
-  PopLayoutDataV2,
+  PopLayoutDataV3,
   PopLayoutModeKey,
-  PopSectionDefinition,
+  PopComponentDefinition,
   PopComponentType,
   MODE_RESOLUTIONS,
 } from "../types/pop-layout";
@@ -45,14 +37,9 @@ import {
 // 드래그 아이템 타입
 // ========================================
 export const DND_ITEM_TYPES = {
-  SECTION: "section",
   COMPONENT: "component",
 } as const;
 
-export interface DragItemSection {
-  type: typeof DND_ITEM_TYPES.SECTION;
-}
-
 export interface DragItemComponent {
   type: typeof DND_ITEM_TYPES.COMPONENT;
   componentType: PopComponentType;
@@ -83,7 +70,7 @@ const COMPONENT_PALETTE: {
     type: "pop-list",
     label: "리스트",
     icon: List,
-    description: "데이터 목록 표시",
+    description: "데이터 목록 (카드 템플릿 지원)",
   },
   {
     type: "pop-indicator",
@@ -106,15 +93,15 @@ const COMPONENT_PALETTE: {
 ];
 
 // ========================================
-// Props
+// Props (v3: 섹션 없음)
 // ========================================
 interface PopPanelProps {
-  layout: PopLayoutDataV2;
+  layout: PopLayoutDataV3;
   activeModeKey: PopLayoutModeKey;
-  selectedSectionId: string | null;
+  selectedComponentId: string | null;
-  selectedSection: PopSectionDefinition | null;
+  selectedComponent: PopComponentDefinition | null;
-  onUpdateSectionDefinition: (id: string, updates: Partial<PopSectionDefinition>) => void;
+  onUpdateComponentDefinition: (id: string, updates: Partial<PopComponentDefinition>) => void;
-  onDeleteSection: (id: string) => void;
+  onDeleteComponent: (id: string) => void;
   activeDevice: "mobile" | "tablet";
 }
 
@@ -124,18 +111,18 @@ interface PopPanelProps {
 export function PopPanel({
   layout,
   activeModeKey,
-  selectedSectionId,
+  selectedComponentId,
-  selectedSection,
+  selectedComponent,
-  onUpdateSectionDefinition,
+  onUpdateComponentDefinition,
-  onDeleteSection,
+  onDeleteComponent,
   activeDevice,
 }: PopPanelProps) {
   const [activeTab, setActiveTab] = useState<string>("components");
 
-  // 현재 모드의 섹션 위치
+  // 현재 모드의 컴포넌트 위치
   const currentModeLayout = layout.layouts[activeModeKey];
-  const selectedSectionPosition = selectedSectionId 
+  const selectedComponentPosition = selectedComponentId 
-    ? currentModeLayout.sectionPositions[selectedSectionId] 
+    ? currentModeLayout.componentPositions[selectedComponentId] 
     : null;
 
   return (
@@ -169,17 +156,6 @@ export function PopPanel({
               </p>
             </div>
 
-            {/* 섹션 드래그 아이템 */}
-            <div>
-              <h4 className="mb-2 text-xs font-medium text-muted-foreground">
-                레이아웃
-              </h4>
-              <DraggableSectionItem />
-              <p className="mt-1 text-xs text-muted-foreground">
-                캔버스에 드래그하여 섹션 추가
-              </p>
-            </div>
-
             {/* 컴포넌트 팔레트 */}
             <div>
               <h4 className="mb-2 text-xs font-medium text-muted-foreground">
@@ -197,7 +173,7 @@ export function PopPanel({
                 ))}
               </div>
               <p className="mt-2 text-xs text-muted-foreground">
-                섹션 안으로 드래그하여 배치
+                캔버스로 드래그하여 배치
               </p>
             </div>
           </div>
@@ -205,19 +181,19 @@ export function PopPanel({
 
         {/* 편집 탭 */}
         <TabsContent value="edit" className="flex-1 overflow-auto p-2">
-          {selectedSection && selectedSectionPosition ? (
+          {selectedComponent && selectedComponentPosition ? (
-            <SectionEditorV2
+            <ComponentEditorV3
-              section={selectedSection}
+              component={selectedComponent}
-              position={selectedSectionPosition}
+              position={selectedComponentPosition}
               activeModeKey={activeModeKey}
               onUpdateDefinition={(updates) => 
-                onUpdateSectionDefinition(selectedSection.id, updates)
+                onUpdateComponentDefinition(selectedComponent.id, updates)
               }
-              onDelete={() => onDeleteSection(selectedSection.id)}
+              onDelete={() => onDeleteComponent(selectedComponent.id)}
             />
           ) : (
             <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
-              섹션을 선택하세요
+              컴포넌트를 선택하세요
             </div>
           )}
         </TabsContent>
@@ -239,37 +215,6 @@ function getModeLabel(modeKey: PopLayoutModeKey): string {
   return labels[modeKey];
 }
 
-// ========================================
-// 드래그 가능한 섹션 아이템
-// ========================================
-function DraggableSectionItem() {
-  const [{ isDragging }, drag] = useDrag(() => ({
-    type: DND_ITEM_TYPES.SECTION,
-    item: { type: DND_ITEM_TYPES.SECTION } as DragItemSection,
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  }));
-
-  return (
-    <div
-      ref={drag}
-      className={cn(
-        "flex cursor-grab items-center gap-3 rounded-lg border p-3 transition-all",
-        "hover:bg-accent hover:text-accent-foreground",
-        isDragging && "opacity-50 ring-2 ring-primary"
-      )}
-    >
-      <GripVertical className="h-4 w-4 text-gray-400" />
-      <LayoutGrid className="h-4 w-4" />
-      <div className="flex-1">
-        <p className="text-sm font-medium">섹션</p>
-        <p className="text-xs text-muted-foreground">컴포넌트를 그룹화하는 컨테이너</p>
-      </div>
-    </div>
-  );
-}
-
 // ========================================
 // 드래그 가능한 컴포넌트 아이템
 // ========================================
@@ -314,30 +259,43 @@ function DraggableComponentItem({
 }
 
 // ========================================
-// v2 섹션 편집기
+// v3 컴포넌트 편집기
 // ========================================
-interface SectionEditorV2Props {
+interface ComponentEditorV3Props {
-  section: PopSectionDefinition;
+  component: PopComponentDefinition;
   position: { col: number; row: number; colSpan: number; rowSpan: number };
   activeModeKey: PopLayoutModeKey;
-  onUpdateDefinition: (updates: Partial<PopSectionDefinition>) => void;
+  onUpdateDefinition: (updates: Partial<PopComponentDefinition>) => void;
   onDelete: () => void;
 }
 
-function SectionEditorV2({
+function ComponentEditorV3({
-  section,
+  component,
   position,
   activeModeKey,
   onUpdateDefinition,
   onDelete,
-}: SectionEditorV2Props) {
+}: ComponentEditorV3Props) {
-  const [isGridOpen, setIsGridOpen] = useState(true);
+  const [isPositionOpen, setIsPositionOpen] = useState(true);
+
+  // 컴포넌트 타입 라벨
+  const typeLabels: Record<PopComponentType, string> = {
+    "pop-field": "필드",
+    "pop-button": "버튼",
+    "pop-list": "리스트",
+    "pop-indicator": "인디케이터",
+    "pop-scanner": "스캐너",
+    "pop-numpad": "숫자패드",
+  };
 
   return (
     <div className="space-y-4">
-      {/* 섹션 기본 정보 */}
+      {/* 컴포넌트 기본 정보 */}
       <div className="flex items-center justify-between">
-        <span className="text-sm font-medium">섹션 설정</span>
+        <div>
+          <span className="text-sm font-medium">{typeLabels[component.type]}</span>
+          <p className="text-[10px] text-muted-foreground">{component.id}</p>
+        </div>
         <Button
           variant="ghost"
           size="icon"
@@ -350,26 +308,23 @@ function SectionEditorV2({
 
       {/* 라벨 */}
       <div className="space-y-2">
-        <Label className="text-xs">라벨 (공유)</Label>
+        <Label className="text-xs">라벨</Label>
         <Input
-          value={section.label || ""}
+          value={component.label || ""}
           onChange={(e) => onUpdateDefinition({ label: e.target.value })}
-          placeholder="섹션 이름"
+          placeholder="컴포넌트 이름"
           className="h-8 text-xs"
         />
-        <p className="text-[10px] text-muted-foreground">
-          라벨은 4개 모드에서 공유됩니다
-        </p>
       </div>
 
-      {/* 현재 모드 위치 (읽기 전용 - 드래그로 조정) */}
+      {/* 현재 모드 위치 (읽기 전용) */}
-      <Collapsible open={isGridOpen} onOpenChange={setIsGridOpen}>
+      <Collapsible open={isPositionOpen} onOpenChange={setIsPositionOpen}>
         <CollapsibleTrigger className="flex w-full items-center justify-between py-2 text-sm font-medium">
           현재 모드 위치
           <ChevronDown
             className={cn(
               "h-4 w-4 transition-transform",
-              isGridOpen && "rotate-180"
+              isPositionOpen && "rotate-180"
             )}
           />
         </CollapsibleTrigger>
@@ -402,83 +357,12 @@ function SectionEditorV2({
         </CollapsibleContent>
       </Collapsible>
 
-      {/* 내부 그리드 설정 */}
+      {/* TODO: 컴포넌트별 설정 (config) */}
-      <div className="space-y-3">
+      <div className="rounded-lg border border-dashed p-3">
-        <h4 className="text-sm font-medium">내부 그리드 (공유)</h4>
+        <p className="text-xs text-muted-foreground text-center">
-        <div className="grid grid-cols-2 gap-2">
+          컴포넌트별 상세 설정은 추후 추가 예정
-          <div className="space-y-1">
-            <Label className="text-xs">내부 열 수</Label>
-            <Select
-              value={String(section.innerGrid.columns)}
-              onValueChange={(v) =>
-                onUpdateDefinition({
-                  innerGrid: { ...section.innerGrid, columns: parseInt(v) },
-                })
-              }
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="1">1열</SelectItem>
-                <SelectItem value="2">2열</SelectItem>
-                <SelectItem value="3">3열</SelectItem>
-                <SelectItem value="4">4열</SelectItem>
-                <SelectItem value="6">6열</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs">내부 행 수</Label>
-            <Select
-              value={String(section.innerGrid.rows)}
-              onValueChange={(v) =>
-                onUpdateDefinition({
-                  innerGrid: { ...section.innerGrid, rows: parseInt(v) },
-                })
-              }
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="1">1행</SelectItem>
-                <SelectItem value="2">2행</SelectItem>
-                <SelectItem value="3">3행</SelectItem>
-                <SelectItem value="4">4행</SelectItem>
-                <SelectItem value="5">5행</SelectItem>
-                <SelectItem value="6">6행</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-        <p className="text-[10px] text-muted-foreground">
-          내부 그리드 설정은 4개 모드에서 공유됩니다
         </p>
       </div>
-
-      {/* 컴포넌트 목록 */}
-      <div className="space-y-2">
-        <h4 className="text-sm font-medium">
-          포함된 컴포넌트 ({section.componentIds.length}개)
-        </h4>
-        {section.componentIds.length > 0 ? (
-          <div className="space-y-1">
-            {section.componentIds.map((compId) => (
-              <div
-                key={compId}
-                className="rounded border bg-muted/50 px-2 py-1 text-xs"
-              >
-                {compId}
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="text-xs text-muted-foreground">
-            아직 컴포넌트가 없습니다
-          </p>
-        )}
-      </div>
     </div>
   );
 }

frontend/components/pop/designer/panels/index.ts

@@ -1,2 +1,3 @@
 // POP 디자이너 패널 export
 export { PopPanel } from "./PopPanel";
+export { ComponentEditorPanel } from "./ComponentEditorPanel";

frontend/components/pop/designer/renderers/ComponentRenderer.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import React, { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+import {
+  PopComponentDefinition,
+  PopComponentType,
+  GridPosition,
+} from "../types/pop-layout";
+
+// ========================================
+// Props 정의
+// ========================================
+
+interface ComponentRendererProps {
+  /** 컴포넌트 정의 (타입, 라벨, 설정 등) */
+  component: PopComponentDefinition;
+  /** 컴포넌트의 그리드 위치 (섹션 내부 그리드 기준) */
+  position: GridPosition;
+  /** 디자인 모드 여부 (true: 편집 가능, false: 뷰어 모드) */
+  isDesignMode?: boolean;
+  /** 선택된 상태인지 */
+  isSelected?: boolean;
+  /** 컴포넌트 클릭 시 호출 */
+  onClick?: () => void;
+  /** 추가 className */
+  className?: string;
+}
+
+// ========================================
+// 컴포넌트 렌더러
+// 
+// 역할:
+// - 관리자가 설정한 GridPosition(col, row, colSpan, rowSpan)을 
+//   그대로 CSS Grid에 반영
+// - 디자이너/뷰어 모두에서 동일한 렌더링 보장
+// - 디자인 모드에서는 선택 상태 표시
+// ========================================
+
+export const ComponentRenderer = forwardRef<HTMLDivElement, ComponentRendererProps>(
+  function ComponentRenderer(
+    {
+      component,
+      position,
+      isDesignMode = false,
+      isSelected = false,
+      onClick,
+      className,
+    },
+    ref
+  ) {
+    const { type, label, config } = component;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          // 기본 스타일
+          "relative flex flex-col overflow-hidden rounded border bg-white transition-all",
+          // 디자인 모드 스타일
+          isDesignMode && "cursor-pointer",
+          // 선택 상태 스타일
+          isSelected
+            ? "border-primary ring-2 ring-primary/30 z-10"
+            : "border-gray-200 hover:border-gray-300",
+          className
+        )}
+        style={{
+          // 관리자가 설정한 GridPosition을 그대로 반영
+          gridColumn: `${position.col} / span ${position.colSpan}`,
+          gridRow: `${position.row} / span ${position.rowSpan}`,
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.();
+        }}
+      >
+        {/* 컴포넌트 타입별 미리보기 렌더링 */}
+        <ComponentPreview type={type} label={label} config={config} />
+      </div>
+    );
+  }
+);
+
+// ========================================
+// 컴포넌트 타입별 미리보기
+// ========================================
+
+interface ComponentPreviewProps {
+  type: PopComponentType;
+  label?: string;
+  config?: any;
+}
+
+function ComponentPreview({ type, label, config }: ComponentPreviewProps) {
+  switch (type) {
+    case "pop-field":
+      return <FieldPreview label={label} config={config} />;
+    case "pop-button":
+      return <ButtonPreview label={label} config={config} />;
+    case "pop-list":
+      return <ListPreview label={label} config={config} />;
+    case "pop-indicator":
+      return <IndicatorPreview label={label} config={config} />;
+    case "pop-scanner":
+      return <ScannerPreview label={label} config={config} />;
+    case "pop-numpad":
+      return <NumpadPreview label={label} config={config} />;
+    default:
+      return (
+        <div className="flex h-full items-center justify-center p-2 text-xs text-gray-400">
+          {label || type}
+        </div>
+      );
+  }
+}
+
+// ========================================
+// 개별 컴포넌트 미리보기
+// ========================================
+
+function FieldPreview({ label, config }: { label?: string; config?: any }) {
+  const fieldType = config?.fieldType || "text";
+  const placeholder = config?.placeholder || "입력하세요";
+  const required = config?.required || false;
+
+  return (
+    <div className="flex h-full w-full flex-col gap-1 p-2">
+      {/* 라벨 */}
+      <span className="text-xs font-medium text-gray-600">
+        {label || "필드"}
+        {required && <span className="ml-1 text-destructive">*</span>}
+      </span>
+      {/* 입력 필드 미리보기 */}
+      <div className="flex h-8 w-full items-center rounded border border-gray-200 bg-gray-50 px-2 text-xs text-gray-400">
+        {placeholder}
+      </div>
+    </div>
+  );
+}
+
+function ButtonPreview({ label, config }: { label?: string; config?: any }) {
+  const buttonType = config?.buttonType || "action";
+  const variant = buttonType === "submit" ? "bg-primary text-white" : "bg-gray-100 text-gray-700";
+
+  return (
+    <div className="flex h-full w-full items-center justify-center p-2">
+      <div
+        className={cn(
+          "flex h-10 w-full items-center justify-center rounded font-medium",
+          variant
+        )}
+      >
+        {label || "버튼"}
+      </div>
+    </div>
+  );
+}
+
+function ListPreview({ label, config }: { label?: string; config?: any }) {
+  const itemCount = config?.itemsPerPage || 5;
+
+  return (
+    <div className="flex h-full w-full flex-col gap-1 p-2">
+      {/* 라벨 */}
+      <span className="text-xs font-medium text-gray-600">{label || "리스트"}</span>
+      {/* 리스트 아이템 미리보기 */}
+      <div className="flex flex-1 flex-col gap-0.5 overflow-hidden">
+        {Array.from({ length: Math.min(3, itemCount) }).map((_, i) => (
+          <div key={i} className="h-4 rounded bg-gray-100" />
+        ))}
+        {itemCount > 3 && (
+          <div className="text-center text-[10px] text-gray-400">
+            +{itemCount - 3} more
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function IndicatorPreview({ label, config }: { label?: string; config?: any }) {
+  const indicatorType = config?.indicatorType || "kpi";
+  const unit = config?.unit || "";
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
+      {/* 라벨 */}
+      <span className="text-[10px] text-gray-500">{label || "KPI"}</span>
+      {/* 값 미리보기 */}
+      <span className="text-xl font-bold text-primary">
+        0{unit && <span className="text-sm font-normal text-gray-500">{unit}</span>}
+      </span>
+    </div>
+  );
+}
+
+function ScannerPreview({ label, config }: { label?: string; config?: any }) {
+  const scannerType = config?.scannerType || "camera";
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
+      {/* QR 아이콘 */}
+      <div className="flex h-10 w-10 items-center justify-center rounded border-2 border-dashed border-gray-300">
+        <span className="text-xs text-gray-400">QR</span>
+      </div>
+      {/* 라벨 */}
+      <span className="text-[10px] text-gray-500">{label || "스캐너"}</span>
+    </div>
+  );
+}
+
+function NumpadPreview({ label, config }: { label?: string; config?: any }) {
+  const keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, "C", 0, "OK"];
+
+  return (
+    <div className="flex h-full w-full flex-col gap-1 p-2">
+      {/* 라벨 */}
+      {label && (
+        <span className="text-[10px] text-gray-500">{label}</span>
+      )}
+      {/* 넘패드 미리보기 */}
+      <div className="grid flex-1 grid-cols-3 gap-0.5">
+        {keys.map((key) => (
+          <div
+            key={key}
+            className="flex items-center justify-center rounded bg-gray-100 text-[8px]"
+          >
+            {key}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ComponentRenderer;

frontend/components/pop/designer/renderers/PopLayoutRenderer.tsx

@@ -0,0 +1,401 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import {
+  PopLayoutDataV3,
+  PopLayoutModeKey,
+  PopModeLayoutV3,
+  GridPosition,
+  MODE_RESOLUTIONS,
+  PopComponentDefinition,
+} from "../types/pop-layout";
+
+// ========================================
+// Props 정의
+// ========================================
+
+interface PopLayoutRendererProps {
+  /** 레이아웃 데이터 (v3.0) */
+  layout: PopLayoutDataV3;
+  /** 현재 모드 키 (tablet_landscape, tablet_portrait 등) */
+  modeKey: PopLayoutModeKey;
+  /** 디자인 모드 여부 (true: 편집 가능, false: 뷰어 모드) */
+  isDesignMode?: boolean;
+  /** 선택된 컴포넌트 ID */
+  selectedComponentId?: string | null;
+  /** 컴포넌트 클릭 시 호출 */
+  onComponentClick?: (componentId: string) => void;
+  /** 배경 클릭 시 호출 (선택 해제용) */
+  onBackgroundClick?: () => void;
+  /** 커스텀 모드 레이아웃 (fallback 등에서 변환된 레이아웃 사용 시) */
+  customModeLayout?: PopModeLayoutV3;
+  /** 추가 className */
+  className?: string;
+  /** 추가 style */
+  style?: React.CSSProperties;
+}
+
+// ========================================
+// 컴포넌트 타입별 라벨
+// ========================================
+const COMPONENT_TYPE_LABELS: Record<string, string> = {
+  "pop-field": "필드",
+  "pop-button": "버튼",
+  "pop-list": "리스트",
+  "pop-indicator": "인디케이터",
+  "pop-scanner": "스캐너",
+  "pop-numpad": "숫자패드",
+};
+
+// ========================================
+// POP 레이아웃 렌더러 (v3)
+//
+// 핵심 역할:
+// - 디자이너와 뷰어에서 **동일한** 렌더링 결과 보장
+// - 컴포넌트가 캔버스에 직접 배치 (섹션 없음)
+// - CSS Grid + 1fr 비율 기반
+// ========================================
+
+export function PopLayoutRenderer({
+  layout,
+  modeKey,
+  isDesignMode = false,
+  selectedComponentId,
+  onComponentClick,
+  onBackgroundClick,
+  customModeLayout,
+  className,
+  style,
+}: PopLayoutRendererProps) {
+  const { components, layouts, settings } = layout;
+  const canvasGrid = settings.canvasGrid;
+
+  // 현재 모드의 레이아웃
+  const modeLayout = customModeLayout || layouts[modeKey];
+
+  // 컴포넌트가 없으면 빈 상태 표시
+  if (!modeLayout || Object.keys(modeLayout.componentPositions).length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-center bg-gray-50",
+          className
+        )}
+        style={style}
+        onClick={onBackgroundClick}
+      >
+        <div className="text-center text-sm text-gray-400">
+          <p>레이아웃이 설정되지 않았습니다</p>
+          {isDesignMode && <p className="mt-1">컴포넌트를 추가해주세요</p>}
+        </div>
+      </div>
+    );
+  }
+
+  // 컴포넌트 ID 목록
+  const componentIds = Object.keys(modeLayout.componentPositions);
+
+  return (
+    <div
+      className={cn("relative w-full h-full bg-white", className)}
+      style={{
+        // CSS Grid: 디자이너와 동일
+        display: "grid",
+        gridTemplateColumns: `repeat(${canvasGrid.columns}, 1fr)`,
+        gridTemplateRows: `repeat(${canvasGrid.rows || 24}, 1fr)`,
+        gap: `${canvasGrid.gap}px`,
+        padding: `${canvasGrid.gap}px`,
+        ...style,
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onBackgroundClick?.();
+        }
+      }}
+    >
+      {/* 컴포넌트들 직접 렌더링 */}
+      {componentIds.map((componentId) => {
+        const compDef = components[componentId];
+        const compPos = modeLayout.componentPositions[componentId];
+
+        if (!compDef || !compPos) return null;
+
+        return (
+          <ComponentRenderer
+            key={componentId}
+            componentId={componentId}
+            component={compDef}
+            position={compPos}
+            isDesignMode={isDesignMode}
+            isSelected={selectedComponentId === componentId}
+            onComponentClick={() => onComponentClick?.(componentId)}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+// ========================================
+// 컴포넌트 렌더러
+// ========================================
+
+interface ComponentRendererProps {
+  componentId: string;
+  component: PopComponentDefinition;
+  position: GridPosition;
+  isDesignMode?: boolean;
+  isSelected?: boolean;
+  onComponentClick?: () => void;
+}
+
+function ComponentRenderer({
+  componentId,
+  component,
+  position,
+  isDesignMode = false,
+  isSelected = false,
+  onComponentClick,
+}: ComponentRendererProps) {
+  const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
+
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col overflow-hidden rounded-lg border-2 bg-white transition-all",
+        isSelected
+          ? "border-primary ring-2 ring-primary/30 z-10"
+          : "border-gray-200",
+        isDesignMode && "cursor-pointer hover:border-gray-300"
+      )}
+      style={{
+        gridColumn: `${position.col} / span ${position.colSpan}`,
+        gridRow: `${position.row} / span ${position.rowSpan}`,
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onComponentClick?.();
+      }}
+    >
+      {/* 컴포넌트 라벨 (디자인 모드에서만) */}
+      {isDesignMode && (
+        <div
+          className={cn(
+            "flex h-5 shrink-0 items-center border-b px-2",
+            isSelected ? "bg-primary/10" : "bg-gray-50"
+          )}
+        >
+          <span className="text-[10px] font-medium text-gray-600">
+            {component.label || typeLabel}
+          </span>
+        </div>
+      )}
+
+      {/* 컴포넌트 내용 */}
+      <div className="flex flex-1 items-center justify-center p-2">
+        {renderComponentContent(component, isDesignMode)}
+      </div>
+    </div>
+  );
+}
+
+// ========================================
+// 컴포넌트별 렌더링
+// ========================================
+
+function renderComponentContent(
+  component: PopComponentDefinition,
+  isDesignMode: boolean
+): React.ReactNode {
+  const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
+
+  // 디자인 모드에서는 플레이스홀더 표시
+  if (isDesignMode) {
+    return (
+      <div className="text-xs text-gray-400 text-center">
+        {typeLabel}
+      </div>
+    );
+  }
+
+  // 뷰어 모드: 실제 컴포넌트 렌더링
+  switch (component.type) {
+    case "pop-field":
+      return (
+        <input
+          type="text"
+          placeholder={component.label || "입력하세요"}
+          className="w-full h-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      );
+
+    case "pop-button":
+      return (
+        <button className="w-full h-full px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors">
+          {component.label || "버튼"}
+        </button>
+      );
+
+    case "pop-list":
+      return (
+        <div className="w-full h-full overflow-auto p-2">
+          <div className="text-xs text-gray-500 text-center">
+            리스트 (데이터 연결 필요)
+          </div>
+        </div>
+      );
+
+    case "pop-indicator":
+      return (
+        <div className="text-center">
+          <div className="text-2xl font-bold text-primary">0</div>
+          <div className="text-xs text-gray-500">{component.label || "지표"}</div>
+        </div>
+      );
+
+    case "pop-scanner":
+      return (
+        <div className="text-center text-gray-500">
+          <div className="text-xs">스캐너</div>
+          <div className="text-[10px]">탭하여 스캔</div>
+        </div>
+      );
+
+    case "pop-numpad":
+      return (
+        <div className="grid grid-cols-3 gap-1 p-1 w-full">
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, "C", 0, "OK"].map((key) => (
+            <button
+              key={key}
+              className="aspect-square text-xs font-medium bg-gray-100 rounded hover:bg-gray-200"
+            >
+              {key}
+            </button>
+          ))}
+        </div>
+      );
+
+    default:
+      return (
+        <div className="text-xs text-gray-400">
+          {typeLabel}
+        </div>
+      );
+  }
+}
+
+// ========================================
+// 헬퍼 함수들 (export)
+// ========================================
+
+/**
+ * 특정 모드에 레이아웃이 설정되어 있는지 확인
+ */
+export function hasModeLayout(
+  layout: PopLayoutDataV3,
+  modeKey: PopLayoutModeKey
+): boolean {
+  const modeLayout = layout.layouts[modeKey];
+  return modeLayout && Object.keys(modeLayout.componentPositions).length > 0;
+}
+
+/**
+ * 태블릿 가로 모드(기준 모드)가 설정되어 있는지 확인
+ */
+export function hasBaseLayout(layout: PopLayoutDataV3): boolean {
+  return hasModeLayout(layout, "tablet_landscape");
+}
+
+/**
+ * 태블릿 가로 모드를 기준으로 다른 모드에 맞게 자동 변환
+ */
+export function autoConvertLayout(
+  layout: PopLayoutDataV3,
+  targetModeKey: PopLayoutModeKey
+): PopModeLayoutV3 {
+  const sourceKey: PopLayoutModeKey = "tablet_landscape";
+  const sourceLayout = layout.layouts[sourceKey];
+  const sourceRes = MODE_RESOLUTIONS[sourceKey];
+  const targetRes = MODE_RESOLUTIONS[targetModeKey];
+
+  // 비율 계산
+  const widthRatio = targetRes.width / sourceRes.width;
+  const heightRatio = targetRes.height / sourceRes.height;
+
+  // 가로 → 세로 변환인지 확인
+  const isOrientationChange =
+    sourceRes.width > sourceRes.height !== targetRes.width > targetRes.height;
+
+  // 컴포넌트 위치 변환
+  const convertedPositions: Record<string, GridPosition> = {};
+  let currentRow = 1;
+
+  // 컴포넌트를 row, col 순으로 정렬
+  const sortedComponentIds = Object.keys(sourceLayout.componentPositions).sort(
+    (a, b) => {
+      const posA = sourceLayout.componentPositions[a];
+      const posB = sourceLayout.componentPositions[b];
+      if (posA.row !== posB.row) return posA.row - posB.row;
+      return posA.col - posB.col;
+    }
+  );
+
+  for (const componentId of sortedComponentIds) {
+    const sourcePos = sourceLayout.componentPositions[componentId];
+
+    if (isOrientationChange) {
+      // 가로 → 세로: 세로 스택 방식
+      const canvasColumns = layout.settings.canvasGrid.columns;
+      convertedPositions[componentId] = {
+        col: 1,
+        row: currentRow,
+        colSpan: canvasColumns,
+        rowSpan: Math.max(3, Math.round(sourcePos.rowSpan * 1.5)),
+      };
+      currentRow += convertedPositions[componentId].rowSpan + 1;
+    } else {
+      // 같은 방향: 비율 변환
+      convertedPositions[componentId] = {
+        col: Math.max(1, Math.round(sourcePos.col * widthRatio)),
+        row: Math.max(1, Math.round(sourcePos.row * heightRatio)),
+        colSpan: Math.max(1, Math.round(sourcePos.colSpan * widthRatio)),
+        rowSpan: Math.max(1, Math.round(sourcePos.rowSpan * heightRatio)),
+      };
+    }
+  }
+
+  return {
+    componentPositions: convertedPositions,
+  };
+}
+
+/**
+ * 현재 모드에 맞는 레이아웃 반환 (없으면 자동 변환)
+ */
+export function getEffectiveModeLayout(
+  layout: PopLayoutDataV3,
+  targetModeKey: PopLayoutModeKey
+): {
+  modeLayout: PopModeLayoutV3;
+  isConverted: boolean;
+  sourceModeKey: PopLayoutModeKey;
+} {
+  // 해당 모드에 레이아웃이 있으면 그대로 사용
+  if (hasModeLayout(layout, targetModeKey)) {
+    return {
+      modeLayout: layout.layouts[targetModeKey],
+      isConverted: false,
+      sourceModeKey: targetModeKey,
+    };
+  }
+
+  // 없으면 태블릿 가로 모드를 기준으로 자동 변환
+  return {
+    modeLayout: autoConvertLayout(layout, targetModeKey),
+    isConverted: true,
+    sourceModeKey: "tablet_landscape",
+  };
+}
+
+export default PopLayoutRenderer;

frontend/components/pop/designer/renderers/index.ts

@@ -0,0 +1,11 @@
+// POP 레이아웃 렌더러 모듈 (v3)
+// 디자이너와 뷰어에서 동일한 렌더링을 보장하기 위한 공용 렌더러
+// 섹션 제거됨, 컴포넌트 직접 배치
+
+export { PopLayoutRenderer, default } from "./PopLayoutRenderer";
+export {
+  hasModeLayout,
+  hasBaseLayout,
+  autoConvertLayout,
+  getEffectiveModeLayout,
+} from "./PopLayoutRenderer";

frontend/components/pop/management/PopCategoryTree.tsx

@@ -100,6 +100,7 @@ interface TreeNodeProps {
   onMoveGroupDown: (group: PopScreenGroup) => void;
   onMoveScreenUp: (screen: ScreenDefinition, groupId: number) => void;
   onMoveScreenDown: (screen: ScreenDefinition, groupId: number) => void;
+  onDeleteScreen: (screen: ScreenDefinition) => void;
 }
 
 // ============================================================
@@ -116,6 +117,7 @@ function TreeNode({
   onMoveGroupDown,
   onMoveScreenUp,
   onMoveScreenDown,
+  onDeleteScreen,
   expandedGroups,
   onToggle,
   selectedGroupId,
@@ -276,6 +278,7 @@ function TreeNode({
               onMoveGroupDown={onMoveGroupDown}
               onMoveScreenUp={onMoveScreenUp}
               onMoveScreenDown={onMoveScreenDown}
+              onDeleteScreen={onDeleteScreen}
             />
           ))}
 
@@ -343,12 +346,18 @@ function TreeNode({
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <DropdownMenuItem 
-                      className="text-destructive"
                       onClick={() => onRemoveScreenFromGroup(screen, group.id)}
                     >
-                      <Trash2 className="h-4 w-4 mr-2" />
+                      <MoveRight className="h-4 w-4 mr-2" />
                       그룹에서 제거
                     </DropdownMenuItem>
+                    <DropdownMenuItem 
+                      className="text-destructive"
+                      onClick={() => onDeleteScreen(screen)}
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      화면 삭제
+                    </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>
@@ -389,10 +398,14 @@ export function PopCategoryTree({
     icon: "",
   });
 
-  // 삭제 다이얼로그 상태
+  // 그룹 삭제 다이얼로그 상태
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [deletingGroup, setDeletingGroup] = useState<PopScreenGroup | null>(null);
 
+  // 화면 삭제 다이얼로그 상태
+  const [isScreenDeleteDialogOpen, setIsScreenDeleteDialogOpen] = useState(false);
+  const [deletingScreen, setDeletingScreen] = useState<ScreenDefinition | null>(null);
+
   // 이동 모달 상태
   const [isMoveModalOpen, setIsMoveModalOpen] = useState(false);
   const [movingScreen, setMovingScreen] = useState<ScreenDefinition | null>(null);
@@ -612,6 +625,37 @@ export function PopCategoryTree({
     }
   };
 
+  // 화면 삭제 다이얼로그 열기
+  const handleDeleteScreen = (screen: ScreenDefinition) => {
+    setDeletingScreen(screen);
+    setIsScreenDeleteDialogOpen(true);
+  };
+
+  // 화면 삭제 확인
+  const confirmDeleteScreen = async () => {
+    if (!deletingScreen) return;
+
+    try {
+      // 화면 삭제 API 호출 (휴지통으로 이동)
+      await apiClient.delete(`/screen-management/screens/${deletingScreen.screenId}`);
+      toast.success(`"${deletingScreen.screenName}" 화면이 휴지통으로 이동되었습니다.`);
+      
+      // 화면 목록 새로고침 (부모 컴포넌트에서 처리해야 함)
+      loadGroups();
+      
+      // 삭제된 화면이 선택된 상태였다면 선택 해제
+      if (selectedScreen?.screenId === deletingScreen.screenId) {
+        onScreenSelect(null as any); // 선택 해제
+      }
+    } catch (error: any) {
+      console.error("화면 삭제 실패:", error);
+      toast.error(error.response?.data?.message || error.message || "화면 삭제에 실패했습니다.");
+    } finally {
+      setIsScreenDeleteDialogOpen(false);
+      setDeletingScreen(null);
+    }
+  };
+
   // 그룹 순서 위로 이동
   const handleMoveGroupUp = async (targetGroup: PopScreenGroup) => {
     try {
@@ -857,6 +901,7 @@ export function PopCategoryTree({
                   onMoveGroupDown={handleMoveGroupDown}
                   onMoveScreenUp={handleMoveScreenUp}
                   onMoveScreenDown={handleMoveScreenDown}
+                  onDeleteScreen={handleDeleteScreen}
                 />
               ))}
 
@@ -905,6 +950,14 @@ export function PopCategoryTree({
                             <MoveRight className="h-4 w-4 mr-2" />
                             카테고리로 이동
                           </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem 
+                            className="text-destructive"
+                            onClick={() => handleDeleteScreen(screen)}
+                          >
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            화면 삭제
+                          </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
                     </div>
@@ -1092,6 +1145,31 @@ export function PopCategoryTree({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* 화면 삭제 확인 다이얼로그 */}
+      <AlertDialog open={isScreenDeleteDialogOpen} onOpenChange={setIsScreenDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>화면 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              "{deletingScreen?.screenName}" 화면을 삭제하시겠습니까?
+              <br />
+              <span className="text-muted-foreground text-xs">
+                삭제된 화면은 휴지통으로 이동되며, 나중에 복원할 수 있습니다.
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteScreen}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

frontend/hooks/useDeviceOrientation.ts

@@ -0,0 +1,208 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+
+// ========================================
+// 타입 정의
+// ========================================
+export type DeviceType = "mobile" | "tablet";
+export type OrientationType = "landscape" | "portrait";
+
+export interface ResponsiveMode {
+  device: DeviceType;
+  orientation: OrientationType;
+  isLandscape: boolean;
+  modeKey: "tablet_landscape" | "tablet_portrait" | "mobile_landscape" | "mobile_portrait";
+}
+
+// ========================================
+// 브레이크포인트 (화면 너비 기준)
+// ========================================
+const BREAKPOINTS = {
+  // 모바일: 0 ~ 767px
+  // 태블릿: 768px 이상
+  TABLET_MIN: 768,
+};
+
+/**
+ * 반응형 모드 자동 감지 훅
+ * 
+ * - 화면 크기와 방향에 따라 4가지 모드 자동 전환
+ * - tablet_landscape, tablet_portrait, mobile_landscape, mobile_portrait
+ * - resize 이벤트와 orientation 변경 모두 감지
+ * 
+ * @returns ResponsiveMode 객체
+ */
+export function useResponsiveMode(): ResponsiveMode {
+  const [mode, setMode] = useState<ResponsiveMode>({
+    device: "tablet",
+    orientation: "landscape",
+    isLandscape: true,
+    modeKey: "tablet_landscape",
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const detectMode = (): ResponsiveMode => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      
+      // 디바이스 타입 결정 (화면 너비 기준)
+      const device: DeviceType = width >= BREAKPOINTS.TABLET_MIN ? "tablet" : "mobile";
+      
+      // 방향 결정 (가로/세로 비율)
+      const isLandscape = width > height;
+      const orientation: OrientationType = isLandscape ? "landscape" : "portrait";
+      
+      // 모드 키 생성
+      const modeKey = `${device}_${orientation}` as ResponsiveMode["modeKey"];
+
+      return { device, orientation, isLandscape, modeKey };
+    };
+
+    // 초기값 설정
+    setMode(detectMode());
+
+    const handleChange = () => {
+      setTimeout(() => {
+        setMode(detectMode());
+      }, 100);
+    };
+
+    // 이벤트 리스너 등록
+    window.addEventListener("resize", handleChange);
+    window.addEventListener("orientationchange", handleChange);
+
+    // matchMedia로 orientation 변경 감지
+    const landscapeQuery = window.matchMedia("(orientation: landscape)");
+    if (landscapeQuery.addEventListener) {
+      landscapeQuery.addEventListener("change", handleChange);
+    }
+
+    return () => {
+      window.removeEventListener("resize", handleChange);
+      window.removeEventListener("orientationchange", handleChange);
+      if (landscapeQuery.removeEventListener) {
+        landscapeQuery.removeEventListener("change", handleChange);
+      }
+    };
+  }, []);
+
+  return mode;
+}
+
+/**
+ * 디바이스 방향(orientation) 감지 커스텀 훅
+ * 
+ * - 실제 디바이스에서 가로/세로 방향 변경을 감지
+ * - window.matchMedia와 orientationchange 이벤트 활용
+ * - SSR 호환성 고려 (typeof window !== 'undefined')
+ * 
+ * @returns isLandscape - true: 가로 모드, false: 세로 모드
+ */
+export function useDeviceOrientation(): boolean {
+  const [isLandscape, setIsLandscape] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const detectOrientation = (): boolean => {
+      if (window.matchMedia) {
+        const landscapeQuery = window.matchMedia("(orientation: landscape)");
+        return landscapeQuery.matches;
+      }
+      return window.innerWidth > window.innerHeight;
+    };
+
+    setIsLandscape(detectOrientation());
+
+    const handleOrientationChange = () => {
+      setTimeout(() => {
+        setIsLandscape(detectOrientation());
+      }, 100);
+    };
+
+    const landscapeQuery = window.matchMedia("(orientation: landscape)");
+    
+    if (landscapeQuery.addEventListener) {
+      landscapeQuery.addEventListener("change", handleOrientationChange);
+    } else if (landscapeQuery.addListener) {
+      landscapeQuery.addListener(handleOrientationChange);
+    }
+
+    window.addEventListener("orientationchange", handleOrientationChange);
+    window.addEventListener("resize", handleOrientationChange);
+
+    return () => {
+      if (landscapeQuery.removeEventListener) {
+        landscapeQuery.removeEventListener("change", handleOrientationChange);
+      } else if (landscapeQuery.removeListener) {
+        landscapeQuery.removeListener(handleOrientationChange);
+      }
+      window.removeEventListener("orientationchange", handleOrientationChange);
+      window.removeEventListener("resize", handleOrientationChange);
+    };
+  }, []);
+
+  return isLandscape;
+}
+
+/**
+ * 수동 방향 전환을 지원하는 확장 훅
+ * 프리뷰 모드에서 테스트 목적으로 사용
+ * 
+ * @param initialOverride - 초기 수동 설정값 (undefined면 자동 감지)
+ * @returns [isLandscape, setIsLandscape, isAutoDetect]
+ */
+export function useDeviceOrientationWithOverride(
+  initialOverride?: boolean
+): [boolean, (value: boolean | undefined) => void, boolean] {
+  const autoDetectedIsLandscape = useDeviceOrientation();
+  const [manualOverride, setManualOverride] = useState<boolean | undefined>(initialOverride);
+
+  const isLandscape = manualOverride !== undefined ? manualOverride : autoDetectedIsLandscape;
+  const isAutoDetect = manualOverride === undefined;
+
+  const setOrientation = (value: boolean | undefined) => {
+    setManualOverride(value);
+  };
+
+  return [isLandscape, setOrientation, isAutoDetect];
+}
+
+/**
+ * 반응형 모드 + 수동 오버라이드 지원 훅
+ * 프리뷰 모드에서 디바이스/방향을 수동으로 변경할 때 사용
+ */
+export function useResponsiveModeWithOverride(
+  initialDeviceOverride?: DeviceType,
+  initialOrientationOverride?: boolean
+): {
+  mode: ResponsiveMode;
+  setDevice: (device: DeviceType | undefined) => void;
+  setOrientation: (isLandscape: boolean | undefined) => void;
+  isAutoDetect: boolean;
+} {
+  const autoMode = useResponsiveMode();
+  const [deviceOverride, setDeviceOverride] = useState<DeviceType | undefined>(initialDeviceOverride);
+  const [orientationOverride, setOrientationOverride] = useState<boolean | undefined>(initialOrientationOverride);
+
+  const mode = useMemo((): ResponsiveMode => {
+    const device = deviceOverride ?? autoMode.device;
+    const isLandscape = orientationOverride ?? autoMode.isLandscape;
+    const orientation: OrientationType = isLandscape ? "landscape" : "portrait";
+    const modeKey = `${device}_${orientation}` as ResponsiveMode["modeKey"];
+
+    return { device, orientation, isLandscape, modeKey };
+  }, [autoMode, deviceOverride, orientationOverride]);
+
+  const isAutoDetect = deviceOverride === undefined && orientationOverride === undefined;
+
+  return {
+    mode,
+    setDevice: setDeviceOverride,
+    setOrientation: setOrientationOverride,
+    isAutoDetect,
+  };
+}