---
name: react-component
description: 리포트 React 컴포넌트 클린코드 구현/수정 워크플로우. 리포트 디자이너 컴포넌트 생성, 리팩토링, 최적화 시 사용.
---

# 리포트 컴포넌트 클린코드 워크플로우

## 수정 범위 제약

`frontend/components/report/` 내 파일만 수정. 그 외 컴포넌트는 수정하지 않는다.

## 표준 컴포넌트 구조

```typescript
"use client";

// 1. 외부 라이브러리
import React, { useState, useEffect, useCallback, useMemo } from "react";

// 2. 내부 유틸/컴포넌트
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

// 3. 타입
import type { ReportComponent } from "@/types/report";

// 4. 상수 (컴포넌트 외부)
const DEFAULT_CONFIG = { ... } as const;

// 5. 타입 정의 (컴포넌트 외부)
interface Props { ... }

// 6. 컴포넌트 본체
export const MyComponent: React.FC<Props> = ({ ... }) => {
  // 6-1 ~ 6-8 순서 준수
};
```

## 필수 규칙

- 500줄 초과 금지 → 서브 컴포넌트 분리
- `any` 금지 → `Record<string, unknown>` 이상
- shadcn/ui 컴포넌트 우선 사용
- CSS 변수 사용 (하드코딩 색상 금지)

## 리포트 디자이너 컴포넌트 패턴

- `ReportDesignerContext`로 전역 상태 관리
- 속성 패널: `designer/properties/` 디렉토리
- 모달: `designer/modals/` 디렉토리
- 캔버스: `designer/ReportDesignerCanvas.tsx`
