kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

우측 사이드바 너비 조정

This commit is contained in:
dohyeons 2025-10-13 17:21:24 +09:00
parent 3d48c0f7cb
commit 39e3aa14cb
1 changed files with 14 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/components/admin/dashboard/DashboardSidebar.tsx
View File

@ -1,7 +1,7 @@
'use client'; "use client";
import React from 'react'; import React from "react";
import { DragData, ElementType, ElementSubtype } from './types'; import { DragData, ElementType, ElementSubtype } from "./types";
/** /**
* 대시보드 사이드바 컴포넌트 * 대시보드 사이드바 컴포넌트
@ -12,18 +12,16 @@ export function DashboardSidebar() {
// 드래그 시작 처리 // 드래그 시작 처리
const handleDragStart = (e: React.DragEvent, type: ElementType, subtype: ElementSubtype) => { const handleDragStart = (e: React.DragEvent, type: ElementType, subtype: ElementSubtype) => {
const dragData: DragData = { type, subtype }; const dragData: DragData = { type, subtype };
e.dataTransfer.setData('application/json', JSON.stringify(dragData)); e.dataTransfer.setData("application/json", JSON.stringify(dragData));
e.dataTransfer.effectAllowed = 'copy'; e.dataTransfer.effectAllowed = "copy";
}; };
return ( return (
<div className="w-80 bg-white border-l border-gray-200 overflow-y-auto p-5"> <div className="w-[348px] overflow-y-auto border-l border-gray-200 bg-white p-6">
{/* 차트 섹션 */} {/* 차트 섹션 */}
<div className="mb-8"> <div className="mb-8">
<h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg"> <h3 className="mb-4 border-b-2 border-green-500 pb-3 text-lg font-semibold text-gray-800">📊 차트 종류</h3>
📊 차트 종류
</h3>
<div className="space-y-3"> <div className="space-y-3">
<DraggableItem <DraggableItem
icon="📊" icon="📊"
@ -31,7 +29,7 @@ export function DashboardSidebar() {
type="chart" type="chart"
subtype="bar" subtype="bar"
onDragStart={handleDragStart} onDragStart={handleDragStart}
className="border-l-4 border-primary" className="border-primary border-l-4"
/> />
<DraggableItem <DraggableItem
icon="📚" icon="📚"
@ -86,10 +84,8 @@ export function DashboardSidebar() {
{/* 위젯 섹션 */} {/* 위젯 섹션 */}
<div className="mb-8"> <div className="mb-8">
<h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg"> <h3 className="mb-4 border-b-2 border-green-500 pb-3 text-lg font-semibold text-gray-800">🔧 위젯 종류</h3>
🔧 위젯 종류
</h3>
<div className="space-y-3"> <div className="space-y-3">
<DraggableItem <DraggableItem
icon="💱" icon="💱"
@ -125,20 +121,14 @@ interface DraggableItemProps {
/** /**
* 드래그 가능한 아이템 컴포넌트 * 드래그 가능한 아이템 컴포넌트
*/ */
function DraggableItem({ icon, title, type, subtype, className = '', onDragStart }: DraggableItemProps) { function DraggableItem({ icon, title, type, subtype, className = "", onDragStart }: DraggableItemProps) {
return ( return (
<div <div
draggable draggable
className={` 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} `}
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)} onDragStart={(e) => onDragStart(e, type, subtype)}
> >
<span className="text-lg mr-2">{icon}</span> <span className="mr-2 text-lg">{icon}</span>
{title} {title}
</div> </div>
); );