151 lines
4.8 KiB
Markdown
151 lines
4.8 KiB
Markdown
# 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 팔레트에서 메타 컴포넌트 드래그 가능
|