pipeline/.cursor/skills/react-component/SKILL.md

name, description

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

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

수정 범위 제약

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

표준 컴포넌트 구조

"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