diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index 7f79d998..4fa08eed 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -671,14 +671,14 @@ export async function getTableRecord(
     logger.info(`필터: ${filterColumn} = ${filterValue}`);
     logger.info(`표시 컬럼: ${displayColumn}`);
 
-    if (!tableName || !filterColumn || !filterValue || !displayColumn) {
+    if (!tableName || !filterColumn || !filterValue) {
       const response: ApiResponse<null> = {
         success: false,
         message: "필수 파라미터가 누락되었습니다.",
         error: {
           code: "MISSING_PARAMETERS",
           details:
-            "tableName, filterColumn, filterValue, displayColumn이 필요합니다.",
+            "tableName, filterColumn, filterValue가 필요합니다. displayColumn은 선택적입니다.",
         },
       };
       res.status(400).json(response);
@@ -710,9 +710,12 @@ export async function getTableRecord(
     }
 
     const record = result.data[0];
-    const displayValue = record[displayColumn];
+    // displayColumn이 "*"이거나 없으면 전체 레코드 반환
+    const displayValue = displayColumn && displayColumn !== "*" 
+      ? record[displayColumn] 
+      : record;
 
-    logger.info(`레코드 조회 완료: ${displayColumn} = ${displayValue}`);
+    logger.info(`레코드 조회 완료: ${displayColumn || "*"} = ${typeof displayValue === 'object' ? '[전체 레코드]' : displayValue}`);
 
     const response: ApiResponse<{ value: any; record: any }> = {
       success: true,
diff --git a/docs/V2_컴포넌트_분석_가이드.md b/docs/V2_컴포넌트_분석_가이드.md
index 55598e02..451cf602 100644
--- a/docs/V2_컴포넌트_분석_가이드.md
+++ b/docs/V2_컴포넌트_분석_가이드.md
@@ -26,11 +26,12 @@ frontend/lib/registry/components/
 
 ---
 
-## V2 컴포넌트 목록 (17개)
+## V2 컴포넌트 목록 (18개)
 
 | 컴포넌트 ID | 이름 | 카테고리 | 용도 |
 |------------|------|----------|------|
 | `v2-table-list` | 테이블 리스트 | DISPLAY | 데이터 목록 표시 (테이블/카드 모드) |
+| `v2-table-grouped` | 그룹화 테이블 | DISPLAY | **NEW** 그룹별 접기/펼치기 테이블 |
 | `v2-split-panel-layout` | 분할 패널 | DISPLAY | 마스터-디테일 레이아웃 |
 | `v2-unified-repeater` | 통합 리피터 | UNIFIED | 반복 데이터 관리 (인라인/모달/버튼) |
 | `v2-pivot-grid` | 피벗 그리드 | DISPLAY | 다차원 데이터 분석 피벗 테이블 |
@@ -182,12 +183,43 @@ interface ColumnConfig {
 
 #### 주요 특징
 
-- 좌측: 마스터 목록 (리스트/테이블 모드)
+- 좌측: 마스터 목록 (리스트/테이블/커스텀 모드)
 - 우측: 디테일 정보 (연관 데이터)
 - 좌우 비율 조절 가능 (드래그 리사이즈)
 - 다중 탭 지원 (우측 패널)
 - N:M 관계 데이터 지원
 - 중복 제거 기능
+- **커스텀 모드 (NEW)**: 패널 내부에 자유롭게 컴포넌트 배치
+
+#### 커스텀 모드 (displayMode: "custom")
+
+패널 내부에 다양한 컴포넌트를 자유롭게 배치할 수 있는 모드입니다. **v2-tabs-widget과 동일한 구조**로 구현되어 있습니다.
+
+**특징:**
+- 패널 내부에 버튼, 테이블, 입력 필드 등 모든 V2 컴포넌트 배치 가능
+- 드래그앤드롭으로 컴포넌트 이동
+- 리사이즈 핸들로 크기 조절
+- **컴포넌트 클릭 시 좌측 설정 패널에서 해당 컴포넌트 속성 편집**
+- 디자인 모드에서 실제 컴포넌트가 렌더링되어 미리보기 가능
+
+**사용 방법:**
+1. 좌측/우측 패널의 `displayMode`를 `"custom"`으로 설정
+2. 컴포넌트 팔레트에서 원하는 컴포넌트를 패널로 드래그
+3. 배치된 컴포넌트 클릭 → 좌측 패널에서 속성 편집
+4. 드래그 핸들(상단)로 이동, 모서리 핸들로 크기 조절
+
+**컴포넌트 구조:**
+```typescript
+interface PanelInlineComponent {
+  id: string;
+  componentType: string;
+  label?: string;
+  position?: { x: number; y: number };
+  size?: { width: number; height: number };
+  componentConfig?: Record<string, any>;
+  style?: Record<string, any>;
+}
+```
 
 #### 데이터 흐름
 
@@ -220,7 +252,7 @@ interface SplitPanelLayoutConfig {
     tableName?: string;
     useCustomTable?: boolean;
     customTableName?: string;
-    displayMode?: "list" | "table";
+    displayMode?: "list" | "table" | "custom";  // 🆕 커스텀 모드 추가
     showSearch?: boolean;
     showAdd?: boolean;
     showEdit?: boolean;
@@ -228,15 +260,21 @@ interface SplitPanelLayoutConfig {
     columns?: ColumnConfig[];
     tableConfig?: TableDisplayConfig;
     dataFilter?: DataFilterConfig;
+    
+    // 🆕 커스텀 모드 전용: 내부 컴포넌트 배열
+    components?: PanelInlineComponent[];
   };
   
   // 우측 패널
   rightPanel: {
     title: string;
     tableName?: string;
-    displayMode?: "list" | "table";
+    displayMode?: "list" | "table" | "custom";  // 🆕 커스텀 모드 추가
     columns?: ColumnConfig[];
     
+    // 🆕 커스텀 모드 전용: 내부 컴포넌트 배열
+    components?: PanelInlineComponent[];
+    
     // 관계 설정
     relation?: {
       type?: "join" | "detail";
diff --git a/docs/V2_컴포넌트_연동_가이드.md b/docs/V2_컴포넌트_연동_가이드.md
index f6756a5e..a8496926 100644
--- a/docs/V2_컴포넌트_연동_가이드.md
+++ b/docs/V2_컴포넌트_연동_가이드.md
@@ -959,6 +959,29 @@ receiveData(data, config): Promise<void>
 **구독 이벤트**:
 - `refreshTable` - 내부 테이블 갱신
 
+**커스텀 모드 (displayMode: "custom")**:
+- 패널 내부에 자유롭게 컴포넌트 배치 가능 (v2-tabs-widget과 동일 구조)
+- 컴포넌트 클릭 시 좌측 설정 패널에서 속성 편집
+- 드래그앤드롭으로 컴포넌트 이동, 리사이즈 핸들로 크기 조절
+- 디자인 모드에서 실제 컴포넌트 렌더링 (미리보기)
+
+```typescript
+// 커스텀 모드 설정 예시
+leftPanel: {
+  displayMode: "custom",
+  components: [
+    {
+      id: "btn-1",
+      componentType: "v2-button-primary",
+      label: "저장",
+      position: { x: 10, y: 10 },
+      size: { width: 100, height: 40 },
+      componentConfig: { buttonAction: "save" }
+    }
+  ]
+}
+```
+
 ---
 
 ## 7. 연동 가능한 조합
diff --git a/docs/screen-implementation-guide/00_analysis/next-component-development-plan.md b/docs/screen-implementation-guide/00_analysis/next-component-development-plan.md
new file mode 100644
index 00000000..58c8cd3f
--- /dev/null
+++ b/docs/screen-implementation-guide/00_analysis/next-component-development-plan.md
@@ -0,0 +1,581 @@
+# 다음 구현 필요 컴포넌트 개발 계획
+
+> **작성일**: 2026-01-30
+> **상태**: 계획 수립 완료
+> **우선순위**: v2-table-grouped (1순위) → v2-timeline-scheduler (2순위)
+
+---
+
+## 개요
+
+생산계획관리 화면의 정식 버전 구현을 위해 필요한 2개의 신규 컴포넌트 개발 계획입니다.
+
+| 컴포넌트 | 용도 | 난이도 | 예상 작업량 |
+|----------|------|:------:|:----------:|
+| `v2-table-grouped` | 그룹화 테이블 (접기/펼치기) | 중 | 2-3일 |
+| `v2-timeline-scheduler` | 타임라인/간트차트 스케줄러 | 상 | 5-7일 |
+
+---
+
+## 1. v2-table-grouped (그룹화 테이블)
+
+### 1.1 컴포넌트 개요
+
+| 항목 | 내용 |
+|------|------|
+| **컴포넌트 ID** | `v2-table-grouped` |
+| **카테고리** | DISPLAY |
+| **용도** | 데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능 제공 |
+| **기반 컴포넌트** | `v2-table-list` 확장 |
+| **참고 UI** | Excel 그룹화, VS Code 파일 그룹화 |
+
+### 1.2 핵심 기능
+
+| 기능 | 설명 | 우선순위 |
+|------|------|:--------:|
+| 그룹화 | 지정된 컬럼 기준으로 데이터 그룹핑 | 필수 |
+| 접기/펼치기 | 그룹 행 클릭 시 하위 항목 토글 | 필수 |
+| 그룹 요약 | 그룹별 합계/개수 표시 | 필수 |
+| 다중 그룹 | 여러 컬럼 기준 중첩 그룹화 | 선택 |
+| 그룹 선택 | 그룹 체크박스로 하위 전체 선택 | 필수 |
+| 전체 펼치기/접기 | 모든 그룹 일괄 토글 | 필수 |
+
+### 1.3 UI 목업
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [전체 펼치기] [전체 접기]                              [3개 그룹] │
+├─────────────────────────────────────────────────────────────────┤
+│ ▼ □ 품목A (P001)                           수량: 150  3건      │
+│   ├─ □ 2026-01-15  생산계획001  50개   설비A                   │
+│   ├─ □ 2026-01-16  생산계획002  50개   설비B                   │
+│   └─ □ 2026-01-17  생산계획003  50개   설비A                   │
+├─────────────────────────────────────────────────────────────────┤
+│ ► □ 품목B (P002)                           수량: 200  2건      │  ← 접힌 상태
+├─────────────────────────────────────────────────────────────────┤
+│ ▼ □ 품목C (P003)                           수량: 100  1건      │
+│   └─ □ 2026-01-18  생산계획004  100개  설비C                   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 1.4 타입 정의 (types.ts)
+
+```typescript
+import { ColumnConfig } from "../v2-table-list/types";
+
+/**
+ * 그룹화 설정
+ */
+export interface GroupConfig {
+  /** 그룹화 기준 컬럼 */
+  groupByColumn: string;
+  
+  /** 그룹 표시 형식 (예: "{item_name} ({item_code})") */
+  groupLabelFormat?: string;
+  
+  /** 그룹 요약 설정 */
+  summary?: {
+    /** 합계 컬럼 */
+    sumColumns?: string[];
+    /** 개수 표시 여부 */
+    showCount?: boolean;
+  };
+  
+  /** 초기 펼침 상태 */
+  defaultExpanded?: boolean;
+  
+  /** 중첩 그룹 (다중 그룹화) */
+  nestedGroup?: GroupConfig;
+}
+
+/**
+ * 그룹화 테이블 설정
+ */
+export interface TableGroupedConfig {
+  /** 테이블명 */
+  selectedTable?: string;
+  
+  /** 커스텀 테이블 사용 */
+  useCustomTable?: boolean;
+  customTableName?: string;
+  
+  /** 그룹화 설정 */
+  groupConfig: GroupConfig;
+  
+  /** 컬럼 설정 (v2-table-list와 동일) */
+  columns?: ColumnConfig[];
+  
+  /** 체크박스 표시 */
+  showCheckbox?: boolean;
+  
+  /** 체크박스 모드 */
+  checkboxMode?: "single" | "multi";
+  
+  /** 페이지네이션 (그룹 단위) */
+  pagination?: {
+    enabled: boolean;
+    pageSize: number;
+  };
+  
+  /** 정렬 설정 */
+  defaultSort?: {
+    column: string;
+    direction: "asc" | "desc";
+  };
+}
+
+/**
+ * 그룹 상태
+ */
+export interface GroupState {
+  /** 그룹 키 (groupByColumn 값) */
+  groupKey: string;
+  
+  /** 펼침 여부 */
+  expanded: boolean;
+  
+  /** 그룹 내 데이터 */
+  items: any[];
+  
+  /** 그룹 요약 데이터 */
+  summary?: Record<string, number>;
+}
+```
+
+### 1.5 파일 구조
+
+```
+frontend/lib/registry/components/v2-table-grouped/
+├── index.ts                      # Definition (V2TableGroupedDefinition)
+├── types.ts                      # 타입 정의
+├── config.ts                     # 기본 설정값
+├── TableGroupedComponent.tsx     # 메인 컴포넌트
+├── TableGroupedConfigPanel.tsx   # 설정 패널
+├── TableGroupedRenderer.tsx      # 레지스트리 등록
+├── components/
+│   ├── GroupHeader.tsx           # 그룹 헤더 (펼치기/접기)
+│   ├── GroupSummary.tsx          # 그룹 요약
+│   └── GroupCheckbox.tsx         # 그룹 체크박스
+├── hooks/
+│   └── useGroupedData.ts         # 그룹화 로직 훅
+└── README.md
+```
+
+### 1.6 구현 단계
+
+| 단계 | 작업 내용 | 예상 시간 |
+|:----:|----------|:---------:|
+| 1 | 타입 정의 및 기본 구조 생성 | 2시간 |
+| 2 | `useGroupedData` 훅 구현 (데이터 그룹화 로직) | 4시간 |
+| 3 | `GroupHeader` 컴포넌트 (펼치기/접기 UI) | 2시간 |
+| 4 | `TableGroupedComponent` 메인 구현 | 6시간 |
+| 5 | 그룹 체크박스 연동 | 2시간 |
+| 6 | 그룹 요약 (합계/개수) | 2시간 |
+| 7 | `TableGroupedConfigPanel` 설정 패널 | 4시간 |
+| 8 | 테스트 및 문서화 | 2시간 |
+
+**총 예상: 24시간 (약 3일)**
+
+### 1.7 v2-table-list와의 차이점
+
+| 항목 | v2-table-list | v2-table-grouped |
+|------|---------------|------------------|
+| 데이터 구조 | 플랫 리스트 | 계층 구조 (그룹 > 아이템) |
+| 렌더링 | 행 단위 | 그룹 헤더 + 상세 행 |
+| 선택 | 개별 행 | 그룹 단위 / 개별 단위 |
+| 요약 | 전체 합계 (선택) | 그룹별 요약 |
+| 페이지네이션 | 행 단위 | 그룹 단위 |
+
+---
+
+## 2. v2-timeline-scheduler (타임라인 스케줄러)
+
+### 2.1 컴포넌트 개요
+
+| 항목 | 내용 |
+|------|------|
+| **컴포넌트 ID** | `v2-timeline-scheduler` |
+| **카테고리** | DISPLAY |
+| **용도** | 간트차트 형태의 일정/계획 시각화 및 편집 |
+| **참고 UI** | MS Project, Jira Timeline, dhtmlxGantt |
+| **외부 라이브러리** | 고려 중: `@tanstack/react-virtual` (가상 스크롤) |
+
+### 2.2 핵심 기능
+
+| 기능 | 설명 | 우선순위 |
+|------|------|:--------:|
+| 타임라인 그리드 | 날짜 기준 그리드 표시 (일/주/월) | 필수 |
+| 스케줄 바 | 시작~종료 기간 바 렌더링 | 필수 |
+| 리소스 행 | 설비/작업자별 행 구분 | 필수 |
+| 드래그 이동 | 스케줄 바 드래그로 날짜 변경 | 필수 |
+| 리사이즈 | 바 양쪽 핸들로 기간 조정 | 필수 |
+| 줌 레벨 | 일/주/월 단위 전환 | 필수 |
+| 충돌 표시 | 같은 리소스 시간 겹침 경고 | 선택 |
+| 진행률 표시 | 바 내부 진행률 표시 | 선택 |
+| 마일스톤 | 단일 일정 마커 | 선택 |
+
+### 2.3 UI 목업
+
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ [◀ 이전] [오늘] [다음 ▶]  2026년 1월           [일] [주] [월]   [+ 추가]     │
+├────────────┬─────────────────────────────────────────────────────────────────┤
+│            │ 15(수) │ 16(목) │ 17(금) │ 18(토) │ 19(일) │ 20(월) │ 21(화) │
+├────────────┼─────────────────────────────────────────────────────────────────┤
+│ 설비A      │ ████████████████                                               │
+│            │ [생산계획001]   │                                               │
+├────────────┼─────────────────────────────────────────────────────────────────┤
+│ 설비B      │        █████████████████████████                               │
+│            │        [생산계획002        ]                                    │
+├────────────┼─────────────────────────────────────────────────────────────────┤
+│ 설비C      │                        ████████████████                        │
+│            │                        [생산계획003]                            │
+└────────────┴─────────────────────────────────────────────────────────────────┘
+
+범례: ██ 진행중  ██ 완료  ██ 지연  ◆ 마일스톤
+```
+
+### 2.4 타입 정의 (types.ts)
+
+```typescript
+/**
+ * 줌 레벨
+ */
+export type ZoomLevel = "day" | "week" | "month";
+
+/**
+ * 스케줄 상태
+ */
+export type ScheduleStatus = "planned" | "in_progress" | "completed" | "delayed" | "cancelled";
+
+/**
+ * 스케줄 항목
+ */
+export interface ScheduleItem {
+  /** 고유 ID */
+  id: string;
+  
+  /** 리소스 ID (설비/작업자) */
+  resourceId: string;
+  
+  /** 표시 제목 */
+  title: string;
+  
+  /** 시작 일시 */
+  startDate: string;  // ISO 8601 format
+  
+  /** 종료 일시 */
+  endDate: string;
+  
+  /** 상태 */
+  status: ScheduleStatus;
+  
+  /** 진행률 (0-100) */
+  progress?: number;
+  
+  /** 색상 (CSS color) */
+  color?: string;
+  
+  /** 추가 데이터 */
+  data?: Record<string, any>;
+}
+
+/**
+ * 리소스 (행)
+ */
+export interface Resource {
+  /** 리소스 ID */
+  id: string;
+  
+  /** 표시명 */
+  name: string;
+  
+  /** 그룹 (선택) */
+  group?: string;
+  
+  /** 아이콘 (선택) */
+  icon?: string;
+  
+  /** 용량 (선택, 충돌 계산용) */
+  capacity?: number;
+}
+
+/**
+ * 타임라인 설정
+ */
+export interface TimelineSchedulerConfig {
+  /** 테이블명 (스케줄 데이터) */
+  selectedTable?: string;
+  
+  /** 리소스 테이블명 */
+  resourceTable?: string;
+  
+  /** 필드 매핑 */
+  fieldMapping: {
+    id: string;
+    resourceId: string;
+    title: string;
+    startDate: string;
+    endDate: string;
+    status?: string;
+    progress?: string;
+    color?: string;
+  };
+  
+  /** 리소스 필드 매핑 */
+  resourceFieldMapping?: {
+    id: string;
+    name: string;
+    group?: string;
+  };
+  
+  /** 초기 줌 레벨 */
+  defaultZoomLevel?: ZoomLevel;
+  
+  /** 초기 표시 날짜 */
+  initialDate?: string;
+  
+  /** 편집 가능 여부 */
+  editable?: boolean;
+  
+  /** 드래그 이동 허용 */
+  allowDrag?: boolean;
+  
+  /** 리사이즈 허용 */
+  allowResize?: boolean;
+  
+  /** 충돌 체크 */
+  checkConflicts?: boolean;
+  
+  /** 상태별 색상 */
+  statusColors?: Record<ScheduleStatus, string>;
+  
+  /** 리소스 컬럼 너비 */
+  resourceColumnWidth?: number;
+  
+  /** 행 높이 */
+  rowHeight?: number;
+  
+  /** 셀 너비 (줌 레벨별) */
+  cellWidth?: {
+    day: number;
+    week: number;
+    month: number;
+  };
+  
+  /** 툴바 표시 */
+  showToolbar?: boolean;
+  
+  /** 범례 표시 */
+  showLegend?: boolean;
+}
+
+/**
+ * 이벤트 핸들러
+ */
+export interface TimelineEvents {
+  /** 스케줄 클릭 */
+  onScheduleClick?: (schedule: ScheduleItem) => void;
+  
+  /** 스케줄 더블클릭 */
+  onScheduleDoubleClick?: (schedule: ScheduleItem) => void;
+  
+  /** 드래그 완료 */
+  onScheduleDrag?: (schedule: ScheduleItem, newStart: Date, newEnd: Date) => void;
+  
+  /** 리사이즈 완료 */
+  onScheduleResize?: (schedule: ScheduleItem, newStart: Date, newEnd: Date) => void;
+  
+  /** 빈 영역 클릭 (새 스케줄 추가용) */
+  onEmptyClick?: (resourceId: string, date: Date) => void;
+}
+```
+
+### 2.5 파일 구조
+
+```
+frontend/lib/registry/components/v2-timeline-scheduler/
+├── index.ts                          # Definition (V2TimelineSchedulerDefinition)
+├── types.ts                          # 타입 정의
+├── config.ts                         # 기본 설정값
+├── TimelineSchedulerComponent.tsx    # 메인 컴포넌트
+├── TimelineSchedulerConfigPanel.tsx  # 설정 패널
+├── TimelineSchedulerRenderer.tsx     # 레지스트리 등록
+├── components/
+│   ├── TimelineHeader.tsx            # 날짜 헤더
+│   ├── TimelineGrid.tsx              # 그리드 배경
+│   ├── ResourceColumn.tsx            # 리소스 컬럼 (좌측)
+│   ├── ScheduleBar.tsx               # 스케줄 바 (드래그/리사이즈)
+│   ├── TimelineToolbar.tsx           # 툴바 (줌, 네비게이션)
+│   ├── TimelineLegend.tsx            # 범례
+│   └── ConflictIndicator.tsx         # 충돌 표시
+├── hooks/
+│   ├── useTimelineState.ts           # 타임라인 상태 관리
+│   ├── useScheduleDrag.ts            # 드래그 로직
+│   ├── useScheduleResize.ts          # 리사이즈 로직
+│   └── useDateCalculation.ts         # 날짜/위치 계산
+├── utils/
+│   ├── dateUtils.ts                  # 날짜 유틸리티
+│   └── conflictDetection.ts          # 충돌 감지
+└── README.md
+```
+
+### 2.6 구현 단계
+
+| 단계 | 작업 내용 | 예상 시간 |
+|:----:|----------|:---------:|
+| 1 | 타입 정의 및 기본 구조 생성 | 3시간 |
+| 2 | `TimelineHeader` (날짜 헤더, 줌 레벨) | 4시간 |
+| 3 | `TimelineGrid` (그리드 배경) | 3시간 |
+| 4 | `ResourceColumn` (리소스 목록) | 2시간 |
+| 5 | `ScheduleBar` 기본 렌더링 | 4시간 |
+| 6 | 드래그 이동 구현 | 6시간 |
+| 7 | 리사이즈 구현 | 4시간 |
+| 8 | 줌 레벨 전환 (일/주/월) | 3시간 |
+| 9 | 날짜 네비게이션 | 2시간 |
+| 10 | 충돌 감지 및 표시 | 4시간 |
+| 11 | 가상 스크롤 (대용량 데이터) | 4시간 |
+| 12 | `TimelineSchedulerConfigPanel` | 4시간 |
+| 13 | API 연동 (저장/로드) | 4시간 |
+| 14 | 테스트 및 문서화 | 3시간 |
+
+**총 예상: 50시간 (약 6-7일)**
+
+### 2.7 핵심 알고리즘
+
+#### 날짜 → 픽셀 위치 변환
+
+```typescript
+function dateToPosition(date: Date, viewStart: Date, cellWidth: number, zoomLevel: ZoomLevel): number {
+  const diffMs = date.getTime() - viewStart.getTime();
+  
+  switch (zoomLevel) {
+    case "day":
+      const diffDays = diffMs / (1000 * 60 * 60 * 24);
+      return diffDays * cellWidth;
+    case "week":
+      const diffWeeks = diffMs / (1000 * 60 * 60 * 24 * 7);
+      return diffWeeks * cellWidth;
+    case "month":
+      // 월 단위는 일수가 다르므로 별도 계산
+      return calculateMonthPosition(date, viewStart, cellWidth);
+  }
+}
+```
+
+#### 충돌 감지
+
+```typescript
+function detectConflicts(schedules: ScheduleItem[], resourceId: string): ScheduleItem[][] {
+  const resourceSchedules = schedules
+    .filter(s => s.resourceId === resourceId)
+    .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+  
+  const conflicts: ScheduleItem[][] = [];
+  
+  for (let i = 0; i < resourceSchedules.length; i++) {
+    const current = resourceSchedules[i];
+    const overlapping = resourceSchedules.filter(s => 
+      s.id !== current.id &&
+      new Date(s.startDate) < new Date(current.endDate) &&
+      new Date(s.endDate) > new Date(current.startDate)
+    );
+    
+    if (overlapping.length > 0) {
+      conflicts.push([current, ...overlapping]);
+    }
+  }
+  
+  return conflicts;
+}
+```
+
+---
+
+## 3. 구현 우선순위 및 일정
+
+### 3.1 권장 순서
+
+```
+1단계: v2-table-grouped (2-3일)
+  ↓
+2단계: v2-timeline-scheduler (5-7일)
+  ↓
+3단계: 생산계획관리 정식 버전 화면 구성 (1-2일)
+```
+
+### 3.2 이유
+
+1. **v2-table-grouped 먼저**:
+   - `v2-table-list` 기반 확장으로 난이도 낮음
+   - 생산계획 외 다른 화면(BOM, 수주 등)에서도 활용 가능
+   - 타임라인 개발 중에도 테스트용으로 사용 가능
+
+2. **v2-timeline-scheduler 나중**:
+   - 복잡도가 높아 집중 개발 필요
+   - 드래그/리사이즈 등 인터랙션 테스트 필요
+   - 생산계획관리 전용 컴포넌트
+
+### 3.3 체크리스트
+
+#### v2-table-grouped ✅ 구현 완료 (2026-01-30)
+
+- [x] 타입 정의 완료
+- [x] 기본 구조 생성
+- [x] useGroupedData 훅 구현
+- [x] GroupHeader 컴포넌트
+- [x] 메인 컴포넌트 구현
+- [x] 그룹 체크박스 연동
+- [x] 그룹 요약 (합계/개수)
+- [x] 설정 패널 구현
+- [x] 레지스트리 등록
+- [x] 문서화 (README.md)
+
+#### v2-timeline-scheduler ✅ 구현 완료 (2026-01-30)
+
+- [x] 타입 정의 완료
+- [x] 기본 구조 생성
+- [x] TimelineHeader (날짜)
+- [x] TimelineGrid (배경)
+- [x] ResourceColumn (리소스)
+- [x] ScheduleBar 기본 렌더링
+- [x] 드래그 이동 (기본)
+- [x] 리사이즈 (기본)
+- [x] 줌 레벨 전환
+- [x] 날짜 네비게이션
+- [ ] 충돌 감지 (향후)
+- [ ] 가상 스크롤 (향후)
+- [x] 설정 패널 구현
+- [x] API 연동
+- [x] 레지스트리 등록
+- [ ] 테스트 완료
+- [x] 문서화 (README.md)
+
+---
+
+## 4. 참고 자료
+
+### 기존 V2 컴포넌트 참고
+
+- `v2-table-list`: 테이블 렌더링, 체크박스, 페이지네이션
+- `v2-pivot-grid`: 복잡한 그리드 렌더링, 가상 스크롤
+- `v2-split-panel-layout`: 커스텀 모드 컴포넌트 배치
+
+### 외부 라이브러리 검토
+
+| 라이브러리 | 용도 | 고려 사항 |
+|----------|------|----------|
+| `@tanstack/react-virtual` | 가상 스크롤 | 이미 사용 중, 확장 용이 |
+| `date-fns` | 날짜 계산 | 이미 사용 중 |
+| `react-dnd` | 드래그앤드롭 | 검토 필요, 현재 네이티브 구현 |
+
+### 관련 문서
+
+- [생산계획관리 화면 설계](../03_production/production-plan.md)
+- [V2 컴포넌트 분석 가이드](../../V2_컴포넌트_분석_가이드.md)
+- [컴포넌트 개발 가이드](../../../frontend/docs/component-development-guide.md)
+
+---
+
+**작성자**: Claude AI
+**최종 수정**: 2026-01-30
diff --git a/docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md b/docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md
index 1f18e804..e32e68cc 100644
--- a/docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md
+++ b/docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md
@@ -63,7 +63,7 @@
 
 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
-| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 | splitRatio, resizable, relation |
+| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 | splitRatio, resizable, relation, **displayMode: custom** |
 | `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 | tabs, activeTabId |
 | `v2-section-card` | 섹션 카드 | 제목+테두리 그룹화 | title, collapsible, padding |
 | `v2-section-paper` | 섹션 페이퍼 | 배경색 그룹화 | backgroundColor, padding, shadow |
@@ -284,6 +284,45 @@
 }
 ```
 
+#### v2-split-panel-layout 커스텀 모드 (NEW)
+
+패널 내부에 자유롭게 컴포넌트를 배치할 수 있습니다. (v2-tabs-widget과 동일 구조)
+
+```typescript
+{
+  leftPanel: {
+    displayMode: "custom",  // 커스텀 모드 활성화
+    components: [           // 내부 컴포넌트 배열
+      {
+        id: "btn-save",
+        componentType: "v2-button-primary",
+        label: "저장",
+        position: { x: 10, y: 10 },
+        size: { width: 100, height: 40 },
+        componentConfig: { buttonAction: "save" }
+      },
+      {
+        id: "tbl-list",
+        componentType: "v2-table-list",
+        label: "목록",
+        position: { x: 10, y: 60 },
+        size: { width: 400, height: 300 },
+        componentConfig: { selectedTable: "테이블명" }
+      }
+    ]
+  },
+  rightPanel: {
+    displayMode: "table"  // 기존 모드 유지
+  }
+}
+```
+
+**디자인 모드 기능**:
+- 컴포넌트 클릭 → 좌측 설정 패널에서 속성 편집
+- 드래그 핸들(상단)로 이동
+- 리사이즈 핸들(모서리)로 크기 조절
+- 실제 컴포넌트 미리보기 렌더링
+
 #### v2-card-display 필수 설정
 
 ```typescript
diff --git a/docs/screen-implementation-guide/03_production/production-plan.md b/docs/screen-implementation-guide/03_production/production-plan.md
index 22ef6a7a..aaba82b6 100644
--- a/docs/screen-implementation-guide/03_production/production-plan.md
+++ b/docs/screen-implementation-guide/03_production/production-plan.md
@@ -1,6 +1,13 @@
 # 생산계획관리 (Production Plan Management)
 
-> ⚠️ **중요 안내**: 이 화면은 **복합형 레이아웃** (좌우 분할 패널 + 타임라인 스케줄러)으로, 현재 V2 컴포넌트만으로는 완전한 구현이 불가능합니다. 아래 문서는 화면 분석 및 향후 구현 계획을 위한 참조용입니다.
+> **Screen ID**: /screens/{TBD}
+> **메뉴 경로**: 생산관리 > 생산계획관리
+
+> ⚠️ **구현 상태 안내**
+> - **간소화 버전 (패턴 A)**: ✅ 즉시 구현 가능
+> - **정식 버전 (복합 레이아웃)**: ⚠️ 컴포넌트 개발 후 구현 가능
+>   - ~~`v2-split-panel-layout` 커스텀 모드 확장~~ ✅ **구현 완료**
+>   - `v2-table-grouped`, `v2-timeline-scheduler` 신규 개발 (2개)
 
 ---
 
@@ -10,16 +17,61 @@
 |------|------|
 | **화면명** | 생산계획관리 |
 | **영문명** | Production Plan Management |
-| **화면 유형** | 복합형 (좌우 분할 패널 + 타임라인 스케줄러) |
+| **Screen ID** | /screens/{TBD} |
+| **메뉴 경로** | 생산관리 > 생산계획관리 |
+| **화면 유형 (전체)** | 복합형 (좌우 분할 패널 + 타임라인 스케줄러) - ⚠️ 컴포넌트 확장 후 구현 |
+| **화면 유형 (간소화)** | **패턴 A** (기본 마스터 화면) - ✅ 즉시 구현 가능 |
 | **메인 테이블** | `production_plan_mng` |
 | **관련 테이블** | `sales_order_mng`, `item_info`, `equipment_info`, `bom_info` |
 | **주요 기능** | 수주 기반 생산계획 수립, 타임라인 스케줄러, 자동 스케줄 생성, 반제품 계획 연동 |
+| **필요 작업** | ~~1. `v2-split-panel-layout` 확장~~ ✅ 완료 / 2. `v2-table-grouped` 개발 / 3. `v2-timeline-scheduler` 개발 |
 
 ---
 
-## 2. 화면 구조 분석
+## 2. 테이블 선택 및 화면 구조
 
-### 2.1 레이아웃 구조
+### 2.1 사용 테이블
+
+| 테이블명 | 용도 | 비고 |
+|----------|------|------|
+| `production_plan_mng` | 생산계획 마스터 | 주 테이블 |
+| `sales_order_mng` | 수주 정보 | 참조 (수주 기반 계획) |
+| `item_info` | 품목 정보 | 참조 (품목코드, 품명) |
+| `equipment_info` | 설비 정보 | 참조 (설비 할당) |
+| `bom_info` | BOM 정보 | 참조 (반제품 계획 생성) |
+
+### 2.2 테이블 관계
+
+```
+┌──────────────────────┐       ┌──────────────────────┐
+│  sales_order_mng     │       │  production_plan_mng │
+├──────────────────────┤       ├──────────────────────┤
+│ order_no (PK)        │──N:1──│ order_no (FK)        │
+│ item_code            │       │ id (PK)              │
+│ ...                  │       │ plan_no              │
+└──────────────────────┘       │ item_code            │
+                               │ equipment_id (FK)    │
+┌──────────────────────┐       │ parent_plan_id (FK)  │
+│  item_info           │       │ ...                  │
+├──────────────────────┤       └──────────────────────┘
+│ item_code (PK)       │──1:N──        │
+│ item_name            │               │
+│ ...                  │               │
+└──────────────────────┘               │
+                                       │
+┌──────────────────────┐               │
+│  equipment_info      │               │
+├──────────────────────┤               │
+│ id (PK)              │──1:N──────────┘
+│ equipment_code       │
+│ equipment_name       │
+│ ...                  │
+└──────────────────────┘
+```
+
+### 2.3 화면 구조 분석 (전체 버전)
+
+#### 2.3.1 레이아웃 구조
 
 ```
 ┌─────────────────────────────────────────────────────────────────────────────┐
@@ -44,7 +96,7 @@
 └────────────────────────────────┴──┴──────────────────────────────────────────┘
 ```
 
-### 2.2 탭 구조
+#### 2.3.2 탭 구조
 
 **왼쪽 패널 탭**:
 1. **수주데이터**: 수주 목록 (품목별 그룹핑)
@@ -117,54 +169,119 @@
 | 기본 버튼 (엑셀, 사용자옵션) | ✅ | `v2-button-primary` | |
 | 단일 테이블 목록 | ✅ | `v2-table-list` | |
 | 기본 모달 폼 | ✅ | 모달 화면 | |
-| 좌우 분할 패널 (기본) | ⚠️ | `v2-split-panel-layout` | 테이블/리스트만 표시 가능 |
+| 좌우 분할 패널 (커스텀 모드) | ✅ | `v2-split-panel-layout` | **displayMode: "custom" 지원** |
 | 탭 컴포넌트 (기본) | ⚠️ | `v2-tabs-widget` | 디자인 모드에서 컴포넌트 배치 |
 
-### 4.2 현재 V2 컴포넌트의 제한 사항
+### 4.2 현재 V2 컴포넌트의 제한 사항 및 확장 방안
 
-#### `v2-split-panel-layout` 제한
+#### `v2-split-panel-layout` 현재 기능
 
-**현재 기능**:
-- 좌우 분할 패널 (리사이즈 가능)
-- 각 패널에 **테이블** 또는 **리스트** 표시 (`displayMode: "list" | "table"`)
-- leftPanel ↔ rightPanel 관계 설정 (relation)
-- 우측 패널에 추가 탭 (additionalTabs)
+| 기능 | 지원 | 설명 |
+|------|:----:|------|
+| 좌우 분할 패널 | ✅ | 리사이즈 가능 |
+| 테이블/리스트 표시 | ✅ | `displayMode: "list" \| "table"` |
+| 마스터-디테일 관계 | ✅ | `relation` 설정 |
+| 우측 추가 탭 (`additionalTabs`) | ⚠️ | **타입만 정의, 렌더링 미구현** |
+| **패널 내 임의 컴포넌트 배치** | ✅ | **`displayMode: "custom"` - 구현 완료!** |
 
-**제한 사항**:
-- ❌ 패널 안에 **임의의 컴포넌트** (타임라인 등)를 배치할 수 없음
-- ❌ **그룹화된 테이블** (접기/펼치기) 미지원
-- ❌ 복잡한 커스텀 UI 배치 불가
+#### ✅ 커스텀 모드 (구현 완료)
 
-#### `v2-tabs-widget` 제한
+`v2-tabs-widget`과 동일한 구조로 패널 안에 컴포넌트를 자유롭게 배치:
 
-**현재 기능**:
-- 탭별 컴포넌트 자유 배치
-- 디자인 모드에서 드래그&드롭
+```typescript
+leftPanel: {
+  displayMode: "list" | "table" | "custom",  // ✅ 커스텀 모드 지원
+  
+  // 기존 모드 (list, table)
+  tableName?: string,
+  columns?: [...],
+  
+  // ✅ 커스텀 모드 - 패널 안에 자유롭게 컴포넌트 배치
+  components?: PanelInlineComponent[],
+}
 
-**제한 사항**:
-- ❌ 탭 내에 **다른 V2 컴포넌트**를 완전히 자유롭게 배치하기 어려움
-- ❌ 런타임에서 복잡한 컴포넌트 렌더링 제한
+// PanelInlineComponent 구조
+interface PanelInlineComponent {
+  id: string;
+  componentType: string;
+  label?: string;
+  position?: { x: number; y: number };
+  size?: { width: number; height: number };
+  componentConfig?: Record<string, any>;
+}
+```
+
+**커스텀 모드 기능**:
+- ✅ 드래그앤드롭으로 컴포넌트 이동
+- ✅ 리사이즈 핸들로 크기 조절
+- ✅ 컴포넌트 클릭 시 좌측 설정 패널에서 속성 편집
+- ✅ 디자인 모드에서 실제 컴포넌트 미리보기 렌더링
+- ✅ 탭, 테이블, 버튼 등 모든 V2 컴포넌트 배치 가능
+
+#### `v2-tabs-widget` 현재 기능
+
+| 기능 | 지원 | 설명 |
+|------|:----:|------|
+| 탭별 컴포넌트 배치 | ✅ | `components[]` |
+| 디자인 모드 드래그&드롭 | ✅ | 위치/크기 조정 |
+| 런타임 렌더링 | ✅ | `DynamicComponentRenderer` 사용 |
+
+**`v2-tabs-widget` 구조** (참고용):
+```typescript
+interface TabItem {
+  id: string;
+  label: string;
+  components?: TabInlineComponent[];  // 탭 안에 배치된 컴포넌트들
+}
+
+interface TabInlineComponent {
+  id: string;
+  componentType: string;  // "v2-table-list", "v2-timeline-scheduler" 등
+  position?: { x: number; y: number };
+  size?: { width: number; height: number };
+  componentConfig?: Record<string, any>;
+}
+```
 
 ### 4.3 생산계획관리에 필요한 기능 vs 현재 지원
 
-| 필요 기능 | 현재 지원 | 설명 |
-|----------|:---------:|------|
-| 좌우 분할 패널 | ⚠️ 부분 | `v2-split-panel-layout` - 테이블만 가능 |
-| 왼쪽 패널 탭 (수주/안전재고) | ❌ | 분할 패널 내 탭 조합 미지원 |
-| **그룹화된 테이블** (품목별 접기/펼치기) | ❌ | 신규 개발 필요 |
-| 오른쪽 패널 탭 (완제품/반제품) | ❌ | 분할 패널 내 탭 조합 미지원 |
-| **타임라인 스케줄러** (간트차트) | ❌ | 신규 개발 필요 |
-| 드래그&드롭 스케줄 이동 | ❌ | 신규 개발 필요 |
-| 복잡한 상세 모달 (분할, 설비할당) | ❌ | 커스텀 모달 개발 필요 |
+| 필요 기능 | 현재 지원 | 해결 방안 |
+|----------|:---------:|----------|
+| 좌우 분할 패널 | ✅ | `v2-split-panel-layout` |
+| 왼쪽 패널 탭 (수주/안전재고) | ✅ | **커스텀 모드 + `v2-tabs-widget` 조합 (구현 완료)** |
+| 오른쪽 패널 탭 (완제품/반제품) | ✅ | **커스텀 모드 + `v2-tabs-widget` 조합 (구현 완료)** |
+| **그룹화된 테이블** (품목별 접기/펼치기) | ❌ | **신규 개발 필요** |
+| **타임라인 스케줄러** (간트차트) | ❌ | **신규 개발 필요** |
+| 드래그&드롭 스케줄 이동 | ❌ | `v2-timeline-scheduler`에 포함 |
+| 복잡한 상세 모달 | ✅ | 기존 모달 화면으로 충분 |
 
-### 4.4 향후 개발 필요 컴포넌트
+### 4.4 향후 개발 필요 사항
+
+#### 기존 컴포넌트 확장 (1개)
+
+| 컴포넌트 | 작업 내용 | 상태 |
+|----------|----------|:------:|
+| `v2-split-panel-layout` | `displayMode: "custom"` 추가 + `components[]` 지원 | ✅ **완료** |
+
+#### 신규 컴포넌트 개발 (2개) - 대체 불가
+
+| 컴포넌트 | 필요 이유 | 상태 |
+|----------|----------|:------:|
+| ~~**`v2-table-grouped`**~~ | 품목별 접기/펼치기 그룹화 테이블 | ✅ **완료** |
+| **`v2-timeline-scheduler`** | 간트차트 형태의 타임라인 스케줄러 | ⏳ 대기 |
+
+#### 불필요한 컴포넌트 (이전 분석에서 제외)
+
+| 컴포넌트 | 제외 이유 |
+|----------|----------|
+| ~~`v2-split-panel-enhanced`~~ | 커스텀 모드로 대체 가능 |
+| ~~`v2-modal-complex`~~ | 기존 모달 화면으로 충분 |
 
 ```
-필요 컴포넌트 목록:
-1. v2-timeline-scheduler   - 타임라인/간트차트 스케줄러 (핵심!)
-2. v2-table-grouped        - 그룹화된 테이블 (접기/펼치기)
-3. v2-split-panel-enhanced - 패널 내 임의 컴포넌트 배치 가능한 확장판
-4. v2-modal-complex        - 복잡한 모달 (분할, 다단계, 설비할당)
+최종 필요 작업:
+1. ✅ v2-split-panel-layout 확장 - displayMode: "custom" 추가 [완료]
+2. ✅ v2-table-grouped 신규 개발 - 그룹화 테이블 (접기/펼치기) [완료]
+3. v2-timeline-scheduler 신규 개발 - 타임라인/간트차트 (핵심!)
 ```
 
 ### 4.5 현재 구현 가능한 최대 범위
@@ -189,6 +306,63 @@
 - 자동 스케줄 생성
 - 드래그로 스케줄 이동
 
+### 4.6 정식 버전 구현 구조 (확장 후)
+
+`v2-split-panel-layout`에 커스텀 모드를 추가한 후의 **정식 버전 구현 구조**:
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│ v2-split-panel-layout (양쪽 패널 displayMode: "custom")               │
+├────────────────────────────────┬─────────────────────────────────────┤
+│ leftPanel.components: [        │ rightPanel.components: [             │
+│   v2-tabs-widget {             │   v2-tabs-widget {                   │
+│     tabs: [                    │     tabs: [                          │
+│       {                        │       {                              │
+│         label: "수주데이터",    │         label: "완제품 생산계획",    │
+│         components: [          │         components: [                │
+│           v2-table-grouped     │           v2-timeline-scheduler     │
+│         ]                      │         ]                            │
+│       },                       │       },                             │
+│       {                        │       {                              │
+│         label: "안전재고부족", │         label: "반제품 생산계획",    │
+│         components: [          │         components: [                │
+│           v2-table-grouped     │           v2-timeline-scheduler     │
+│         ]                      │         ]                            │
+│       }                        │       }                              │
+│     ]                          │     ]                                │
+│   }                            │   }                                  │
+│ ]                              │ ]                                    │
+└────────────────────────────────┴─────────────────────────────────────┘
+```
+
+**컴포넌트 중첩 구조**:
+```
+v2-split-panel-layout (displayMode: "custom")
+├── leftPanel.components[]
+│   └── v2-tabs-widget
+│       ├── tabs[0]: "수주데이터"
+│       │   └── components[]
+│       │       └── v2-table-grouped (품목별 그룹화)
+│       └── tabs[1]: "안전재고부족"
+│           └── components[]
+│               └── v2-table-grouped
+│
+└── rightPanel.components[]
+    └── v2-tabs-widget
+        ├── tabs[0]: "완제품 생산계획"
+        │   └── components[]
+        │       └── v2-timeline-scheduler (간트차트)
+        └── tabs[1]: "반제품 생산계획"
+            └── components[]
+                └── v2-timeline-scheduler
+```
+
+**장점**:
+- 기존 `v2-tabs-widget` 로직 100% 재사용
+- 패널 안에 어떤 컴포넌트든 배치 가능
+- 별도 `v2-split-panel-enhanced` 개발 불필요
+- 확장성 뛰어남 (향후 다른 복합 화면에도 적용 가능)
+
 ---
 
 ## 5. 단순화된 구현 방안 (임시)
@@ -211,42 +385,107 @@
 └──────────────────────────────────────────────────────────────┘
 ```
 
-### 5.2 간소화 버전 테이블 컬럼
+### 5.2 컴포넌트 배치도 (간소화 버전)
 
-| 순서 | 컬럼명 | 표시명 | 정렬 | 형식 |
-|:----:|--------|--------|:----:|------|
-| 1 | plan_no | 계획번호 | left | text |
-| 2 | plan_date | 계획일자 | center | date |
-| 3 | item_code | 품목코드 | left | text |
-| 4 | item_name | 품명 | left | text |
-| 5 | plan_qty | 계획수량 | right | number |
-| 6 | start_date | 시작일 | center | date |
-| 7 | end_date | 종료일 | center | date |
-| 8 | due_date | 납기일 | center | date |
-| 9 | equipment_name | 설비 | left | text |
-| 10 | status | 상태 | center | badge |
-| 11 | manager_name | 담당자 | left | text |
-| 12 | product_type | 제품유형 | center | text |
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ v2-table-search-widget (comp_search)                                         │
+│ [품목코드] [품명] [계획기간: 시작~종료] [상태]      [조회] [엑셀다운로드]      │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ 생산계획 목록                    [신규등록] [수정] [삭제] [작업지시 생성]      │
+│ ─────────────────────────────────────────────────────────────────────────── │
+│ v2-table-list (comp_table)                                                   │
+│ □ | 계획번호 | 계획일자 | 품목코드 | 품명 | 계획수량 | 시작일 | 종료일 | ... │
+│ □ | PP-001   | 2026-01  | ITEM001  | 제품A| 1,000    | 01-30  | 02-05  | ... │
+│ □ | PP-002   | 2026-01  | ITEM002  | 제품B| 500      | 02-01  | 02-10  | ... │
+│                                                                              │
+│ [1] [2] [3] ... [10]  페이지당: [20] ▼                                       │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
 
-### 5.3 간소화 버전 모달 필드
+### 5.3 컴포넌트 목록 (간소화 버전)
 
-| 필드명 | 라벨 | 타입 | 필수 |
-|--------|------|------|:----:|
-| plan_no | 계획번호 | text | ✅ |
-| plan_date | 계획일자 | date | ✅ |
-| item_code | 품목코드 | select (품목 검색) | ✅ |
-| item_name | 품명 | text (자동) | |
-| plan_qty | 계획수량 | number | ✅ |
-| start_date | 시작일 | date | ✅ |
-| end_date | 종료일 | date | ✅ |
-| due_date | 납기일 | date | |
-| equipment_id | 설비 | select | |
-| status | 상태 | select | ✅ |
-| priority | 우선순위 | select | |
-| work_shift | 작업조 | select | |
-| manager_name | 담당자 | text | |
-| remarks | 비고 | textarea | |
-| product_type | 제품유형 | select | |
+| 컴포넌트 ID | 컴포넌트 타입 | 역할 |
+|-------------|---------------|------|
+| `comp_search` | v2-table-search-widget | 검색 필터 |
+| `comp_table` | v2-table-list | 생산계획 목록 |
+| `comp_btn_register` | v2-button-primary | 신규 등록 |
+| `comp_btn_edit` | v2-button-primary | 수정 |
+| `comp_btn_delete` | v2-button-primary | 삭제 |
+| `comp_btn_work_order` | v2-button-primary | 작업지시 생성 |
+
+### 5.4 간소화 버전 테이블 컬럼
+
+| 순서 | 컬럼명 | 표시명 | 정렬 | 형식 | 너비 |
+|:----:|--------|--------|:----:|------|:----:|
+| 1 | plan_no | 계획번호 | left | text | 120 |
+| 2 | plan_date | 계획일자 | center | date | 100 |
+| 3 | item_code | 품목코드 | left | text | 100 |
+| 4 | item_name | 품명 | left | text | 150 |
+| 5 | plan_qty | 계획수량 | right | number | 100 |
+| 6 | start_date | 시작일 | center | date | 100 |
+| 7 | end_date | 종료일 | center | date | 100 |
+| 8 | due_date | 납기일 | center | date | 100 |
+| 9 | equipment_name | 설비 | left | text | 120 |
+| 10 | status | 상태 | center | badge | 80 |
+| 11 | manager_name | 담당자 | left | text | 100 |
+| 12 | product_type | 제품유형 | center | text | 80 |
+
+### 5.5 간소화 버전 모달 필드
+
+| 필드명 | 라벨 | 타입 | 필수 | 비고 |
+|--------|------|------|:----:|------|
+| plan_no | 계획번호 | text (readonly) | ✅ | 자동채번: PP-YYYYMMDD-0001 |
+| plan_date | 계획일자 | date | ✅ | 기본값: 오늘 |
+| item_code | 품목코드 | select (품목 검색) | ✅ | 엔티티: item_info |
+| item_name | 품명 | text (readonly) | | 자동 입력 |
+| plan_qty | 계획수량 | number | ✅ | min: 1 |
+| start_date | 시작일 | date | ✅ | |
+| end_date | 종료일 | date | ✅ | start_date 이후 |
+| due_date | 납기일 | date | | |
+| equipment_id | 설비 | select | | 엔티티: equipment_info |
+| equipment_name | 설비명 | text (readonly) | | 자동 입력 |
+| status | 상태 | select | ✅ | 공통코드: PROD_PLAN_STATUS |
+| priority | 우선순위 | select | | 공통코드: PRIORITY |
+| work_shift | 작업조 | select | | 공통코드: WORK_SHIFT |
+| manager_name | 담당자 | text | | |
+| product_type | 제품유형 | select | | 공통코드: PRODUCT_TYPE |
+| remarks | 비고 | textarea | | |
+
+### 5.6 상태 배지 및 공통코드
+
+#### 상태 (PROD_PLAN_STATUS)
+
+| 코드 | 표시명 | 배경색 | 글자색 |
+|------|--------|--------|--------|
+| 계획 | 계획 | #dbeafe | #1e40af |
+| 지시 | 지시 | #fef3c7 | #92400e |
+| 진행 | 진행 | #d1fae5 | #065f46 |
+| 완료 | 완료 | #f3f4f6 | #4b5563 |
+
+#### 우선순위 (PRIORITY)
+
+| 코드 | 표시명 |
+|------|--------|
+| 긴급 | 긴급 |
+| 높음 | 높음 |
+| 보통 | 보통 |
+| 낮음 | 낮음 |
+
+#### 작업조 (WORK_SHIFT)
+
+| 코드 | 표시명 |
+|------|--------|
+| 주간 | 주간 |
+| 야간 | 야간 |
+| 주야 | 주야 |
+
+#### 제품유형 (PRODUCT_TYPE)
+
+| 코드 | 표시명 |
+|------|--------|
+| 완제품 | 완제품 |
+| 반제품 | 반제품 |
 
 ---
 
@@ -395,18 +634,35 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
 - 기본 모달 폼
 - 상태 배지
 
-### Phase 2: 컴포넌트 개발 후
+### Phase 2: 컴포넌트 확장 및 개발
 
-1. `v2-tabs` 컴포넌트 개발
-2. `v2-split-panel` 컴포넌트 개발
-3. `v2-table-grouped` 컴포넌트 개발
+1. ~~**`v2-split-panel-layout` 확장**~~ ✅ **완료**
+   - ✅ `displayMode: "custom"` 추가
+   - ✅ `components[]` 필드 지원 (탭 컴포넌트와 동일한 구조)
+   - ✅ 디자인 모드에서 컴포넌트 드래그&드롭 지원
+   - ✅ 컴포넌트 클릭 시 좌측 설정 패널에서 속성 편집
+
+2. ~~**`v2-table-grouped` 신규 개발**~~ ✅ **완료**
+   - ✅ 품목별 그룹핑 (접기/펼치기)
+   - ✅ 그룹 행과 상세 행 구분
+   - ✅ 체크박스 선택 (그룹 단위 / 개별 단위)
+   - ✅ 그룹 요약 (개수, 합계, 평균 등)
 
 ### Phase 3: 타임라인 스케줄러
 
-1. `v2-timeline-scheduler` 컴포넌트 개발
-2. 드래그&드롭 기능
-3. 자동 스케줄 생성 로직
-4. 반제품 연동
+1. **`v2-timeline-scheduler` 신규 개발**
+   - 간트차트 형태 타임라인
+   - 날짜 그리드 (일/주/월 단위)
+   - 생산계획 바 렌더링
+   
+2. **드래그&드롭 기능**
+   - 계획 바 드래그로 날짜 이동
+   - 계획 바 크기 조정 (기간 변경)
+   
+3. **비즈니스 로직**
+   - 자동 스케줄 생성 API
+   - BOM 기반 반제품 계획 연동
+   - 설비별 용량 체크
 
 ---
 
@@ -488,7 +744,25 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
       "position": { "x": 0, "y": 20, "z": 1 },
       "overrides": {
         "type": "v2-table-search-widget",
-        "label": "검색 필터"
+        "label": "검색 필터",
+        "searchFields": [
+          { "field": "item_code", "label": "품목코드", "type": "text" },
+          { "field": "item_name", "label": "품명", "type": "text" },
+          { "field": "plan_date", "label": "계획기간", "type": "daterange" },
+          { 
+            "field": "status", 
+            "label": "상태", 
+            "type": "select",
+            "options": [
+              { "value": "", "label": "전체" },
+              { "value": "계획", "label": "계획" },
+              { "value": "지시", "label": "지시" },
+              { "value": "진행", "label": "진행" },
+              { "value": "완료", "label": "완료" }
+            ]
+          }
+        ],
+        "targetTableId": "comp_table"
       },
       "displayOrder": 0
     },
@@ -501,23 +775,39 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
         "type": "v2-table-list",
         "label": "생산계획 목록",
         "columns": [
-          { "columnName": "plan_no", "displayName": "계획번호", "order": 0, "visible": true, "sortable": true, "format": "text", "align": "left" },
-          { "columnName": "plan_date", "displayName": "계획일자", "order": 1, "visible": true, "sortable": true, "format": "date", "align": "center" },
-          { "columnName": "item_code", "displayName": "품목코드", "order": 2, "visible": true, "sortable": true, "format": "text", "align": "left" },
-          { "columnName": "item_name", "displayName": "품명", "order": 3, "visible": true, "sortable": true, "format": "text", "align": "left" },
-          { "columnName": "plan_qty", "displayName": "계획수량", "order": 4, "visible": true, "sortable": true, "format": "number", "align": "right" },
-          { "columnName": "start_date", "displayName": "시작일", "order": 5, "visible": true, "sortable": true, "format": "date", "align": "center" },
-          { "columnName": "end_date", "displayName": "종료일", "order": 6, "visible": true, "sortable": true, "format": "date", "align": "center" },
-          { "columnName": "due_date", "displayName": "납기일", "order": 7, "visible": true, "sortable": true, "format": "date", "align": "center" },
-          { "columnName": "equipment_name", "displayName": "설비", "order": 8, "visible": true, "sortable": true, "format": "text", "align": "left" },
-          { "columnName": "status", "displayName": "상태", "order": 9, "visible": true, "sortable": true, "format": "text", "align": "center" },
-          { "columnName": "product_type", "displayName": "제품유형", "order": 10, "visible": true, "sortable": true, "format": "text", "align": "center" },
-          { "columnName": "manager_name", "displayName": "담당자", "order": 11, "visible": true, "sortable": true, "format": "text", "align": "left" }
+          { "columnName": "plan_no", "displayName": "계획번호", "order": 0, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 120 },
+          { "columnName": "plan_date", "displayName": "계획일자", "order": 1, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "item_code", "displayName": "품목코드", "order": 2, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 100 },
+          { "columnName": "item_name", "displayName": "품명", "order": 3, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 150 },
+          { "columnName": "plan_qty", "displayName": "계획수량", "order": 4, "visible": true, "sortable": true, "format": "number", "align": "right", "width": 100 },
+          { "columnName": "start_date", "displayName": "시작일", "order": 5, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "end_date", "displayName": "종료일", "order": 6, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "due_date", "displayName": "납기일", "order": 7, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "equipment_name", "displayName": "설비", "order": 8, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 120 },
+          { 
+            "columnName": "status", 
+            "displayName": "상태", 
+            "order": 9, 
+            "visible": true, 
+            "sortable": true, 
+            "format": "badge", 
+            "align": "center", 
+            "width": 80,
+            "badgeConfig": {
+              "계획": { "background": "#dbeafe", "color": "#1e40af" },
+              "지시": { "background": "#fef3c7", "color": "#92400e" },
+              "진행": { "background": "#d1fae5", "color": "#065f46" },
+              "완료": { "background": "#f3f4f6", "color": "#4b5563" }
+            }
+          },
+          { "columnName": "product_type", "displayName": "제품유형", "order": 10, "visible": true, "sortable": true, "format": "text", "align": "center", "width": 80 },
+          { "columnName": "manager_name", "displayName": "담당자", "order": 11, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 100 }
         ],
         "selectedTable": "production_plan_mng",
         "pagination": { "enabled": true, "pageSize": 20, "pageSizeOptions": [10, 20, 50, 100] },
         "checkbox": { "enabled": true, "multiple": true },
-        "horizontalScroll": { "enabled": true, "minColumnWidth": 80, "maxColumnWidth": 200 }
+        "horizontalScroll": { "enabled": true, "minColumnWidth": 80, "maxColumnWidth": 200 },
+        "defaultSort": { "field": "plan_date", "order": "desc" }
       },
       "displayOrder": 1
     },
@@ -525,7 +815,7 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
       "id": "comp_btn_register",
       "url": "@/lib/registry/components/v2-button-primary",
       "size": { "width": 100, "height": 40 },
-      "position": { "x": 1580, "y": 70, "z": 1 },
+      "position": { "x": 1480, "y": 70, "z": 1 },
       "overrides": {
         "text": "신규 등록",
         "type": "v2-button-primary",
@@ -538,12 +828,13 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
       "id": "comp_btn_edit",
       "url": "@/lib/registry/components/v2-button-primary",
       "size": { "width": 80, "height": 40 },
-      "position": { "x": 1690, "y": 70, "z": 1 },
+      "position": { "x": 1590, "y": 70, "z": 1 },
       "overrides": {
         "text": "수정",
         "type": "v2-button-primary",
         "action": { "type": "edit", "modalTitle": "생산계획 수정", "targetScreenId": null },
-        "variant": "secondary"
+        "variant": "secondary",
+        "requireSelection": true
       },
       "displayOrder": 3
     },
@@ -551,14 +842,34 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
       "id": "comp_btn_delete",
       "url": "@/lib/registry/components/v2-button-primary",
       "size": { "width": 80, "height": 40 },
-      "position": { "x": 1780, "y": 70, "z": 1 },
+      "position": { "x": 1680, "y": 70, "z": 1 },
       "overrides": {
         "text": "삭제",
         "type": "v2-button-primary",
         "action": { "type": "delete" },
-        "variant": "danger"
+        "variant": "danger",
+        "requireSelection": true,
+        "enableDataflowControl": true,
+        "dataflowDiagramId": null
       },
       "displayOrder": 4
+    },
+    {
+      "id": "comp_btn_work_order",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 120, "height": 40 },
+      "position": { "x": 1770, "y": 70, "z": 1 },
+      "overrides": {
+        "text": "작업지시 생성",
+        "type": "v2-button-primary",
+        "action": { "type": "custom" },
+        "variant": "primary",
+        "requireSelection": true,
+        "enableDataflowControl": true,
+        "dataflowDiagramId": null,
+        "confirmMessage": "선택한 계획에 대해 작업지시를 생성하시겠습니까?"
+      },
+      "displayOrder": 5
     }
   ]
 }
@@ -566,9 +877,312 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
 
 ---
 
-## 10. 구현 체크리스트
+## 10. 비즈니스 로직 요청서 (간소화 버전)
 
-### 10.1 간소화 버전 (현재 구현 가능)
+> **중요**: 이 섹션은 표준 양식에 따라 작성되었습니다.
+
+```
+=== 비즈니스 로직 요청서 ===
+
+【화면 정보】
+- 화면명: 생산계획관리 (간소화 버전)
+- 회사코드: {COMPANY_CODE}
+- 메뉴ID: {TBD}
+
+【테이블 정보】
+- 메인 테이블: production_plan_mng
+- 디테일 테이블: 없음 (간소화 버전)
+- 관계 FK: 없음
+
+【버튼 목록】
+버튼1:
+  - 버튼명: 신규 등록
+  - 동작 유형: 모달 열기 (insert)
+  - 조건: 없음
+  - 대상 테이블: production_plan_mng
+  - 추가 동작: 
+    1. plan_no 자동채번 (PP-YYYYMMDD-0001)
+    2. plan_date 기본값 = 오늘
+    3. status 기본값 = '계획'
+
+버튼2:
+  - 버튼명: 수정
+  - 동작 유형: 모달 열기 (update)
+  - 조건: 행 선택 필수
+  - 대상 테이블: production_plan_mng
+  - 추가 동작: 없음
+
+버튼3:
+  - 버튼명: 삭제
+  - 동작 유형: 삭제 (delete)
+  - 조건: 
+    1. 행 선택 필수
+    2. status != '진행' AND status != '완료'
+  - 대상 테이블: production_plan_mng
+  - 추가 동작: 삭제 확인 다이얼로그
+
+버튼4:
+  - 버튼명: 작업지시 생성
+  - 동작 유형: 수정 (update)
+  - 조건: 
+    1. 행 선택 필수 (다중 선택 가능)
+    2. status = '계획'
+  - 대상 테이블: production_plan_mng
+  - 추가 동작:
+    1. status를 '지시'로 변경
+    2. work_order_no 자동채번 (WO-YYYYMMDD-0001)
+    3. work_order_mng에 INSERT (작업지시 테이블)
+
+【추가 요구사항】
+- 진행/완료 상태의 계획은 수정/삭제 불가
+- 계획번호(plan_no) 자동채번: PP-YYYYMMDD-0001
+- 품목코드 선택 시 품명 자동 입력
+- 설비 선택 시 시간당 생산능력 자동 입력
+- 시작일/종료일 기반 생산기간 자동 계산
+```
+
+---
+
+## 11. 제어관리 설정 (dataflow_diagrams)
+
+### 11.1 신규 등록 버튼 (기본 저장)
+
+> 기본 INSERT 액션은 화면 디자이너에서 처리되므로 별도 dataflow 불필요
+
+### 11.2 삭제 버튼 (조건부 삭제)
+
+```json
+{
+  "diagram_name": "생산계획관리_삭제",
+  "company_code": "{COMPANY_CODE}",
+  "control": {
+    "actionType": "delete",
+    "triggerType": "before",
+    "conditions": [
+      {
+        "id": "cond-status-not-in-progress",
+        "type": "condition",
+        "field": "status",
+        "operator": "!=",
+        "value": "진행",
+        "dataType": "string"
+      },
+      {
+        "id": "cond-status-not-completed",
+        "type": "condition",
+        "field": "status",
+        "operator": "!=",
+        "value": "완료",
+        "dataType": "string"
+      }
+    ],
+    "conditionLogic": "AND",
+    "errorMessage": "진행 중이거나 완료된 계획은 삭제할 수 없습니다."
+  },
+  "plan": {
+    "actions": [
+      {
+        "id": "action-delete",
+        "actionType": "delete",
+        "targetTable": "production_plan_mng"
+      }
+    ]
+  }
+}
+```
+
+### 11.3 작업지시 생성 버튼
+
+```json
+{
+  "diagram_name": "생산계획관리_작업지시생성",
+  "company_code": "{COMPANY_CODE}",
+  "control": {
+    "actionType": "update",
+    "triggerType": "after",
+    "conditions": [
+      {
+        "id": "cond-status-plan",
+        "type": "condition",
+        "field": "status",
+        "operator": "=",
+        "value": "계획",
+        "dataType": "string"
+      }
+    ],
+    "errorMessage": "계획 상태인 항목만 작업지시를 생성할 수 있습니다."
+  },
+  "plan": {
+    "actions": [
+      {
+        "id": "action-update-status",
+        "actionType": "update",
+        "targetTable": "production_plan_mng",
+        "fieldMappings": [
+          { "targetField": "status", "defaultValue": "지시" },
+          { "targetField": "updated_date", "defaultValue": "#NOW" },
+          { "targetField": "updated_by", "defaultValue": "#USER" }
+        ]
+      },
+      {
+        "id": "action-insert-workorder",
+        "actionType": "insert",
+        "targetTable": "work_order_mng",
+        "fieldMappings": [
+          { "sourceField": "plan_no", "targetField": "plan_no" },
+          { "sourceField": "item_code", "targetField": "item_code" },
+          { "sourceField": "item_name", "targetField": "item_name" },
+          { "sourceField": "plan_qty", "targetField": "order_qty" },
+          { "sourceField": "start_date", "targetField": "work_start_date" },
+          { "sourceField": "end_date", "targetField": "work_end_date" },
+          { "sourceField": "equipment_id", "targetField": "equipment_id" },
+          { "sourceField": "equipment_name", "targetField": "equipment_name" },
+          { "targetField": "status", "defaultValue": "대기" },
+          { "targetField": "company_code", "defaultValue": "#COMPANY" },
+          { "targetField": "created_date", "defaultValue": "#NOW" },
+          { "targetField": "created_by", "defaultValue": "#USER" }
+        ]
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 12. 컴포넌트 연동 설정 (간소화 버전)
+
+### 12.1 이벤트 흐름
+
+```
+[화면 진입]
+    │
+    ▼
+v2-table-search-widget (검색 필터)
+    │ onFilterChange
+    ▼
+v2-table-list (생산계획 목록)
+    │ onRowSelect
+    ▼
+[버튼 활성화/비활성화]
+    │
+    ├── [신규 등록] 클릭 → 등록 모달 오픈
+    │                       │ onSave
+    │                       ▼
+    │                   INSERT → 테이블 Refresh
+    │
+    ├── [수정] 클릭 → 수정 모달 오픈
+    │                  │ onSave
+    │                  ▼
+    │              UPDATE → 테이블 Refresh
+    │
+    ├── [삭제] 클릭 → 조건 체크
+    │                  │ 통과 시
+    │                  ▼
+    │              DELETE → 테이블 Refresh
+    │
+    └── [작업지시 생성] 클릭 → 조건 체크
+                               │ 통과 시
+                               ▼
+                           UPDATE + INSERT → 테이블 Refresh
+```
+
+### 12.2 연동 설정 테이블
+
+| 소스 컴포넌트 | 이벤트 | 대상 컴포넌트 | 동작 |
+|---------------|--------|---------------|------|
+| search-widget | onFilterChange | main-table | 필터 적용 후 재조회 |
+| main-table | onRowSelect | btn-edit, btn-delete | 버튼 활성화 |
+| main-table | onRowDoubleClick | modal-edit | 수정 모달 오픈 |
+| btn-register | onClick | modal-register | 등록 모달 오픈 |
+| btn-edit | onClick | modal-edit | 수정 모달 오픈 |
+| btn-delete | onClick | dataflow | 삭제 실행 |
+| btn-work-order | onClick | dataflow | 작업지시 생성 실행 |
+| modal-* | onSave | main-table | 테이블 새로고침 |
+
+---
+
+## 13. 사용자 사용 예시 시나리오 (간소화 버전)
+
+### 시나리오 1: 생산계획 조회
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 화면 진입 | 전체 생산계획 목록 표시 (최근순) |
+| 2 | 품목코드 입력 후 [조회] 클릭 | 해당 품목의 생산계획만 필터링 |
+| 3 | 상태 드롭다운에서 '계획' 선택 | 계획 상태인 항목만 표시 |
+| 4 | 컬럼 헤더 클릭 | 해당 컬럼 기준 정렬 |
+
+### 시나리오 2: 생산계획 등록
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | [신규 등록] 버튼 클릭 | 등록 모달 오픈 |
+| 2 | 품목코드 검색/선택 | 품명 자동 입력 |
+| 3 | 계획수량, 시작일, 종료일 입력 | 입력 필드 채움 |
+| 4 | 설비 선택 | 시간당 생산능력 표시 |
+| 5 | [저장] 버튼 클릭 | 저장 완료, 목록에 신규 행 표시 |
+
+### 시나리오 3: 생산계획 수정
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 목록에서 행 선택 | 행 하이라이트 |
+| 2 | [수정] 버튼 클릭 (또는 더블클릭) | 수정 모달 오픈 (기존 값 로드) |
+| 3 | 필요한 필드 수정 | 값 변경 |
+| 4 | [저장] 버튼 클릭 | 저장 완료, 목록 갱신 |
+
+### 시나리오 4: 생산계획 삭제
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 삭제할 행 체크박스 선택 | 선택 표시 |
+| 2 | [삭제] 버튼 클릭 | 삭제 확인 다이얼로그 표시 |
+| 3-a | (상태가 계획/지시) 확인 클릭 | 삭제 완료, 목록에서 제거 |
+| 3-b | (상태가 진행/완료) 확인 클릭 | "삭제할 수 없습니다" 오류 메시지 |
+
+### 시나리오 5: 작업지시 생성
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 계획 상태인 행 체크박스 선택 (다중 가능) | 선택 표시 |
+| 2 | [작업지시 생성] 버튼 클릭 | 확인 다이얼로그 표시 |
+| 3-a | (상태가 계획) 확인 클릭 | 상태가 '지시'로 변경, 작업지시번호 생성 |
+| 3-b | (상태가 계획 아님) 확인 클릭 | "계획 상태만 가능합니다" 오류 메시지 |
+
+---
+
+## 14. 검증 체크리스트
+
+### 14.1 기능 테스트
+
+- [ ] 데이터 조회가 정상 동작하는가?
+- [ ] 검색 필터가 정상 동작하는가?
+- [ ] 신규 등록이 정상 동작하는가?
+- [ ] 수정이 정상 동작하는가?
+- [ ] 삭제가 정상 동작하는가? (조건 포함)
+- [ ] 작업지시 생성이 정상 동작하는가? (조건 포함)
+- [ ] 페이지네이션이 정상 동작하는가?
+- [ ] 정렬이 정상 동작하는가?
+
+### 14.2 데이터 검증
+
+- [ ] 계획번호(plan_no) 자동채번이 중복 없이 생성되는가?
+- [ ] 품목코드 선택 시 품명이 자동 입력되는가?
+- [ ] 설비 선택 시 시간당 생산능력이 표시되는가?
+- [ ] company_code 필터링이 적용되는가? (멀티테넌시)
+
+### 14.3 비즈니스 룰 검증
+
+- [ ] 진행/완료 상태는 삭제 불가한가?
+- [ ] 계획 상태만 작업지시 생성 가능한가?
+- [ ] 작업지시 생성 시 work_order_mng에 데이터가 INSERT되는가?
+
+---
+
+## 15. 구현 체크리스트
+
+### 15.1 간소화 버전 (현재 구현 가능)
 
 | 체크 | 항목 | 설명 |
 |:----:|------|------|
@@ -576,26 +1190,37 @@ V2 컴포넌트로 기본 CRUD 화면 구현:
 | ☐ | **화면 정의** | `screen_definitions` INSERT |
 | ☐ | **모달 화면 생성** | 등록/수정 모달 화면 생성 |
 | ☐ | **메인 화면 생성** | `screen_layouts_v2` INSERT |
+| ☐ | **제어관리 설정** | `dataflow_diagrams` INSERT (삭제, 작업지시 생성) |
 | ☐ | **메뉴 연결** | 대상 메뉴에 화면 할당 |
 | ☐ | **기본 CRUD 테스트** | 등록/수정/삭제/조회 테스트 |
+| ☐ | **비즈니스 룰 테스트** | 조건부 삭제, 작업지시 생성 테스트 |
 
-### 10.2 전체 버전 (향후 구현)
+### 15.2 전체 버전 (향후 구현)
 
 | 체크 | 항목 | 설명 |
 |:----:|------|------|
-| ☐ | **v2-tabs 개발** | 탭 컴포넌트 개발 |
-| ☐ | **v2-split-panel 개발** | 분할 패널 컴포넌트 개발 |
-| ☐ | **v2-table-grouped 개발** | 그룹화 테이블 컴포넌트 개발 |
-| ☐ | **v2-timeline-scheduler 개발** | 타임라인 스케줄러 개발 |
+| ✅ | ~~**v2-split-panel-layout 확장**~~ | `displayMode: "custom"` + `components[]` 추가 **완료** |
+| ✅ | ~~**v2-table-grouped 개발**~~ | 그룹화 테이블 컴포넌트 **완료** |
+| ☐ | **v2-timeline-scheduler 개발** | 타임라인/간트차트 스케줄러 |
+| ☐ | **드래그&드롭 기능** | 타임라인 바 드래그 이동/크기 조정 |
 | ☐ | **자동 스케줄 로직** | 자동 스케줄 생성 백엔드 API |
 | ☐ | **반제품 연동** | BOM 기반 반제품 계획 생성 |
-| ☐ | **드래그&드롭** | 타임라인 드래그 이동 기능 |
+| ☐ | **정식 버전 화면 구성** | 커스텀 모드로 탭+테이블+타임라인 조합 |
 
 ---
 
-## 11. 관련 문서
+## 16. 관련 문서
 
 - [수주관리](../02_sales/order.md)
 - [품목정보](../01_master-data/item-info.md)
-- [설비관리](../05_equipment/equipment-info.md) (예정)
-- [BOM관리](../01_master-data/bom-info.md) (예정)
+- [설비관리](../05_equipment/equipment-info.md)
+- [BOM관리](../01_master-data/bom.md)
+- [작업지시](./work-order.md)
+
+---
+
+## 17. 참고: 표준 가이드
+
+- [화면개발 표준 가이드](../화면개발_표준_가이드.md)
+- [V2 컴포넌트 사용 가이드](../00_analysis/v2-component-usage-guide.md)
+- [전체 화면 분석 보고서](../00_analysis/full-screen-analysis.md)
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index eb7ecce5..b86facfd 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -202,7 +202,89 @@ function ScreenViewPage() {
     }
   }, [screenId]);
 
-  // 🆕 autoFill 자동 입력 초기화
+  // 🆕 메인 테이블 데이터 자동 로드 (단일 레코드 폼)
+  // 화면의 메인 테이블에서 사용자 회사 코드로 데이터를 조회하여 폼에 자동 채움
+  useEffect(() => {
+    const loadMainTableData = async () => {
+      if (!screen || !layout || !layout.components || !companyCode) {
+        return;
+      }
+
+      const mainTableName = screen.tableName;
+      if (!mainTableName) {
+        return;
+      }
+
+      // 테이블 위젯이 없는 경우에만 자동 로드 (테이블이 있으면 행 선택으로 데이터 로드)
+      const hasTableWidget = layout.components.some(
+        (comp: any) => 
+          comp.componentType === "table-list" || 
+          comp.componentType === "v2-table-list" ||
+          comp.widgetType === "table"
+      );
+
+      if (hasTableWidget) {
+        console.log("📋 테이블 위젯이 있어 자동 로드 건너뜀 (행 선택으로 데이터 로드)");
+        return;
+      }
+
+      // 인풋 컴포넌트들 중 메인 테이블의 컬럼을 사용하는 것들 찾기
+      const inputComponents = layout.components.filter((comp: any) => {
+        const compType = comp.componentType || comp.widgetType;
+        const isInputType = compType?.includes("input") || 
+                           compType?.includes("select") || 
+                           compType?.includes("textarea") ||
+                           compType?.includes("v2-input") ||
+                           compType?.includes("v2-select");
+        const hasColumnName = !!(comp as any).columnName;
+        return isInputType && hasColumnName;
+      });
+
+      if (inputComponents.length === 0) {
+        return;
+      }
+
+      // 메인 테이블에서 현재 회사의 데이터 조회
+      try {
+        const { tableTypeApi } = await import("@/lib/api/screen");
+        
+        // company_code로 필터링하여 단일 레코드 조회
+        const result = await tableTypeApi.getTableRecord(
+          mainTableName,
+          "company_code",
+          companyCode,
+          "*" // 모든 컬럼
+        );
+
+        if (result && result.record) {
+          console.log("📦 메인 테이블 데이터 자동 로드:", mainTableName, result.record);
+          
+          // 각 인풋 컴포넌트에 해당하는 데이터 채우기
+          const newFormData: Record<string, any> = {};
+          inputComponents.forEach((comp: any) => {
+            const columnName = comp.columnName;
+            if (columnName && result.record[columnName] !== undefined) {
+              newFormData[columnName] = result.record[columnName];
+            }
+          });
+
+          if (Object.keys(newFormData).length > 0) {
+            setFormData((prev) => ({
+              ...prev,
+              ...newFormData,
+            }));
+          }
+        }
+      } catch (error) {
+        console.log("메인 테이블 자동 로드 실패 (정상일 수 있음):", error);
+        // 에러는 무시 - 데이터가 없거나 권한이 없을 수 있음
+      }
+    };
+
+    loadMainTableData();
+  }, [screen, layout, companyCode]);
+
+  // 🆕 개별 autoFill 처리 (메인 테이블과 다른 테이블에서 조회하는 경우)
   useEffect(() => {
     const initAutoFill = async () => {
       if (!layout || !layout.components || !user) {
@@ -215,7 +297,7 @@ function ScreenViewPage() {
           const widget = comp as any;
           const fieldName = widget.columnName || widget.id;
 
-          // autoFill 처리
+          // autoFill 처리 (명시적으로 설정된 경우만)
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 75eec128..886e3977 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -39,6 +39,8 @@ interface RealtimePreviewProps {
   onUpdateComponent?: (updatedComponent: any) => void; // 🆕 컴포넌트 업데이트 콜백
   onSelectTabComponent?: (tabId: string, compId: string, comp: any) => void; // 🆕 탭 내부 컴포넌트 선택 콜백
   selectedTabComponentId?: string; // 🆕 선택된 탭 컴포넌트 ID
+  onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void; // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+  selectedPanelComponentId?: string; // 🆕 선택된 분할 패널 컴포넌트 ID
   onResize?: (componentId: string, newSize: { width: number; height: number }) => void; // 🆕 리사이즈 콜백
 
   // 버튼 액션을 위한 props
@@ -140,6 +142,8 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   onUpdateComponent, // 🆕 컴포넌트 업데이트 콜백
   onSelectTabComponent, // 🆕 탭 내부 컴포넌트 선택 콜백
   selectedTabComponentId, // 🆕 선택된 탭 컴포넌트 ID
+  onSelectPanelComponent, // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+  selectedPanelComponentId, // 🆕 선택된 분할 패널 컴포넌트 ID
   onResize, // 🆕 리사이즈 콜백
 }) => {
   // 🆕 화면 다국어 컨텍스트
@@ -640,6 +644,8 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
           onUpdateComponent={onUpdateComponent}
           onSelectTabComponent={onSelectTabComponent}
           selectedTabComponentId={selectedTabComponentId}
+          onSelectPanelComponent={onSelectPanelComponent}
+          selectedPanelComponentId={selectedPanelComponentId}
         />
       </div>
 
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index b05f03b6..a0ed5574 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -177,13 +177,22 @@ export default function ScreenDesigner({ selectedScreen, onBackToList, onScreenU
     component: any; // 탭 내부 컴포넌트 데이터
   } | null>(null);
 
+  // 🆕 분할 패널 내부 컴포넌트 선택 상태
+  const [selectedPanelComponentInfo, setSelectedPanelComponentInfo] = useState<{
+    splitPanelId: string; // 분할 패널 컴포넌트 ID
+    panelSide: "left" | "right"; // 좌측/우측 패널
+    componentId: string; // 패널 내부 컴포넌트 ID
+    component: any; // 패널 내부 컴포넌트 데이터
+  } | null>(null);
+
   // 컴포넌트 선택 시 통합 패널 자동 열기
   const handleComponentSelect = useCallback(
     (component: ComponentData | null) => {
       setSelectedComponent(component);
-      // 일반 컴포넌트 선택 시 탭 내부 컴포넌트 선택 해제
+      // 일반 컴포넌트 선택 시 탭 내부 컴포넌트/분할 패널 내부 컴포넌트 선택 해제
       if (component) {
         setSelectedTabComponentInfo(null);
+        setSelectedPanelComponentInfo(null);
       }
 
       // 컴포넌트가 선택되면 통합 패널 자동 열기
@@ -209,8 +218,32 @@ export default function ScreenDesigner({ selectedScreen, onBackToList, onScreenU
         componentId: compId,
         component: comp,
       });
-      // 탭 내부 컴포넌트 선택 시 일반 컴포넌트 선택 해제
+      // 탭 내부 컴포넌트 선택 시 일반 컴포넌트/분할 패널 내부 컴포넌트 선택 해제
       setSelectedComponent(null);
+      setSelectedPanelComponentInfo(null);
+      openPanel("v2");
+    },
+    [openPanel],
+  );
+
+  // 🆕 분할 패널 내부 컴포넌트 선택 핸들러
+  const handleSelectPanelComponent = useCallback(
+    (splitPanelId: string, panelSide: "left" | "right", compId: string, comp: any) => {
+      if (!compId) {
+        // 패널 영역 빈 공간 클릭 시 선택 해제
+        setSelectedPanelComponentInfo(null);
+        return;
+      }
+      
+      setSelectedPanelComponentInfo({
+        splitPanelId,
+        panelSide,
+        componentId: compId,
+        component: comp,
+      });
+      // 분할 패널 내부 컴포넌트 선택 시 일반 컴포넌트/탭 내부 컴포넌트 선택 해제
+      setSelectedComponent(null);
+      setSelectedTabComponentInfo(null);
       openPanel("v2");
     },
     [openPanel],
@@ -2509,6 +2542,72 @@ export default function ScreenDesigner({ selectedScreen, onBackToList, onScreenU
         }
       }
 
+      // 🎯 분할 패널 커스텀 모드 컨테이너 내부 드롭 처리
+      const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
+      if (splitPanelContainer) {
+        const containerId = splitPanelContainer.getAttribute("data-component-id");
+        const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
+        if (containerId && panelSide) {
+          const targetComponent = layout.components.find((c) => c.id === containerId);
+          const compType = (targetComponent as any)?.componentType;
+          if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
+            const currentConfig = (targetComponent as any).componentConfig || {};
+            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+            const panelConfig = currentConfig[panelKey] || {};
+            const currentComponents = panelConfig.components || [];
+            
+            // 드롭 위치 계산
+            const panelRect = splitPanelContainer.getBoundingClientRect();
+            const dropX = (e.clientX - panelRect.left) / zoomLevel;
+            const dropY = (e.clientY - panelRect.top) / zoomLevel;
+            
+            // 새 컴포넌트 생성
+            const componentType = component.id || component.componentType || "v2-text-display";
+            
+            console.log("🎯 분할 패널에 컴포넌트 드롭:", {
+              componentId: component.id,
+              componentType: componentType,
+              panelSide: panelSide,
+              dropPosition: { x: dropX, y: dropY },
+            });
+            
+            const newPanelComponent = {
+              id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+              componentType: componentType,
+              label: component.name || component.label || "새 컴포넌트",
+              position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+              size: component.defaultSize || { width: 200, height: 100 },
+              componentConfig: component.defaultConfig || {},
+            };
+            
+            const updatedPanelConfig = {
+              ...panelConfig,
+              components: [...currentComponents, newPanelComponent],
+            };
+            
+            const updatedComponent = {
+              ...targetComponent,
+              componentConfig: {
+                ...currentConfig,
+                [panelKey]: updatedPanelConfig,
+              },
+            };
+            
+            const newLayout = {
+              ...layout,
+              components: layout.components.map((c) =>
+                c.id === containerId ? updatedComponent : c
+              ),
+            };
+            
+            setLayout(newLayout);
+            saveToHistory(newLayout);
+            toast.success(`컴포넌트가 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
+            return; // 분할 패널 처리 완료
+          }
+        }
+      }
+
       const rect = canvasRef.current?.getBoundingClientRect();
       if (!rect) return;
 
@@ -2996,6 +3095,105 @@ export default function ScreenDesigner({ selectedScreen, onBackToList, onScreenU
           }
         }
 
+        // 🎯 분할 패널 커스텀 모드 컨테이너 내부에 컬럼 드롭 시 처리
+        const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
+        if (splitPanelContainer && type === "column" && column) {
+          const containerId = splitPanelContainer.getAttribute("data-component-id");
+          const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
+          if (containerId && panelSide) {
+            const targetComponent = layout.components.find((c) => c.id === containerId);
+            const compType = (targetComponent as any)?.componentType;
+            if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
+              const currentConfig = (targetComponent as any).componentConfig || {};
+              const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+              const panelConfig = currentConfig[panelKey] || {};
+              const currentComponents = panelConfig.components || [];
+              
+              // 드롭 위치 계산
+              const panelRect = splitPanelContainer.getBoundingClientRect();
+              const dropX = (e.clientX - panelRect.left) / zoomLevel;
+              const dropY = (e.clientY - panelRect.top) / zoomLevel;
+              
+              // V2 컴포넌트 매핑 사용
+              const v2Mapping = createV2ConfigFromColumn({
+                widgetType: column.widgetType,
+                columnName: column.columnName,
+                columnLabel: column.columnLabel,
+                codeCategory: column.codeCategory,
+                inputType: column.inputType,
+                required: column.required,
+                detailSettings: column.detailSettings,
+                referenceTable: column.referenceTable,
+                referenceColumn: column.referenceColumn,
+                displayColumn: column.displayColumn,
+              });
+              
+              // 웹타입별 기본 크기 계산
+              const getPanelComponentSize = (widgetType: string) => {
+                const sizeMap: Record<string, { width: number; height: number }> = {
+                  text: { width: 200, height: 36 },
+                  number: { width: 150, height: 36 },
+                  decimal: { width: 150, height: 36 },
+                  date: { width: 180, height: 36 },
+                  datetime: { width: 200, height: 36 },
+                  select: { width: 200, height: 36 },
+                  category: { width: 200, height: 36 },
+                  code: { width: 200, height: 36 },
+                  entity: { width: 220, height: 36 },
+                  boolean: { width: 120, height: 36 },
+                  checkbox: { width: 120, height: 36 },
+                  textarea: { width: 300, height: 100 },
+                  file: { width: 250, height: 80 },
+                };
+                return sizeMap[widgetType] || { width: 200, height: 36 };
+              };
+              
+              const componentSize = getPanelComponentSize(column.widgetType);
+              
+              const newPanelComponent = {
+                id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+                componentType: v2Mapping.componentType,
+                label: column.columnLabel || column.columnName,
+                position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+                size: componentSize,
+                inputType: column.inputType || column.widgetType,
+                widgetType: column.widgetType,
+                componentConfig: {
+                  ...v2Mapping.componentConfig,
+                  columnName: column.columnName,
+                  tableName: column.tableName,
+                  inputType: column.inputType || column.widgetType,
+                },
+              };
+              
+              const updatedPanelConfig = {
+                ...panelConfig,
+                components: [...currentComponents, newPanelComponent],
+              };
+              
+              const updatedComponent = {
+                ...targetComponent,
+                componentConfig: {
+                  ...currentConfig,
+                  [panelKey]: updatedPanelConfig,
+                },
+              };
+              
+              const newLayout = {
+                ...layout,
+                components: layout.components.map((c) =>
+                  c.id === containerId ? updatedComponent : c
+                ),
+              };
+              
+              setLayout(newLayout);
+              saveToHistory(newLayout);
+              toast.success(`컬럼이 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
+              return;
+            }
+          }
+        }
+
         const rect = canvasRef.current?.getBoundingClientRect();
         if (!rect) return;
 
@@ -5123,6 +5321,158 @@ export default function ScreenDesigner({ selectedScreen, onBackToList, onScreenU
                             </div>
                           );
                         })()
+                      ) : selectedPanelComponentInfo ? (
+                        // 🆕 분할 패널 내부 컴포넌트 선택 시 V2PropertiesPanel 사용
+                        (() => {
+                          const panelComp = selectedPanelComponentInfo.component;
+                          
+                          // 분할 패널 내부 컴포넌트를 ComponentData 형식으로 변환
+                          const panelComponentAsComponentData: ComponentData = {
+                            id: panelComp.id,
+                            type: "component",
+                            componentType: panelComp.componentType,
+                            label: panelComp.label,
+                            position: panelComp.position || { x: 0, y: 0 },
+                            size: panelComp.size || { width: 200, height: 100 },
+                            componentConfig: panelComp.componentConfig || {},
+                            style: panelComp.style || {},
+                          } as ComponentData;
+
+                          // 분할 패널 내부 컴포넌트용 속성 업데이트 핸들러
+                          const updatePanelComponentProperty = (componentId: string, path: string, value: any) => {
+                            const { splitPanelId, panelSide } = selectedPanelComponentInfo;
+                            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+                            
+                            setLayout((prevLayout) => {
+                              const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
+                              if (!splitPanelComponent) return prevLayout;
+
+                              const currentConfig = (splitPanelComponent as any).componentConfig || {};
+                              const panelConfig = currentConfig[panelKey] || {};
+                              const components = panelConfig.components || [];
+
+                              // 해당 컴포넌트 찾기
+                              const targetCompIndex = components.findIndex((c: any) => c.id === componentId);
+                              if (targetCompIndex === -1) return prevLayout;
+
+                              // 컴포넌트 속성 업데이트
+                              const targetComp = components[targetCompIndex];
+                              const updatedComp = path === "style" 
+                                ? { ...targetComp, style: value }
+                                : path.includes(".")
+                                  ? (() => {
+                                      const parts = path.split(".");
+                                      let obj = { ...targetComp };
+                                      let current: any = obj;
+                                      for (let i = 0; i < parts.length - 1; i++) {
+                                        current[parts[i]] = { ...current[parts[i]] };
+                                        current = current[parts[i]];
+                                      }
+                                      current[parts[parts.length - 1]] = value;
+                                      return obj;
+                                    })()
+                                  : { ...targetComp, [path]: value };
+
+                              const updatedComponents = [
+                                ...components.slice(0, targetCompIndex),
+                                updatedComp,
+                                ...components.slice(targetCompIndex + 1),
+                              ];
+
+                              const updatedComponent = {
+                                ...splitPanelComponent,
+                                componentConfig: {
+                                  ...currentConfig,
+                                  [panelKey]: {
+                                    ...panelConfig,
+                                    components: updatedComponents,
+                                  },
+                                },
+                              };
+
+                              // selectedPanelComponentInfo 업데이트
+                              setSelectedPanelComponentInfo(prev => 
+                                prev ? { ...prev, component: updatedComp } : null
+                              );
+
+                              return {
+                                ...prevLayout,
+                                components: prevLayout.components.map((c) =>
+                                  c.id === splitPanelId ? updatedComponent : c
+                                ),
+                              };
+                            });
+                          };
+
+                          // 분할 패널 내부 컴포넌트 삭제 핸들러
+                          const deletePanelComponent = (componentId: string) => {
+                            const { splitPanelId, panelSide } = selectedPanelComponentInfo;
+                            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+                            
+                            setLayout((prevLayout) => {
+                              const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
+                              if (!splitPanelComponent) return prevLayout;
+
+                              const currentConfig = (splitPanelComponent as any).componentConfig || {};
+                              const panelConfig = currentConfig[panelKey] || {};
+                              const components = panelConfig.components || [];
+
+                              const updatedComponents = components.filter((c: any) => c.id !== componentId);
+
+                              const updatedComponent = {
+                                ...splitPanelComponent,
+                                componentConfig: {
+                                  ...currentConfig,
+                                  [panelKey]: {
+                                    ...panelConfig,
+                                    components: updatedComponents,
+                                  },
+                                },
+                              };
+
+                              setSelectedPanelComponentInfo(null);
+
+                              return {
+                                ...prevLayout,
+                                components: prevLayout.components.map((c) =>
+                                  c.id === splitPanelId ? updatedComponent : c
+                                ),
+                              };
+                            });
+                          };
+
+                          return (
+                            <div className="flex h-full flex-col">
+                              <div className="flex items-center justify-between border-b px-4 py-2">
+                                <span className="text-xs text-muted-foreground">
+                                  분할 패널 ({selectedPanelComponentInfo.panelSide === "left" ? "좌측" : "우측"}) 컴포넌트
+                                </span>
+                                <button
+                                  className="text-xs text-muted-foreground hover:text-foreground"
+                                  onClick={() => setSelectedPanelComponentInfo(null)}
+                                >
+                                  선택 해제
+                                </button>
+                              </div>
+                              <div className="flex-1 overflow-hidden">
+                                <V2PropertiesPanel
+                                  selectedComponent={panelComponentAsComponentData}
+                                  tables={tables}
+                                  onUpdateProperty={updatePanelComponentProperty}
+                                  onDeleteComponent={deletePanelComponent}
+                                  currentTable={tables.length > 0 ? tables[0] : undefined}
+                                  currentTableName={selectedScreen?.tableName}
+                                  currentScreenCompanyCode={selectedScreen?.companyCode}
+                                  onStyleChange={(style) => {
+                                    updatePanelComponentProperty(panelComp.id, "style", style);
+                                  }}
+                                  allComponents={layout.components}
+                                  menuObjid={menuObjid}
+                                />
+                              </div>
+                            </div>
+                          );
+                        })()
                       ) : (
                         <V2PropertiesPanel
                           selectedComponent={selectedComponent || undefined}
@@ -5514,6 +5864,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList, onScreenU
                                     ? selectedTabComponentInfo.componentId
                                     : undefined
                                 }
+                                // 🆕 분할 패널 내부 컴포넌트 선택 핸들러
+                                onSelectPanelComponent={(panelSide, compId, comp) => 
+                                  handleSelectPanelComponent(component.id, panelSide, compId, comp)
+                                }
+                                selectedPanelComponentId={
+                                  selectedPanelComponentInfo?.splitPanelId === component.id
+                                    ? selectedPanelComponentInfo.componentId
+                                    : undefined
+                                }
                               >
                                 {/* 컨테이너, 그룹, 영역, 컴포넌트의 자식 컴포넌트들 렌더링 (레이아웃은 독립적으로 렌더링) */}
                                 {(component.type === "group" ||
diff --git a/frontend/components/screen/panels/TablesPanel.tsx b/frontend/components/screen/panels/TablesPanel.tsx
index 480222a6..12dcc19a 100644
--- a/frontend/components/screen/panels/TablesPanel.tsx
+++ b/frontend/components/screen/panels/TablesPanel.tsx
@@ -431,7 +431,8 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 }
 
                 return (
-                  <div key={joinTable.tableName} className="space-y-1">
+                  // 엔티티 조인 테이블에 고유 접두사 추가 (메인 테이블과 키 중복 방지)
+                  <div key={`entity-join-${joinTable.tableName}`} className="space-y-1">
                     {/* 조인 테이블 헤더 */}
                     <div
                       className="flex cursor-pointer items-center justify-between rounded-md bg-cyan-50 p-2 hover:bg-cyan-100"
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index d3c911ef..088b0644 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -143,6 +143,9 @@ export interface DynamicComponentRendererProps {
   // 🆕 탭 내부 컴포넌트 선택 콜백
   onSelectTabComponent?: (tabId: string, compId: string, comp: any) => void;
   selectedTabComponentId?: string;
+  // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+  onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void;
+  selectedPanelComponentId?: string;
   flowSelectedStepId?: number | null;
   onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
   // 테이블 새로고침 키
@@ -502,6 +505,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 🆕 탭 내부 컴포넌트 선택 콜백
           onSelectTabComponent: props.onSelectTabComponent,
           selectedTabComponentId: props.selectedTabComponentId,
+          // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+          onSelectPanelComponent: props.onSelectPanelComponent,
+          selectedPanelComponentId: props.selectedPanelComponentId,
         };
 
         // 렌더러가 클래스인지 함수인지 확인
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 593c3e8b..6519230d 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -106,6 +106,8 @@ import "./v2-table-search-widget";
 import "./v2-tabs-widget/tabs-component";
 import "./v2-category-manager/V2CategoryManagerRenderer";
 import "./v2-media/V2MediaRenderer"; // V2 통합 미디어 컴포넌트
+import "./v2-table-grouped/TableGroupedRenderer"; // 그룹화 테이블
+import "./v2-timeline-scheduler/TimelineSchedulerRenderer"; // 타임라인 스케줄러
 import "./v2-input/V2InputRenderer"; // V2 통합 입력 컴포넌트
 import "./v2-select/V2SelectRenderer"; // V2 통합 선택 컴포넌트
 import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index 725f6bc0..8a5898e0 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -18,6 +18,8 @@ import {
   ChevronRight,
   Pencil,
   Trash2,
+  Settings,
+  Move,
 } from "lucide-react";
 import { dataApi } from "@/lib/api/data";
 import { entityJoinApi } from "@/lib/api/entityJoin";
@@ -37,9 +39,16 @@ import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { TableFilter, ColumnVisibility, GroupSumConfig } from "@/types/table-options";
 import { useAuth } from "@/hooks/useAuth";
 import { useSplitPanel } from "./SplitPanelContext";
+import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+import { PanelInlineComponent } from "./types";
+import { cn } from "@/lib/utils";
 
 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
   // 추가 props
+  onUpdateComponent?: (component: any) => void;
+  // 🆕 패널 내부 컴포넌트 선택 콜백 (탭 컴포넌트와 동일 구조)
+  onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: PanelInlineComponent) => void;
+  selectedPanelComponentId?: string;
 }
 
 /**
@@ -52,6 +61,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   isSelected = false,
   isPreview = false,
   onClick,
+  onUpdateComponent,
+  onSelectPanelComponent,
+  selectedPanelComponentId: externalSelectedPanelComponentId,
   ...props
 }) => {
   const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
@@ -181,6 +193,207 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightCategoryMappings, setRightCategoryMappings] = useState<
     Record<string, Record<string, { label: string; color?: string }>>
   >({}); // 우측 카테고리 매핑
+
+  // 🆕 커스텀 모드: 드래그/리사이즈 상태
+  const [draggingCompId, setDraggingCompId] = useState<string | null>(null);
+  const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null);
+  const [resizingCompId, setResizingCompId] = useState<string | null>(null);
+  const [resizeSize, setResizeSize] = useState<{ width: number; height: number } | null>(null);
+  // 🆕 외부에서 전달받은 선택 상태 사용 (탭 컴포넌트와 동일 구조)
+  const selectedPanelComponentId = externalSelectedPanelComponentId || null;
+  const rafRef = useRef<number | null>(null);
+
+  // 🆕 10px 단위 스냅 함수
+  const snapTo10 = useCallback((value: number) => Math.round(value / 10) * 10, []);
+
+  // 🆕 커스텀 모드: 컴포넌트 삭제 핸들러
+  const handleRemovePanelComponent = useCallback(
+    (panelSide: "left" | "right", compId: string) => {
+      if (!onUpdateComponent) return;
+      
+      const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+      const panelConfig = componentConfig[panelKey] || {};
+      const updatedComponents = (panelConfig.components || []).filter(
+        (c: PanelInlineComponent) => c.id !== compId
+      );
+      
+      onUpdateComponent({
+        ...component,
+        componentConfig: {
+          ...componentConfig,
+          [panelKey]: {
+            ...panelConfig,
+            components: updatedComponents,
+          },
+        },
+      });
+    },
+    [component, componentConfig, onUpdateComponent]
+  );
+
+  // 🆕 커스텀 모드: 드래그 시작 핸들러
+  const handlePanelDragStart = useCallback(
+    (e: React.MouseEvent, panelSide: "left" | "right", comp: PanelInlineComponent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      
+      const startMouseX = e.clientX;
+      const startMouseY = e.clientY;
+      const startLeft = comp.position?.x || 0;
+      const startTop = comp.position?.y || 0;
+      
+      setDraggingCompId(comp.id);
+      setDragPosition({ x: startLeft, y: startTop });
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+        }
+        
+        rafRef.current = requestAnimationFrame(() => {
+          const deltaX = moveEvent.clientX - startMouseX;
+          const deltaY = moveEvent.clientY - startMouseY;
+          const newX = Math.max(0, startLeft + deltaX);
+          const newY = Math.max(0, startTop + deltaY);
+          setDragPosition({ x: newX, y: newY });
+        });
+      };
+
+      const handleMouseUp = (upEvent: MouseEvent) => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+        
+        const deltaX = upEvent.clientX - startMouseX;
+        const deltaY = upEvent.clientY - startMouseY;
+        const newX = Math.max(0, startLeft + deltaX);
+        const newY = Math.max(0, startTop + deltaY);
+        
+        setDraggingCompId(null);
+        setDragPosition(null);
+
+        if (onUpdateComponent) {
+          const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+          const panelConfig = componentConfig[panelKey] || {};
+          const updatedComponents = (panelConfig.components || []).map((c: PanelInlineComponent) =>
+            c.id === comp.id
+              ? { ...c, position: { x: Math.round(newX), y: Math.round(newY) } }
+              : c
+          );
+          
+          onUpdateComponent({
+            ...component,
+            componentConfig: {
+              ...componentConfig,
+              [panelKey]: {
+                ...panelConfig,
+                components: updatedComponents,
+              },
+            },
+          });
+        }
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [component, componentConfig, onUpdateComponent]
+  );
+
+  // 🆕 커스텀 모드: 리사이즈 시작 핸들러
+  const handlePanelResizeStart = useCallback(
+    (e: React.MouseEvent, panelSide: "left" | "right", comp: PanelInlineComponent, direction: "e" | "s" | "se") => {
+      e.stopPropagation();
+      e.preventDefault();
+      
+      const startMouseX = e.clientX;
+      const startMouseY = e.clientY;
+      const startWidth = comp.size?.width || 200;
+      const startHeight = comp.size?.height || 100;
+      
+      setResizingCompId(comp.id);
+      setResizeSize({ width: startWidth, height: startHeight });
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+        }
+        
+        rafRef.current = requestAnimationFrame(() => {
+          const deltaX = moveEvent.clientX - startMouseX;
+          const deltaY = moveEvent.clientY - startMouseY;
+          
+          let newWidth = startWidth;
+          let newHeight = startHeight;
+          
+          if (direction === "e" || direction === "se") {
+            newWidth = snapTo10(Math.max(50, startWidth + deltaX));
+          }
+          if (direction === "s" || direction === "se") {
+            newHeight = snapTo10(Math.max(30, startHeight + deltaY));
+          }
+          
+          setResizeSize({ width: newWidth, height: newHeight });
+        });
+      };
+
+      const handleMouseUp = (upEvent: MouseEvent) => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+        
+        const deltaX = upEvent.clientX - startMouseX;
+        const deltaY = upEvent.clientY - startMouseY;
+        
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+        
+        if (direction === "e" || direction === "se") {
+          newWidth = snapTo10(Math.max(50, startWidth + deltaX));
+        }
+        if (direction === "s" || direction === "se") {
+          newHeight = snapTo10(Math.max(30, startHeight + deltaY));
+        }
+        
+        setResizingCompId(null);
+        setResizeSize(null);
+
+        if (onUpdateComponent) {
+          const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+          const panelConfig = componentConfig[panelKey] || {};
+          const updatedComponents = (panelConfig.components || []).map((c: PanelInlineComponent) =>
+            c.id === comp.id
+              ? { ...c, size: { width: newWidth, height: newHeight } }
+              : c
+          );
+          
+          onUpdateComponent({
+            ...component,
+            componentConfig: {
+              ...componentConfig,
+              [panelKey]: {
+                ...panelConfig,
+                components: updatedComponents,
+              },
+            },
+          });
+        }
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [component, componentConfig, onUpdateComponent, snapTo10]
+  );
+
   const { toast } = useToast();
 
   // 추가 모달 상태
@@ -2079,8 +2292,191 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
           )}
           <CardContent className="flex-1 overflow-auto p-4">
-            {/* 좌측 데이터 목록/테이블 */}
-            {componentConfig.leftPanel?.displayMode === "table" ? (
+            {/* 좌측 데이터 목록/테이블/커스텀 */}
+            {componentConfig.leftPanel?.displayMode === "custom" ? (
+              // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치
+              <div 
+                className="relative h-full w-full"
+                data-split-panel-container="true"
+                data-component-id={component.id}
+                data-panel-side="left"
+              >
+                {/* 🆕 커스텀 모드: 디자인/실행 모드 통합 렌더링 */}
+                {componentConfig.leftPanel?.components && componentConfig.leftPanel.components.length > 0 ? (
+                  <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
+                    {componentConfig.leftPanel.components.map((comp: PanelInlineComponent) => {
+                      const isSelectedComp = selectedPanelComponentId === comp.id;
+                      const isDraggingComp = draggingCompId === comp.id;
+                      const isResizingComp = resizingCompId === comp.id;
+                      
+                      // 드래그/리사이즈 중 표시할 크기/위치
+                      const displayX = isDraggingComp && dragPosition ? dragPosition.x : (comp.position?.x || 0);
+                      const displayY = isDraggingComp && dragPosition ? dragPosition.y : (comp.position?.y || 0);
+                      const displayWidth = isResizingComp && resizeSize ? resizeSize.width : (comp.size?.width || 200);
+                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
+                      
+                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
+                      const componentData = {
+                        id: comp.id,
+                        type: "component" as const,
+                        componentType: comp.componentType,
+                        label: comp.label,
+                        position: comp.position || { x: 0, y: 0 },
+                        size: { width: displayWidth, height: displayHeight },
+                        componentConfig: comp.componentConfig || {},
+                        style: comp.style || {},
+                      };
+
+                      if (isDesignMode) {
+                        // 디자인 모드: 탭 컴포넌트와 동일하게 실제 컴포넌트 렌더링
+                        return (
+                          <div
+                            key={comp.id}
+                            data-panel-comp-id={comp.id}
+                            className="absolute"
+                            style={{
+                              left: displayX,
+                              top: displayY,
+                              zIndex: isDraggingComp ? 100 : isSelectedComp ? 10 : 1,
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSelectPanelComponent?.("left", comp.id, comp);
+                            }}
+                          >
+                            {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
+                            <div
+                              className={cn(
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
+                                isSelectedComp ? "border-primary" : "border-gray-200"
+                              )}
+                              style={{ width: displayWidth }}
+                              onMouseDown={(e) => handlePanelDragStart(e, "left", comp)}
+                            >
+                              <div className="flex items-center gap-0.5">
+                                <Move className="h-2.5 w-2.5 text-gray-400" />
+                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
+                                  {comp.label || comp.componentType}
+                                </span>
+                              </div>
+                              <div className="flex items-center">
+                                <button
+                                  className="rounded p-0.5 hover:bg-gray-200"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onSelectPanelComponent?.("left", comp.id, comp);
+                                  }}
+                                  title="설정"
+                                >
+                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
+                                </button>
+                                <button
+                                  className="rounded p-0.5 hover:bg-red-100"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleRemovePanelComponent("left", comp.id);
+                                  }}
+                                  title="삭제"
+                                >
+                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                                </button>
+                              </div>
+                            </div>
+
+                            {/* 실제 컴포넌트 렌더링 - 핸들 아래에 별도 영역 */}
+                            <div 
+                              className={cn(
+                                "relative overflow-hidden rounded-b border bg-white shadow-sm",
+                                isSelectedComp
+                                  ? "border-primary ring-2 ring-primary/30"
+                                  : "border-gray-200",
+                                (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
+                                !(isDraggingComp || isResizingComp) && "transition-all"
+                              )}
+                              style={{
+                                width: displayWidth,
+                                height: displayHeight,
+                              }}
+                            >
+                              <div className="pointer-events-none h-full w-full">
+                                <DynamicComponentRenderer
+                                  component={componentData as any}
+                                  isDesignMode={true}
+                                  formData={{}}
+                                />
+                              </div>
+                              
+                              {/* 리사이즈 가장자리 영역 - 선택된 컴포넌트에만 표시 */}
+                              {isSelectedComp && (
+                                <>
+                                  {/* 오른쪽 가장자리 (너비 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute right-0 top-0 z-10 h-full w-2 cursor-ew-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "left", comp, "e")}
+                                  />
+                                  {/* 아래 가장자리 (높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 left-0 z-10 h-2 w-full cursor-ns-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "left", comp, "s")}
+                                  />
+                                  {/* 오른쪽 아래 모서리 (너비+높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 right-0 z-20 h-3 w-3 cursor-nwse-resize hover:bg-primary/20"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "left", comp, "se")}
+                                  />
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      } else {
+                        // 실행 모드: DynamicComponentRenderer로 렌더링
+                        const componentData = {
+                          id: comp.id,
+                          type: "component" as const,
+                          componentType: comp.componentType,
+                          label: comp.label,
+                          position: comp.position || { x: 0, y: 0 },
+                          size: comp.size || { width: 400, height: 300 },
+                          componentConfig: comp.componentConfig || {},
+                          style: comp.style || {},
+                        };
+                        
+                        return (
+                          <div
+                            key={comp.id}
+                            className="absolute"
+                            style={{
+                              left: comp.position?.x || 0,
+                              top: comp.position?.y || 0,
+                              width: comp.size?.width || 400,
+                              height: comp.size?.height || 300,
+                            }}
+                          >
+                            <DynamicComponentRenderer
+                              component={componentData as any}
+                              isDesignMode={false}
+                              formData={{}}
+                            />
+                          </div>
+                        );
+                      }
+                    })}
+                  </div>
+                ) : (
+                  // 컴포넌트가 없을 때 드롭 영역 표시
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
+                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
+                    <p className="text-sm font-medium text-gray-500">
+                      커스텀 모드
+                    </p>
+                    <p className="mt-1 text-xs text-gray-400">
+                      {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
+                    </p>
+                  </div>
+                )}
+              </div>
+            ) : componentConfig.leftPanel?.displayMode === "table" ? (
               // 테이블 모드
               <div className="w-full">
                 {isDesignMode ? (
@@ -2577,8 +2973,180 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
           )}
           <CardContent className="flex-1 overflow-auto p-4">
-            {/* 우측 데이터 */}
-            {isLoadingRight ? (
+            {/* 우측 데이터/커스텀 */}
+            {componentConfig.rightPanel?.displayMode === "custom" ? (
+              // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치
+              <div 
+                className="relative h-full w-full"
+                data-split-panel-container="true"
+                data-component-id={component.id}
+                data-panel-side="right"
+              >
+                {/* 🆕 커스텀 모드: 디자인/실행 모드 통합 렌더링 */}
+                {componentConfig.rightPanel?.components && componentConfig.rightPanel.components.length > 0 ? (
+                  <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
+                    {componentConfig.rightPanel.components.map((comp: PanelInlineComponent) => {
+                      const isSelectedComp = selectedPanelComponentId === comp.id;
+                      const isDraggingComp = draggingCompId === comp.id;
+                      const isResizingComp = resizingCompId === comp.id;
+                      
+                      // 드래그/리사이즈 중 표시할 크기/위치
+                      const displayX = isDraggingComp && dragPosition ? dragPosition.x : (comp.position?.x || 0);
+                      const displayY = isDraggingComp && dragPosition ? dragPosition.y : (comp.position?.y || 0);
+                      const displayWidth = isResizingComp && resizeSize ? resizeSize.width : (comp.size?.width || 200);
+                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
+                      
+                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
+                      const componentData = {
+                        id: comp.id,
+                        type: "component" as const,
+                        componentType: comp.componentType,
+                        label: comp.label,
+                        position: comp.position || { x: 0, y: 0 },
+                        size: { width: displayWidth, height: displayHeight },
+                        componentConfig: comp.componentConfig || {},
+                        style: comp.style || {},
+                      };
+
+                      if (isDesignMode) {
+                        // 디자인 모드: 탭 컴포넌트와 동일하게 실제 컴포넌트 렌더링
+                        return (
+                          <div
+                            key={comp.id}
+                            data-panel-comp-id={comp.id}
+                            className="absolute"
+                            style={{
+                              left: displayX,
+                              top: displayY,
+                              zIndex: isDraggingComp ? 100 : isSelectedComp ? 10 : 1,
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSelectPanelComponent?.("right", comp.id, comp);
+                            }}
+                          >
+                            {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
+                            <div
+                              className={cn(
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
+                                isSelectedComp ? "border-primary" : "border-gray-200"
+                              )}
+                              style={{ width: displayWidth }}
+                              onMouseDown={(e) => handlePanelDragStart(e, "right", comp)}
+                            >
+                              <div className="flex items-center gap-0.5">
+                                <Move className="h-2.5 w-2.5 text-gray-400" />
+                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
+                                  {comp.label || comp.componentType}
+                                </span>
+                              </div>
+                              <div className="flex items-center">
+                                <button
+                                  className="rounded p-0.5 hover:bg-gray-200"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onSelectPanelComponent?.("right", comp.id, comp);
+                                  }}
+                                  title="설정"
+                                >
+                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
+                                </button>
+                                <button
+                                  className="rounded p-0.5 hover:bg-red-100"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleRemovePanelComponent("right", comp.id);
+                                  }}
+                                  title="삭제"
+                                >
+                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                                </button>
+                              </div>
+                            </div>
+
+                            {/* 실제 컴포넌트 렌더링 - 핸들 아래에 별도 영역 */}
+                            <div 
+                              className={cn(
+                                "relative overflow-hidden rounded-b border bg-white shadow-sm",
+                                isSelectedComp
+                                  ? "border-primary ring-2 ring-primary/30"
+                                  : "border-gray-200",
+                                (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
+                                !(isDraggingComp || isResizingComp) && "transition-all"
+                              )}
+                              style={{
+                                width: displayWidth,
+                                height: displayHeight,
+                              }}
+                            >
+                              <div className="pointer-events-none h-full w-full">
+                                <DynamicComponentRenderer
+                                  component={componentData as any}
+                                  isDesignMode={true}
+                                  formData={{}}
+                                />
+                              </div>
+                              
+                              {/* 리사이즈 가장자리 영역 - 선택된 컴포넌트에만 표시 */}
+                              {isSelectedComp && (
+                                <>
+                                  {/* 오른쪽 가장자리 (너비 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute right-0 top-0 z-10 h-full w-2 cursor-ew-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "e")}
+                                  />
+                                  {/* 아래 가장자리 (높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 left-0 z-10 h-2 w-full cursor-ns-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "s")}
+                                  />
+                                  {/* 오른쪽 아래 모서리 (너비+높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 right-0 z-20 h-3 w-3 cursor-nwse-resize hover:bg-primary/20"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "se")}
+                                  />
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      } else {
+                        
+                        return (
+                          <div
+                            key={comp.id}
+                            className="absolute"
+                            style={{
+                              left: comp.position?.x || 0,
+                              top: comp.position?.y || 0,
+                              width: comp.size?.width || 400,
+                              height: comp.size?.height || 300,
+                            }}
+                          >
+                            <DynamicComponentRenderer
+                              component={componentData as any}
+                              isDesignMode={false}
+                              formData={{}}
+                            />
+                          </div>
+                        );
+                      }
+                    })}
+                  </div>
+                ) : (
+                  // 컴포넌트가 없을 때 드롭 영역 표시
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
+                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
+                    <p className="text-sm font-medium text-gray-500">
+                      커스텀 모드
+                    </p>
+                    <p className="mt-1 text-xs text-gray-400">
+                      {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
+                    </p>
+                  </div>
+                )}
+              </div>
+            ) : isLoadingRight ? (
               // 로딩 중
               <div className="flex h-full items-center justify-center">
                 <div className="text-center">
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index d678332e..79813d8f 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -11,7 +11,8 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 // Accordion 제거 - 단순 섹션으로 변경
-import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, GripVertical } from "lucide-react";
+import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, GripVertical, Move } from "lucide-react";
+import { PanelInlineComponent } from "./types";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig, AdditionalTabConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
@@ -1547,7 +1548,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <Label>표시 모드</Label>
           <Select
             value={config.leftPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table") => updateLeftPanel({ displayMode: value })}
+            onValueChange={(value: "list" | "table" | "custom") => updateLeftPanel({ displayMode: value })}
           >
             <SelectTrigger className="bg-white">
               <SelectValue placeholder="표시 모드 선택" />
@@ -1565,11 +1566,75 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col">
+                  <span className="font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
             </SelectContent>
           </Select>
+          {config.leftPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 좌측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
         </div>
 
-        {/* 좌측 패널 표시 컬럼 설정 - 체크박스 방식 */}
+        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+        {config.leftPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.leftPanel?.components || config.leftPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.leftPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">
+                        {comp.label || comp.componentType}
+                      </p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.leftPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          leftPanel: {
+                            ...config.leftPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 좌측 패널 표시 컬럼 설정 - 체크박스 방식 (커스텀 모드가 아닐 때만) */}
+        {config.leftPanel?.displayMode !== "custom" && (
         <div className="space-y-2">
           <Label className="text-xs font-medium">표시할 컬럼 선택</Label>
 
@@ -1731,6 +1796,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             </div>
           )}
         </div>
+        )}
       </div>
 
       {/* 좌측 패널 데이터 필터링 */}
@@ -1851,7 +1917,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <Label>표시 모드</Label>
           <Select
             value={config.rightPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table") => updateRightPanel({ displayMode: value })}
+            onValueChange={(value: "list" | "table" | "custom") => updateRightPanel({ displayMode: value })}
           >
             <SelectTrigger className="bg-white">
               <SelectValue placeholder="표시 모드 선택" />
@@ -1869,11 +1935,74 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col">
+                  <span className="font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
             </SelectContent>
           </Select>
+          {config.rightPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 우측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
         </div>
 
-        {/* 요약 표시 설정 (LIST 모드에서만) */}
+        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+        {config.rightPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.rightPanel?.components || config.rightPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.rightPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">
+                        {comp.label || comp.componentType}
+                      </p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.rightPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          rightPanel: {
+                            ...config.rightPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 요약 표시 설정 (LIST 모드에서만, 커스텀 모드가 아닐 때) */}
         {(config.rightPanel?.displayMode || "list") === "list" && (
           <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/types.ts b/frontend/lib/registry/components/v2-split-panel-layout/types.ts
index 123dc13a..7ab0dbcb 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/types.ts
+++ b/frontend/lib/registry/components/v2-split-panel-layout/types.ts
@@ -2,7 +2,13 @@
  * SplitPanelLayout 컴포넌트 타입 정의
  */
 
-import { DataFilterConfig } from "@/types/screen-management";
+import { DataFilterConfig, TabInlineComponent } from "@/types/screen-management";
+
+/**
+ * 패널 내 인라인 컴포넌트 (커스텀 모드용)
+ * TabInlineComponent와 동일한 구조 사용
+ */
+export type PanelInlineComponent = TabInlineComponent;
 
 /**
  * 추가 탭 설정 (우측 패널과 동일한 구조 + tabId, label)
@@ -118,7 +124,9 @@ export interface SplitPanelLayoutConfig {
     useCustomTable?: boolean; // 화면 기본 테이블이 아닌 다른 테이블 사용 여부
     customTableName?: string; // 사용자 지정 테이블명 (useCustomTable이 true일 때)
     dataSource?: string; // API 엔드포인트
-    displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
+    displayMode?: "list" | "table" | "custom"; // 표시 모드: 목록, 테이블, 또는 커스텀
+    // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치 (탭 컴포넌트와 동일 구조)
+    components?: PanelInlineComponent[];
     showSearch?: boolean;
     showAdd?: boolean;
     showEdit?: boolean; // 수정 버튼
@@ -185,7 +193,9 @@ export interface SplitPanelLayoutConfig {
     useCustomTable?: boolean; // 화면 기본 테이블이 아닌 다른 테이블 사용 여부
     customTableName?: string; // 사용자 지정 테이블명 (useCustomTable이 true일 때)
     dataSource?: string;
-    displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
+    displayMode?: "list" | "table" | "custom"; // 표시 모드: 목록, 테이블, 또는 커스텀
+    // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치 (탭 컴포넌트와 동일 구조)
+    components?: PanelInlineComponent[];
     showSearch?: boolean;
     showAdd?: boolean;
     showEdit?: boolean; // 수정 버튼
diff --git a/frontend/lib/registry/components/v2-table-grouped/README.md b/frontend/lib/registry/components/v2-table-grouped/README.md
new file mode 100644
index 00000000..fc39733e
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/README.md
@@ -0,0 +1,162 @@
+# v2-table-grouped (그룹화 테이블)
+
+## 개요
+
+데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능을 제공하는 테이블 컴포넌트입니다.
+
+## 주요 기능
+
+- **그룹화**: 지정된 컬럼 기준으로 데이터를 그룹핑
+- **접기/펼치기**: 그룹 헤더 클릭으로 하위 항목 토글
+- **그룹 요약**: 그룹별 개수, 합계, 평균, 최대/최소값 표시
+- **체크박스 선택**: 그룹 단위 또는 개별 항목 선택
+- **전체 펼치기/접기**: 모든 그룹 일괄 토글 버튼
+
+## 사용 예시
+
+```tsx
+import { TableGroupedComponent } from "./TableGroupedComponent";
+
+<TableGroupedComponent
+  config={{
+    selectedTable: "production_plan_mng",
+    groupConfig: {
+      groupByColumn: "item_code",
+      groupLabelFormat: "{item_name} ({item_code})",
+      defaultExpanded: true,
+      summary: {
+        showCount: true,
+        sumColumns: ["quantity"],
+      },
+    },
+    columns: [
+      { columnName: "plan_no", displayName: "계획번호", visible: true },
+      { columnName: "plan_date", displayName: "계획일", visible: true },
+      { columnName: "quantity", displayName: "수량", visible: true, format: "number" },
+    ],
+    showCheckbox: true,
+    checkboxMode: "multi",
+    showExpandAllButton: true,
+  }}
+  onSelectionChange={(event) => console.log("선택:", event.selectedItems)}
+  onRowClick={(event) => console.log("행 클릭:", event.row)}
+/>
+```
+
+## 설정 옵션
+
+### 기본 설정
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `selectedTable` | string | - | 데이터 테이블명 |
+| `useCustomTable` | boolean | false | 커스텀 테이블 사용 여부 |
+| `customTableName` | string | - | 커스텀 테이블명 |
+| `columns` | ColumnConfig[] | [] | 표시할 컬럼 설정 |
+
+### 그룹화 설정 (groupConfig)
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `groupByColumn` | string | - | 그룹화 기준 컬럼 (필수) |
+| `groupLabelFormat` | string | "{value}" | 그룹 라벨 형식 |
+| `defaultExpanded` | boolean | true | 초기 펼침 상태 |
+| `sortDirection` | "asc" \| "desc" | "asc" | 그룹 정렬 방향 |
+| `summary.showCount` | boolean | true | 개수 표시 여부 |
+| `summary.sumColumns` | string[] | [] | 합계 컬럼 목록 |
+| `summary.avgColumns` | string[] | [] | 평균 컬럼 목록 |
+
+### 표시 설정
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `showCheckbox` | boolean | false | 체크박스 표시 |
+| `checkboxMode` | "single" \| "multi" | "multi" | 선택 모드 |
+| `showExpandAllButton` | boolean | true | 전체 펼치기/접기 버튼 |
+| `groupHeaderStyle` | "default" \| "compact" \| "card" | "default" | 그룹 헤더 스타일 |
+| `rowClickable` | boolean | true | 행 클릭 가능 여부 |
+| `maxHeight` | number | 600 | 최대 높이 (px) |
+| `emptyMessage` | string | "데이터가 없습니다." | 빈 데이터 메시지 |
+
+## 이벤트
+
+### onSelectionChange
+
+선택 상태가 변경될 때 호출됩니다.
+
+```typescript
+interface SelectionChangeEvent {
+  selectedGroups: string[];  // 선택된 그룹 키 목록
+  selectedItems: any[];      // 선택된 아이템 전체
+  isAllSelected: boolean;    // 전체 선택 여부
+}
+```
+
+### onGroupToggle
+
+그룹 펼치기/접기 시 호출됩니다.
+
+```typescript
+interface GroupToggleEvent {
+  groupKey: string;   // 그룹 키
+  expanded: boolean;  // 펼침 상태
+}
+```
+
+### onRowClick
+
+행 클릭 시 호출됩니다.
+
+```typescript
+interface RowClickEvent {
+  row: any;           // 클릭된 행 데이터
+  groupKey: string;   // 그룹 키
+  indexInGroup: number; // 그룹 내 인덱스
+}
+```
+
+## 그룹 라벨 형식
+
+`groupLabelFormat`에서 사용 가능한 플레이스홀더:
+
+- `{value}`: 그룹화 컬럼의 값
+- `{컬럼명}`: 해당 컬럼의 값
+
+**예시:**
+```
+groupLabelFormat: "{item_name} ({item_code}) - {category}"
+// 결과: "제품A (P001) - 완제품"
+```
+
+## 파일 구조
+
+```
+v2-table-grouped/
+├── index.ts                    # Definition
+├── types.ts                    # 타입 정의
+├── config.ts                   # 기본 설정값
+├── TableGroupedComponent.tsx   # 메인 컴포넌트
+├── TableGroupedConfigPanel.tsx # 설정 패널
+├── TableGroupedRenderer.tsx    # 레지스트리 등록
+├── components/
+│   └── GroupHeader.tsx         # 그룹 헤더
+├── hooks/
+│   └── useGroupedData.ts       # 그룹화 로직 훅
+└── README.md
+```
+
+## v2-table-list와의 차이점
+
+| 항목 | v2-table-list | v2-table-grouped |
+|------|---------------|------------------|
+| 데이터 구조 | 플랫 리스트 | 계층 구조 (그룹 > 아이템) |
+| 렌더링 | 행 단위 | 그룹 헤더 + 상세 행 |
+| 선택 | 개별 행 | 그룹 단위 / 개별 단위 |
+| 요약 | 전체 합계 (선택) | 그룹별 요약 |
+| 용도 | 일반 데이터 목록 | 카테고리별 분류 데이터 |
+
+## 관련 컴포넌트
+
+- `v2-table-list`: 기본 테이블 (그룹화 없음)
+- `v2-pivot-grid`: 피벗 테이블 (다차원 집계)
+- `v2-split-panel-layout`: 마스터-디테일 레이아웃
diff --git a/frontend/lib/registry/components/v2-table-grouped/TableGroupedComponent.tsx b/frontend/lib/registry/components/v2-table-grouped/TableGroupedComponent.tsx
new file mode 100644
index 00000000..5d33187a
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/TableGroupedComponent.tsx
@@ -0,0 +1,529 @@
+"use client";
+
+import React, { useCallback, useEffect, useState, useMemo } from "react";
+import { Loader2, FoldVertical, UnfoldVertical } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { TableGroupedComponentProps } from "./types";
+import { useGroupedData } from "./hooks/useGroupedData";
+import { GroupHeader } from "./components/GroupHeader";
+import { useScreenContextOptional } from "@/contexts/ScreenContext";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
+
+/**
+ * v2-table-grouped 메인 컴포넌트
+ *
+ * 데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능을 제공합니다.
+ */
+export function TableGroupedComponent({
+  config,
+  isDesignMode = false,
+  formData,
+  onSelectionChange,
+  onGroupToggle,
+  onRowClick,
+  externalData,
+  isLoading: externalLoading,
+  error: externalError,
+  componentId,
+}: TableGroupedComponentProps) {
+  // 화면 컨텍스트 (데이터 제공자로 등록)
+  const screenContext = useScreenContextOptional();
+
+  // TableOptions Context (검색필터 연동)
+  const { registerTable, unregisterTable, updateTableDataCount } = useTableOptions();
+
+  // 연결된 필터 상태 (다른 컴포넌트 값으로 필터링)
+  const [linkedFilterValues, setLinkedFilterValues] = useState<Record<string, any>>({});
+
+  // 필터 및 그룹 설정 상태 (검색필터 연동용)
+  const [filters, setFilters] = useState<any[]>([]);
+  const [grouping, setGrouping] = useState<string[]>([]);
+  const [columnVisibility, setColumnVisibility] = useState<any[]>([]);
+
+  // 그룹화 데이터 훅 (검색 필터 전달)
+  const {
+    groups,
+    isLoading: hookLoading,
+    error: hookError,
+    toggleGroup,
+    expandAll,
+    collapseAll,
+    toggleItemSelection,
+    toggleGroupSelection,
+    toggleAllSelection,
+    selectedItems,
+    isAllSelected,
+    isIndeterminate,
+    refresh,
+    rawData,
+    totalCount,
+    groupCount,
+  } = useGroupedData(config, externalData, linkedFilterValues);
+
+  const isLoading = externalLoading ?? hookLoading;
+  const error = externalError ?? hookError;
+
+  // 필터링된 데이터 (훅에서 이미 필터 적용됨)
+  const filteredData = rawData;
+
+  // 연결된 필터 감시
+  useEffect(() => {
+    const linkedFilters = config.linkedFilters;
+
+    if (!linkedFilters || linkedFilters.length === 0 || !screenContext) {
+      return;
+    }
+
+    // 연결된 소스 컴포넌트들의 값을 주기적으로 확인
+    const checkLinkedFilters = () => {
+      const newFilterValues: Record<string, any> = {};
+      let hasChanges = false;
+
+      linkedFilters.forEach((filter) => {
+        if (filter.enabled === false) return;
+
+        const sourceProvider = screenContext.getDataProvider(filter.sourceComponentId);
+        if (sourceProvider) {
+          const selectedData = sourceProvider.getSelectedData();
+          if (selectedData && selectedData.length > 0) {
+            const sourceField = filter.sourceField || "value";
+            const value = selectedData[0][sourceField];
+
+            if (value !== linkedFilterValues[filter.targetColumn]) {
+              newFilterValues[filter.targetColumn] = value;
+              hasChanges = true;
+            } else {
+              newFilterValues[filter.targetColumn] = linkedFilterValues[filter.targetColumn];
+            }
+          }
+        }
+      });
+
+      if (hasChanges) {
+        setLinkedFilterValues(newFilterValues);
+      }
+    };
+
+    // 초기 확인
+    checkLinkedFilters();
+
+    // 주기적 확인 (100ms 간격)
+    const intervalId = setInterval(checkLinkedFilters, 100);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [screenContext, config.linkedFilters, linkedFilterValues]);
+
+  // DataProvidable 인터페이스 구현
+  const dataProvider: DataProvidable = useMemo(
+    () => ({
+      componentId: componentId || "",
+      componentType: "table-grouped",
+
+      getSelectedData: () => {
+        return selectedItems;
+      },
+
+      getAllData: () => {
+        return filteredData;
+      },
+
+      clearSelection: () => {
+        toggleAllSelection();
+      },
+    }),
+    [componentId, selectedItems, filteredData, toggleAllSelection]
+  );
+
+  // DataReceivable 인터페이스 구현
+  const dataReceiver: DataReceivable = useMemo(
+    () => ({
+      componentId: componentId || "",
+      componentType: "table-grouped",
+
+      receiveData: async (_receivedData: any[], _config: DataReceiverConfig) => {
+        // 현재는 외부 데이터 수신 시 새로고침만 수행
+        refresh();
+      },
+
+      clearData: async () => {
+        // 데이터 클리어 시 새로고침
+        refresh();
+      },
+
+      getConfig: () => {
+        return {
+          targetComponentId: componentId || "",
+          mode: "replace" as const,
+        };
+      },
+    }),
+    [componentId, refresh]
+  );
+
+  // 화면 컨텍스트에 데이터 제공자/수신자로 등록
+  useEffect(() => {
+    if (screenContext && componentId) {
+      screenContext.registerDataProvider(componentId, dataProvider);
+      screenContext.registerDataReceiver(componentId, dataReceiver);
+
+      return () => {
+        screenContext.unregisterDataProvider(componentId);
+        screenContext.unregisterDataReceiver(componentId);
+      };
+    }
+  }, [screenContext, componentId, dataProvider, dataReceiver]);
+
+  // 테이블 ID (검색필터 연동용)
+  const tableId = componentId || `table-grouped-${config.selectedTable || "default"}`;
+
+  // TableOptionsContext에 테이블 등록 (검색필터가 테이블을 찾을 수 있도록)
+  useEffect(() => {
+    if (isDesignMode || !config.selectedTable) return;
+
+    const columnsToRegister = config.columns || [];
+
+    // 고유 값 조회 함수
+    const getColumnUniqueValues = async (columnName: string) => {
+      const uniqueValues = new Set<string>();
+      rawData.forEach((row) => {
+        const value = row[columnName];
+        if (value !== null && value !== undefined && value !== "") {
+          uniqueValues.add(String(value));
+        }
+      });
+      return Array.from(uniqueValues)
+        .map((value) => ({ value, label: value }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+    };
+
+    const registration = {
+      tableId,
+      label: config.selectedTable,
+      tableName: config.selectedTable,
+      dataCount: totalCount,
+      columns: columnsToRegister.map((col) => ({
+        columnName: col.columnName,
+        columnLabel: col.displayName || col.columnName,
+        inputType: "text",
+        visible: col.visible !== false,
+        width: col.width || 150,
+        sortable: true,
+        filterable: true,
+      })),
+      onFilterChange: setFilters,
+      onGroupChange: setGrouping,
+      onColumnVisibilityChange: setColumnVisibility,
+      getColumnUniqueValues,
+    };
+
+    registerTable(registration);
+
+    return () => {
+      unregisterTable(tableId);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableId, config.selectedTable, config.columns, totalCount, rawData, registerTable, isDesignMode]);
+
+  // 데이터 건수 변경 시 업데이트
+  useEffect(() => {
+    if (!isDesignMode && config.selectedTable) {
+      updateTableDataCount(tableId, totalCount);
+    }
+  }, [tableId, totalCount, updateTableDataCount, config.selectedTable, isDesignMode]);
+
+  // 필터 변경 시 검색 조건 적용
+  useEffect(() => {
+    if (filters.length > 0) {
+      const newFilterValues: Record<string, any> = {};
+      filters.forEach((filter: any) => {
+        if (filter.value) {
+          newFilterValues[filter.columnName] = filter.value;
+        }
+      });
+      setLinkedFilterValues((prev) => ({ ...prev, ...newFilterValues }));
+    }
+  }, [filters]);
+
+  // 컬럼 설정
+  const columns = config.columns || [];
+  const visibleColumns = columns.filter((col) => col.visible !== false);
+
+  // 체크박스 컬럼 포함 시 총 컬럼 수
+  const totalColumnCount = visibleColumns.length + (config.showCheckbox ? 1 : 0);
+
+  // 아이템 ID 추출 함수
+  const getItemId = useCallback(
+    (item: any): string => {
+      if (item.id !== undefined) return String(item.id);
+      const firstCol = columns[0]?.columnName;
+      if (firstCol && item[firstCol] !== undefined) return String(item[firstCol]);
+      return JSON.stringify(item);
+    },
+    [columns]
+  );
+
+  // 선택 변경 시 콜백
+  useEffect(() => {
+    if (onSelectionChange && selectedItems.length >= 0) {
+      onSelectionChange({
+        selectedGroups: groups
+          .filter((g) => g.selected)
+          .map((g) => g.groupKey),
+        selectedItems,
+        isAllSelected,
+      });
+    }
+  }, [selectedItems, groups, isAllSelected, onSelectionChange]);
+
+  // 그룹 토글 핸들러
+  const handleGroupToggle = useCallback(
+    (groupKey: string) => {
+      toggleGroup(groupKey);
+      if (onGroupToggle) {
+        const group = groups.find((g) => g.groupKey === groupKey);
+        onGroupToggle({
+          groupKey,
+          expanded: !group?.expanded,
+        });
+      }
+    },
+    [toggleGroup, onGroupToggle, groups]
+  );
+
+  // 행 클릭 핸들러
+  const handleRowClick = useCallback(
+    (row: any, groupKey: string, indexInGroup: number) => {
+      if (!config.rowClickable) return;
+      if (onRowClick) {
+        onRowClick({ row, groupKey, indexInGroup });
+      }
+    },
+    [config.rowClickable, onRowClick]
+  );
+
+  // refreshTable 이벤트 구독
+  useEffect(() => {
+    const handleRefresh = () => {
+      refresh();
+    };
+
+    window.addEventListener("refreshTable", handleRefresh);
+    return () => {
+      window.removeEventListener("refreshTable", handleRefresh);
+    };
+  }, [refresh]);
+
+  // 디자인 모드 렌더링
+  if (isDesignMode) {
+    return (
+      <div className="rounded-md border bg-muted/20 p-4">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <FoldVertical className="h-4 w-4" />
+          <span>그룹화 테이블</span>
+          {config.groupConfig?.groupByColumn && (
+            <span className="text-xs">
+              (그룹: {config.groupConfig.groupByColumn})
+            </span>
+          )}
+        </div>
+        <div className="mt-2 text-xs text-muted-foreground">
+          테이블: {config.useCustomTable ? config.customTableName : config.selectedTable || "(미설정)"}
+        </div>
+      </div>
+    );
+  }
+
+  // 로딩 상태
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <span className="ml-2 text-sm text-muted-foreground">로딩 중...</span>
+      </div>
+    );
+  }
+
+  // 에러 상태
+  if (error) {
+    return (
+      <div className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
+        {error}
+      </div>
+    );
+  }
+
+  // 데이터 없음
+  if (groups.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+        {config.emptyMessage || "데이터가 없습니다."}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="v2-table-grouped flex flex-col"
+      style={{
+        height: config.height,
+        maxHeight: config.maxHeight,
+      }}
+    >
+      {/* 툴바 */}
+      {config.showExpandAllButton && (
+        <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={expandAll}
+              className="h-7 text-xs"
+            >
+              <UnfoldVertical className="mr-1 h-3 w-3" />
+              전체 펼치기
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={collapseAll}
+              className="h-7 text-xs"
+            >
+              <FoldVertical className="mr-1 h-3 w-3" />
+              전체 접기
+            </Button>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {groupCount}개 그룹 | 총 {totalCount}건
+          </div>
+        </div>
+      )}
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-auto">
+        <table className="w-full border-collapse text-sm">
+          {/* 테이블 헤더 */}
+          <thead className="sticky top-0 z-10 bg-muted">
+            <tr>
+              {/* 전체 선택 체크박스 */}
+              {config.showCheckbox && (
+                <th className="w-10 whitespace-nowrap border-b px-3 py-2 text-left">
+                  <Checkbox
+                    checked={isAllSelected}
+                    onCheckedChange={toggleAllSelection}
+                    className={cn(isIndeterminate && "data-[state=checked]:bg-muted")}
+                  />
+                </th>
+              )}
+              {/* 컬럼 헤더 */}
+              {visibleColumns.map((col) => (
+                <th
+                  key={col.columnName}
+                  className={cn(
+                    "whitespace-nowrap border-b px-3 py-2 font-medium text-muted-foreground",
+                    col.align === "center" && "text-center",
+                    col.align === "right" && "text-right"
+                  )}
+                  style={{ width: col.width ? `${col.width}px` : "auto" }}
+                >
+                  {col.displayName || col.columnName}
+                </th>
+              ))}
+            </tr>
+          </thead>
+
+          {/* 테이블 바디 */}
+          <tbody>
+            {groups.map((group) => (
+              <React.Fragment key={group.groupKey}>
+                {/* 그룹 헤더 */}
+                <GroupHeader
+                  group={group}
+                  config={config}
+                  onToggle={() => handleGroupToggle(group.groupKey)}
+                  onSelectToggle={
+                    config.showCheckbox
+                      ? () => toggleGroupSelection(group.groupKey)
+                      : undefined
+                  }
+                  style={config.groupHeaderStyle}
+                  columnCount={totalColumnCount}
+                />
+
+                {/* 그룹 아이템 (펼쳐진 경우만) */}
+                {group.expanded &&
+                  group.items.map((item, idx) => {
+                    const itemId = getItemId(item);
+                    const isSelected = group.selectedItemIds?.includes(itemId);
+
+                    return (
+                      <tr
+                        key={itemId}
+                        className={cn(
+                          "border-b transition-colors",
+                          config.rowClickable && "cursor-pointer hover:bg-muted/50",
+                          isSelected && "bg-primary/10"
+                        )}
+                        onClick={() => handleRowClick(item, group.groupKey, idx)}
+                      >
+                        {/* 체크박스 */}
+                        {config.showCheckbox && (
+                          <td
+                            className="px-3 py-2"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <Checkbox
+                              checked={isSelected}
+                              onCheckedChange={() =>
+                                toggleItemSelection(group.groupKey, itemId)
+                              }
+                            />
+                          </td>
+                        )}
+
+                        {/* 데이터 컬럼 */}
+                        {visibleColumns.map((col) => {
+                          const value = item[col.columnName];
+                          let displayValue: React.ReactNode = value;
+
+                          // 포맷 적용
+                          if (col.format === "number" && typeof value === "number") {
+                            displayValue = value.toLocaleString();
+                          } else if (col.format === "currency" && typeof value === "number") {
+                            displayValue = `₩${value.toLocaleString()}`;
+                          } else if (col.format === "date" && value) {
+                            displayValue = new Date(value).toLocaleDateString("ko-KR");
+                          } else if (col.format === "boolean") {
+                            displayValue = value ? "예" : "아니오";
+                          }
+
+                          return (
+                            <td
+                              key={col.columnName}
+                              className={cn(
+                                "px-3 py-2",
+                                col.align === "center" && "text-center",
+                                col.align === "right" && "text-right"
+                              )}
+                            >
+                              {displayValue ?? "-"}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    );
+                  })}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default TableGroupedComponent;
diff --git a/frontend/lib/registry/components/v2-table-grouped/TableGroupedConfigPanel.tsx b/frontend/lib/registry/components/v2-table-grouped/TableGroupedConfigPanel.tsx
new file mode 100644
index 00000000..beb0f5b6
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/TableGroupedConfigPanel.tsx
@@ -0,0 +1,717 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import { TableGroupedConfig, ColumnConfig, LinkedFilterConfig } from "./types";
+import {
+  groupHeaderStyleOptions,
+  checkboxModeOptions,
+  sortDirectionOptions,
+} from "./config";
+import { Trash2, Plus } from "lucide-react";
+
+interface TableGroupedConfigPanelProps {
+  config: TableGroupedConfig;
+  onChange: (newConfig: Partial<TableGroupedConfig>) => void;
+}
+
+/**
+ * v2-table-grouped 설정 패널
+ */
+// 테이블 정보 타입
+interface TableInfo {
+  tableName: string;
+  displayName: string;
+}
+
+export function TableGroupedConfigPanel({
+  config,
+  onChange,
+}: TableGroupedConfigPanelProps) {
+  // 테이블 목록 (라벨명 포함)
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [tableColumns, setTableColumns] = useState<ColumnConfig[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [tableSelectOpen, setTableSelectOpen] = useState(false);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoadingTables(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        if (tableList && Array.isArray(tableList)) {
+          setTables(
+            tableList.map((t: any) => ({
+              tableName: t.tableName || t.table_name,
+              displayName: t.displayName || t.display_name || t.tableName || t.table_name,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("테이블 목록 로드 실패:", err);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 선택된 테이블의 컬럼 로드
+  useEffect(() => {
+    const tableName = config.useCustomTable
+      ? config.customTableName
+      : config.selectedTable;
+
+    if (!tableName) {
+      setTableColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const columns = await tableTypeApi.getColumns(tableName);
+        if (columns && Array.isArray(columns)) {
+          const cols: ColumnConfig[] = columns.map(
+            (col: any, idx: number) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+              visible: true,
+              sortable: true,
+              searchable: false,
+              align: "left" as const,
+              order: idx,
+            })
+          );
+          setTableColumns(cols);
+
+          // 컬럼 설정이 없으면 자동 설정
+          if (!config.columns || config.columns.length === 0) {
+            onChange({ ...config, columns: cols });
+          }
+        }
+      } catch (err) {
+        console.error("컬럼 로드 실패:", err);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [config.selectedTable, config.customTableName, config.useCustomTable]);
+
+  // 설정 업데이트 헬퍼
+  const updateConfig = (updates: Partial<TableGroupedConfig>) => {
+    onChange({ ...config, ...updates });
+  };
+
+  // 그룹 설정 업데이트 헬퍼
+  const updateGroupConfig = (
+    updates: Partial<TableGroupedConfig["groupConfig"]>
+  ) => {
+    onChange({
+      ...config,
+      groupConfig: { ...config.groupConfig, ...updates },
+    });
+  };
+
+  // 컬럼 가시성 토글
+  const toggleColumnVisibility = (columnName: string) => {
+    const updatedColumns = (config.columns || []).map((col) =>
+      col.columnName === columnName ? { ...col, visible: !col.visible } : col
+    );
+    updateConfig({ columns: updatedColumns });
+  };
+
+  // 합계 컬럼 토글
+  const toggleSumColumn = (columnName: string) => {
+    const currentSumCols = config.groupConfig?.summary?.sumColumns || [];
+    const newSumCols = currentSumCols.includes(columnName)
+      ? currentSumCols.filter((c) => c !== columnName)
+      : [...currentSumCols, columnName];
+
+    updateGroupConfig({
+      summary: {
+        ...config.groupConfig?.summary,
+        sumColumns: newSumCols,
+      },
+    });
+  };
+
+  // 연결 필터 추가
+  const addLinkedFilter = () => {
+    const newFilter: LinkedFilterConfig = {
+      sourceComponentId: "",
+      sourceField: "value",
+      targetColumn: "",
+      enabled: true,
+    };
+    updateConfig({
+      linkedFilters: [...(config.linkedFilters || []), newFilter],
+    });
+  };
+
+  // 연결 필터 제거
+  const removeLinkedFilter = (index: number) => {
+    const filters = [...(config.linkedFilters || [])];
+    filters.splice(index, 1);
+    updateConfig({ linkedFilters: filters });
+  };
+
+  // 연결 필터 업데이트
+  const updateLinkedFilter = (
+    index: number,
+    updates: Partial<LinkedFilterConfig>
+  ) => {
+    const filters = [...(config.linkedFilters || [])];
+    filters[index] = { ...filters[index], ...updates };
+    updateConfig({ linkedFilters: filters });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <Accordion type="multiple" defaultValue={["table", "group", "display"]}>
+        {/* 테이블 설정 */}
+        <AccordionItem value="table">
+          <AccordionTrigger className="text-sm font-medium">
+            테이블 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 커스텀 테이블 사용 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">커스텀 테이블 사용</Label>
+              <Switch
+                checked={config.useCustomTable}
+                onCheckedChange={(checked) =>
+                  updateConfig({ useCustomTable: checked })
+                }
+              />
+            </div>
+
+            {/* 테이블 선택 */}
+            {config.useCustomTable ? (
+              <div className="space-y-1">
+                <Label className="text-xs">커스텀 테이블명</Label>
+                <Input
+                  value={config.customTableName || ""}
+                  onChange={(e) =>
+                    updateConfig({ customTableName: e.target.value })
+                  }
+                  placeholder="테이블명 입력"
+                  className="h-8 text-xs"
+                />
+              </div>
+            ) : (
+              <div className="space-y-1">
+                <Label className="text-xs">테이블 선택</Label>
+                <Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={tableSelectOpen}
+                      className="h-8 w-full justify-between text-xs"
+                      disabled={loadingTables}
+                    >
+                      {loadingTables ? (
+                        <>
+                          <Loader2 className="mr-2 h-3 w-3 animate-spin" />
+                          로딩 중...
+                        </>
+                      ) : config.selectedTable ? (
+                        <span className="truncate">
+                          {tables.find((t) => t.tableName === config.selectedTable)
+                            ?.displayName || config.selectedTable}
+                          <span className="ml-1 text-muted-foreground">
+                            ({config.selectedTable})
+                          </span>
+                        </span>
+                      ) : (
+                        "테이블 검색..."
+                      )}
+                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command
+                      filter={(value, search) => {
+                        // 테이블명 또는 라벨명에 검색어가 포함되면 1, 아니면 0
+                        const lowerSearch = search.toLowerCase();
+                        if (value.toLowerCase().includes(lowerSearch)) {
+                          return 1;
+                        }
+                        return 0;
+                      }}
+                    >
+                      <CommandInput
+                        placeholder="테이블명 또는 라벨 검색..."
+                        className="text-xs"
+                      />
+                      <CommandList>
+                        <CommandEmpty className="py-2 text-center text-xs">
+                          테이블을 찾을 수 없습니다.
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {tables.map((table) => (
+                            <CommandItem
+                              key={table.tableName}
+                              value={`${table.displayName} ${table.tableName}`}
+                              onSelect={() => {
+                                updateConfig({ selectedTable: table.tableName });
+                                setTableSelectOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-3 w-3",
+                                  config.selectedTable === table.tableName
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span>{table.displayName}</span>
+                                <span className="text-[10px] text-muted-foreground">
+                                  {table.tableName}
+                                </span>
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 그룹화 설정 */}
+        <AccordionItem value="group">
+          <AccordionTrigger className="text-sm font-medium">
+            그룹화 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 그룹화 기준 컬럼 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹화 기준 컬럼 *</Label>
+              <Select
+                value={config.groupConfig?.groupByColumn || ""}
+                onValueChange={(value) =>
+                  updateGroupConfig({ groupByColumn: value })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="컬럼 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tableColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName || col.columnName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 그룹 라벨 형식 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹 라벨 형식</Label>
+              <Input
+                value={config.groupConfig?.groupLabelFormat || "{value}"}
+                onChange={(e) =>
+                  updateGroupConfig({ groupLabelFormat: e.target.value })
+                }
+                placeholder="{value} ({컬럼명})"
+                className="h-8 text-xs"
+              />
+              <p className="text-[10px] text-muted-foreground">
+                {"{value}"} = 그룹값, {"{컬럼명}"} = 해당 컬럼 값
+              </p>
+            </div>
+
+            {/* 기본 펼침 상태 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">기본 펼침 상태</Label>
+              <Switch
+                checked={config.groupConfig?.defaultExpanded ?? true}
+                onCheckedChange={(checked) =>
+                  updateGroupConfig({ defaultExpanded: checked })
+                }
+              />
+            </div>
+
+            {/* 그룹 정렬 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹 정렬</Label>
+              <Select
+                value={config.groupConfig?.sortDirection || "asc"}
+                onValueChange={(value: "asc" | "desc") =>
+                  updateGroupConfig({ sortDirection: value })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {sortDirectionOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 개수 표시 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">개수 표시</Label>
+              <Switch
+                checked={config.groupConfig?.summary?.showCount ?? true}
+                onCheckedChange={(checked) =>
+                  updateGroupConfig({
+                    summary: {
+                      ...config.groupConfig?.summary,
+                      showCount: checked,
+                    },
+                  })
+                }
+              />
+            </div>
+
+            {/* 합계 컬럼 */}
+            <div className="space-y-1">
+              <Label className="text-xs">합계 표시 컬럼</Label>
+              <div className="max-h-32 space-y-1 overflow-y-auto rounded border p-2">
+                {tableColumns.map((col) => (
+                  <div
+                    key={col.columnName}
+                    className="flex items-center gap-2 text-xs"
+                  >
+                    <Checkbox
+                      id={`sum-${col.columnName}`}
+                      checked={
+                        config.groupConfig?.summary?.sumColumns?.includes(
+                          col.columnName
+                        ) ?? false
+                      }
+                      onCheckedChange={() => toggleSumColumn(col.columnName)}
+                    />
+                    <label
+                      htmlFor={`sum-${col.columnName}`}
+                      className="cursor-pointer"
+                    >
+                      {col.displayName || col.columnName}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 표시 설정 */}
+        <AccordionItem value="display">
+          <AccordionTrigger className="text-sm font-medium">
+            표시 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 체크박스 표시 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">체크박스 표시</Label>
+              <Switch
+                checked={config.showCheckbox}
+                onCheckedChange={(checked) =>
+                  updateConfig({ showCheckbox: checked })
+                }
+              />
+            </div>
+
+            {/* 체크박스 모드 */}
+            {config.showCheckbox && (
+              <div className="space-y-1">
+                <Label className="text-xs">선택 모드</Label>
+                <Select
+                  value={config.checkboxMode || "multi"}
+                  onValueChange={(value: "single" | "multi") =>
+                    updateConfig({ checkboxMode: value })
+                  }
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {checkboxModeOptions.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* 그룹 헤더 스타일 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹 헤더 스타일</Label>
+              <Select
+                value={config.groupHeaderStyle || "default"}
+                onValueChange={(value: "default" | "compact" | "card") =>
+                  updateConfig({ groupHeaderStyle: value })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {groupHeaderStyleOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 전체 펼치기/접기 버튼 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">펼치기/접기 버튼 표시</Label>
+              <Switch
+                checked={config.showExpandAllButton ?? true}
+                onCheckedChange={(checked) =>
+                  updateConfig({ showExpandAllButton: checked })
+                }
+              />
+            </div>
+
+            {/* 행 클릭 가능 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">행 클릭 가능</Label>
+              <Switch
+                checked={config.rowClickable ?? true}
+                onCheckedChange={(checked) =>
+                  updateConfig({ rowClickable: checked })
+                }
+              />
+            </div>
+
+            {/* 최대 높이 */}
+            <div className="space-y-1">
+              <Label className="text-xs">최대 높이 (px)</Label>
+              <Input
+                type="number"
+                value={config.maxHeight || 600}
+                onChange={(e) =>
+                  updateConfig({ maxHeight: parseInt(e.target.value) || 600 })
+                }
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 빈 데이터 메시지 */}
+            <div className="space-y-1">
+              <Label className="text-xs">빈 데이터 메시지</Label>
+              <Input
+                value={config.emptyMessage || ""}
+                onChange={(e) =>
+                  updateConfig({ emptyMessage: e.target.value })
+                }
+                placeholder="데이터가 없습니다."
+                className="h-8 text-xs"
+              />
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 컬럼 설정 */}
+        <AccordionItem value="columns">
+          <AccordionTrigger className="text-sm font-medium">
+            컬럼 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-2 pt-2">
+            <div className="max-h-48 space-y-1 overflow-y-auto rounded border p-2">
+              {(config.columns || tableColumns).map((col) => (
+                <div
+                  key={col.columnName}
+                  className="flex items-center gap-2 text-xs"
+                >
+                  <Checkbox
+                    id={`col-${col.columnName}`}
+                    checked={col.visible !== false}
+                    onCheckedChange={() =>
+                      toggleColumnVisibility(col.columnName)
+                    }
+                  />
+                  <label
+                    htmlFor={`col-${col.columnName}`}
+                    className="cursor-pointer"
+                  >
+                    {col.displayName || col.columnName}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 연동 설정 */}
+        <AccordionItem value="linked">
+          <AccordionTrigger className="text-sm font-medium">
+            연동 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">연결 필터</Label>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={addLinkedFilter}
+                  className="h-6 text-xs"
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  추가
+                </Button>
+              </div>
+
+              {(config.linkedFilters || []).length === 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  연결된 필터가 없습니다.
+                </p>
+              ) : (
+                <div className="space-y-2">
+                  {(config.linkedFilters || []).map((filter, idx) => (
+                    <div
+                      key={idx}
+                      className="space-y-2 rounded border p-2"
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs font-medium">
+                          필터 #{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-2">
+                          <Switch
+                            checked={filter.enabled !== false}
+                            onCheckedChange={(checked) =>
+                              updateLinkedFilter(idx, { enabled: checked })
+                            }
+                          />
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeLinkedFilter(idx)}
+                            className="h-6 w-6 p-0 text-destructive"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">소스 컴포넌트 ID</Label>
+                        <Input
+                          value={filter.sourceComponentId}
+                          onChange={(e) =>
+                            updateLinkedFilter(idx, {
+                              sourceComponentId: e.target.value,
+                            })
+                          }
+                          placeholder="예: search-filter-1"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">소스 필드</Label>
+                        <Input
+                          value={filter.sourceField || "value"}
+                          onChange={(e) =>
+                            updateLinkedFilter(idx, {
+                              sourceField: e.target.value,
+                            })
+                          }
+                          placeholder="value"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">대상 컬럼</Label>
+                        <Select
+                          value={filter.targetColumn}
+                          onValueChange={(value) =>
+                            updateLinkedFilter(idx, { targetColumn: value })
+                          }
+                        >
+                          <SelectTrigger className="h-7 text-xs">
+                            <SelectValue placeholder="컬럼 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {tableColumns.map((col) => (
+                              <SelectItem
+                                key={col.columnName}
+                                value={col.columnName}
+                              >
+                                {col.displayName || col.columnName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <p className="text-[10px] text-muted-foreground">
+                다른 컴포넌트(검색필터 등)의 선택 값으로 이 테이블을 필터링합니다.
+              </p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+export default TableGroupedConfigPanel;
diff --git a/frontend/lib/registry/components/v2-table-grouped/TableGroupedRenderer.tsx b/frontend/lib/registry/components/v2-table-grouped/TableGroupedRenderer.tsx
new file mode 100644
index 00000000..245d8ee6
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/TableGroupedRenderer.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2TableGroupedDefinition } from "./index";
+import { TableGroupedComponent } from "./TableGroupedComponent";
+
+/**
+ * TableGrouped 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class TableGroupedRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2TableGroupedDefinition;
+
+  render(): React.ReactElement {
+    return (
+      <TableGroupedComponent
+        {...this.props}
+        config={this.props.component?.componentConfig || {}}
+        isDesignMode={this.props.isDesignMode}
+        formData={this.props.formData}
+        componentId={this.props.component?.id}
+      />
+    );
+  }
+
+  // 설정 변경 핸들러
+  protected handleConfigChange = (config: any) => {
+    console.log("📥 TableGroupedRenderer에서 설정 변경 받음:", config);
+
+    // 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
+    if (this.props.onConfigChange) {
+      this.props.onConfigChange(config);
+    }
+
+    this.updateComponent({ config });
+  };
+
+  // 값 변경 처리
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+TableGroupedRenderer.registerSelf();
+
+// 강제 등록 (디버깅용)
+if (typeof window !== "undefined") {
+  setTimeout(() => {
+    try {
+      TableGroupedRenderer.registerSelf();
+    } catch (error) {
+      console.error("❌ TableGrouped 강제 등록 실패:", error);
+    }
+  }, 1000);
+}
diff --git a/frontend/lib/registry/components/v2-table-grouped/components/GroupHeader.tsx b/frontend/lib/registry/components/v2-table-grouped/components/GroupHeader.tsx
new file mode 100644
index 00000000..f7119f4e
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/components/GroupHeader.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+import { ChevronDown, ChevronRight, Minus } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import { GroupState, TableGroupedConfig } from "../types";
+
+interface GroupHeaderProps {
+  /** 그룹 상태 */
+  group: GroupState;
+  /** 설정 */
+  config: TableGroupedConfig;
+  /** 그룹 토글 핸들러 */
+  onToggle: () => void;
+  /** 그룹 선택 토글 핸들러 */
+  onSelectToggle?: () => void;
+  /** 그룹 헤더 스타일 */
+  style?: "default" | "compact" | "card";
+  /** 컬럼 개수 (colspan용) */
+  columnCount?: number;
+}
+
+/**
+ * 그룹 헤더 컴포넌트
+ * 그룹 펼치기/접기, 체크박스, 요약 정보 표시
+ */
+export function GroupHeader({
+  group,
+  config,
+  onToggle,
+  onSelectToggle,
+  style = "default",
+  columnCount = 1,
+}: GroupHeaderProps) {
+  const { showCheckbox } = config;
+  const { summary } = group;
+
+  // 일부 선택 여부
+  const isIndeterminate =
+    group.selectedItemIds &&
+    group.selectedItemIds.length > 0 &&
+    group.selectedItemIds.length < group.items.length;
+
+  // 요약 텍스트 생성
+  const summaryText = React.useMemo(() => {
+    const parts: string[] = [];
+
+    // 개수
+    if (config.groupConfig?.summary?.showCount !== false) {
+      parts.push(`${summary.count}건`);
+    }
+
+    // 합계
+    if (summary.sum) {
+      for (const [col, value] of Object.entries(summary.sum)) {
+        const displayName =
+          config.columns?.find((c) => c.columnName === col)?.displayName || col;
+        parts.push(`${displayName}: ${value.toLocaleString()}`);
+      }
+    }
+
+    return parts.join(" | ");
+  }, [summary, config]);
+
+  // 스타일별 클래스
+  const headerClasses = cn(
+    "flex items-center gap-2 cursor-pointer select-none transition-colors",
+    {
+      // default 스타일
+      "px-3 py-2 bg-muted/50 hover:bg-muted border-b": style === "default",
+      // compact 스타일
+      "px-2 py-1 bg-muted/30 hover:bg-muted/50 border-b text-sm":
+        style === "compact",
+      // card 스타일
+      "px-4 py-3 bg-card border rounded-t-lg shadow-sm hover:shadow":
+        style === "card",
+    }
+  );
+
+  return (
+    <tr className="group-header-row">
+      <td
+        colSpan={columnCount}
+        className="p-0"
+        onClick={(e) => {
+          // 체크박스 클릭 시 토글 방지
+          if ((e.target as HTMLElement).closest('[data-checkbox="true"]')) {
+            return;
+          }
+          onToggle();
+        }}
+      >
+        <div className={headerClasses}>
+          {/* 펼치기/접기 아이콘 */}
+          <span className="flex-shrink-0 text-muted-foreground">
+            {group.expanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </span>
+
+          {/* 체크박스 */}
+          {showCheckbox && onSelectToggle && (
+            <span
+              data-checkbox="true"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelectToggle();
+              }}
+            >
+              <Checkbox
+                checked={group.selected}
+                className={cn(
+                  "data-[state=checked]:bg-primary",
+                  isIndeterminate && "data-[state=checked]:bg-muted"
+                )}
+              />
+              {isIndeterminate && (
+                <Minus className="absolute h-3 w-3 text-muted-foreground" />
+              )}
+            </span>
+          )}
+
+          {/* 그룹 라벨 */}
+          <span className="font-medium text-foreground">{group.groupLabel}</span>
+
+          {/* 요약 정보 */}
+          {summaryText && (
+            <span className="ml-auto text-sm text-muted-foreground">
+              {summaryText}
+            </span>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export default GroupHeader;
diff --git a/frontend/lib/registry/components/v2-table-grouped/config.ts b/frontend/lib/registry/components/v2-table-grouped/config.ts
new file mode 100644
index 00000000..fb38744c
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/config.ts
@@ -0,0 +1,64 @@
+import { TableGroupedConfig } from "./types";
+
+/**
+ * v2-table-grouped 기본 설정값
+ */
+export const defaultTableGroupedConfig: Partial<TableGroupedConfig> = {
+  // 그룹화 기본 설정
+  groupConfig: {
+    groupByColumn: "",
+    groupLabelFormat: "{value}",
+    defaultExpanded: true,
+    sortDirection: "asc",
+    summary: {
+      showCount: true,
+      sumColumns: [],
+    },
+  },
+
+  // 체크박스 기본 설정
+  showCheckbox: false,
+  checkboxMode: "multi",
+
+  // 페이지네이션 기본 설정
+  pagination: {
+    enabled: false,
+    pageSize: 10,
+  },
+
+  // UI 기본 설정
+  isReadOnly: false,
+  rowClickable: true,
+  showExpandAllButton: true,
+  groupHeaderStyle: "default",
+  emptyMessage: "데이터가 없습니다.",
+
+  // 높이 기본 설정
+  height: "auto",
+  maxHeight: 600,
+};
+
+/**
+ * 그룹 헤더 스타일 옵션
+ */
+export const groupHeaderStyleOptions = [
+  { value: "default", label: "기본" },
+  { value: "compact", label: "컴팩트" },
+  { value: "card", label: "카드" },
+];
+
+/**
+ * 체크박스 모드 옵션
+ */
+export const checkboxModeOptions = [
+  { value: "single", label: "단일 선택" },
+  { value: "multi", label: "다중 선택" },
+];
+
+/**
+ * 정렬 방향 옵션
+ */
+export const sortDirectionOptions = [
+  { value: "asc", label: "오름차순" },
+  { value: "desc", label: "내림차순" },
+];
diff --git a/frontend/lib/registry/components/v2-table-grouped/hooks/useGroupedData.ts b/frontend/lib/registry/components/v2-table-grouped/hooks/useGroupedData.ts
new file mode 100644
index 00000000..d9f40aca
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/hooks/useGroupedData.ts
@@ -0,0 +1,389 @@
+"use client";
+
+import { useState, useCallback, useMemo, useEffect } from "react";
+import {
+  TableGroupedConfig,
+  GroupState,
+  GroupSummary,
+  UseGroupedDataResult,
+} from "../types";
+import { apiClient } from "@/lib/api/client";
+
+/**
+ * 그룹 요약 데이터 계산
+ */
+function calculateSummary(
+  items: any[],
+  config: TableGroupedConfig
+): GroupSummary {
+  const summary: GroupSummary = {
+    count: items.length,
+  };
+
+  const summaryConfig = config.groupConfig?.summary;
+  if (!summaryConfig) return summary;
+
+  // 합계 계산
+  if (summaryConfig.sumColumns && summaryConfig.sumColumns.length > 0) {
+    summary.sum = {};
+    for (const col of summaryConfig.sumColumns) {
+      summary.sum[col] = items.reduce((acc, item) => {
+        const val = parseFloat(item[col]);
+        return acc + (isNaN(val) ? 0 : val);
+      }, 0);
+    }
+  }
+
+  // 평균 계산
+  if (summaryConfig.avgColumns && summaryConfig.avgColumns.length > 0) {
+    summary.avg = {};
+    for (const col of summaryConfig.avgColumns) {
+      const validItems = items.filter(
+        (item) => item[col] !== null && item[col] !== undefined
+      );
+      const sum = validItems.reduce((acc, item) => {
+        const val = parseFloat(item[col]);
+        return acc + (isNaN(val) ? 0 : val);
+      }, 0);
+      summary.avg[col] = validItems.length > 0 ? sum / validItems.length : 0;
+    }
+  }
+
+  // 최대값 계산
+  if (summaryConfig.maxColumns && summaryConfig.maxColumns.length > 0) {
+    summary.max = {};
+    for (const col of summaryConfig.maxColumns) {
+      const values = items
+        .map((item) => parseFloat(item[col]))
+        .filter((v) => !isNaN(v));
+      summary.max[col] = values.length > 0 ? Math.max(...values) : 0;
+    }
+  }
+
+  // 최소값 계산
+  if (summaryConfig.minColumns && summaryConfig.minColumns.length > 0) {
+    summary.min = {};
+    for (const col of summaryConfig.minColumns) {
+      const values = items
+        .map((item) => parseFloat(item[col]))
+        .filter((v) => !isNaN(v));
+      summary.min[col] = values.length > 0 ? Math.min(...values) : 0;
+    }
+  }
+
+  return summary;
+}
+
+/**
+ * 그룹 라벨 포맷팅
+ */
+function formatGroupLabel(
+  groupValue: any,
+  item: any,
+  format?: string
+): string {
+  if (!format) {
+    return String(groupValue ?? "(빈 값)");
+  }
+
+  // {value}를 그룹 값으로 치환
+  let label = format.replace("{value}", String(groupValue ?? "(빈 값)"));
+
+  // {컬럼명} 패턴을 해당 컬럼 값으로 치환
+  const columnPattern = /\{([^}]+)\}/g;
+  label = label.replace(columnPattern, (match, columnName) => {
+    if (columnName === "value") return String(groupValue ?? "");
+    return String(item?.[columnName] ?? "");
+  });
+
+  return label;
+}
+
+/**
+ * 데이터를 그룹화하는 훅
+ */
+export function useGroupedData(
+  config: TableGroupedConfig,
+  externalData?: any[],
+  searchFilters?: Record<string, any>
+): UseGroupedDataResult {
+  // 원본 데이터
+  const [rawData, setRawData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 그룹 펼침 상태 관리
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  // 사용자가 수동으로 펼침/접기를 조작했는지 여부
+  const [isManuallyControlled, setIsManuallyControlled] = useState(false);
+
+  // 선택 상태 관리
+  const [selectedItemIds, setSelectedItemIds] = useState<Set<string>>(
+    new Set()
+  );
+
+  // 테이블명 결정
+  const tableName = config.useCustomTable
+    ? config.customTableName
+    : config.selectedTable;
+
+  // 데이터 로드
+  const fetchData = useCallback(async () => {
+    if (externalData) {
+      setRawData(externalData);
+      return;
+    }
+
+    if (!tableName) {
+      setRawData([]);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await apiClient.post(
+        `/table-management/tables/${tableName}/data`,
+        {
+          page: 1,
+          size: 10000, // 그룹화를 위해 전체 데이터 로드
+          autoFilter: true,
+          search: searchFilters || {},
+        }
+      );
+
+      const responseData = response.data?.data?.data || response.data?.data || [];
+      setRawData(Array.isArray(responseData) ? responseData : []);
+    } catch (err: any) {
+      setError(err.message || "데이터 로드 중 오류 발생");
+      setRawData([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [tableName, externalData, searchFilters]);
+
+  // 초기 데이터 로드
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // 외부 데이터 변경 시 동기화
+  useEffect(() => {
+    if (externalData) {
+      setRawData(externalData);
+    }
+  }, [externalData]);
+
+  // 그룹화된 데이터 계산
+  const groups = useMemo((): GroupState[] => {
+    const groupByColumn = config.groupConfig?.groupByColumn;
+    if (!groupByColumn || rawData.length === 0) {
+      return [];
+    }
+
+    // 데이터를 그룹별로 분류
+    const groupMap = new Map<string, any[]>();
+
+    for (const item of rawData) {
+      const groupValue = item[groupByColumn];
+      const groupKey = String(groupValue ?? "__null__");
+
+      if (!groupMap.has(groupKey)) {
+        groupMap.set(groupKey, []);
+      }
+      groupMap.get(groupKey)!.push(item);
+    }
+
+    // 그룹 배열 생성
+    const groupArray: GroupState[] = [];
+    const defaultExpanded = config.groupConfig?.defaultExpanded ?? true;
+
+    for (const [groupKey, items] of groupMap.entries()) {
+      const firstItem = items[0];
+      const groupValue =
+        groupKey === "__null__" ? null : firstItem[groupByColumn];
+
+      // 펼침 상태 결정: 수동 조작 전에는 defaultExpanded, 수동 조작 후에는 expandedGroups 참조
+      const isExpanded = isManuallyControlled
+        ? expandedGroups.has(groupKey)
+        : defaultExpanded;
+
+      groupArray.push({
+        groupKey,
+        groupLabel: formatGroupLabel(
+          groupValue,
+          firstItem,
+          config.groupConfig?.groupLabelFormat
+        ),
+        expanded: isExpanded,
+        items,
+        summary: calculateSummary(items, config),
+        selected: items.every((item) =>
+          selectedItemIds.has(getItemId(item, config))
+        ),
+        selectedItemIds: items
+          .filter((item) => selectedItemIds.has(getItemId(item, config)))
+          .map((item) => getItemId(item, config)),
+      });
+    }
+
+    // 정렬
+    const sortDirection = config.groupConfig?.sortDirection ?? "asc";
+    groupArray.sort((a, b) => {
+      const comparison = a.groupLabel.localeCompare(b.groupLabel, "ko");
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+
+    return groupArray;
+  }, [rawData, config, expandedGroups, selectedItemIds, isManuallyControlled]);
+
+  // 아이템 ID 추출
+  function getItemId(item: any, cfg: TableGroupedConfig): string {
+    // id 또는 첫 번째 컬럼을 ID로 사용
+    if (item.id !== undefined) return String(item.id);
+    const firstCol = cfg.columns?.[0]?.columnName;
+    if (firstCol && item[firstCol] !== undefined) return String(item[firstCol]);
+    return JSON.stringify(item);
+  }
+
+  // 그룹 토글
+  const toggleGroup = useCallback((groupKey: string) => {
+    setIsManuallyControlled(true);
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupKey)) {
+        next.delete(groupKey);
+      } else {
+        next.add(groupKey);
+      }
+      return next;
+    });
+  }, []);
+
+  // 전체 펼치기
+  const expandAll = useCallback(() => {
+    setIsManuallyControlled(true);
+    setExpandedGroups(new Set(groups.map((g) => g.groupKey)));
+  }, [groups]);
+
+  // 전체 접기
+  const collapseAll = useCallback(() => {
+    setIsManuallyControlled(true);
+    setExpandedGroups(new Set());
+  }, []);
+
+  // 아이템 선택 토글
+  const toggleItemSelection = useCallback(
+    (groupKey: string, itemId: string) => {
+      setSelectedItemIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(itemId)) {
+          next.delete(itemId);
+        } else {
+          // 단일 선택 모드
+          if (config.checkboxMode === "single") {
+            next.clear();
+          }
+          next.add(itemId);
+        }
+        return next;
+      });
+    },
+    [config.checkboxMode]
+  );
+
+  // 그룹 전체 선택 토글
+  const toggleGroupSelection = useCallback(
+    (groupKey: string) => {
+      const group = groups.find((g) => g.groupKey === groupKey);
+      if (!group) return;
+
+      setSelectedItemIds((prev) => {
+        const next = new Set(prev);
+        const groupItemIds = group.items.map((item) => getItemId(item, config));
+        const allSelected = groupItemIds.every((id) => next.has(id));
+
+        if (allSelected) {
+          // 전체 해제
+          for (const id of groupItemIds) {
+            next.delete(id);
+          }
+        } else {
+          // 전체 선택
+          if (config.checkboxMode === "single") {
+            next.clear();
+            next.add(groupItemIds[0]);
+          } else {
+            for (const id of groupItemIds) {
+              next.add(id);
+            }
+          }
+        }
+        return next;
+      });
+    },
+    [groups, config]
+  );
+
+  // 전체 선택 토글
+  const toggleAllSelection = useCallback(() => {
+    const allItemIds = rawData.map((item) => getItemId(item, config));
+    const allSelected = allItemIds.every((id) => selectedItemIds.has(id));
+
+    if (allSelected) {
+      setSelectedItemIds(new Set());
+    } else {
+      if (config.checkboxMode === "single" && allItemIds.length > 0) {
+        setSelectedItemIds(new Set([allItemIds[0]]));
+      } else {
+        setSelectedItemIds(new Set(allItemIds));
+      }
+    }
+  }, [rawData, config, selectedItemIds]);
+
+  // 선택된 아이템 목록
+  const selectedItems = useMemo(() => {
+    return rawData.filter((item) =>
+      selectedItemIds.has(getItemId(item, config))
+    );
+  }, [rawData, selectedItemIds, config]);
+
+  // 모두 선택 여부
+  const isAllSelected = useMemo(() => {
+    if (rawData.length === 0) return false;
+    return rawData.every((item) =>
+      selectedItemIds.has(getItemId(item, config))
+    );
+  }, [rawData, selectedItemIds, config]);
+
+  // 일부 선택 여부
+  const isIndeterminate = useMemo(() => {
+    if (rawData.length === 0) return false;
+    const selectedCount = rawData.filter((item) =>
+      selectedItemIds.has(getItemId(item, config))
+    ).length;
+    return selectedCount > 0 && selectedCount < rawData.length;
+  }, [rawData, selectedItemIds, config]);
+
+  return {
+    groups,
+    isLoading,
+    error,
+    toggleGroup,
+    expandAll,
+    collapseAll,
+    toggleItemSelection,
+    toggleGroupSelection,
+    toggleAllSelection,
+    selectedItems,
+    isAllSelected,
+    isIndeterminate,
+    refresh: fetchData,
+    rawData,
+    totalCount: rawData.length,
+    groupCount: groups.length,
+  };
+}
+
+export default useGroupedData;
diff --git a/frontend/lib/registry/components/v2-table-grouped/index.ts b/frontend/lib/registry/components/v2-table-grouped/index.ts
new file mode 100644
index 00000000..7e984490
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/index.ts
@@ -0,0 +1,75 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import type { WebType } from "@/types/screen";
+import { TableGroupedComponent } from "./TableGroupedComponent";
+import { TableGroupedConfigPanel } from "./TableGroupedConfigPanel";
+import { TableGroupedConfig } from "./types";
+
+/**
+ * V2 그룹화 테이블 컴포넌트 Definition
+ *
+ * 데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능을 제공합니다.
+ * v2-table-list를 기반으로 확장된 컴포넌트입니다.
+ */
+export const V2TableGroupedDefinition = createComponentDefinition({
+  id: "v2-table-grouped",
+  name: "그룹화 테이블",
+  nameEng: "Grouped Table Component",
+  description: "데이터를 그룹화하여 접기/펼치기 기능을 제공하는 테이블",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: TableGroupedComponent,
+  defaultConfig: {
+    // 테이블 설정
+    selectedTable: "",
+    useCustomTable: false,
+    customTableName: "",
+
+    // 그룹화 설정
+    groupConfig: {
+      groupByColumn: "",
+      groupLabelFormat: "{value}",
+      defaultExpanded: true,
+      sortDirection: "asc",
+      summary: {
+        showCount: true,
+        sumColumns: [],
+      },
+    },
+
+    // 컬럼 설정
+    columns: [],
+
+    // 체크박스 설정
+    showCheckbox: false,
+    checkboxMode: "multi",
+
+    // 페이지네이션 설정
+    pagination: {
+      enabled: false,
+      pageSize: 10,
+    },
+
+    // UI 설정
+    isReadOnly: false,
+    rowClickable: true,
+    showExpandAllButton: true,
+    groupHeaderStyle: "default",
+    emptyMessage: "데이터가 없습니다.",
+    height: "auto",
+    maxHeight: 600,
+  },
+  defaultSize: { width: 800, height: 500 },
+  configPanel: TableGroupedConfigPanel,
+  icon: "Layers",
+  tags: ["테이블", "그룹화", "접기", "펼치기", "목록"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "",
+});
+
+// 타입 내보내기
+export type { TableGroupedConfig } from "./types";
diff --git a/frontend/lib/registry/components/v2-table-grouped/types.ts b/frontend/lib/registry/components/v2-table-grouped/types.ts
new file mode 100644
index 00000000..20bfc77b
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/types.ts
@@ -0,0 +1,299 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+import { ColumnConfig, EntityJoinInfo } from "../v2-table-list/types";
+
+/**
+ * 그룹 요약 설정
+ */
+export interface GroupSummaryConfig {
+  /** 합계를 계산할 컬럼 목록 */
+  sumColumns?: string[];
+  /** 개수 표시 여부 */
+  showCount?: boolean;
+  /** 평균 컬럼 목록 */
+  avgColumns?: string[];
+  /** 최대값 컬럼 목록 */
+  maxColumns?: string[];
+  /** 최소값 컬럼 목록 */
+  minColumns?: string[];
+}
+
+/**
+ * 그룹화 설정
+ */
+export interface GroupConfig {
+  /** 그룹화 기준 컬럼 */
+  groupByColumn: string;
+
+  /** 그룹 표시 형식 (예: "{item_name} ({item_code})") */
+  groupLabelFormat?: string;
+
+  /** 그룹 요약 설정 */
+  summary?: GroupSummaryConfig;
+
+  /** 초기 펼침 상태 (기본값: true) */
+  defaultExpanded?: boolean;
+
+  /** 중첩 그룹 (다중 그룹화) - 향후 확장 */
+  nestedGroup?: GroupConfig;
+
+  /** 그룹 정렬 방식 */
+  sortDirection?: "asc" | "desc";
+
+  /** 그룹 정렬 컬럼 (기본: groupByColumn) */
+  sortColumn?: string;
+}
+
+/**
+ * 그룹화 테이블 설정 (ComponentConfig 기반)
+ */
+export interface TableGroupedConfig extends ComponentConfig {
+  /** 테이블명 */
+  selectedTable?: string;
+
+  /** 커스텀 테이블 사용 여부 */
+  useCustomTable?: boolean;
+
+  /** 커스텀 테이블명 */
+  customTableName?: string;
+
+  /** 그룹화 설정 */
+  groupConfig: GroupConfig;
+
+  /** 컬럼 설정 */
+  columns?: ColumnConfig[];
+
+  /** 체크박스 표시 여부 */
+  showCheckbox?: boolean;
+
+  /** 체크박스 모드 */
+  checkboxMode?: "single" | "multi";
+
+  /** 페이지네이션 (그룹 단위) */
+  pagination?: {
+    enabled: boolean;
+    pageSize: number;
+  };
+
+  /** 기본 정렬 설정 */
+  defaultSort?: {
+    column: string;
+    direction: "asc" | "desc";
+  };
+
+  /** 읽기 전용 */
+  isReadOnly?: boolean;
+
+  /** 행 클릭 가능 여부 */
+  rowClickable?: boolean;
+
+  /** 높이 설정 */
+  height?: number | string;
+
+  /** 최대 높이 */
+  maxHeight?: number | string;
+
+  /** 전체 펼치기/접기 버튼 표시 */
+  showExpandAllButton?: boolean;
+
+  /** 그룹 헤더 스타일 */
+  groupHeaderStyle?: "default" | "compact" | "card";
+
+  /** 빈 데이터 메시지 */
+  emptyMessage?: string;
+
+  /** Entity 조인 컬럼 정보 */
+  entityJoinColumns?: Array<{
+    columnName: string;
+    entityJoinInfo: EntityJoinInfo;
+  }>;
+
+  /** 데이터 필터 */
+  dataFilter?: {
+    column: string;
+    operator: "eq" | "ne" | "gt" | "lt" | "gte" | "lte" | "like" | "in";
+    value: any;
+  }[];
+
+  /** 연결된 필터 설정 (다른 컴포넌트와 연동) */
+  linkedFilters?: LinkedFilterConfig[];
+}
+
+/**
+ * 연결된 필터 설정
+ */
+export interface LinkedFilterConfig {
+  /** 소스 컴포넌트 ID */
+  sourceComponentId: string;
+  /** 소스 필드 */
+  sourceField?: string;
+  /** 대상 컬럼 */
+  targetColumn: string;
+  /** 활성화 여부 */
+  enabled?: boolean;
+}
+
+/**
+ * 그룹 요약 데이터
+ */
+export interface GroupSummary {
+  /** 개수 */
+  count: number;
+  /** 합계 (컬럼별) */
+  sum?: Record<string, number>;
+  /** 평균 (컬럼별) */
+  avg?: Record<string, number>;
+  /** 최대값 (컬럼별) */
+  max?: Record<string, number>;
+  /** 최소값 (컬럼별) */
+  min?: Record<string, number>;
+}
+
+/**
+ * 그룹 상태
+ */
+export interface GroupState {
+  /** 그룹 키 (groupByColumn 값) */
+  groupKey: string;
+
+  /** 그룹 표시 라벨 */
+  groupLabel: string;
+
+  /** 펼침 여부 */
+  expanded: boolean;
+
+  /** 그룹 내 데이터 */
+  items: any[];
+
+  /** 그룹 요약 데이터 */
+  summary: GroupSummary;
+
+  /** 그룹 선택 여부 */
+  selected?: boolean;
+
+  /** 그룹 내 선택된 아이템 ID 목록 */
+  selectedItemIds?: string[];
+}
+
+/**
+ * 선택 이벤트 데이터
+ */
+export interface SelectionChangeEvent {
+  /** 선택된 그룹 키 목록 */
+  selectedGroups: string[];
+  /** 선택된 아이템 (전체) */
+  selectedItems: any[];
+  /** 모두 선택 여부 */
+  isAllSelected: boolean;
+}
+
+/**
+ * 그룹 토글 이벤트
+ */
+export interface GroupToggleEvent {
+  /** 그룹 키 */
+  groupKey: string;
+  /** 펼침 상태 */
+  expanded: boolean;
+}
+
+/**
+ * 행 클릭 이벤트
+ */
+export interface RowClickEvent {
+  /** 클릭된 행 데이터 */
+  row: any;
+  /** 그룹 키 */
+  groupKey: string;
+  /** 그룹 내 인덱스 */
+  indexInGroup: number;
+}
+
+/**
+ * TableGroupedComponent Props
+ */
+export interface TableGroupedComponentProps {
+  /** 컴포넌트 설정 */
+  config: TableGroupedConfig;
+
+  /** 디자인 모드 여부 */
+  isDesignMode?: boolean;
+
+  /** 폼 데이터 (formData 전달용) */
+  formData?: Record<string, any>;
+
+  /** 선택 변경 이벤트 */
+  onSelectionChange?: (event: SelectionChangeEvent) => void;
+
+  /** 그룹 토글 이벤트 */
+  onGroupToggle?: (event: GroupToggleEvent) => void;
+
+  /** 행 클릭 이벤트 */
+  onRowClick?: (event: RowClickEvent) => void;
+
+  /** 외부에서 주입된 데이터 (선택) */
+  externalData?: any[];
+
+  /** 로딩 상태 (외부 제어) */
+  isLoading?: boolean;
+
+  /** 에러 상태 (외부 제어) */
+  error?: string;
+
+  /** 컴포넌트 ID */
+  componentId?: string;
+}
+
+/**
+ * useGroupedData 훅 반환 타입
+ */
+export interface UseGroupedDataResult {
+  /** 그룹화된 데이터 */
+  groups: GroupState[];
+
+  /** 로딩 상태 */
+  isLoading: boolean;
+
+  /** 에러 */
+  error: string | null;
+
+  /** 그룹 펼치기/접기 토글 */
+  toggleGroup: (groupKey: string) => void;
+
+  /** 전체 펼치기 */
+  expandAll: () => void;
+
+  /** 전체 접기 */
+  collapseAll: () => void;
+
+  /** 아이템 선택 토글 */
+  toggleItemSelection: (groupKey: string, itemId: string) => void;
+
+  /** 그룹 전체 선택 토글 */
+  toggleGroupSelection: (groupKey: string) => void;
+
+  /** 전체 선택 토글 */
+  toggleAllSelection: () => void;
+
+  /** 선택된 아이템 목록 */
+  selectedItems: any[];
+
+  /** 모두 선택 여부 */
+  isAllSelected: boolean;
+
+  /** 일부 선택 여부 */
+  isIndeterminate: boolean;
+
+  /** 데이터 새로고침 */
+  refresh: () => void;
+
+  /** 원본 데이터 */
+  rawData: any[];
+
+  /** 전체 데이터 개수 */
+  totalCount: number;
+
+  /** 그룹 개수 */
+  groupCount: number;
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/README.md b/frontend/lib/registry/components/v2-timeline-scheduler/README.md
new file mode 100644
index 00000000..2e8d7262
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/README.md
@@ -0,0 +1,159 @@
+# v2-timeline-scheduler
+
+간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트
+
+## 개요
+
+`v2-timeline-scheduler`는 생산계획, 일정관리 등에서 사용할 수 있는 타임라인 기반의 스케줄러 컴포넌트입니다. 리소스(설비, 작업자 등)별로 스케줄을 시각화하고, 드래그/리사이즈로 일정을 조정할 수 있습니다.
+
+## 핵심 기능
+
+| 기능 | 설명 |
+|------|------|
+| 타임라인 그리드 | 일/주/월 단위 그리드 표시 |
+| 스케줄 바 | 시작~종료 기간 바 렌더링 |
+| 리소스 행 | 설비/작업자별 행 구분 |
+| 드래그 이동 | 스케줄 바 드래그로 날짜 변경 |
+| 리사이즈 | 바 양쪽 핸들로 기간 조정 |
+| 줌 레벨 | 일/주/월 단위 전환 |
+| 진행률 표시 | 바 내부 진행률 표시 |
+| 오늘 표시선 | 현재 날짜 표시선 |
+
+## 사용법
+
+### 기본 사용
+
+```tsx
+import { TimelineSchedulerComponent } from "@/lib/registry/components/v2-timeline-scheduler";
+
+<TimelineSchedulerComponent
+  config={{
+    selectedTable: "production_schedule",
+    resourceTable: "equipment",
+    fieldMapping: {
+      id: "id",
+      resourceId: "equipment_id",
+      title: "plan_name",
+      startDate: "start_date",
+      endDate: "end_date",
+      status: "status",
+      progress: "progress",
+    },
+    resourceFieldMapping: {
+      id: "id",
+      name: "equipment_name",
+    },
+    defaultZoomLevel: "day",
+    editable: true,
+  }}
+  onScheduleClick={(event) => {
+    console.log("클릭된 스케줄:", event.schedule);
+  }}
+  onDragEnd={(event) => {
+    console.log("드래그 완료:", event);
+  }}
+/>
+```
+
+### 설정 옵션
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `selectedTable` | string | - | 스케줄 데이터 테이블명 |
+| `resourceTable` | string | - | 리소스 테이블명 |
+| `fieldMapping` | object | - | 스케줄 필드 매핑 |
+| `resourceFieldMapping` | object | - | 리소스 필드 매핑 |
+| `defaultZoomLevel` | "day" \| "week" \| "month" | "day" | 기본 줌 레벨 |
+| `editable` | boolean | true | 편집 가능 여부 |
+| `draggable` | boolean | true | 드래그 이동 가능 |
+| `resizable` | boolean | true | 리사이즈 가능 |
+| `rowHeight` | number | 50 | 행 높이 (px) |
+| `headerHeight` | number | 60 | 헤더 높이 (px) |
+| `resourceColumnWidth` | number | 150 | 리소스 컬럼 너비 (px) |
+| `showTodayLine` | boolean | true | 오늘 표시선 |
+| `showProgress` | boolean | true | 진행률 표시 |
+| `showToolbar` | boolean | true | 툴바 표시 |
+| `height` | number \| string | 500 | 컴포넌트 높이 |
+
+### 필드 매핑
+
+스케줄 테이블의 컬럼을 매핑합니다:
+
+```typescript
+fieldMapping: {
+  id: "id",                    // 필수: 고유 ID
+  resourceId: "equipment_id",  // 필수: 리소스 ID (FK)
+  title: "plan_name",          // 필수: 표시 제목
+  startDate: "start_date",     // 필수: 시작일
+  endDate: "end_date",         // 필수: 종료일
+  status: "status",            // 선택: 상태
+  progress: "progress",        // 선택: 진행률 (0-100)
+  color: "color",              // 선택: 바 색상
+}
+```
+
+### 이벤트
+
+| 이벤트 | 파라미터 | 설명 |
+|--------|----------|------|
+| `onScheduleClick` | `{ schedule, resource }` | 스케줄 클릭 |
+| `onCellClick` | `{ resourceId, date }` | 빈 셀 클릭 |
+| `onDragEnd` | `{ scheduleId, newStartDate, newEndDate }` | 드래그 완료 |
+| `onResizeEnd` | `{ scheduleId, newStartDate, newEndDate, direction }` | 리사이즈 완료 |
+| `onAddSchedule` | `(resourceId, date)` | 추가 버튼 클릭 |
+
+### 상태별 색상
+
+기본 상태별 색상:
+
+| 상태 | 색상 | 의미 |
+|------|------|------|
+| `planned` | 파랑 (#3b82f6) | 계획됨 |
+| `in_progress` | 주황 (#f59e0b) | 진행중 |
+| `completed` | 초록 (#10b981) | 완료 |
+| `delayed` | 빨강 (#ef4444) | 지연 |
+| `cancelled` | 회색 (#6b7280) | 취소 |
+
+## 파일 구조
+
+```
+v2-timeline-scheduler/
+├── index.ts                          # Definition
+├── types.ts                          # 타입 정의
+├── config.ts                         # 기본 설정값
+├── TimelineSchedulerComponent.tsx    # 메인 컴포넌트
+├── TimelineSchedulerConfigPanel.tsx  # 설정 패널
+├── TimelineSchedulerRenderer.tsx     # 레지스트리 등록
+├── README.md                         # 문서
+├── components/
+│   ├── index.ts
+│   ├── TimelineHeader.tsx            # 날짜 헤더
+│   ├── ScheduleBar.tsx               # 스케줄 바
+│   └── ResourceRow.tsx               # 리소스 행
+└── hooks/
+    └── useTimelineData.ts            # 데이터 관리 훅
+```
+
+## v2-table-list와의 차이점
+
+| 특성 | v2-table-list | v2-timeline-scheduler |
+|------|---------------|----------------------|
+| 표현 방식 | 행 기반 테이블 | 시간축 기반 간트차트 |
+| 데이터 구조 | 단순 목록 | 리소스 + 스케줄 (2개 테이블) |
+| 편집 방식 | 폼 입력 | 드래그/리사이즈 |
+| 시간 표현 | 텍스트 | 시각적 바 |
+| 용도 | 일반 데이터 | 일정/계획 관리 |
+
+## 향후 개선 사항
+
+- [ ] 충돌 감지 및 표시
+- [ ] 가상 스크롤 (대량 데이터)
+- [ ] 마일스톤 표시
+- [ ] 의존성 연결선
+- [ ] 드래그로 새 스케줄 생성
+- [ ] 컨텍스트 메뉴
+
+---
+
+**버전**: 2.0.0  
+**최종 수정**: 2026-01-30
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx
new file mode 100644
index 00000000..23301657
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx
@@ -0,0 +1,413 @@
+"use client";
+
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Calendar,
+  Plus,
+  Loader2,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  TimelineSchedulerComponentProps,
+  ScheduleItem,
+  ZoomLevel,
+  DragEvent,
+  ResizeEvent,
+} from "./types";
+import { useTimelineData } from "./hooks/useTimelineData";
+import { TimelineHeader, ResourceRow } from "./components";
+import { zoomLevelOptions, defaultTimelineSchedulerConfig } from "./config";
+
+/**
+ * v2-timeline-scheduler 메인 컴포넌트
+ *
+ * 간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트
+ */
+export function TimelineSchedulerComponent({
+  config,
+  isDesignMode = false,
+  formData,
+  externalSchedules,
+  externalResources,
+  isLoading: externalLoading,
+  error: externalError,
+  componentId,
+  onDragEnd,
+  onResizeEnd,
+  onScheduleClick,
+  onCellClick,
+  onAddSchedule,
+}: TimelineSchedulerComponentProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 드래그/리사이즈 상태
+  const [dragState, setDragState] = useState<{
+    schedule: ScheduleItem;
+    startX: number;
+    startY: number;
+  } | null>(null);
+
+  const [resizeState, setResizeState] = useState<{
+    schedule: ScheduleItem;
+    direction: "start" | "end";
+    startX: number;
+  } | null>(null);
+
+  // 타임라인 데이터 훅
+  const {
+    schedules,
+    resources,
+    isLoading: hookLoading,
+    error: hookError,
+    zoomLevel,
+    setZoomLevel,
+    viewStartDate,
+    viewEndDate,
+    goToPrevious,
+    goToNext,
+    goToToday,
+    updateSchedule,
+  } = useTimelineData(config, externalSchedules, externalResources);
+
+  const isLoading = externalLoading ?? hookLoading;
+  const error = externalError ?? hookError;
+
+  // 설정값
+  const rowHeight = config.rowHeight || defaultTimelineSchedulerConfig.rowHeight!;
+  const headerHeight = config.headerHeight || defaultTimelineSchedulerConfig.headerHeight!;
+  const resourceColumnWidth =
+    config.resourceColumnWidth || defaultTimelineSchedulerConfig.resourceColumnWidth!;
+  const cellWidthConfig = config.cellWidth || defaultTimelineSchedulerConfig.cellWidth!;
+  const cellWidth = cellWidthConfig[zoomLevel] || 60;
+
+  // 리소스별 스케줄 그룹화
+  const schedulesByResource = useMemo(() => {
+    const grouped = new Map<string, ScheduleItem[]>();
+
+    resources.forEach((resource) => {
+      grouped.set(resource.id, []);
+    });
+
+    schedules.forEach((schedule) => {
+      const list = grouped.get(schedule.resourceId);
+      if (list) {
+        list.push(schedule);
+      } else {
+        // 리소스가 없는 스케줄은 첫 번째 리소스에 할당
+        const firstResource = resources[0];
+        if (firstResource) {
+          const firstList = grouped.get(firstResource.id);
+          if (firstList) {
+            firstList.push(schedule);
+          }
+        }
+      }
+    });
+
+    return grouped;
+  }, [schedules, resources]);
+
+  // 줌 레벨 변경
+  const handleZoomIn = useCallback(() => {
+    const levels: ZoomLevel[] = ["month", "week", "day"];
+    const currentIdx = levels.indexOf(zoomLevel);
+    if (currentIdx < levels.length - 1) {
+      setZoomLevel(levels[currentIdx + 1]);
+    }
+  }, [zoomLevel, setZoomLevel]);
+
+  const handleZoomOut = useCallback(() => {
+    const levels: ZoomLevel[] = ["month", "week", "day"];
+    const currentIdx = levels.indexOf(zoomLevel);
+    if (currentIdx > 0) {
+      setZoomLevel(levels[currentIdx - 1]);
+    }
+  }, [zoomLevel, setZoomLevel]);
+
+  // 스케줄 클릭 핸들러
+  const handleScheduleClick = useCallback(
+    (schedule: ScheduleItem) => {
+      const resource = resources.find((r) => r.id === schedule.resourceId);
+      if (resource && onScheduleClick) {
+        onScheduleClick({ schedule, resource });
+      }
+    },
+    [resources, onScheduleClick]
+  );
+
+  // 빈 셀 클릭 핸들러
+  const handleCellClick = useCallback(
+    (resourceId: string, date: Date) => {
+      if (onCellClick) {
+        onCellClick({
+          resourceId,
+          date: date.toISOString().split("T")[0],
+        });
+      }
+    },
+    [onCellClick]
+  );
+
+  // 드래그 시작
+  const handleDragStart = useCallback(
+    (schedule: ScheduleItem, e: React.MouseEvent) => {
+      setDragState({
+        schedule,
+        startX: e.clientX,
+        startY: e.clientY,
+      });
+    },
+    []
+  );
+
+  // 드래그 종료
+  const handleDragEnd = useCallback(() => {
+    if (dragState) {
+      // TODO: 드래그 결과 계산 및 업데이트
+      setDragState(null);
+    }
+  }, [dragState]);
+
+  // 리사이즈 시작
+  const handleResizeStart = useCallback(
+    (schedule: ScheduleItem, direction: "start" | "end", e: React.MouseEvent) => {
+      setResizeState({
+        schedule,
+        direction,
+        startX: e.clientX,
+      });
+    },
+    []
+  );
+
+  // 리사이즈 종료
+  const handleResizeEnd = useCallback(() => {
+    if (resizeState) {
+      // TODO: 리사이즈 결과 계산 및 업데이트
+      setResizeState(null);
+    }
+  }, [resizeState]);
+
+  // 추가 버튼 클릭
+  const handleAddClick = useCallback(() => {
+    if (onAddSchedule && resources.length > 0) {
+      onAddSchedule(
+        resources[0].id,
+        new Date().toISOString().split("T")[0]
+      );
+    }
+  }, [onAddSchedule, resources]);
+
+  // 디자인 모드 플레이스홀더
+  if (isDesignMode) {
+    return (
+      <div className="w-full h-full min-h-[200px] border-2 border-dashed border-muted-foreground/30 rounded-lg flex items-center justify-center bg-muted/10">
+        <div className="text-center text-muted-foreground">
+          <Calendar className="h-8 w-8 mx-auto mb-2" />
+          <p className="text-sm font-medium">타임라인 스케줄러</p>
+          <p className="text-xs mt-1">
+            {config.selectedTable
+              ? `테이블: ${config.selectedTable}`
+              : "테이블을 선택하세요"}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // 로딩 상태
+  if (isLoading) {
+    return (
+      <div
+        className="w-full flex items-center justify-center bg-muted/10 rounded-lg"
+        style={{ height: config.height || 500 }}
+      >
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          <span className="text-sm">로딩 중...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // 에러 상태
+  if (error) {
+    return (
+      <div
+        className="w-full flex items-center justify-center bg-destructive/10 rounded-lg"
+        style={{ height: config.height || 500 }}
+      >
+        <div className="text-center text-destructive">
+          <p className="text-sm font-medium">오류 발생</p>
+          <p className="text-xs mt-1">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 리소스 없음
+  if (resources.length === 0) {
+    return (
+      <div
+        className="w-full flex items-center justify-center bg-muted/10 rounded-lg"
+        style={{ height: config.height || 500 }}
+      >
+        <div className="text-center text-muted-foreground">
+          <Calendar className="h-8 w-8 mx-auto mb-2" />
+          <p className="text-sm font-medium">리소스가 없습니다</p>
+          <p className="text-xs mt-1">리소스 테이블을 설정하세요</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full border rounded-lg overflow-hidden bg-background"
+      style={{
+        height: config.height || 500,
+        maxHeight: config.maxHeight,
+      }}
+    >
+      {/* 툴바 */}
+      {config.showToolbar !== false && (
+        <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
+          {/* 네비게이션 */}
+          <div className="flex items-center gap-1">
+            {config.showNavigation !== false && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToPrevious}
+                  className="h-7 px-2"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToToday}
+                  className="h-7 px-2"
+                >
+                  오늘
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToNext}
+                  className="h-7 px-2"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </>
+            )}
+
+            {/* 현재 날짜 범위 표시 */}
+            <span className="ml-2 text-sm text-muted-foreground">
+              {viewStartDate.getFullYear()}년 {viewStartDate.getMonth() + 1}월{" "}
+              {viewStartDate.getDate()}일 ~{" "}
+              {viewEndDate.getMonth() + 1}월 {viewEndDate.getDate()}일
+            </span>
+          </div>
+
+          {/* 오른쪽 컨트롤 */}
+          <div className="flex items-center gap-2">
+            {/* 줌 컨트롤 */}
+            {config.showZoomControls !== false && (
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleZoomOut}
+                  disabled={zoomLevel === "month"}
+                  className="h-7 px-2"
+                >
+                  <ZoomOut className="h-4 w-4" />
+                </Button>
+                <span className="text-xs text-muted-foreground min-w-[24px] text-center">
+                  {zoomLevelOptions.find((o) => o.value === zoomLevel)?.label}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleZoomIn}
+                  disabled={zoomLevel === "day"}
+                  className="h-7 px-2"
+                >
+                  <ZoomIn className="h-4 w-4" />
+                </Button>
+              </div>
+            )}
+
+            {/* 추가 버튼 */}
+            {config.showAddButton !== false && config.editable && (
+              <Button
+                variant="default"
+                size="sm"
+                onClick={handleAddClick}
+                className="h-7"
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                추가
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 타임라인 본문 */}
+      <div
+        className="overflow-auto"
+        style={{
+          height: config.showToolbar !== false
+            ? `calc(100% - 48px)`
+            : "100%",
+        }}
+      >
+        <div className="min-w-max">
+          {/* 헤더 */}
+          <TimelineHeader
+            startDate={viewStartDate}
+            endDate={viewEndDate}
+            zoomLevel={zoomLevel}
+            cellWidth={cellWidth}
+            headerHeight={headerHeight}
+            resourceColumnWidth={resourceColumnWidth}
+            showTodayLine={config.showTodayLine}
+          />
+
+          {/* 리소스 행들 */}
+          <div>
+            {resources.map((resource) => (
+              <ResourceRow
+                key={resource.id}
+                resource={resource}
+                schedules={schedulesByResource.get(resource.id) || []}
+                startDate={viewStartDate}
+                endDate={viewEndDate}
+                zoomLevel={zoomLevel}
+                rowHeight={rowHeight}
+                cellWidth={cellWidth}
+                resourceColumnWidth={resourceColumnWidth}
+                config={config}
+                onScheduleClick={handleScheduleClick}
+                onCellClick={handleCellClick}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+                onResizeStart={handleResizeStart}
+                onResizeEnd={handleResizeEnd}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx
new file mode 100644
index 00000000..3371d425
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx
@@ -0,0 +1,629 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import { TimelineSchedulerConfig } from "./types";
+import { zoomLevelOptions, statusOptions } from "./config";
+
+interface TimelineSchedulerConfigPanelProps {
+  config: TimelineSchedulerConfig;
+  onChange: (config: Partial<TimelineSchedulerConfig>) => void;
+}
+
+interface TableInfo {
+  tableName: string;
+  displayName: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  displayName: string;
+}
+
+export function TimelineSchedulerConfigPanel({
+  config,
+  onChange,
+}: TimelineSchedulerConfigPanelProps) {
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [tableColumns, setTableColumns] = useState<ColumnInfo[]>([]);
+  const [resourceColumns, setResourceColumns] = useState<ColumnInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [tableSelectOpen, setTableSelectOpen] = useState(false);
+  const [resourceTableSelectOpen, setResourceTableSelectOpen] = useState(false);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoading(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        if (Array.isArray(tableList)) {
+          setTables(
+            tableList.map((t: any) => ({
+              tableName: t.table_name || t.tableName,
+              displayName: t.display_name || t.displayName || t.table_name || t.tableName,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("테이블 목록 로드 오류:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 스케줄 테이블 컬럼 로드
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!config.selectedTable) {
+        setTableColumns([]);
+        return;
+      }
+      try {
+        const columns = await tableTypeApi.getColumns(config.selectedTable);
+        if (Array.isArray(columns)) {
+          setTableColumns(
+            columns.map((col: any) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("컬럼 로드 오류:", err);
+        setTableColumns([]);
+      }
+    };
+    loadColumns();
+  }, [config.selectedTable]);
+
+  // 리소스 테이블 컬럼 로드
+  useEffect(() => {
+    const loadResourceColumns = async () => {
+      if (!config.resourceTable) {
+        setResourceColumns([]);
+        return;
+      }
+      try {
+        const columns = await tableTypeApi.getColumns(config.resourceTable);
+        if (Array.isArray(columns)) {
+          setResourceColumns(
+            columns.map((col: any) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("리소스 컬럼 로드 오류:", err);
+        setResourceColumns([]);
+      }
+    };
+    loadResourceColumns();
+  }, [config.resourceTable]);
+
+  // 설정 업데이트 헬퍼
+  const updateConfig = (updates: Partial<TimelineSchedulerConfig>) => {
+    onChange({ ...config, ...updates });
+  };
+
+  // 필드 매핑 업데이트
+  const updateFieldMapping = (field: string, value: string) => {
+    updateConfig({
+      fieldMapping: {
+        ...config.fieldMapping,
+        [field]: value,
+      },
+    });
+  };
+
+  // 리소스 필드 매핑 업데이트
+  const updateResourceFieldMapping = (field: string, value: string) => {
+    updateConfig({
+      resourceFieldMapping: {
+        ...config.resourceFieldMapping,
+        id: config.resourceFieldMapping?.id || "id",
+        name: config.resourceFieldMapping?.name || "name",
+        [field]: value,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <Accordion type="multiple" defaultValue={["table", "mapping", "display"]}>
+        {/* 테이블 설정 */}
+        <AccordionItem value="table">
+          <AccordionTrigger className="text-sm font-medium">
+            테이블 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 스케줄 테이블 선택 */}
+            <div className="space-y-1">
+              <Label className="text-xs">스케줄 테이블</Label>
+              <Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={tableSelectOpen}
+                    className="h-8 w-full justify-between text-xs"
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <span className="flex items-center gap-2">
+                        <Loader2 className="h-3 w-3 animate-spin" />
+                        로딩 중...
+                      </span>
+                    ) : config.selectedTable ? (
+                      tables.find((t) => t.tableName === config.selectedTable)
+                        ?.displayName || config.selectedTable
+                    ) : (
+                      "테이블 선택..."
+                    )}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                  className="p-0"
+                  style={{ width: "var(--radix-popover-trigger-width)" }}
+                  align="start"
+                >
+                  <Command
+                    filter={(value, search) => {
+                      const lowerSearch = search.toLowerCase();
+                      if (value.toLowerCase().includes(lowerSearch)) {
+                        return 1;
+                      }
+                      return 0;
+                    }}
+                  >
+                    <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="text-xs">
+                        테이블을 찾을 수 없습니다.
+                      </CommandEmpty>
+                      <CommandGroup>
+                        {tables.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.displayName} ${table.tableName}`}
+                            onSelect={() => {
+                              updateConfig({ selectedTable: table.tableName });
+                              setTableSelectOpen(false);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.selectedTable === table.tableName
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span>{table.displayName}</span>
+                              <span className="text-[10px] text-muted-foreground">
+                                {table.tableName}
+                              </span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* 리소스 테이블 선택 */}
+            <div className="space-y-1">
+              <Label className="text-xs">리소스 테이블 (설비/작업자)</Label>
+              <Popover
+                open={resourceTableSelectOpen}
+                onOpenChange={setResourceTableSelectOpen}
+              >
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={resourceTableSelectOpen}
+                    className="h-8 w-full justify-between text-xs"
+                    disabled={loading}
+                  >
+                    {config.resourceTable ? (
+                      tables.find((t) => t.tableName === config.resourceTable)
+                        ?.displayName || config.resourceTable
+                    ) : (
+                      "리소스 테이블 선택..."
+                    )}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                  className="p-0"
+                  style={{ width: "var(--radix-popover-trigger-width)" }}
+                  align="start"
+                >
+                  <Command
+                    filter={(value, search) => {
+                      const lowerSearch = search.toLowerCase();
+                      if (value.toLowerCase().includes(lowerSearch)) {
+                        return 1;
+                      }
+                      return 0;
+                    }}
+                  >
+                    <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="text-xs">
+                        테이블을 찾을 수 없습니다.
+                      </CommandEmpty>
+                      <CommandGroup>
+                        {tables.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.displayName} ${table.tableName}`}
+                            onSelect={() => {
+                              updateConfig({ resourceTable: table.tableName });
+                              setResourceTableSelectOpen(false);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.resourceTable === table.tableName
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span>{table.displayName}</span>
+                              <span className="text-[10px] text-muted-foreground">
+                                {table.tableName}
+                              </span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 필드 매핑 */}
+        <AccordionItem value="mapping">
+          <AccordionTrigger className="text-sm font-medium">
+            필드 매핑
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 스케줄 필드 매핑 */}
+            {config.selectedTable && (
+              <div className="space-y-2">
+                <Label className="text-xs font-medium">스케줄 필드</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {/* ID 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">ID</Label>
+                    <Select
+                      value={config.fieldMapping?.id || ""}
+                      onValueChange={(v) => updateFieldMapping("id", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 리소스 ID 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">리소스 ID</Label>
+                    <Select
+                      value={config.fieldMapping?.resourceId || ""}
+                      onValueChange={(v) => updateFieldMapping("resourceId", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 제목 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">제목</Label>
+                    <Select
+                      value={config.fieldMapping?.title || ""}
+                      onValueChange={(v) => updateFieldMapping("title", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 시작일 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">시작일</Label>
+                    <Select
+                      value={config.fieldMapping?.startDate || ""}
+                      onValueChange={(v) => updateFieldMapping("startDate", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 종료일 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">종료일</Label>
+                    <Select
+                      value={config.fieldMapping?.endDate || ""}
+                      onValueChange={(v) => updateFieldMapping("endDate", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 상태 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">상태 (선택)</Label>
+                    <Select
+                      value={config.fieldMapping?.status || "__none__"}
+                      onValueChange={(v) => updateFieldMapping("status", v === "__none__" ? "" : v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">없음</SelectItem>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 리소스 필드 매핑 */}
+            {config.resourceTable && (
+              <div className="space-y-2 mt-3">
+                <Label className="text-xs font-medium">리소스 필드</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {/* ID 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">ID</Label>
+                    <Select
+                      value={config.resourceFieldMapping?.id || ""}
+                      onValueChange={(v) => updateResourceFieldMapping("id", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {resourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 이름 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">이름</Label>
+                    <Select
+                      value={config.resourceFieldMapping?.name || ""}
+                      onValueChange={(v) => updateResourceFieldMapping("name", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {resourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 표시 설정 */}
+        <AccordionItem value="display">
+          <AccordionTrigger className="text-sm font-medium">
+            표시 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 기본 줌 레벨 */}
+            <div className="space-y-1">
+              <Label className="text-xs">기본 줌 레벨</Label>
+              <Select
+                value={config.defaultZoomLevel || "day"}
+                onValueChange={(v) =>
+                  updateConfig({ defaultZoomLevel: v as any })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {zoomLevelOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 높이 */}
+            <div className="space-y-1">
+              <Label className="text-xs">높이 (px)</Label>
+              <Input
+                type="number"
+                value={config.height || 500}
+                onChange={(e) =>
+                  updateConfig({ height: parseInt(e.target.value) || 500 })
+                }
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 행 높이 */}
+            <div className="space-y-1">
+              <Label className="text-xs">행 높이 (px)</Label>
+              <Input
+                type="number"
+                value={config.rowHeight || 50}
+                onChange={(e) =>
+                  updateConfig({ rowHeight: parseInt(e.target.value) || 50 })
+                }
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 토글 스위치들 */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">편집 가능</Label>
+                <Switch
+                  checked={config.editable ?? true}
+                  onCheckedChange={(v) => updateConfig({ editable: v })}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">드래그 이동</Label>
+                <Switch
+                  checked={config.draggable ?? true}
+                  onCheckedChange={(v) => updateConfig({ draggable: v })}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">리사이즈</Label>
+                <Switch
+                  checked={config.resizable ?? true}
+                  onCheckedChange={(v) => updateConfig({ resizable: v })}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">오늘 표시선</Label>
+                <Switch
+                  checked={config.showTodayLine ?? true}
+                  onCheckedChange={(v) => updateConfig({ showTodayLine: v })}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">진행률 표시</Label>
+                <Switch
+                  checked={config.showProgress ?? true}
+                  onCheckedChange={(v) => updateConfig({ showProgress: v })}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">툴바 표시</Label>
+                <Switch
+                  checked={config.showToolbar ?? true}
+                  onCheckedChange={(v) => updateConfig({ showToolbar: v })}
+                />
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+export default TimelineSchedulerConfigPanel;
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
new file mode 100644
index 00000000..48e8a21f
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2TimelineSchedulerDefinition } from "./index";
+import { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
+
+/**
+ * TimelineScheduler 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class TimelineSchedulerRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2TimelineSchedulerDefinition;
+
+  render(): React.ReactElement {
+    return (
+      <TimelineSchedulerComponent
+        {...this.props}
+        config={this.props.component?.componentConfig || {}}
+        isDesignMode={this.props.isDesignMode}
+        formData={this.props.formData}
+        componentId={this.props.component?.id}
+      />
+    );
+  }
+
+  // 설정 변경 핸들러
+  protected handleConfigChange = (config: any) => {
+    console.log("📥 TimelineSchedulerRenderer에서 설정 변경 받음:", config);
+
+    // 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
+    if (this.props.onConfigChange) {
+      this.props.onConfigChange(config);
+    }
+
+    this.updateComponent({ config });
+  };
+
+  // 값 변경 처리
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+TimelineSchedulerRenderer.registerSelf();
+
+// 강제 등록 (디버깅용)
+if (typeof window !== "undefined") {
+  setTimeout(() => {
+    try {
+      TimelineSchedulerRenderer.registerSelf();
+    } catch (error) {
+      console.error("❌ TimelineScheduler 강제 등록 실패:", error);
+    }
+  }, 1000);
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx
new file mode 100644
index 00000000..407bdd14
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { Resource, ScheduleItem, ZoomLevel, TimelineSchedulerConfig } from "../types";
+import { ScheduleBar } from "./ScheduleBar";
+
+interface ResourceRowProps {
+  /** 리소스 */
+  resource: Resource;
+  /** 해당 리소스의 스케줄 목록 */
+  schedules: ScheduleItem[];
+  /** 시작 날짜 */
+  startDate: Date;
+  /** 종료 날짜 */
+  endDate: Date;
+  /** 줌 레벨 */
+  zoomLevel: ZoomLevel;
+  /** 행 높이 */
+  rowHeight: number;
+  /** 셀 너비 */
+  cellWidth: number;
+  /** 리소스 컬럼 너비 */
+  resourceColumnWidth: number;
+  /** 설정 */
+  config: TimelineSchedulerConfig;
+  /** 스케줄 클릭 */
+  onScheduleClick?: (schedule: ScheduleItem) => void;
+  /** 빈 셀 클릭 */
+  onCellClick?: (resourceId: string, date: Date) => void;
+  /** 드래그 시작 */
+  onDragStart?: (schedule: ScheduleItem, e: React.MouseEvent) => void;
+  /** 드래그 종료 */
+  onDragEnd?: () => void;
+  /** 리사이즈 시작 */
+  onResizeStart?: (schedule: ScheduleItem, direction: "start" | "end", e: React.MouseEvent) => void;
+  /** 리사이즈 종료 */
+  onResizeEnd?: () => void;
+}
+
+/**
+ * 날짜 차이 계산 (일수)
+ */
+const getDaysDiff = (start: Date, end: Date): number => {
+  const startTime = new Date(start).setHours(0, 0, 0, 0);
+  const endTime = new Date(end).setHours(0, 0, 0, 0);
+  return Math.round((endTime - startTime) / (1000 * 60 * 60 * 24));
+};
+
+/**
+ * 날짜 범위 내의 셀 개수 계산
+ */
+const getCellCount = (startDate: Date, endDate: Date): number => {
+  return getDaysDiff(startDate, endDate) + 1;
+};
+
+export function ResourceRow({
+  resource,
+  schedules,
+  startDate,
+  endDate,
+  zoomLevel,
+  rowHeight,
+  cellWidth,
+  resourceColumnWidth,
+  config,
+  onScheduleClick,
+  onCellClick,
+  onDragStart,
+  onDragEnd,
+  onResizeStart,
+  onResizeEnd,
+}: ResourceRowProps) {
+  // 총 셀 개수
+  const totalCells = useMemo(() => getCellCount(startDate, endDate), [startDate, endDate]);
+
+  // 총 그리드 너비
+  const gridWidth = totalCells * cellWidth;
+
+  // 오늘 날짜
+  const today = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+
+  // 스케줄 바 위치 계산
+  const schedulePositions = useMemo(() => {
+    return schedules.map((schedule) => {
+      const scheduleStart = new Date(schedule.startDate);
+      const scheduleEnd = new Date(schedule.endDate);
+      scheduleStart.setHours(0, 0, 0, 0);
+      scheduleEnd.setHours(0, 0, 0, 0);
+
+      // 시작 위치 계산
+      const startOffset = getDaysDiff(startDate, scheduleStart);
+      const left = Math.max(0, startOffset * cellWidth);
+
+      // 너비 계산
+      const durationDays = getDaysDiff(scheduleStart, scheduleEnd) + 1;
+      const visibleStartOffset = Math.max(0, startOffset);
+      const visibleEndOffset = Math.min(
+        totalCells,
+        startOffset + durationDays
+      );
+      const width = Math.max(cellWidth, (visibleEndOffset - visibleStartOffset) * cellWidth);
+
+      return {
+        schedule,
+        position: {
+          left: resourceColumnWidth + left,
+          top: 0,
+          width,
+          height: rowHeight,
+        },
+      };
+    });
+  }, [schedules, startDate, cellWidth, resourceColumnWidth, rowHeight, totalCells]);
+
+  // 그리드 셀 클릭 핸들러
+  const handleGridClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!onCellClick) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const cellIndex = Math.floor(x / cellWidth);
+
+    const clickedDate = new Date(startDate);
+    clickedDate.setDate(clickedDate.getDate() + cellIndex);
+
+    onCellClick(resource.id, clickedDate);
+  };
+
+  return (
+    <div
+      className="flex border-b hover:bg-muted/20"
+      style={{ height: rowHeight }}
+    >
+      {/* 리소스 컬럼 */}
+      <div
+        className="flex-shrink-0 border-r bg-muted/30 flex items-center px-3 sticky left-0 z-10"
+        style={{ width: resourceColumnWidth }}
+      >
+        <div className="truncate">
+          <div className="font-medium text-sm truncate">{resource.name}</div>
+          {resource.group && (
+            <div className="text-xs text-muted-foreground truncate">
+              {resource.group}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 타임라인 그리드 */}
+      <div
+        className="relative flex-1"
+        style={{ width: gridWidth }}
+        onClick={handleGridClick}
+      >
+        {/* 배경 그리드 */}
+        <div className="absolute inset-0 flex">
+          {Array.from({ length: totalCells }).map((_, idx) => {
+            const cellDate = new Date(startDate);
+            cellDate.setDate(cellDate.getDate() + idx);
+            const isWeekend = cellDate.getDay() === 0 || cellDate.getDay() === 6;
+            const isToday = cellDate.getTime() === today.getTime();
+            const isMonthStart = cellDate.getDate() === 1;
+
+            return (
+              <div
+                key={idx}
+                className={cn(
+                  "border-r h-full",
+                  isWeekend && "bg-muted/20",
+                  isToday && "bg-primary/5",
+                  isMonthStart && "border-l-2 border-l-primary/20"
+                )}
+                style={{ width: cellWidth }}
+              />
+            );
+          })}
+        </div>
+
+        {/* 스케줄 바들 */}
+        {schedulePositions.map(({ schedule, position }) => (
+          <ScheduleBar
+            key={schedule.id}
+            schedule={schedule}
+            position={{
+              ...position,
+              left: position.left - resourceColumnWidth, // 상대 위치
+            }}
+            config={config}
+            draggable={config.draggable}
+            resizable={config.resizable}
+            onClick={() => onScheduleClick?.(schedule)}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            onResizeStart={onResizeStart}
+            onResizeEnd={onResizeEnd}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx
new file mode 100644
index 00000000..a85c457c
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import React, { useState, useCallback, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { ScheduleItem, ScheduleBarPosition, TimelineSchedulerConfig } from "../types";
+import { statusOptions } from "../config";
+
+interface ScheduleBarProps {
+  /** 스케줄 항목 */
+  schedule: ScheduleItem;
+  /** 위치 정보 */
+  position: ScheduleBarPosition;
+  /** 설정 */
+  config: TimelineSchedulerConfig;
+  /** 드래그 가능 여부 */
+  draggable?: boolean;
+  /** 리사이즈 가능 여부 */
+  resizable?: boolean;
+  /** 클릭 이벤트 */
+  onClick?: (schedule: ScheduleItem) => void;
+  /** 드래그 시작 */
+  onDragStart?: (schedule: ScheduleItem, e: React.MouseEvent) => void;
+  /** 드래그 중 */
+  onDrag?: (deltaX: number, deltaY: number) => void;
+  /** 드래그 종료 */
+  onDragEnd?: () => void;
+  /** 리사이즈 시작 */
+  onResizeStart?: (schedule: ScheduleItem, direction: "start" | "end", e: React.MouseEvent) => void;
+  /** 리사이즈 중 */
+  onResize?: (deltaX: number, direction: "start" | "end") => void;
+  /** 리사이즈 종료 */
+  onResizeEnd?: () => void;
+}
+
+export function ScheduleBar({
+  schedule,
+  position,
+  config,
+  draggable = true,
+  resizable = true,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  onResizeStart,
+  onResizeEnd,
+}: ScheduleBarProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const barRef = useRef<HTMLDivElement>(null);
+
+  // 상태에 따른 색상
+  const statusColor = schedule.color || 
+    config.statusColors?.[schedule.status] ||
+    statusOptions.find((s) => s.value === schedule.status)?.color ||
+    "#3b82f6";
+
+  // 진행률 바 너비
+  const progressWidth = config.showProgress && schedule.progress !== undefined
+    ? `${schedule.progress}%`
+    : "0%";
+
+  // 드래그 시작 핸들러
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!draggable || isResizing) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+      onDragStart?.(schedule, e);
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        // 드래그 중 로직은 부모에서 처리
+      };
+
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        onDragEnd?.();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [draggable, isResizing, schedule, onDragStart, onDragEnd]
+  );
+
+  // 리사이즈 시작 핸들러
+  const handleResizeStart = useCallback(
+    (direction: "start" | "end", e: React.MouseEvent) => {
+      if (!resizable) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+      onResizeStart?.(schedule, direction, e);
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        // 리사이즈 중 로직은 부모에서 처리
+      };
+
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        onResizeEnd?.();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [resizable, schedule, onResizeStart, onResizeEnd]
+  );
+
+  // 클릭 핸들러
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDragging || isResizing) return;
+      e.stopPropagation();
+      onClick?.(schedule);
+    },
+    [isDragging, isResizing, onClick, schedule]
+  );
+
+  return (
+    <div
+      ref={barRef}
+      className={cn(
+        "absolute rounded-md shadow-sm cursor-pointer transition-shadow",
+        "hover:shadow-md hover:z-10",
+        isDragging && "opacity-70 shadow-lg z-20",
+        isResizing && "z-20",
+        draggable && "cursor-grab",
+        isDragging && "cursor-grabbing"
+      )}
+      style={{
+        left: position.left,
+        top: position.top + 4,
+        width: position.width,
+        height: position.height - 8,
+        backgroundColor: statusColor,
+      }}
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+    >
+      {/* 진행률 바 */}
+      {config.showProgress && schedule.progress !== undefined && (
+        <div
+          className="absolute inset-y-0 left-0 rounded-l-md opacity-30 bg-white"
+          style={{ width: progressWidth }}
+        />
+      )}
+
+      {/* 제목 */}
+      <div className="relative z-10 px-2 py-1 text-xs text-white truncate font-medium">
+        {schedule.title}
+      </div>
+
+      {/* 진행률 텍스트 */}
+      {config.showProgress && schedule.progress !== undefined && (
+        <div className="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-white/80 font-medium">
+          {schedule.progress}%
+        </div>
+      )}
+
+      {/* 리사이즈 핸들 - 왼쪽 */}
+      {resizable && (
+        <div
+          className="absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize hover:bg-white/20 rounded-l-md"
+          onMouseDown={(e) => handleResizeStart("start", e)}
+        />
+      )}
+
+      {/* 리사이즈 핸들 - 오른쪽 */}
+      {resizable && (
+        <div
+          className="absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize hover:bg-white/20 rounded-r-md"
+          onMouseDown={(e) => handleResizeStart("end", e)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx
new file mode 100644
index 00000000..52afc2e2
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { DateCell, ZoomLevel } from "../types";
+import { dayLabels, monthLabels } from "../config";
+
+interface TimelineHeaderProps {
+  /** 시작 날짜 */
+  startDate: Date;
+  /** 종료 날짜 */
+  endDate: Date;
+  /** 줌 레벨 */
+  zoomLevel: ZoomLevel;
+  /** 셀 너비 */
+  cellWidth: number;
+  /** 헤더 높이 */
+  headerHeight: number;
+  /** 리소스 컬럼 너비 */
+  resourceColumnWidth: number;
+  /** 오늘 표시선 */
+  showTodayLine?: boolean;
+}
+
+/**
+ * 날짜 범위 내의 모든 날짜 셀 생성
+ */
+const generateDateCells = (
+  startDate: Date,
+  endDate: Date,
+  zoomLevel: ZoomLevel
+): DateCell[] => {
+  const cells: DateCell[] = [];
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const current = new Date(startDate);
+  current.setHours(0, 0, 0, 0);
+
+  while (current <= endDate) {
+    const date = new Date(current);
+    const dayOfWeek = date.getDay();
+    const isToday = date.getTime() === today.getTime();
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+    const isMonthStart = date.getDate() === 1;
+
+    let label = "";
+    if (zoomLevel === "day") {
+      label = `${date.getDate()}(${dayLabels[dayOfWeek]})`;
+    } else if (zoomLevel === "week") {
+      // 주간: 월요일 기준 주 시작
+      if (dayOfWeek === 1 || cells.length === 0) {
+        label = `${date.getMonth() + 1}/${date.getDate()}`;
+      }
+    } else if (zoomLevel === "month") {
+      // 월간: 월 시작일만 표시
+      if (isMonthStart || cells.length === 0) {
+        label = monthLabels[date.getMonth()];
+      }
+    }
+
+    cells.push({
+      date,
+      label,
+      isToday,
+      isWeekend,
+      isMonthStart,
+    });
+
+    current.setDate(current.getDate() + 1);
+  }
+
+  return cells;
+};
+
+/**
+ * 월 헤더 그룹 생성 (상단 행)
+ */
+const generateMonthGroups = (
+  cells: DateCell[]
+): { month: string; year: number; count: number }[] => {
+  const groups: { month: string; year: number; count: number }[] = [];
+
+  cells.forEach((cell) => {
+    const month = monthLabels[cell.date.getMonth()];
+    const year = cell.date.getFullYear();
+
+    if (
+      groups.length === 0 ||
+      groups[groups.length - 1].month !== month ||
+      groups[groups.length - 1].year !== year
+    ) {
+      groups.push({ month, year, count: 1 });
+    } else {
+      groups[groups.length - 1].count++;
+    }
+  });
+
+  return groups;
+};
+
+export function TimelineHeader({
+  startDate,
+  endDate,
+  zoomLevel,
+  cellWidth,
+  headerHeight,
+  resourceColumnWidth,
+  showTodayLine = true,
+}: TimelineHeaderProps) {
+  // 날짜 셀 생성
+  const dateCells = useMemo(
+    () => generateDateCells(startDate, endDate, zoomLevel),
+    [startDate, endDate, zoomLevel]
+  );
+
+  // 월 그룹 생성
+  const monthGroups = useMemo(() => generateMonthGroups(dateCells), [dateCells]);
+
+  // 오늘 위치 계산
+  const todayPosition = useMemo(() => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const todayIndex = dateCells.findIndex(
+      (cell) => cell.date.getTime() === today.getTime()
+    );
+
+    if (todayIndex === -1) return null;
+
+    return resourceColumnWidth + todayIndex * cellWidth + cellWidth / 2;
+  }, [dateCells, cellWidth, resourceColumnWidth]);
+
+  return (
+    <div
+      className="sticky top-0 z-20 border-b bg-background"
+      style={{ height: headerHeight }}
+    >
+      {/* 상단 행: 월/년도 */}
+      <div className="flex" style={{ height: headerHeight / 2 }}>
+        {/* 리소스 컬럼 헤더 */}
+        <div
+          className="flex-shrink-0 border-r bg-muted/50 flex items-center justify-center font-medium text-sm"
+          style={{ width: resourceColumnWidth }}
+        >
+          리소스
+        </div>
+
+        {/* 월 그룹 */}
+        {monthGroups.map((group, idx) => (
+          <div
+            key={`${group.year}-${group.month}-${idx}`}
+            className="border-r flex items-center justify-center text-xs font-medium text-muted-foreground"
+            style={{ width: group.count * cellWidth }}
+          >
+            {group.year}년 {group.month}
+          </div>
+        ))}
+      </div>
+
+      {/* 하단 행: 일자 */}
+      <div className="flex" style={{ height: headerHeight / 2 }}>
+        {/* 리소스 컬럼 (빈칸) */}
+        <div
+          className="flex-shrink-0 border-r bg-muted/50"
+          style={{ width: resourceColumnWidth }}
+        />
+
+        {/* 날짜 셀 */}
+        {dateCells.map((cell, idx) => (
+          <div
+            key={idx}
+            className={cn(
+              "border-r flex items-center justify-center text-xs",
+              cell.isToday && "bg-primary/10 font-bold text-primary",
+              cell.isWeekend && !cell.isToday && "bg-muted/30 text-muted-foreground",
+              cell.isMonthStart && "border-l-2 border-l-primary/30"
+            )}
+            style={{ width: cellWidth }}
+          >
+            {cell.label}
+          </div>
+        ))}
+      </div>
+
+      {/* 오늘 표시선 */}
+      {showTodayLine && todayPosition !== null && (
+        <div
+          className="absolute top-0 bottom-0 w-0.5 bg-primary z-30 pointer-events-none"
+          style={{ left: todayPosition }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts b/frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts
new file mode 100644
index 00000000..4da03f17
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts
@@ -0,0 +1,3 @@
+export { TimelineHeader } from "./TimelineHeader";
+export { ScheduleBar } from "./ScheduleBar";
+export { ResourceRow } from "./ResourceRow";
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/config.ts b/frontend/lib/registry/components/v2-timeline-scheduler/config.ts
new file mode 100644
index 00000000..f8b10f94
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/config.ts
@@ -0,0 +1,102 @@
+"use client";
+
+import { TimelineSchedulerConfig, ZoomLevel } from "./types";
+
+/**
+ * 기본 타임라인 스케줄러 설정
+ */
+export const defaultTimelineSchedulerConfig: Partial<TimelineSchedulerConfig> = {
+  defaultZoomLevel: "day",
+  editable: true,
+  draggable: true,
+  resizable: true,
+  rowHeight: 50,
+  headerHeight: 60,
+  resourceColumnWidth: 150,
+  cellWidth: {
+    day: 60,
+    week: 120,
+    month: 40,
+  },
+  showConflicts: true,
+  showProgress: true,
+  showTodayLine: true,
+  showToolbar: true,
+  showZoomControls: true,
+  showNavigation: true,
+  showAddButton: true,
+  height: 500,
+  statusColors: {
+    planned: "#3b82f6", // blue-500
+    in_progress: "#f59e0b", // amber-500
+    completed: "#10b981", // emerald-500
+    delayed: "#ef4444", // red-500
+    cancelled: "#6b7280", // gray-500
+  },
+  fieldMapping: {
+    id: "id",
+    resourceId: "resource_id",
+    title: "title",
+    startDate: "start_date",
+    endDate: "end_date",
+    status: "status",
+    progress: "progress",
+  },
+  resourceFieldMapping: {
+    id: "id",
+    name: "name",
+    group: "group",
+  },
+};
+
+/**
+ * 줌 레벨 옵션
+ */
+export const zoomLevelOptions: { value: ZoomLevel; label: string }[] = [
+  { value: "day", label: "일" },
+  { value: "week", label: "주" },
+  { value: "month", label: "월" },
+];
+
+/**
+ * 상태 옵션
+ */
+export const statusOptions = [
+  { value: "planned", label: "계획됨", color: "#3b82f6" },
+  { value: "in_progress", label: "진행중", color: "#f59e0b" },
+  { value: "completed", label: "완료", color: "#10b981" },
+  { value: "delayed", label: "지연", color: "#ef4444" },
+  { value: "cancelled", label: "취소", color: "#6b7280" },
+];
+
+/**
+ * 줌 레벨별 표시 일수
+ */
+export const zoomLevelDays: Record<ZoomLevel, number> = {
+  day: 14, // 2주
+  week: 56, // 8주
+  month: 90, // 3개월
+};
+
+/**
+ * 요일 라벨 (한글)
+ */
+export const dayLabels = ["일", "월", "화", "수", "목", "금", "토"];
+
+/**
+ * 월 라벨 (한글)
+ */
+export const monthLabels = [
+  "1월",
+  "2월",
+  "3월",
+  "4월",
+  "5월",
+  "6월",
+  "7월",
+  "8월",
+  "9월",
+  "10월",
+  "11월",
+  "12월",
+];
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts b/frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts
new file mode 100644
index 00000000..61504c3d
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts
@@ -0,0 +1,331 @@
+"use client";
+
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import {
+  TimelineSchedulerConfig,
+  ScheduleItem,
+  Resource,
+  ZoomLevel,
+  UseTimelineDataResult,
+} from "../types";
+import { zoomLevelDays, defaultTimelineSchedulerConfig } from "../config";
+
+/**
+ * 날짜를 ISO 문자열로 변환 (시간 제외)
+ */
+const toDateString = (date: Date): string => {
+  return date.toISOString().split("T")[0];
+};
+
+/**
+ * 날짜 더하기
+ */
+const addDays = (date: Date, days: number): Date => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+/**
+ * 타임라인 데이터를 관리하는 훅
+ */
+export function useTimelineData(
+  config: TimelineSchedulerConfig,
+  externalSchedules?: ScheduleItem[],
+  externalResources?: Resource[]
+): UseTimelineDataResult {
+  // 상태
+  const [schedules, setSchedules] = useState<ScheduleItem[]>([]);
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>(
+    config.defaultZoomLevel || "day"
+  );
+  const [viewStartDate, setViewStartDate] = useState<Date>(() => {
+    if (config.initialDate) {
+      return new Date(config.initialDate);
+    }
+    // 오늘 기준 1주일 전부터 시작
+    const today = new Date();
+    today.setDate(today.getDate() - 7);
+    today.setHours(0, 0, 0, 0);
+    return today;
+  });
+
+  // 표시 종료일 계산
+  const viewEndDate = useMemo(() => {
+    const days = zoomLevelDays[zoomLevel];
+    return addDays(viewStartDate, days);
+  }, [viewStartDate, zoomLevel]);
+
+  // 테이블명
+  const tableName = config.useCustomTable
+    ? config.customTableName
+    : config.selectedTable;
+
+  const resourceTableName = config.resourceTable;
+
+  // 필드 매핑
+  const fieldMapping = config.fieldMapping || defaultTimelineSchedulerConfig.fieldMapping!;
+  const resourceFieldMapping =
+    config.resourceFieldMapping || defaultTimelineSchedulerConfig.resourceFieldMapping!;
+
+  // 스케줄 데이터 로드
+  const fetchSchedules = useCallback(async () => {
+    if (externalSchedules) {
+      setSchedules(externalSchedules);
+      return;
+    }
+
+    if (!tableName) {
+      setSchedules([]);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await apiClient.post(
+        `/table-management/tables/${tableName}/data`,
+        {
+          page: 1,
+          size: 10000,
+          autoFilter: true,
+          search: {
+            // 표시 범위 내의 스케줄만 조회
+            [fieldMapping.startDate]: {
+              value: toDateString(viewEndDate),
+              operator: "lte",
+            },
+            [fieldMapping.endDate]: {
+              value: toDateString(viewStartDate),
+              operator: "gte",
+            },
+          },
+        }
+      );
+
+      const responseData =
+        response.data?.data?.data || response.data?.data || [];
+      const rawData = Array.isArray(responseData) ? responseData : [];
+
+      // 데이터를 ScheduleItem 형태로 변환
+      const mappedSchedules: ScheduleItem[] = rawData.map((row: any) => ({
+        id: String(row[fieldMapping.id] || ""),
+        resourceId: String(row[fieldMapping.resourceId] || ""),
+        title: String(row[fieldMapping.title] || ""),
+        startDate: row[fieldMapping.startDate] || "",
+        endDate: row[fieldMapping.endDate] || "",
+        status: fieldMapping.status
+          ? row[fieldMapping.status] || "planned"
+          : "planned",
+        progress: fieldMapping.progress
+          ? Number(row[fieldMapping.progress]) || 0
+          : undefined,
+        color: fieldMapping.color ? row[fieldMapping.color] : undefined,
+        data: row,
+      }));
+
+      setSchedules(mappedSchedules);
+    } catch (err: any) {
+      setError(err.message || "스케줄 데이터 로드 중 오류 발생");
+      setSchedules([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    tableName,
+    externalSchedules,
+    fieldMapping,
+    viewStartDate,
+    viewEndDate,
+  ]);
+
+  // 리소스 데이터 로드
+  const fetchResources = useCallback(async () => {
+    if (externalResources) {
+      setResources(externalResources);
+      return;
+    }
+
+    if (!resourceTableName) {
+      setResources([]);
+      return;
+    }
+
+    try {
+      const response = await apiClient.post(
+        `/table-management/tables/${resourceTableName}/data`,
+        {
+          page: 1,
+          size: 1000,
+          autoFilter: true,
+        }
+      );
+
+      const responseData =
+        response.data?.data?.data || response.data?.data || [];
+      const rawData = Array.isArray(responseData) ? responseData : [];
+
+      // 데이터를 Resource 형태로 변환
+      const mappedResources: Resource[] = rawData.map((row: any) => ({
+        id: String(row[resourceFieldMapping.id] || ""),
+        name: String(row[resourceFieldMapping.name] || ""),
+        group: resourceFieldMapping.group
+          ? row[resourceFieldMapping.group]
+          : undefined,
+      }));
+
+      setResources(mappedResources);
+    } catch (err: any) {
+      console.error("리소스 로드 오류:", err);
+      setResources([]);
+    }
+  }, [resourceTableName, externalResources, resourceFieldMapping]);
+
+  // 초기 로드
+  useEffect(() => {
+    fetchSchedules();
+  }, [fetchSchedules]);
+
+  useEffect(() => {
+    fetchResources();
+  }, [fetchResources]);
+
+  // 네비게이션 함수들
+  const goToPrevious = useCallback(() => {
+    const days = zoomLevelDays[zoomLevel];
+    setViewStartDate((prev) => addDays(prev, -days));
+  }, [zoomLevel]);
+
+  const goToNext = useCallback(() => {
+    const days = zoomLevelDays[zoomLevel];
+    setViewStartDate((prev) => addDays(prev, days));
+  }, [zoomLevel]);
+
+  const goToToday = useCallback(() => {
+    const today = new Date();
+    today.setDate(today.getDate() - 7);
+    today.setHours(0, 0, 0, 0);
+    setViewStartDate(today);
+  }, []);
+
+  const goToDate = useCallback((date: Date) => {
+    const newDate = new Date(date);
+    newDate.setDate(newDate.getDate() - 7);
+    newDate.setHours(0, 0, 0, 0);
+    setViewStartDate(newDate);
+  }, []);
+
+  // 스케줄 업데이트
+  const updateSchedule = useCallback(
+    async (id: string, updates: Partial<ScheduleItem>) => {
+      if (!tableName || !config.editable) return;
+
+      try {
+        // 필드 매핑 역변환
+        const updateData: Record<string, any> = {};
+        if (updates.startDate) updateData[fieldMapping.startDate] = updates.startDate;
+        if (updates.endDate) updateData[fieldMapping.endDate] = updates.endDate;
+        if (updates.resourceId) updateData[fieldMapping.resourceId] = updates.resourceId;
+        if (updates.title) updateData[fieldMapping.title] = updates.title;
+        if (updates.status && fieldMapping.status)
+          updateData[fieldMapping.status] = updates.status;
+        if (updates.progress !== undefined && fieldMapping.progress)
+          updateData[fieldMapping.progress] = updates.progress;
+
+        await apiClient.put(`/table-management/tables/${tableName}/data/${id}`, updateData);
+
+        // 로컬 상태 업데이트
+        setSchedules((prev) =>
+          prev.map((s) => (s.id === id ? { ...s, ...updates } : s))
+        );
+      } catch (err: any) {
+        console.error("스케줄 업데이트 오류:", err);
+        throw err;
+      }
+    },
+    [tableName, fieldMapping, config.editable]
+  );
+
+  // 스케줄 추가
+  const addSchedule = useCallback(
+    async (schedule: Omit<ScheduleItem, "id">) => {
+      if (!tableName || !config.editable) return;
+
+      try {
+        // 필드 매핑 역변환
+        const insertData: Record<string, any> = {
+          [fieldMapping.resourceId]: schedule.resourceId,
+          [fieldMapping.title]: schedule.title,
+          [fieldMapping.startDate]: schedule.startDate,
+          [fieldMapping.endDate]: schedule.endDate,
+        };
+
+        if (fieldMapping.status) insertData[fieldMapping.status] = schedule.status;
+        if (fieldMapping.progress && schedule.progress !== undefined)
+          insertData[fieldMapping.progress] = schedule.progress;
+
+        const response = await apiClient.post(
+          `/table-management/tables/${tableName}/data`,
+          insertData
+        );
+
+        const newId = response.data?.data?.id || Date.now().toString();
+
+        // 로컬 상태 업데이트
+        setSchedules((prev) => [...prev, { ...schedule, id: newId }]);
+      } catch (err: any) {
+        console.error("스케줄 추가 오류:", err);
+        throw err;
+      }
+    },
+    [tableName, fieldMapping, config.editable]
+  );
+
+  // 스케줄 삭제
+  const deleteSchedule = useCallback(
+    async (id: string) => {
+      if (!tableName || !config.editable) return;
+
+      try {
+        await apiClient.delete(`/table-management/tables/${tableName}/data/${id}`);
+
+        // 로컬 상태 업데이트
+        setSchedules((prev) => prev.filter((s) => s.id !== id));
+      } catch (err: any) {
+        console.error("스케줄 삭제 오류:", err);
+        throw err;
+      }
+    },
+    [tableName, config.editable]
+  );
+
+  // 새로고침
+  const refresh = useCallback(() => {
+    fetchSchedules();
+    fetchResources();
+  }, [fetchSchedules, fetchResources]);
+
+  return {
+    schedules,
+    resources,
+    isLoading,
+    error,
+    zoomLevel,
+    setZoomLevel,
+    viewStartDate,
+    viewEndDate,
+    goToPrevious,
+    goToNext,
+    goToToday,
+    goToDate,
+    updateSchedule,
+    addSchedule,
+    deleteSchedule,
+    refresh,
+  };
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/index.ts b/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
new file mode 100644
index 00000000..33c483a0
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
@@ -0,0 +1,38 @@
+"use client";
+
+import { ComponentCategory } from "@/types/component";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
+import { TimelineSchedulerConfigPanel } from "./TimelineSchedulerConfigPanel";
+import { defaultTimelineSchedulerConfig } from "./config";
+import { TimelineSchedulerConfig } from "./types";
+
+/**
+ * v2-timeline-scheduler 컴포넌트 정의
+ * 간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트
+ */
+export const V2TimelineSchedulerDefinition = createComponentDefinition({
+  id: "v2-timeline-scheduler",
+  name: "타임라인 스케줄러",
+  nameEng: "Timeline Scheduler Component",
+  description: "간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: TimelineSchedulerComponent,
+  configPanel: TimelineSchedulerConfigPanel,
+  defaultConfig: defaultTimelineSchedulerConfig as TimelineSchedulerConfig,
+  defaultSize: {
+    width: 1000,
+    height: 500,
+  },
+  icon: "Calendar",
+  tags: ["타임라인", "스케줄", "간트차트", "일정", "계획"],
+  version: "2.0.0",
+  author: "개발팀",
+  documentation: "",
+});
+
+export { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
+export { TimelineSchedulerConfigPanel } from "./TimelineSchedulerConfigPanel";
+export * from "./types";
+export * from "./config";
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/types.ts b/frontend/lib/registry/components/v2-timeline-scheduler/types.ts
new file mode 100644
index 00000000..eba6f4e3
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/types.ts
@@ -0,0 +1,363 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+
+/**
+ * 줌 레벨 (시간 단위)
+ */
+export type ZoomLevel = "day" | "week" | "month";
+
+/**
+ * 스케줄 상태
+ */
+export type ScheduleStatus =
+  | "planned"
+  | "in_progress"
+  | "completed"
+  | "delayed"
+  | "cancelled";
+
+/**
+ * 스케줄 항목 (간트 바)
+ */
+export interface ScheduleItem {
+  /** 고유 ID */
+  id: string;
+
+  /** 리소스 ID (설비/작업자) */
+  resourceId: string;
+
+  /** 표시 제목 */
+  title: string;
+
+  /** 시작 일시 (ISO 8601) */
+  startDate: string;
+
+  /** 종료 일시 (ISO 8601) */
+  endDate: string;
+
+  /** 상태 */
+  status: ScheduleStatus;
+
+  /** 진행률 (0-100) */
+  progress?: number;
+
+  /** 색상 (CSS color) */
+  color?: string;
+
+  /** 추가 데이터 */
+  data?: Record<string, any>;
+}
+
+/**
+ * 리소스 (행 - 설비/작업자)
+ */
+export interface Resource {
+  /** 리소스 ID */
+  id: string;
+
+  /** 표시명 */
+  name: string;
+
+  /** 그룹 (선택) */
+  group?: string;
+
+  /** 아이콘 (선택) */
+  icon?: string;
+
+  /** 용량 (선택, 충돌 계산용) */
+  capacity?: number;
+}
+
+/**
+ * 필드 매핑 설정
+ */
+export interface FieldMapping {
+  /** ID 필드 */
+  id: string;
+  /** 리소스 ID 필드 */
+  resourceId: string;
+  /** 제목 필드 */
+  title: string;
+  /** 시작일 필드 */
+  startDate: string;
+  /** 종료일 필드 */
+  endDate: string;
+  /** 상태 필드 (선택) */
+  status?: string;
+  /** 진행률 필드 (선택) */
+  progress?: string;
+  /** 색상 필드 (선택) */
+  color?: string;
+}
+
+/**
+ * 리소스 필드 매핑 설정
+ */
+export interface ResourceFieldMapping {
+  /** ID 필드 */
+  id: string;
+  /** 이름 필드 */
+  name: string;
+  /** 그룹 필드 (선택) */
+  group?: string;
+}
+
+/**
+ * 타임라인 스케줄러 설정
+ */
+export interface TimelineSchedulerConfig extends ComponentConfig {
+  /** 스케줄 데이터 테이블명 */
+  selectedTable?: string;
+
+  /** 리소스 테이블명 */
+  resourceTable?: string;
+
+  /** 스케줄 필드 매핑 */
+  fieldMapping: FieldMapping;
+
+  /** 리소스 필드 매핑 */
+  resourceFieldMapping?: ResourceFieldMapping;
+
+  /** 초기 줌 레벨 */
+  defaultZoomLevel?: ZoomLevel;
+
+  /** 초기 표시 날짜 (ISO 8601) */
+  initialDate?: string;
+
+  /** 편집 가능 여부 */
+  editable?: boolean;
+
+  /** 드래그 이동 가능 */
+  draggable?: boolean;
+
+  /** 리사이즈 가능 */
+  resizable?: boolean;
+
+  /** 행 높이 (px) */
+  rowHeight?: number;
+
+  /** 헤더 높이 (px) */
+  headerHeight?: number;
+
+  /** 리소스 컬럼 너비 (px) */
+  resourceColumnWidth?: number;
+
+  /** 셀 너비 (px, 줌 레벨별) */
+  cellWidth?: {
+    day?: number;
+    week?: number;
+    month?: number;
+  };
+
+  /** 충돌 표시 여부 */
+  showConflicts?: boolean;
+
+  /** 진행률 바 표시 여부 */
+  showProgress?: boolean;
+
+  /** 오늘 표시선 */
+  showTodayLine?: boolean;
+
+  /** 상태별 색상 */
+  statusColors?: {
+    planned?: string;
+    in_progress?: string;
+    completed?: string;
+    delayed?: string;
+    cancelled?: string;
+  };
+
+  /** 툴바 표시 여부 */
+  showToolbar?: boolean;
+
+  /** 줌 레벨 변경 버튼 표시 */
+  showZoomControls?: boolean;
+
+  /** 네비게이션 버튼 표시 */
+  showNavigation?: boolean;
+
+  /** 추가 버튼 표시 */
+  showAddButton?: boolean;
+
+  /** 높이 (px 또는 auto) */
+  height?: number | string;
+
+  /** 최대 높이 */
+  maxHeight?: number | string;
+}
+
+/**
+ * 드래그 이벤트
+ */
+export interface DragEvent {
+  /** 스케줄 ID */
+  scheduleId: string;
+  /** 새로운 시작일 */
+  newStartDate: string;
+  /** 새로운 종료일 */
+  newEndDate: string;
+  /** 새로운 리소스 ID (리소스 간 이동 시) */
+  newResourceId?: string;
+}
+
+/**
+ * 리사이즈 이벤트
+ */
+export interface ResizeEvent {
+  /** 스케줄 ID */
+  scheduleId: string;
+  /** 새로운 시작일 */
+  newStartDate: string;
+  /** 새로운 종료일 */
+  newEndDate: string;
+  /** 리사이즈 방향 */
+  direction: "start" | "end";
+}
+
+/**
+ * 클릭 이벤트
+ */
+export interface ScheduleClickEvent {
+  /** 스케줄 항목 */
+  schedule: ScheduleItem;
+  /** 리소스 */
+  resource: Resource;
+}
+
+/**
+ * 빈 셀 클릭 이벤트
+ */
+export interface CellClickEvent {
+  /** 리소스 ID */
+  resourceId: string;
+  /** 날짜 */
+  date: string;
+}
+
+/**
+ * TimelineSchedulerComponent Props
+ */
+export interface TimelineSchedulerComponentProps {
+  /** 컴포넌트 설정 */
+  config: TimelineSchedulerConfig;
+
+  /** 디자인 모드 여부 */
+  isDesignMode?: boolean;
+
+  /** 폼 데이터 */
+  formData?: Record<string, any>;
+
+  /** 외부 스케줄 데이터 */
+  externalSchedules?: ScheduleItem[];
+
+  /** 외부 리소스 데이터 */
+  externalResources?: Resource[];
+
+  /** 로딩 상태 */
+  isLoading?: boolean;
+
+  /** 에러 */
+  error?: string;
+
+  /** 컴포넌트 ID */
+  componentId?: string;
+
+  /** 드래그 완료 이벤트 */
+  onDragEnd?: (event: DragEvent) => void;
+
+  /** 리사이즈 완료 이벤트 */
+  onResizeEnd?: (event: ResizeEvent) => void;
+
+  /** 스케줄 클릭 이벤트 */
+  onScheduleClick?: (event: ScheduleClickEvent) => void;
+
+  /** 빈 셀 클릭 이벤트 */
+  onCellClick?: (event: CellClickEvent) => void;
+
+  /** 스케줄 추가 이벤트 */
+  onAddSchedule?: (resourceId: string, date: string) => void;
+}
+
+/**
+ * useTimelineData 훅 반환 타입
+ */
+export interface UseTimelineDataResult {
+  /** 스케줄 목록 */
+  schedules: ScheduleItem[];
+
+  /** 리소스 목록 */
+  resources: Resource[];
+
+  /** 로딩 상태 */
+  isLoading: boolean;
+
+  /** 에러 */
+  error: string | null;
+
+  /** 현재 줌 레벨 */
+  zoomLevel: ZoomLevel;
+
+  /** 줌 레벨 변경 */
+  setZoomLevel: (level: ZoomLevel) => void;
+
+  /** 현재 표시 시작일 */
+  viewStartDate: Date;
+
+  /** 현재 표시 종료일 */
+  viewEndDate: Date;
+
+  /** 이전으로 이동 */
+  goToPrevious: () => void;
+
+  /** 다음으로 이동 */
+  goToNext: () => void;
+
+  /** 오늘로 이동 */
+  goToToday: () => void;
+
+  /** 특정 날짜로 이동 */
+  goToDate: (date: Date) => void;
+
+  /** 스케줄 업데이트 */
+  updateSchedule: (id: string, updates: Partial<ScheduleItem>) => Promise<void>;
+
+  /** 스케줄 추가 */
+  addSchedule: (schedule: Omit<ScheduleItem, "id">) => Promise<void>;
+
+  /** 스케줄 삭제 */
+  deleteSchedule: (id: string) => Promise<void>;
+
+  /** 데이터 새로고침 */
+  refresh: () => void;
+}
+
+/**
+ * 날짜 셀 정보
+ */
+export interface DateCell {
+  /** 날짜 */
+  date: Date;
+  /** 표시 라벨 */
+  label: string;
+  /** 오늘 여부 */
+  isToday: boolean;
+  /** 주말 여부 */
+  isWeekend: boolean;
+  /** 월 첫째날 여부 */
+  isMonthStart: boolean;
+}
+
+/**
+ * 스케줄 바 위치 정보
+ */
+export interface ScheduleBarPosition {
+  /** 왼쪽 오프셋 (px) */
+  left: number;
+  /** 너비 (px) */
+  width: number;
+  /** 상단 오프셋 (px) */
+  top: number;
+  /** 높이 (px) */
+  height: number;
+}
diff --git a/frontend/lib/utils/layoutV2Converter.ts b/frontend/lib/utils/layoutV2Converter.ts
index d1d7487d..2c65189e 100644
--- a/frontend/lib/utils/layoutV2Converter.ts
+++ b/frontend/lib/utils/layoutV2Converter.ts
@@ -66,6 +66,8 @@ export function convertV2ToLegacy(v2Layout: LayoutV2 | null): LegacyLayoutData |
       codeCategory: overrides.codeCategory,
       inputType: overrides.inputType,
       webType: overrides.webType,
+      // 🆕 autoFill 설정 복원 (자동 입력 기능)
+      autoFill: overrides.autoFill,
       // 기존 구조 호환을 위한 추가 필드
       style: {},
       parentId: null,
@@ -115,6 +117,8 @@ export function convertLegacyToV2(legacyLayout: LegacyLayoutData): LayoutV2 {
     if (comp.codeCategory) topLevelProps.codeCategory = comp.codeCategory;
     if (comp.inputType) topLevelProps.inputType = comp.inputType;
     if (comp.webType) topLevelProps.webType = comp.webType;
+    // 🆕 autoFill 설정 저장 (자동 입력 기능)
+    if (comp.autoFill) topLevelProps.autoFill = comp.autoFill;
 
     // 현재 설정에서 차이값만 추출
     const fullConfig = comp.componentConfig || {};