68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Plus, Pencil, X } from 'lucide-react';
|
|
import { useDashboardStore } from '@/stores/dashboardStore';
|
|
|
|
interface DashboardSidebarProps {
|
|
onAddDashboard: () => void;
|
|
onRenameDashboard: (id: string) => void;
|
|
onDeleteDashboard: (id: string) => void;
|
|
onSwitchDashboard: (id: string) => void;
|
|
}
|
|
|
|
export function DashboardSidebar({
|
|
onAddDashboard,
|
|
onRenameDashboard,
|
|
onDeleteDashboard,
|
|
onSwitchDashboard,
|
|
}: DashboardSidebarProps) {
|
|
const dashboards = useDashboardStore((s) => s.dashboards);
|
|
const activeDashboardId = useDashboardStore((s) => s.activeDashboardId);
|
|
|
|
return (
|
|
<div className="dash-side">
|
|
<div className="dash-side-sec">내 대시보드</div>
|
|
{dashboards.map((d) => {
|
|
const id = d.dashboard_id ?? d.DASHBOARD_ID;
|
|
const name = d.name ?? d.NAME ?? '대시보드';
|
|
const icon = d.icon ?? d.ICON ?? '📋';
|
|
const isActive = id === activeDashboardId;
|
|
|
|
return (
|
|
<div
|
|
key={id}
|
|
className={`dash-si${isActive ? ' on' : ''}`}
|
|
onClick={() => onSwitchDashboard(id)}
|
|
>
|
|
<span className="ic">{icon}</span>
|
|
<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{name}
|
|
</span>
|
|
<div className="dash-si-actions">
|
|
<button
|
|
className="dash-si-act"
|
|
title="이름 변경"
|
|
onClick={(e) => { e.stopPropagation(); onRenameDashboard(id); }}
|
|
>
|
|
<Pencil size={11} />
|
|
</button>
|
|
<button
|
|
className="dash-si-act danger"
|
|
title="삭제"
|
|
onClick={(e) => { e.stopPropagation(); onDeleteDashboard(id); }}
|
|
>
|
|
<X size={11} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
<button className="dash-add-btn" onClick={onAddDashboard}>
|
|
<Plus size={14} />
|
|
<span>새 대시보드</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|