위젯 헤더 스타일 변경

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} 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"> <div className="flex items-center gap-2">
{/* 차트 타입 전환 드롭다운 (차트일 경우만) */} {/* 차트 타입 전환 드롭다운 (차트일 경우만) */}
{element.type === "chart" && ( {element.type === "chart" && (
@ -743,7 +743,7 @@ export function CanvasElement({
}} }}
> >
<SelectTrigger <SelectTrigger
className="h-7 w-[140px] text-xs" className="h-6 w-[120px] text-[11px]"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}
> >
@ -772,7 +772,7 @@ export function CanvasElement({
)} )}
{/* 제목 */} {/* 제목 */}
{!element.type || element.type !== "chart" ? ( {!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} ) : null}
</div> </div>
<div className="flex gap-1"> <div className="flex gap-1">
@ -780,18 +780,18 @@ export function CanvasElement({
<Button <Button
variant="ghost" variant="ghost"
size="icon" 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} onClick={handleRemove}
onMouseDown={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}
title="삭제" title="삭제"
> >
<X className="h-4 w-4" /> <X className="h-3 w-3" />
</Button> </Button>
</div> </div>
</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" ? ( {element.type === "chart" ? (
// 차트 렌더링 // 차트 렌더링
<div className="h-full w-full bg-white"> <div className="h-full w-full bg-white">
@ -807,7 +807,7 @@ export function CanvasElement({
element={element} element={element}
data={chartData || undefined} data={chartData || undefined}
width={element.size.width} width={element.size.width}
height={element.size.height - 45} height={element.size.height - 32}
/> />
)} )}
</div> </div>

View File

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