# Phase B: 메타 컴포넌트 확장 + UnifiedConfigPanel + 캔버스 통합

## 목표
Phase A에서 만든 Field/DataView/Action 3개에 이어,
Layout/Display/Search/Modal 4개를 추가하고,
통합 설정 패널(UnifiedConfigPanel)과 기존 ScreenDesigner 캔버스에 메타 컴포넌트를 등록하여
실제 사용 가능한 상태로 만든다.

## 제약사항
- DB 변경은 testvex만 (host: 39.117.244.52, port: 11132, db: testvex)
- 백엔드 import: `import { pool } from "../database/db"`, `import { logger } from "../utils/logger"`
- 미들웨어: `import { authenticateToken } from "../middleware/authMiddleware"`
- 컨트롤러 Request: `import { AuthenticatedRequest } from "../types/auth"`, `req: AuthenticatedRequest`
- 프론트엔드 API: 반드시 `apiClient` 사용 (fetch 직접 사용 금지)
- shadcn/ui 컴포넌트 사용, Tailwind CSS

---

## Task 1: Frontend - 메타 컴포넌트 4개 구현

### 1.1 Layout 메타 컴포넌트
**파일**: `frontend/lib/meta-components/Layout/LayoutRenderer.tsx`

```typescript
interface LayoutRendererProps {
  id: string;
  config: LayoutComponentConfig;
  children?: Record<string, React.ReactNode>; // areaId → children
  className?: string;
}
```

모드별 렌더링:
- `columns`: CSS Grid `grid-template-columns` 사용
- `rows`: CSS Grid `grid-template-rows` 사용
- `tabs`: shadcn Tabs 컴포넌트 사용
- `accordion`: shadcn Accordion 컴포넌트 사용
- `card`: shadcn Card 컴포넌트 사용

### 1.2 Display 메타 컴포넌트
**파일**: `frontend/lib/meta-components/Display/DisplayRenderer.tsx`

displayType별 렌더링:
- `text`: `<p>` 태그 + 스타일
- `heading`: `<h1>~<h6>` 크기별
- `divider`: `<Separator>` (shadcn)
- `badge`: `<Badge>` (shadcn)
- `alert`: `<Alert>` (shadcn)
- `stat`: 통계 카드 (값 + 라벨 + 변화율)
- `spacer`: 빈 공간
- `progress`: 진행바

### 1.3 Search 메타 컴포넌트
**파일**: `frontend/lib/meta-components/Search/SearchRenderer.tsx`

모드별:
- `simple`: Input 1개 + 검색 버튼
- `advanced`: 여러 필드 (Field 렌더러 재사용)
- `combined`: simple + 펼치기로 advanced

### 1.4 Modal 메타 컴포넌트
**파일**: `frontend/lib/meta-components/Modal/ModalRenderer.tsx`

shadcn Dialog 기반, content.type별:
- `form`: Field 렌더러 여러 개 자동 배치
- `screen`: iframe 또는 별도 화면 렌더링
- `custom`: children 전달

---

## Task 2: Frontend - 타입 확장

**파일**: `frontend/lib/api/metaComponent.ts`

MetaComponent.type에 추가:
```typescript
type: "meta-field" | "meta-dataview" | "meta-action" | "meta-layout" | "meta-display" | "meta-search" | "meta-modal"
```

새로운 Config 인터페이스 4개 추가:
- LayoutComponentConfig
- DisplayComponentConfig  
- SearchComponentConfig
- ModalComponentConfig

---

## Task 3: Frontend - MetaComponentRenderer (통합 디스패처)

**파일**: `frontend/lib/meta-components/MetaComponentRenderer.tsx`

모든 메타 컴포넌트를 하나의 진입점으로:
```tsx
export function MetaComponentRenderer({ component, ...props }) {
  switch (component.type) {
    case "meta-field": return <FieldRenderer ... />;
    case "meta-dataview": return <DataViewRenderer ... />;
    case "meta-action": return <ActionRenderer ... />;
    case "meta-layout": return <LayoutRenderer ... />;
    case "meta-display": return <DisplayRenderer ... />;
    case "meta-search": return <SearchRenderer ... />;
    case "meta-modal": return <ModalRenderer ... />;
  }
}
```

---

## Task 4: Frontend - UnifiedConfigPanel

**파일**: `frontend/lib/meta-components/config/UnifiedConfigPanel.tsx`

5개 탭:
1. **기본**: 컴포넌트 유형, 라벨, 필수, 읽기전용
2. **데이터**: 테이블, 컬럼, 기본값
3. **표시**: 너비, 높이, 라벨 위치
4. **연동**: Reactive Bindings 설정
5. **조건**: 표시/활성 조건

난이도별 UI:
- 간편 모드: 기본 탭만 (Label, Required, ReadOnly, Width)
- 상세 모드: 전체 5탭

---

## Task 5: Frontend - 컴포넌트 레지스트리 통합

**파일**: `frontend/lib/meta-components/index.ts` 수정

META_COMPONENT_REGISTRY에 7개 전부 등록.

---

## Task 6: Frontend - 기존 ScreenDesigner 캔버스 통합

기존 ScreenDesigner의 ComponentPalette에 "메타 컴포넌트" 카테고리 추가.
메타 컴포넌트를 드래그하여 캔버스에 배치하면 MetaComponentRenderer로 렌더링.

**수정 대상 파일 확인 필요**:
- `frontend/components/screen/ScreenDesigner.tsx` 또는 관련 팔레트 파일
- ComponentRegistry에 메타 컴포넌트 등록

---

## 완료 기준
1. `npx tsc --noEmit --skipLibCheck` 에러 0개 (backend + frontend)
2. `npx next build` 성공
3. 7개 메타 컴포넌트 전부 렌더링 가능
4. UnifiedConfigPanel이 컴포넌트 타입별로 적절한 설정 UI 표시
5. ScreenDesigner 팔레트에서 메타 컴포넌트 드래그 가능