jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui개선

Browse Source
This commit is contained in:
kjs
2025-10-17 16:21:08 +09:00
parent 2a8081a253
commit 2e916678fa
22 changed files with 1641 additions and 871 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
View File

@@ -277,10 +277,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{/* 좌측 패널 */}
<div
style={{ width: `${leftWidth}%`, minWidth: isPreview ? "0" : `${minLeftWidth}px` }}
className="flex flex-shrink-0 flex-col border-r border-gray-200"
className="border-border flex flex-shrink-0 flex-col border-r"
>
<Card className="flex h-full flex-col border-0 shadow-none">
<CardHeader className="border-b border-gray-100 pb-3">
<CardHeader className="border-b pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-base font-semibold">
{componentConfig.leftPanel?.title || "좌측 패널"}
@@ -312,37 +312,37 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<>
<div
onClick={() => handleLeftItemSelect({ id: 1, name: "항목 1" })}
className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
selectedLeftItem?.id === 1 ? "bg-blue-50 text-blue-700" : "text-gray-700"
className={`hover:bg-accent cursor-pointer rounded-md p-3 transition-colors ${
selectedLeftItem?.id === 1 ? "bg-primary/10 text-primary" : ""
}`}
>
<div className="font-medium">항목 1</div>
<div className="text-xs text-gray-500">설명 텍스트</div>
<div className="text-muted-foreground text-xs">설명 텍스트</div>
</div>
<div
onClick={() => handleLeftItemSelect({ id: 2, name: "항목 2" })}
className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
selectedLeftItem?.id === 2 ? "bg-blue-50 text-blue-700" : "text-gray-700"
className={`hover:bg-accent cursor-pointer rounded-md p-3 transition-colors ${
selectedLeftItem?.id === 2 ? "bg-primary/10 text-primary" : ""
}`}
>
<div className="font-medium">항목 2</div>
<div className="text-xs text-gray-500">설명 텍스트</div>
<div className="text-muted-foreground text-xs">설명 텍스트</div>
</div>
<div
onClick={() => handleLeftItemSelect({ id: 3, name: "항목 3" })}
className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
selectedLeftItem?.id === 3 ? "bg-blue-50 text-blue-700" : "text-gray-700"
className={`hover:bg-accent cursor-pointer rounded-md p-3 transition-colors ${
selectedLeftItem?.id === 3 ? "bg-primary/10 text-primary" : ""
}`}
>
<div className="font-medium">항목 3</div>
<div className="text-xs text-gray-500">설명 텍스트</div>
<div className="text-muted-foreground text-xs">설명 텍스트</div>
</div>
</>
) : isLoadingLeft ? (
// 로딩 중
<div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-blue-500" />
<span className="ml-2 text-sm text-gray-500">데이터를 불러오는 중...</span>
<Loader2 className="text-primary h-6 w-6 animate-spin" />
<span className="text-muted-foreground ml-2 text-sm">데이터를 불러오는 중...</span>
</div>
) : (
(() => {
@@ -417,7 +417,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
className="flex flex-shrink-0 flex-col"
>
<Card className="flex h-full flex-col border-0 shadow-none">
<CardHeader className="border-b border-gray-100 pb-3">
<CardHeader className="border-b pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-base font-semibold">
{componentConfig.rightPanel?.title || "우측 패널"}
@@ -488,7 +488,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
return (
<div
key={itemId}
className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md"
className="bg-card overflow-hidden rounded-lg border shadow-sm transition-all hover:shadow-md"
>
{/* 요약 정보 (클릭 가능) */}
<div
@@ -518,9 +518,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{/* 상세 정보 (확장 시 표시) */}
{isExpanded && (
<div className="border-t border-gray-200 bg-gray-50 px-3 py-2">
<div className="mb-2 text-xs font-semibold text-gray-700">전체 상세 정보</div>
<div className="overflow-auto rounded-md border border-gray-200 bg-white">
<div className="bg-muted/50 border-t px-3 py-2">
<div className="mb-2 text-xs font-semibold">전체 상세 정보</div>
<div className="bg-card overflow-auto rounded-md border">
<table className="w-full text-sm">
<tbody className="divide-y divide-gray-200">
{allValues.map(([key, value]) => (
@@ -561,9 +561,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
if (value === null || value === undefined || value === "") return null;
return (
<div key={key} className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
<div className="mb-1 text-xs font-semibold tracking-wide text-gray-500 uppercase">{key}</div>
<div className="text-sm text-gray-900">{String(value)}</div>
<div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
<div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
{key}
</div>
<div className="text-sm">{String(value)}</div>
</div>
);
})}
@@ -572,8 +574,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
) : selectedLeftItem && isDesignMode ? (
// 디자인 모드: 샘플 데이터
<div className="space-y-4">
<div className="rounded-lg border border-gray-200 p-4">
<h3 className="mb-2 font-medium text-gray-900">{selectedLeftItem.name} 상세 정보</h3>
<div className="rounded-lg border p-4">
<h3 className="mb-2 font-medium">{selectedLeftItem.name} 상세 정보</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600">항목 1:</span>