shin
52 lines
1.4 KiB
Markdown
52 lines
1.4 KiB
Markdown
---
|
|
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`
|