hjjeong
d8f73c1136
✨ 새로운 기능: - 드래그 앤 드롭 대시보드 설계 도구 - SQL 쿼리 에디터 및 실시간 실행 - Recharts 기반 차트 컴포넌트 (Bar, Pie, Line) - 차트 데이터 매핑 및 설정 UI - 요소 이동, 크기 조절, 삭제 기능 - 레이아웃 저장 기능 📦 추가된 컴포넌트: - DashboardDesigner: 메인 설계 도구 - QueryEditor: SQL 쿼리 작성 및 실행 - ChartConfigPanel: 차트 설정 패널 - ChartRenderer: 실제 차트 렌더링 - CanvasElement: 드래그 가능한 캔버스 요소 🔧 기술 스택: - Recharts 라이브러리 추가 - TypeScript 타입 정의 완비 - 독립적 컴포넌트 구조로 설계 🎯 접속 경로: /admin/dashboard
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
|
||
interface DashboardToolbarProps {
|
||
onClearCanvas: () => void;
|
||
onSaveLayout: () => void;
|
||
}
|
||
|
||
/**
|
||
* 대시보드 툴바 컴포넌트
|
||
* - 전체 삭제, 레이아웃 저장 등 주요 액션 버튼
|
||
*/
|
||
export function DashboardToolbar({ onClearCanvas, onSaveLayout }: DashboardToolbarProps) {
|
||
return (
|
||
<div className="absolute top-5 left-5 bg-white p-3 rounded-lg shadow-lg z-50 flex gap-3">
|
||
<button
|
||
onClick={onClearCanvas}
|
||
className="
|
||
px-4 py-2 border border-gray-300 bg-white rounded-md
|
||
text-sm font-medium text-gray-700
|
||
hover:bg-gray-50 hover:border-gray-400
|
||
transition-colors duration-200
|
||
"
|
||
>
|
||
🗑️ 전체 삭제
|
||
</button>
|
||
|
||
<button
|
||
onClick={onSaveLayout}
|
||
className="
|
||
px-4 py-2 border border-gray-300 bg-white rounded-md
|
||
text-sm font-medium text-gray-700
|
||
hover:bg-gray-50 hover:border-gray-400
|
||
transition-colors duration-200
|
||
"
|
||
>
|
||
💾 레이아웃 저장
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|