---
name: component-dev
description: 리포트 뷰어 V2 컴포넌트 개발 가이드. v2-report-viewer 등 리포트 관련 V2 컴포넌트 개발 시 사용.
---

# 리포트 V2 컴포넌트 개발 가이드

## 수정 범위 제약

리포트 관련 V2 컴포넌트만 수정:
- `v2-report-viewer/`
- 리포트 연동 컴포넌트

다른 V2 컴포넌트(`v2-table-list`, `v2-input` 등)는 수정하지 않는다.

## V2 컴포넌트 핵심 규칙

- `v2-` 접두사 필수 (원본 폴더 수정 금지)
- 저장: `component_url + overrides` (차이값만)
- Zod 스키마에 `.passthrough()` 필수
- `isDesignMode` 체크하여 API 호출 스킵
- `beforeFormSave` 이벤트로 느슨한 결합
- `autoFilter`로 멀티테넌시 필터링

## 표준 파일 구조

```
frontend/lib/registry/components/v2-report-viewer/
├── index.ts
├── ReportViewerRenderer.tsx
├── ReportViewerComponent.tsx
├── ReportViewerConfigPanel.tsx
└── types.ts
```

## 표준 Props

```typescript
interface StandardComponentProps {
  component: ComponentData;
  isDesignMode?: boolean;
  formData?: Record<string, any>;
  onFormDataChange?: (fieldName: string, value: any) => void;
  companyCode?: string;
  refreshKey?: number;
}
```