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

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

## 수정 범위 제약

`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`로 관리:
- 선택된 컴포넌트
- 캔버스 상태
- 저장/불러오기
