144 lines
4.3 KiB
TypeScript
144 lines
4.3 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-[370px] overflow-y-auto border-l border-gray-200 bg-white p-6">
|
|
{/* 차트 섹션 */}
|
|
<div className="mb-8">
|
|
<h3 className="mb-4 border-b-2 border-green-500 pb-3 text-lg font-semibold text-gray-800">📊 차트 종류</h3>
|
|
|
|
<div className="space-y-3">
|
|
<DraggableItem
|
|
icon="📊"
|
|
title="바 차트"
|
|
type="chart"
|
|
subtype="bar"
|
|
onDragStart={handleDragStart}
|
|
className="border-primary border-l-4"
|
|
/>
|
|
<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="mb-4 border-b-2 border-green-500 pb-3 text-lg font-semibold text-gray-800">🔧 위젯 종류</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"
|
|
/>
|
|
<DraggableItem
|
|
icon="⏰"
|
|
title="시계 위젯"
|
|
type="widget"
|
|
subtype="clock"
|
|
onDragStart={handleDragStart}
|
|
className="border-l-4 border-teal-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={`cursor-move rounded-lg border-2 border-gray-200 bg-white p-4 text-center text-sm font-medium transition-all duration-200 hover:translate-x-1 hover:border-green-500 hover:bg-gray-50 ${className} `}
|
|
onDragStart={(e) => onDragStart(e, type, subtype)}
|
|
>
|
|
<span className="mr-2 text-lg">{icon}</span>
|
|
{title}
|
|
</div>
|
|
);
|
|
}
|