111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
|
||
interface DashboardToolbarProps {
|
||
onClearCanvas: () => void;
|
||
onSaveLayout: () => void;
|
||
canvasBackgroundColor: string;
|
||
onCanvasBackgroundColorChange: (color: string) => void;
|
||
}
|
||
|
||
/**
|
||
* 대시보드 툴바 컴포넌트
|
||
* - 전체 삭제, 레이아웃 저장 등 주요 액션 버튼
|
||
*/
|
||
export function DashboardToolbar({ onClearCanvas, onSaveLayout, canvasBackgroundColor, onCanvasBackgroundColorChange }: DashboardToolbarProps) {
|
||
const [showColorPicker, setShowColorPicker] = useState(false);
|
||
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 className="relative">
|
||
<button
|
||
onClick={() => setShowColorPicker(!showColorPicker)}
|
||
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
|
||
flex items-center gap-2
|
||
"
|
||
>
|
||
🎨 캔버스 색상
|
||
<div
|
||
className="w-4 h-4 rounded border border-gray-300"
|
||
style={{ backgroundColor: canvasBackgroundColor }}
|
||
/>
|
||
</button>
|
||
|
||
{/* 색상 선택 패널 */}
|
||
{showColorPicker && (
|
||
<div className="absolute top-full left-0 mt-2 bg-white p-4 rounded-lg shadow-xl z-50 border border-gray-200 w-[280px]">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<input
|
||
type="color"
|
||
value={canvasBackgroundColor}
|
||
onChange={(e) => onCanvasBackgroundColorChange(e.target.value)}
|
||
className="h-10 w-16 border border-gray-300 rounded cursor-pointer"
|
||
/>
|
||
<input
|
||
type="text"
|
||
value={canvasBackgroundColor}
|
||
onChange={(e) => onCanvasBackgroundColorChange(e.target.value)}
|
||
placeholder="#ffffff"
|
||
className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded"
|
||
/>
|
||
</div>
|
||
|
||
{/* 프리셋 색상 */}
|
||
<div className="grid grid-cols-6 gap-2 mb-3">
|
||
{[
|
||
'#ffffff', '#f9fafb', '#f3f4f6', '#e5e7eb',
|
||
'#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b',
|
||
'#10b981', '#06b6d4', '#6366f1', '#84cc16',
|
||
].map((color) => (
|
||
<button
|
||
key={color}
|
||
onClick={() => onCanvasBackgroundColorChange(color)}
|
||
className={`h-8 rounded border-2 ${canvasBackgroundColor === color ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'}`}
|
||
style={{ backgroundColor: color }}
|
||
title={color}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setShowColorPicker(false)}
|
||
className="w-full px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
|
||
>
|
||
닫기
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|