위젯 헤더 스타일 변경

This commit is contained in:
dohyeons 2025-10-28 15:09:29 +09:00
parent 28ecc31128
commit 3f3779c25e
2 changed files with 16 additions and 16 deletions

View File

@ -732,7 +732,7 @@ export function CanvasElement({
onMouseDown={handleMouseDown}
>
{/* 헤더 */}
<div className="flex cursor-move items-center justify-between px-4 py-2">
<div className="flex cursor-move items-center justify-between px-2 py-1">
<div className="flex items-center gap-2">
{/* 차트 타입 전환 드롭다운 (차트일 경우만) */}
{element.type === "chart" && (
@ -743,7 +743,7 @@ export function CanvasElement({
}}
>
<SelectTrigger
className="h-7 w-[140px] text-xs"
className="h-6 w-[120px] text-[11px]"
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>
@ -772,7 +772,7 @@ export function CanvasElement({
)}
{/* 제목 */}
{!element.type || element.type !== "chart" ? (
<span className="text-sm font-bold text-gray-800">{element.customTitle || element.title}</span>
<span className="text-xs font-bold text-gray-800">{element.customTitle || element.title}</span>
) : null}
</div>
<div className="flex gap-1">
@ -780,18 +780,18 @@ export function CanvasElement({
<Button
variant="ghost"
size="icon"
className="element-close hover:bg-destructive h-6 w-6 text-gray-400 hover:text-white"
className="element-close hover:bg-destructive h-5 w-5 text-gray-400 hover:text-white"
onClick={handleRemove}
onMouseDown={(e) => e.stopPropagation()}
title="삭제"
>
<X className="h-4 w-4" />
<X className="h-3 w-3" />
</Button>
</div>
</div>
{/* 내용 */}
<div className="relative h-[calc(100%-50px)] px-4 pb-4">
<div className="relative h-[calc(100%-32px)] px-2 pb-2">
{element.type === "chart" ? (
// 차트 렌더링
<div className="h-full w-full bg-white">
@ -807,7 +807,7 @@ export function CanvasElement({
element={element}
data={chartData || undefined}
width={element.size.width}
height={element.size.height - 45}
height={element.size.height - 32}
/>
)}
</div>

View File

@ -379,8 +379,8 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
style={{ minHeight: "300px" }}
>
{element.showHeader !== false && (
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
<h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
<div className="flex items-center justify-between px-2 py-1">
<h3 className="text-xs font-semibold text-gray-800">{element.customTitle || element.title}</h3>
<button
onClick={onRefresh}
disabled={isLoading}
@ -388,7 +388,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
title="새로고침"
>
<svg
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -403,7 +403,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
</button>
</div>
)}
<div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
<div className={element.showHeader !== false ? "p-2" : "p-2"} style={{ minHeight: "250px" }}>
{!isMounted ? (
<div className="flex h-full w-full items-center justify-center">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
@ -441,8 +441,8 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
}}
>
{element.showHeader !== false && (
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
<h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
<div className="flex items-center justify-between px-2 py-1">
<h3 className="text-xs font-semibold text-gray-800">{element.customTitle || element.title}</h3>
<button
onClick={onRefresh}
disabled={isLoading}
@ -450,7 +450,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
title="새로고침"
>
<svg
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -465,7 +465,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
</button>
</div>
)}
<div className={element.showHeader !== false ? "h-[calc(100%-50px)] w-full" : "h-full w-full"}>
<div className={element.showHeader !== false ? "h-[calc(100%-32px)] w-full" : "h-full w-full"}>
{!isMounted ? (
<div className="flex h-full w-full items-center justify-center">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
@ -475,7 +475,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
element={element}
data={data}
width={undefined}
height={element.showHeader !== false ? element.size.height - 50 : element.size.height}
height={element.showHeader !== false ? element.size.height - 32 : element.size.height}
/>
) : (
renderWidget(element)