Files
pipeline/.cursor/skills/component-registry/SKILL.md
T
2026-03-12 18:47:42 +09:00

1.6 KiB

name, description
name description
component-registry 리포트 디자이너 컴포넌트 가이드. 리포트 디자이너 내 컴포넌트 구조, 추가/수정 방법. 리포트 디자이너 컴포넌트 작업 시 사용.

리포트 디자이너 컴포넌트 가이드

수정 범위 제약

frontend/components/report/designer/ 내 파일만 수정. 화면 빌더의 일반 컴포넌트 레지스트리(lib/registry/components/)는 수정하지 않는다.

리포트 디자이너 컴포넌트 구조

frontend/components/report/designer/
├── ReportDesignerCanvas.tsx      # 캔버스
├── ReportDesignerToolbar.tsx     # 툴바
├── ReportComponentPalette.tsx    # 컴포넌트 팔레트
├── properties/                   # 속성 패널
│   ├── TextProperties.tsx
│   ├── ImageProperties.tsx
│   ├── TableProperties.tsx
│   ├── CardProperties.tsx
│   └── PageNumberProperties.tsx
└── modals/                       # 설정 모달
    ├── ComponentSettingsModal.tsx
    ├── SettingsModalShell.tsx
    ├── TextLayoutTabs.tsx
    ├── ImageLayoutTabs.tsx
    ├── TableLayoutTabs.tsx
    └── GridCellDropZone.tsx

컴포넌트 추가 시 절차

  1. types/report.ts에 새 컴포넌트 타입 추가
  2. designer/properties/에 속성 패널 생성
  3. designer/modals/에 설정 모달 생성 (필요 시)
  4. ReportDesignerCanvas.tsx에 렌더링 로직 추가
  5. ReportComponentPalette.tsx에 팔레트 항목 추가

전역 상태

frontend/contexts/ReportDesignerContext.tsx로 관리:

  • 선택된 컴포넌트
  • 캔버스 상태
  • 저장/불러오기