hjjeong
5f63c24c42
## 백엔드 - DashboardController: 대시보드 CRUD 및 쿼리 실행 API - DashboardService: 비즈니스 로직 처리 - PostgreSQL 연동 및 데이터 관리 ## 프론트엔드 - DashboardDesigner: 캔버스 기반 대시보드 디자이너 - QueryEditor: SQL 쿼리 편집 및 미리보기 - ChartRenderer: 다양한 차트 타입 지원 (Bar, Line, Area, Donut, Stacked, Combo) - DashboardViewer: 실시간 데이터 반영 뷰어 ## 개선사항 - 콘솔 로그 프로덕션 준비 (주석 처리) - 차트 컴포넌트 확장 (6가지 타입) - 실시간 쿼리 실행 및 데이터 바인딩
146 lines
4.2 KiB
TypeScript
146 lines
4.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="stacked-bar"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-blue-600"
|
|
/>
|
|
<DraggableItem
|
|
icon="📈"
|
|
title="꺾은선 차트"
|
|
type="chart"
|
|
subtype="line"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-green-500"
|
|
/>
|
|
<DraggableItem
|
|
icon="📉"
|
|
title="영역 차트"
|
|
type="chart"
|
|
subtype="area"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-green-600"
|
|
/>
|
|
<DraggableItem
|
|
icon="🥧"
|
|
title="원형 차트"
|
|
type="chart"
|
|
subtype="pie"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-purple-500"
|
|
/>
|
|
<DraggableItem
|
|
icon="🍩"
|
|
title="도넛 차트"
|
|
type="chart"
|
|
subtype="donut"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-purple-600"
|
|
/>
|
|
<DraggableItem
|
|
icon="📊📈"
|
|
title="콤보 차트"
|
|
type="chart"
|
|
subtype="combo"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-indigo-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>
|
|
);
|
|
}
|