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 { DragData, ElementType, ElementSubtype } from './types';
import React from "react";
import { DragData, ElementType, ElementSubtype } from "./types";
/**
* 대시보드 사이드바 컴포넌트
@ -12,18 +12,16 @@ 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';
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="w-[348px] overflow-y-auto border-l border-gray-200 bg-white p-6">
{/* 차트 섹션 */}
<div className="mb-8">
<h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg">
📊 차트 종류
</h3>
<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="📊"
@ -31,7 +29,7 @@ export function DashboardSidebar() {
type="chart"
subtype="bar"
onDragStart={handleDragStart}
className="border-l-4 border-primary"
className="border-primary border-l-4"
/>
<DraggableItem
icon="📚"
@ -86,10 +84,8 @@ export function DashboardSidebar() {
{/* 위젯 섹션 */}
<div className="mb-8">
<h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg">
🔧 위젯 종류
</h3>
<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="💱"
@ -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 (
<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}
`}
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="text-lg mr-2">{icon}</span>
<span className="mr-2 text-lg">{icon}</span>
{title}
</div>
);