hjjeong
d8f73c1136
✨ 새로운 기능: - 드래그 앤 드롭 대시보드 설계 도구 - SQL 쿼리 에디터 및 실시간 실행 - Recharts 기반 차트 컴포넌트 (Bar, Pie, Line) - 차트 데이터 매핑 및 설정 UI - 요소 이동, 크기 조절, 삭제 기능 - 레이아웃 저장 기능 📦 추가된 컴포넌트: - DashboardDesigner: 메인 설계 도구 - QueryEditor: SQL 쿼리 작성 및 실행 - ChartConfigPanel: 차트 설정 패널 - ChartRenderer: 실제 차트 렌더링 - CanvasElement: 드래그 가능한 캔버스 요소 🔧 기술 스택: - Recharts 라이브러리 추가 - TypeScript 타입 정의 완비 - 독립적 컴포넌트 구조로 설계 🎯 접속 경로: /admin/dashboard
114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { DragData, ElementType, ElementSubtype } from './types';
|
|
|
|
/**
|
|
* 대시보드 사이드바 컴포넌트
|
|
* - 드래그 가능한 차트/위젯 목록
|
|
* - 카테고리별 구분
|
|
*/
|
|
export function DashboardSidebar() {
|
|
// 드래그 시작 처리
|
|
const handleDragStart = (e: React.DragEvent, type: ElementType, subtype: ElementSubtype) => {
|
|
const dragData: DragData = { type, subtype };
|
|
e.dataTransfer.setData('application/json', JSON.stringify(dragData));
|
|
e.dataTransfer.effectAllowed = 'copy';
|
|
};
|
|
|
|
return (
|
|
<div className="w-80 bg-white border-l border-gray-200 overflow-y-auto p-5">
|
|
{/* 차트 섹션 */}
|
|
<div className="mb-8">
|
|
<h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg">
|
|
📊 차트 종류
|
|
</h3>
|
|
|
|
<div className="space-y-3">
|
|
<DraggableItem
|
|
icon="📊"
|
|
title="바 차트"
|
|
type="chart"
|
|
subtype="bar"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-blue-500"
|
|
/>
|
|
<DraggableItem
|
|
icon="🥧"
|
|
title="원형 차트"
|
|
type="chart"
|
|
subtype="pie"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-blue-500"
|
|
/>
|
|
<DraggableItem
|
|
icon="📈"
|
|
title="꺾은선 차트"
|
|
type="chart"
|
|
subtype="line"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 위젯 섹션 */}
|
|
<div className="mb-8">
|
|
<h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg">
|
|
🔧 위젯 종류
|
|
</h3>
|
|
|
|
<div className="space-y-3">
|
|
<DraggableItem
|
|
icon="💱"
|
|
title="환율 위젯"
|
|
type="widget"
|
|
subtype="exchange"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-orange-500"
|
|
/>
|
|
<DraggableItem
|
|
icon="☁️"
|
|
title="날씨 위젯"
|
|
type="widget"
|
|
subtype="weather"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-orange-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface DraggableItemProps {
|
|
icon: string;
|
|
title: string;
|
|
type: ElementType;
|
|
subtype: ElementSubtype;
|
|
className?: string;
|
|
onDragStart: (e: React.DragEvent, type: ElementType, subtype: ElementSubtype) => void;
|
|
}
|
|
|
|
/**
|
|
* 드래그 가능한 아이템 컴포넌트
|
|
*/
|
|
function DraggableItem({ icon, title, type, subtype, className = '', onDragStart }: DraggableItemProps) {
|
|
return (
|
|
<div
|
|
draggable
|
|
className={`
|
|
p-4 bg-white border-2 border-gray-200 rounded-lg
|
|
cursor-move transition-all duration-200
|
|
hover:bg-gray-50 hover:border-green-500 hover:translate-x-1
|
|
text-center text-sm font-medium
|
|
${className}
|
|
`}
|
|
onDragStart={(e) => onDragStart(e, type, subtype)}
|
|
>
|
|
<span className="text-lg mr-2">{icon}</span>
|
|
{title}
|
|
</div>
|
|
);
|
|
}
|