# 화면 디자이너 V2 - 재설계 계획서

> 작성일: 2026-02-27  
> 방향: 기존 기능 형태는 인정하되, 새로운 방식으로 재설립  
> 핵심 철학: "컴포넌트를 계속 추가하는 시스템"에서 "소수의 강력한 컴포넌트로 유연하게 조합하는 시스템"으로

---

## 1. 현재 시스템의 근본적 문제

### 1.1 "컴포넌트 폭증" 문제

현재 등록된 컴포넌트 수: **70개 이상**

```
기본 입력 13종  +  V2 입력 4종  +  V2 데이터 5종
기존 레이아웃 8종  +  V2 레이아웃 16종  +  특수 10종+
ConfigPanel 26개  +  Renderer 21개  +  위젯 10종+
```

**문제**: 새 기능이 필요할 때마다 아래 작업을 반복해야 함

```
새 기능 요청 → ComponentDefinition 작성
           → Renderer 작성
           → ConfigPanel 작성
           → index.ts에 import 추가
           → 테스트
           → 약 5~8개 파일, 500~1500줄 추가
```

거래처별 품목정보? → `customer-item-mapping` 컴포넌트 추가  
BOM 트리? → `v2-bom-tree` + `v2-bom-item-editor` 추가  
세금계산서? → `tax-invoice-list` 추가  
타임라인? → `v2-timeline-scheduler` 추가  

**매번 개발자가 코드를 작성해야만 새 기능이 가능**하다.

### 1.2 설정 패널의 사용성 문제

ConfigPanel이 26개이고, 각각 UI 구조/용어/설정 방식이 다름:

| 패널 | 설정 항목 | 사용자 관점 |
|------|-----------|------------|
| TextConfigPanel | inputType, placeholder, maxLength... | "이게 뭐지?" |
| EntityConfigPanel | joinTable, joinColumn, displayColumn... | "조인? 컬럼?" |
| SelectConfigPanel | optionSource, staticOptions, dynamicApi... | "동적 API?" |
| FlowWidgetConfigPanel | flowDefinitionId, stepMapping... | "스텝 매핑?" |
| ButtonConfigPanel | actionType, dataFlow, targetScreen... | "데이터 플로우?" |

**사용자(현업 관리자)가 이 설정들을 이해하고 사용하기가 극히 어려움.**

### 1.3 컴포넌트 간 연결의 제한성

현재 컴포넌트들은 대부분 **독립적**으로 동작:

- 거래처를 선택하면 → 납품처가 자동으로 바뀌어야 하는데 → 별도 코드 필요
- 마스터 테이블에서 행을 선택하면 → 디테일 테이블이 자동 필터링 → SplitPanel로 하드코딩
- 버튼 클릭하면 → 특정 필드 값에 따라 다른 동작 → FlowWidget으로만 가능

**컴포넌트 간 동적 상호작용을 사용자가 설정할 방법이 없음.**

### 1.4 V1/V2/기존/신규 혼재

```typescript
// 같은 테이블 컴포넌트가 3종류
import "./table-list/TableListRenderer";        // 기존
import "./v2-table-list/TableListRenderer";      // V2
import "./v2-table-grouped/TableGroupedRenderer"; // V2 그룹화
```

동일 기능의 컴포넌트가 "기존 호환"이라는 이유로 중복 존재.  
어떤 걸 써야 하는지 사용자도 개발자도 혼란.

---

## 2. 새로운 비전

### 2.1 핵심 원칙

```
❌ 기존: "기능 = 컴포넌트"     → 기능이 늘어나면 컴포넌트가 늘어남
✅ 새롭게: "기능 = 설정"       → 소수의 메타 컴포넌트 + 풍부한 설정으로 무한 확장
```

```
❌ 기존: "개발자가 만들어주는 화면"  → 요청 → 개발 → 배포 → 1~3일
✅ 새롭게: "사용자가 조립하는 화면"  → 드래그 → 설정 → 바로 사용 → 5분
```

### 2.2 메타 컴포넌트 체계

70개 이상의 컴포넌트를 **7개의 메타 컴포넌트**로 통합:

| 메타 컴포넌트 | 대체 범위 | 핵심 능력 |
|---------------|-----------|-----------|
| **Field** | text, number, date, select, entity, checkbox, radio, file, textarea, code, numbering | 테이블 컬럼의 webType에 따라 자동 변환 |
| **DataView** | table-list, repeater, card-display, pivot-grid, bom-tree, aggregation, timeline | 같은 데이터를 테이블/카드/트리/피벗/타임라인 등 뷰 모드 전환 |
| **Action** | button-primary, flow-widget, related-data-buttons | 클릭 시 저장/삭제/조회/이동/모달/API 호출 등 설정 |
| **Layout** | split-panel, tabs, section-card, section-paper, conditional-container, accordion | 영역 분할, 탭, 섹션, 조건부 표시 |
| **Display** | text-display, divider, badge, alert, stats-card, chart, image, progress | 읽기 전용 정보 표시 |
| **Search** | table-search, advanced-filters, autocomplete | 데이터 필터링/검색 |
| **Modal** | universal-form-modal, repeat-screen-modal | 데이터 입력/편집 팝업 |

### 2.3 "테이블 드롭 → 화면 완성" 흐름

**현재** (약 15분):
```
1. 테이블 컬럼을 하나씩 드래그
2. 각 컬럼마다 컴포넌트 타입 확인
3. entity 컬럼이면 → EntityConfigPanel에서 조인 테이블, 조인 컬럼 수동 설정
4. select 컬럼이면 → SelectConfigPanel에서 옵션 소스 수동 설정
5. 버튼 컴포넌트 별도 추가
6. 데이터 테이블 별도 추가
7. 각각 설정...
```

**새로운 방식** (약 2분):
```
1. 테이블을 통째로 드롭
2. 시스템이 자동으로:
   - 컬럼 타입(webType) 분석 → Field 컴포넌트 자동 생성
   - entity 컬럼 → 조인 정보 자동 감지 (FK 관계)
   - select 컬럼 → 코드 테이블 자동 연결
   - CRUD 버튼 자동 생성 (Action 컴포넌트)
   - DataView(테이블 뷰) 자동 생성
3. 사용자는 세부 설정만 조정
```

---

## 3. 메타 컴포넌트 상세 설계

### 3.1 Field (통합 입력 컴포넌트)

**대체 대상**: text-input, number-input, date-input, select-basic, checkbox-basic, radio-basic, entity-search-input, file-upload, textarea, code-input, numbering-rule, v2-input, v2-select, v2-date, v2-file-upload, autocomplete-search-input, toggle-switch, slider

**핵심 개념**: 하나의 Field 컴포넌트가 `webType`에 따라 모양과 동작이 바뀜

```typescript
interface FieldConfig {
  // 자동 결정 (테이블 컬럼 기반)
  webType: "text" | "number" | "date" | "datetime" | "select" | "entity" 
         | "checkbox" | "radio" | "file" | "textarea" | "code" | "numbering"
         | "email" | "tel" | "url" | "password" | "color" | "toggle" | "slider";
  
  // 데이터 바인딩 (자동)
  tableName: string;
  columnName: string;
  
  // 조인 정보 (entity 타입일 때 자동 감지)
  join?: {
    targetTable: string;      // FK가 참조하는 테이블
    targetColumn: string;     // PK 컬럼
    displayColumn: string;    // 표시할 컬럼 (자동: name 또는 첫 번째 text 컬럼)
    additionalColumns?: string[]; // 추가 표시 컬럼
    searchable?: boolean;     // 검색 가능 여부
    filterBy?: Record<string, string>; // 다른 Field 값으로 필터링
  };
  
  // select 옵션 (자동 감지)
  options?: {
    source: "code_table" | "static" | "api";
    codeCategory?: string;    // code_table일 때
    staticList?: { value: string; label: string }[];
    apiEndpoint?: string;
  };
  
  // 공통 설정
  label?: string;
  placeholder?: string;
  required?: boolean;
  readonly?: boolean;
  disabled?: boolean;
  defaultValue?: any;
  
  // 검증
  validation?: {
    min?: number;
    max?: number;
    minLength?: number;
    maxLength?: number;
    pattern?: string;
    customMessage?: string;
  };
  
  // 연동 (다른 Field와의 관계)
  linkedTo?: {
    fieldId: string;          // 연결된 Field의 ID
    relationship: "filter" | "copy" | "calculate" | "show_hide";
    expression?: string;      // 계산식 또는 조건식
  }[];
  
  // 레이아웃
  display?: {
    width?: string;           // "full" | "half" | "third" | "quarter" | 커스텀
    labelPosition?: "top" | "left" | "hidden";
    helpText?: string;
  };
}
```

**사용자 설정 UI (새로운 방식)**:

```
┌─────────────────────────────────────┐
│ Field 설정                          │
├─────────────────────────────────────┤
│ 표시 형태: [텍스트 ▼]              │  ← 드롭다운 하나로 webType 전환
│                                     │
│ 라벨: [수주번호         ]          │
│ 필수: [✓]  읽기전용: [ ]           │
│                                     │
│ ─── 데이터 연결 ────               │
│ 테이블: sales_order_mng (자동)      │
│ 컬럼: order_no (자동)               │
│                                     │
│ ─── 연동 설정 ────                 │
│ + 다른 필드와 연결 추가             │
│  [거래처] 변경 시 → [납품처] 필터링 │
│  [수량] × [단가] → [금액] 자동계산  │
│                                     │
│ ─── 표시 ────                      │
│ 너비: [절반 ▼]                     │
│ 도움말: [주문 번호를 입력하세요]    │
└─────────────────────────────────────┘
```

**핵심 차이점**:
- 기존: 컴포넌트 타입 선택 → 타입별 ConfigPanel → 복잡한 설정
- 새로운: Field 하나 놓으면 → webType 자동 감지 → 간단한 통합 설정

---

### 3.2 DataView (통합 데이터 뷰)

**대체 대상**: table-list, v2-table-list, v2-repeater, card-display, v2-card-display, pivot-grid, v2-pivot-grid, bom-tree, aggregation-widget, v2-aggregation-widget, v2-table-grouped, v2-timeline-scheduler, simple-repeater-table, modal-repeater-table

**핵심 개념**: 하나의 데이터 소스를 여러 뷰 모드로 전환

```typescript
interface DataViewConfig {
  // 데이터 소스
  dataSource: {
    tableName: string;
    columns: ColumnConfig[];     // 표시할 컬럼 목록
    defaultSort?: { column: string; direction: "asc" | "desc" };
    defaultFilter?: FilterConfig[];
    pageSize?: number;
    
    // 마스터-디테일 자동 연결
    masterField?: string;        // 상위 DataView의 어떤 컬럼과 연결
    detailForeignKey?: string;   // 하위 테이블의 FK 컬럼
  };
  
  // 뷰 모드 (사용자가 런타임에 전환 가능)
  viewMode: "table" | "card" | "list" | "tree" | "pivot" | "timeline" | "kanban" | "calendar";
  allowedViewModes?: string[];   // 허용된 뷰 모드 목록
  
  // 테이블 뷰 설정
  tableConfig?: {
    showRowNumber?: boolean;
    showCheckbox?: boolean;
    stickyHeader?: boolean;
    groupBy?: string[];          // 그룹화 컬럼
    summaryColumns?: string[];   // 합계 표시 컬럼
    editableColumns?: string[];  // 인라인 편집 가능 컬럼
    frozenColumns?: number;      // 고정 컬럼 수
  };
  
  // 카드 뷰 설정
  cardConfig?: {
    titleColumn: string;
    descriptionColumn?: string;
    imageColumn?: string;
    columnsPerRow?: 2 | 3 | 4;
    cardStyle?: "compact" | "standard" | "detailed";
  };
  
  // 트리 뷰 설정
  treeConfig?: {
    parentColumn: string;
    childColumn: string;
    labelColumn: string;
    expandLevel?: number;
  };
  
  // 피벗 설정
  pivotConfig?: {
    rowFields: string[];
    columnFields: string[];
    valueFields: { column: string; aggregation: "sum" | "count" | "avg" | "min" | "max" }[];
  };
  
  // CRUD 동작 (Action 컴포넌트와 자동 연결)
  actions?: {
    create?: boolean;
    read?: boolean;
    update?: boolean;
    delete?: boolean;
    export?: boolean;
    import?: boolean;
  };
  
  // 검색/필터 (Search 컴포넌트와 자동 연결)
  searchable?: boolean;
  filterColumns?: string[];
}
```

**사용자 설정 UI**:

```
┌─────────────────────────────────────┐
│ DataView 설정                       │
├─────────────────────────────────────┤
│ 테이블: [sales_order_mng ▼]        │
│                                     │
│ 뷰 모드: [테이블] [카드] [트리]     │  ← 클릭 한 번으로 전환
│          ☑테이블 ☑카드 ☐트리       │  ← 허용 모드 체크
│                                     │
│ ─── 컬럼 선택 ────                 │
│  ☑ 수주번호    표시명: 수주번호     │
│  ☑ 거래처      표시명: 거래처       │
│  ☑ 수주수량    표시명: 수량    합계☑│
│  ☐ 생성일      (숨김)              │
│  [↕ 드래그로 순서 변경]            │
│                                     │
│ ─── 기능 ────                      │
│ ☑ 행 번호  ☑ 체크박스  ☑ 검색     │
│ ☑ 등록    ☑ 수정    ☑ 삭제        │
│ ☐ 엑셀 내보내기  ☐ 가져오기        │
│                                     │
│ ─── 연결 ────                      │
│ 마스터: [없음 ▼]                   │  ← 다른 DataView 선택 시
│ 연결 키: [customer_code ▼]         │     자동 마스터-디테일
└─────────────────────────────────────┘
```

---

### 3.3 Action (통합 액션 컴포넌트)

**대체 대상**: button-primary, v2-button-primary, flow-widget, related-data-buttons

**핵심 개념**: 하나의 Action 컴포넌트에 여러 동작을 설정으로 정의

```typescript
interface ActionConfig {
  // 표시
  label: string;
  variant: "default" | "outline" | "destructive" | "ghost";
  icon?: string;
  position?: "toolbar" | "inline" | "floating" | "context-menu";
  
  // 동작 정의 (파이프라인 방식 - 순차 실행)
  steps: ActionStep[];
  
  // 실행 조건
  enableCondition?: {
    type: "always" | "selected" | "field_value" | "expression";
    fieldId?: string;
    operator?: "eq" | "ne" | "gt" | "lt" | "empty" | "not_empty";
    value?: any;
    expression?: string;
  };
  
  // 확인 대화상자
  confirmDialog?: {
    title: string;
    message: string;
    confirmText?: string;
    cancelText?: string;
    variant?: "default" | "destructive";
  };
}

type ActionStep =
  | { type: "save"; target: string }           // 데이터 저장
  | { type: "delete"; target: string }         // 데이터 삭제
  | { type: "refresh"; target: string }        // 데이터 새로고침
  | { type: "navigate"; screenId: number }     // 화면 이동
  | { type: "openModal"; modalId: string }     // 모달 열기
  | { type: "setField"; fieldId: string; value: any } // 필드 값 설정
  | { type: "api"; method: string; endpoint: string; body?: any } // API 호출
  | { type: "flowMove"; flowId: number; stepId: number } // 플로우 이동
  | { type: "export"; format: "excel" | "csv" | "pdf" }  // 내보내기
  | { type: "validate"; target: string }       // 유효성 검사
  | { type: "toast"; message: string; variant: "success" | "error" | "warning" }; // 알림
```

**사용자 설정 UI**:

```
┌─────────────────────────────────────┐
│ Action 설정                         │
├─────────────────────────────────────┤
│ 버튼명: [저장                    ]  │
│ 스타일: [기본●] [외곽] [위험] [고스트]│
│ 아이콘: [Save ▼]                   │
│                                     │
│ ─── 동작 순서 ────                 │
│  1. [유효성 검사 ▼] → 주문 폼      │
│  2. [데이터 저장 ▼] → sales_order   │
│  3. [알림 ▼]       → "저장 완료"    │
│  4. [새로고침 ▼]   → 주문 목록      │
│  [+ 동작 추가]                      │
│                                     │
│ ─── 실행 조건 ────                 │
│  [행 선택 시만 ▼]                  │
│                                     │
│ ─── 확인 ────                      │
│  ☑ 실행 전 확인 대화상자            │
│  제목: [저장 확인]                  │
│  메시지: [변경사항을 저장합니다]     │
└─────────────────────────────────────┘
```

---

### 3.4 Layout (통합 레이아웃)

**대체 대상**: split-panel-layout, v2-split-panel-layout, tabs, v2-tabs, section-card, v2-section-card, section-paper, v2-section-paper, conditional-container, accordion, screen-split-panel, repeat-container

```typescript
interface LayoutConfig {
  mode: "columns" | "rows" | "tabs" | "accordion" | "card" | "conditional";
  
  // columns/rows 모드
  areas?: {
    id: string;
    label?: string;
    size?: string;        // "1fr", "300px", "auto"
    minSize?: string;
    maxSize?: string;
    collapsible?: boolean;
    resizable?: boolean;  // 드래그로 크기 조절
  }[];
  
  // tabs 모드
  tabs?: {
    id: string;
    label: string;
    icon?: string;
    closable?: boolean;
    lazy?: boolean;       // 탭 전환 시 지연 로드
  }[];
  
  // conditional 모드 (조건에 따라 영역 표시/숨김)
  conditions?: {
    areaId: string;
    showWhen: {
      fieldId: string;
      operator: "eq" | "ne" | "in" | "not_in";
      value: any;
    };
  }[];
  
  // 공통
  gap?: number;
  padding?: number;
  bordered?: boolean;
  title?: string;
}
```

---

### 3.5 Display (통합 표시 컴포넌트)

**대체 대상**: text-display, v2-text-display, divider-line, v2-divider-line, badge, alert, stats-card, chart, image, progress-bar, v2-media, v2-split-line

```typescript
interface DisplayConfig {
  displayType: "text" | "heading" | "divider" | "badge" | "alert" | "stat" 
             | "chart" | "image" | "progress" | "spacer" | "html";
  
  // 데이터 바인딩 (선택)
  dataBinding?: {
    tableName?: string;
    columnName?: string;
    expression?: string;      // 계산식: "{total_amount} / {quantity}"
    format?: string;          // 숫자/날짜 포맷
  };
  
  // 텍스트 설정
  text?: {
    content: string;
    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
    weight?: "normal" | "medium" | "semibold" | "bold";
    color?: string;
    align?: "left" | "center" | "right";
  };
  
  // 차트 설정
  chart?: {
    chartType: "bar" | "line" | "pie" | "donut" | "area";
    dataSource: string;
    xAxis: string;
    yAxis: string[];
    colors?: string[];
  };
  
  // 통계 카드
  stat?: {
    value: string;
    label: string;
    change?: string;
    changeType?: "increase" | "decrease" | "neutral";
    icon?: string;
  };
}
```

---

### 3.6 Search (통합 검색)

**대체 대상**: table-search-widget, v2-table-search-widget, AdvancedSearchFilters

```typescript
interface SearchConfig {
  // 연결된 DataView
  targetDataView: string;
  
  // 검색 모드
  mode: "simple" | "advanced" | "combined";
  
  // 검색 필드
  fields?: {
    columnName: string;
    label: string;
    searchType: "text" | "exact" | "range" | "select" | "date_range" | "entity";
    defaultExpanded?: boolean;
  }[];
  
  // 퀵 필터 (버튼 형태)
  quickFilters?: {
    label: string;
    filter: { column: string; operator: string; value: any };
  }[];
}
```

---

### 3.7 Modal (통합 모달)

**대체 대상**: universal-form-modal, repeat-screen-modal, selected-items-detail-input

```typescript
interface ModalConfig {
  // 트리거
  trigger: "button" | "row_click" | "row_double_click" | "action";
  
  // 모달 내부
  content: {
    type: "form" | "screen" | "custom";
    
    // form: 필드 자동 구성
    formConfig?: {
      tableName: string;
      mode: "create" | "edit" | "view";
      columns: string[];          // 표시할 컬럼
      layout?: "single" | "two_column";
    };
    
    // screen: 다른 화면 임베딩
    screenId?: number;
    
    // 데이터 전달
    passData?: {
      from: string;               // 현재 화면의 필드/컬럼
      to: string;                 // 모달 내부의 필드/컬럼
    }[];
  };
  
  // 크기
  size?: "sm" | "md" | "lg" | "xl" | "full";
  
  // 닫힐 때 동작
  onClose?: ActionStep[];
}
```

---

## 4. 컴포넌트 간 동적 연동 시스템

### 4.1 현재의 한계

```
[거래처 Field]  →  독립 동작  ←  [납품처 Field]
                   연결 없음
```

### 4.2 새로운 연동 시스템: Reactive Bindings

```typescript
interface ReactiveBinding {
  id: string;
  source: {
    componentId: string;
    event: "change" | "select" | "click" | "load";
    field?: string;
  };
  target: {
    componentId: string;
    action: "filter" | "setValue" | "show" | "hide" | "enable" | "disable" | "refresh";
    field?: string;
  };
  transform?: {
    type: "direct" | "lookup" | "calculate" | "condition";
    expression?: string;
  };
}
```

**사용자가 설정하는 방식**:

```
┌─────────────────────────────────────────────┐
│ 연동 설정                                   │
├─────────────────────────────────────────────┤
│                                             │
│ [거래처 ●]─── 변경 시 ───→[납품처 ●]       │
│               └ 필터링: customer_code 일치   │
│                                             │
│ [수량 ●]──┐                                │
│            ├─ 계산 ──→[금액 ●]             │
│ [단가 ●]──┘   수량 × 단가                  │
│                                             │
│ [상태 ●]─── "출고완료" 일 때 ──→[삭제 ●]   │
│               └ 비활성화                     │
│                                             │
│ [+ 새 연동 추가]                            │
└─────────────────────────────────────────────┘
```

### 4.3 마스터-디테일 자동 연결

현재는 SplitPanel + 하드코딩된 이벤트 처리가 필요하지만,
새로운 시스템에서는:

```
DataView(마스터: 수주목록)
  ↕ 자동 연결 (FK: order_id)
DataView(디테일: 수주상세품목)
```

**설정 방법**: DataView의 `dataSource.masterField` 하나만 선택하면 자동 연결

---

## 5. 통합 설정 패널 재설계

### 5.1 현재 → 새로운 방식

**현재**: 26개의 각기 다른 ConfigPanel

**새로운**: 1개의 통합 설정 패널 (UnifiedConfigPanel)

```
┌─────────────────────────────────────┐
│ 📋 설정                     [×]     │
├─────────────────────────────────────┤
│ [기본] [데이터] [표시] [연동] [조건]│  ← 5개 탭으로 통일
├─────────────────────────────────────┤
│                                     │
│ ◆ 기본 탭                          │
│   컴포넌트 유형: Field              │
│   표시 형태: [텍스트 ▼]            │
│   라벨: [수주번호]                  │
│   필수: ☑   읽기전용: ☐            │
│                                     │
│ ◆ 데이터 탭                        │
│   테이블: sales_order_mng           │
│   컬럼: order_no                    │
│   기본값: [자동생성]                │
│                                     │
│ ◆ 표시 탭                          │
│   너비: [━━━━━━○━━] 50%            │
│   라벨 위치: [좌측 ▼]              │
│   도움말: [...]                     │
│                                     │
│ ◆ 연동 탭                          │
│   거래처 변경 시 → 납품처 필터링    │
│   [+ 연동 추가]                     │
│                                     │
│ ◆ 조건 탭                          │
│   표시 조건: [항상 ▼]              │
│   활성 조건: [항상 ▼]              │
└─────────────────────────────────────┘
```

### 5.2 설정 난이도별 UI 분리

```
[간편 모드]  ← 기본 (현업 관리자용)
  라벨, 필수, 읽기전용, 너비 정도만

[상세 모드]  ← 토글로 전환 (파워유저용)
  검증 규칙, 계산식, 조건부 표시, API 연결 등

[개발자 모드]  ← 숨겨진 모드 (개발자 전용)
  커스텀 렌더러, 이벤트 훅, CSS 오버라이드
```

---

## 6. 캔버스/디자이너 UI 재설계

### 6.1 새로운 디자이너 레이아웃

```
┌─────────────────────────────────────────────────────┐
│ [← 목록] │ 수주관리 화면 │ 💾 자동저장 ON │ [미리보기]│
├──────────┼──────────────────────────────┼────────────┤
│          │                              │            │
│ 컴포넌트 │     ┌──────────────────┐     │ 설정       │
│ --------│     │                  │     │ --------  │
│ 📊 Data │     │   [캔버스 영역]   │     │ [기본]    │
│ 📝 Field│     │                  │     │ [데이터]  │
│ ▶ Action│     │   드래그하여      │     │ [표시]    │
│ 📐 Layout     │   컴포넌트 추가   │     │ [연동]    │
│ 📄 Display    │                  │     │ [조건]    │
│ 🔍 Search│    │                  │     │           │
│ 📋 Modal │    └──────────────────┘     │           │
│          │                              │           │
│ 테이블   │  ──────────────────────────  │           │
│ --------│  [줌: 100%] [맞춤] [그리드]  │           │
│ 수주관리 │                              │           │
│  └ 컬럼들│                              │           │
├──────────┼──────────────────────────────┼────────────┤
│ [연동 설정]    컴포넌트 간 연결 시각화                │
│ [거래처] ─── 변경 시 ──→ [납품처] 필터링             │
└─────────────────────────────────────────────────────┘
```

### 6.2 핵심 UX 개선 사항

| 항목 | 현재 | 새로운 |
|------|------|--------|
| 컴포넌트 패널 | 70개 위젯 나열 | 7개 메타 컴포넌트 + 테이블 컬럼 |
| 드롭 피드백 | 없음 | 스냅 가이드라인 + 드롭 영역 하이라이트 |
| 설정 패널 | 컴포넌트별 26개 | 통합 5탭 패널 (간편/상세/개발자 모드) |
| 빈 캔버스 | 빈 화면 | "테이블을 드래그하여 시작하세요" 가이드 |
| 줌 | 마우스 휠만 | 우하단 줌 컨트롤 (+/-/맞춤/100%) |
| 저장 | 수동만 | 자동 저장 + 수동 저장 |
| 연동 | 코드 필요 | 하단 연동 패널에서 시각적 설정 |
| 미리보기 | 새 창 | 인라인 미리보기 모드 (디자인↔미리보기 전환) |

### 6.3 "테이블 드롭" 자동 화면 생성

테이블을 캔버스에 드롭하면 자동으로 화면 구성:

```
[sales_order_mng 테이블 드롭]
      ↓
┌─────────────────────────────────────┐
│ 🪄 화면 자동 생성                    │
├─────────────────────────────────────┤
│ 어떤 형태로 만들까요?               │
│                                     │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐   │
│ │목록형│ │폼형 │ │마디 │ │카드 │   │
│ │     │ │     │ │     │ │     │   │
│ │ ≡≡≡ │ │ □□  │ │≡≡│□│ │ ▦▦▦ │   │
│ │ ≡≡≡ │ │ □□  │ │≡≡│□│ │ ▦▦▦ │   │
│ └─────┘ └─────┘ └─────┘ └─────┘   │
│  테이블  입력폼  마스터   카드 그리드│
│  + CRUD  + 저장  디테일   + 필터    │
│                                     │
│ 포함할 컬럼:                        │
│ ☑ order_no (수주번호)               │
│ ☑ customer_code (거래처) → entity   │
│ ☑ order_date (수주일) → date        │
│ ☑ quantity (수량) → number          │
│ ☐ created_by (생성자) [숨김 추천]   │
│ ☐ updated_at (수정일) [숨김 추천]   │
│                                     │
│         [생성하기]                   │
└─────────────────────────────────────┘
```

**생성 결과** (목록형 선택 시):

```
자동 생성되는 컴포넌트:
1. Search 컴포넌트 (검색바)
2. Action 컴포넌트 그룹 (등록/수정/삭제 버튼)
3. DataView 컴포넌트 (테이블 뷰, 선택한 컬럼 포함)
4. Modal 컴포넌트 (등록/수정용 폼 모달, Field 자동 구성)
```

---

## 7. 마이그레이션 전략

### 7.1 기존 레이아웃 호환

기존 1,407개 레이아웃(version: "2.0")은 유지하면서 새 시스템 도입:

```typescript
// 레이아웃 로드 시 자동 변환
function loadLayout(data: LayoutData): LayoutData {
  if (data.version === "2.0") {
    // 기존 컴포넌트 → 메타 컴포넌트 매핑
    return migrateTo3_0(data);
  }
  return data;
}

function migrateTo3_0(data: LayoutData): LayoutData {
  const newComponents = data.components.map(comp => {
    // text-input, number-input, date-input 등 → Field
    if (isInputComponent(comp.componentType)) {
      return convertToField(comp);
    }
    // table-list, v2-table-list 등 → DataView
    if (isDataComponent(comp.componentType)) {
      return convertToDataView(comp);
    }
    // button-primary → Action
    if (isButtonComponent(comp.componentType)) {
      return convertToAction(comp);
    }
    return comp; // 변환 불가 시 기존 유지
  });
  
  return { ...data, version: "3.0", components: newComponents };
}
```

### 7.2 단계적 전환 계획

```
Phase A: 메타 컴포넌트 코어 개발 (3~4주)
  - Field, DataView, Action 핵심 3개 먼저
  - 통합 설정 패널 (UnifiedConfigPanel)
  - Reactive Bindings 엔진

Phase B: 자동 생성 시스템 (2~3주)
  - 테이블 드롭 → 화면 자동 생성
  - 컬럼 webType → Field 자동 변환
  - FK 관계 → 연동 자동 설정

Phase C: 나머지 메타 컴포넌트 (2~3주)
  - Layout, Display, Search, Modal
  - 뷰 모드 전환 (테이블↔카드↔트리)

Phase D: 마이그레이션 & 정리 (2주)
  - 기존 레이아웃 자동 변환
  - 레거시 컴포넌트 정리
  - 사용자 가이드 작성
```

### 7.3 공존 기간

```
[현재]     → [Phase A~C]        → [Phase D]         → [완료]
70개 위젯    70개 위젯            70개 위젯            7개 메타
             + 7개 메타           + 7개 메타 (기본)    (기존 호환 유지)
             (선택적 사용)        (기존은 마이그레이션)
```

---

## 8. 기존 컴포넌트 → 메타 컴포넌트 매핑표

### 8.1 Field로 통합 (18개 → 1개)

| 기존 컴포넌트 | webType 매핑 | 비고 |
|---------------|-------------|------|
| text-input | text | |
| number-input | number | |
| date-input | date | |
| select-basic | select | options 자동 감지 |
| checkbox-basic | checkbox | |
| radio-basic | radio | |
| textarea-basic | textarea | |
| file-upload | file | |
| entity-search-input | entity | join 자동 감지 |
| autocomplete-search-input | entity | searchable: true |
| slider-basic | slider | |
| toggle-switch | toggle | |
| numbering-rule | numbering | autoGeneration 설정 |
| image-widget | file | accept: "image/*" |
| v2-input | text/number/email/tel/url | inputType에 따라 |
| v2-select | select | |
| v2-date | date/datetime | |
| v2-file-upload | file | |

### 8.2 DataView로 통합 (14개 → 1개)

| 기존 컴포넌트 | viewMode 매핑 | 비고 |
|---------------|-------------|------|
| table-list | table | |
| v2-table-list | table | |
| v2-table-grouped | table | groupBy 설정 |
| v2-repeater | table | editableColumns 설정 |
| simple-repeater-table | table | inline edit |
| modal-repeater-table | table + modal | |
| card-display | card | |
| v2-card-display | card | |
| pivot-grid | pivot | |
| v2-pivot-grid | pivot | |
| v2-bom-tree | tree | |
| aggregation-widget | table | summaryColumns 설정 |
| v2-aggregation-widget | table | summaryColumns 설정 |
| v2-timeline-scheduler | timeline | |

### 8.3 Action으로 통합 (4개 → 1개)

| 기존 컴포넌트 | 비고 |
|---------------|------|
| button-primary | steps 설정 |
| v2-button-primary | steps 설정 |
| flow-widget | flowMove step |
| related-data-buttons | navigate step |

### 8.4 Layout으로 통합 (12개 → 1개)

| 기존 컴포넌트 | mode 매핑 |
|---------------|-----------|
| split-panel-layout | columns |
| v2-split-panel-layout | columns |
| screen-split-panel | columns (화면 임베딩) |
| tabs | tabs |
| v2-tabs-widget | tabs |
| section-card | card |
| v2-section-card | card |
| section-paper | card (variant) |
| v2-section-paper | card (variant) |
| conditional-container | conditional |
| accordion-basic | accordion |
| repeat-container | rows (반복) |
| v2-repeat-container | rows (반복) |

### 8.5 Display로 통합 (12개 → 1개)

| 기존 컴포넌트 | displayType 매핑 |
|---------------|-----------------|
| text-display | text |
| v2-text-display | text |
| divider-line | divider |
| v2-divider-line | divider |
| v2-split-line | divider |
| badge | badge |
| alert | alert |
| stats-card | stat |
| chart | chart |
| image-display | image |
| progress-bar | progress |
| v2-media | image |

### 8.6 특수 컴포넌트 (별도 유지 또는 DataView 확장)

| 기존 컴포넌트 | 처리 방안 |
|---------------|-----------|
| v2-bom-item-editor | DataView(tree) + inline edit |
| rack-structure | 별도 유지 (특수 시각화) |
| v2-rack-structure | 별도 유지 |
| v2-location-swap-selector | 별도 유지 (특수 UI) |
| location-swap-selector | 별도 유지 |
| map | 별도 유지 (지도) |
| category-manager | DataView(tree) + Action 조합 |
| v2-category-manager | DataView(tree) + Action 조합 |
| customer-item-mapping | DataView + Search 조합 |
| tax-invoice-list | DataView + Action + Modal 조합 |
| mail-recipient-selector | 별도 유지 (특수 UI) |
| v2-process-work-standard | DataView + Modal 조합 |
| v2-item-routing | DataView(tree) + Action 조합 |
| repeater-field-group | Layout(rows) + Field 조합 |

---

## 9. 기술 스택 결정 사항

| 영역 | 선택 | 이유 |
|------|------|------|
| 상태 관리 | Zustand | 경량, 보일러플레이트 적음, React에 최적화 |
| DnD | @dnd-kit | 터치 지원, 커스텀 오버레이, 접근성 |
| 연동 엔진 | 자체 구현 (EventBus 확장) | 기존 EventBus 활용, 프로젝트 특화 |
| 설정 UI | Schema-driven form | configSchema 기반 자동 폼 생성 |
| 캔버스 | CSS Grid + 절대 좌표 하이브리드 | 기존 호환 + 반응형 전환 |

---

## 10. 성공 지표

| 지표 | 현재 | 목표 |
|------|------|------|
| 새 화면 만드는 시간 (현업) | 불가능 (개발자 필요) | 5~10분 |
| 새 화면 만드는 시간 (개발자) | 15~30분 | 2~5분 |
| 새 위젯 타입 추가 시 개발 공수 | 1~3일 (5~8파일) | 대부분 설정으로 해결, 특수한 경우만 개발 |
| 컴포넌트 패널 항목 수 | 70개+ (혼란) | 7개 메타 + 테이블 컬럼 |
| ConfigPanel 파일 수 | 26개 | 1개 (UnifiedConfigPanel) |
| 컴포넌트 간 연동 설정 | 코드 필요 | UI로 클릭 설정 |
| ScreenDesigner.tsx 줄 수 | 7,593줄 | 1,500줄 이하 (훅 분리) |

---

## 11. 위험 요소

| 위험 | 영향 | 완화 방안 |
|------|------|-----------|
| 기존 1,407개 레이아웃 마이그레이션 실패 | 운영 중단 | 자동 변환 + 수동 검증 + 롤백 가능 |
| 메타 컴포넌트가 모든 케이스를 커버 못 함 | 특수 기능 불가 | 특수 컴포넌트 별도 유지 (8.6 참고) |
| 통합 설정 패널이 오히려 복잡해질 수 있음 | UX 저하 | 간편/상세/개발자 3단계 모드 분리 |
| Reactive Bindings 디버깅 어려움 | 유지보수 | 연동 시각화 패널 + 로그 제공 |
| 개발 기간 장기화 | 일정 지연 | Phase별 독립 배포 가능하게 설계 |

---

## 12. 결론

**현재 시스템의 본질적 한계**: 기능 = 컴포넌트. 기능이 늘면 컴포넌트가 늘고, 코드가 늘고, 복잡도가 늘어남.

**새로운 방향**: 7개의 메타 컴포넌트(Field, DataView, Action, Layout, Display, Search, Modal)로 통합하고, 컴포넌트 간 Reactive Bindings로 동적 연동을 지원.

**사용자가 얻는 것**: 테이블 드롭 한 번으로 기본 화면 완성, 설정 몇 번으로 업무에 맞게 커스터마이징, 개발자 없이 화면 변경 가능.

**개발팀이 얻는 것**: 새 기능 요청 시 코드 작성 대신 설정 가이드 제공, ConfigPanel 26개 → 1개로 유지보수 대폭 감소, 7,593줄 거대 파일 분리.

전체 예상 기간: **9~12주** (Phase A~D)