4.8 KiB

Raw Blame History

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

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

파일: 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에 추가:

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

모든 메타 컴포넌트를 하나의 진입점으로:

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개 탭:

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

난이도별 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에 메타 컴포넌트 등록

완료 기준

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

4.8 KiB Raw Blame History