feat: 테이블 테두리 및 라운드 제거, 검색 필터 제목 제거
- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거 - 테이블 컨테이너의 라운드(rounded-lg) 제거 - 테이블 행 구분선(border-b)은 유지하여 데이터 구분 - FlowWidget과 TableListComponent에 동일한 스타일 적용 - 검색 필터 영역의 회색 배경(bg-muted/30) 제거 - 검색 필터 제목 제거 - AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
This commit is contained in:
kjs
@@ -294,7 +294,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
</div>
|
||||
{componentConfig.leftPanel?.showSearch && (
|
||||
<div className="relative mt-2">
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="검색..."
|
||||
value={leftSearchQuery}
|
||||
@@ -304,9 +304,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 overflow-auto p-2">
|
||||
<CardContent className="flex-1 overflow-auto">
|
||||
{/* 좌측 데이터 목록 */}
|
||||
<div className="space-y-1">
|
||||
<div className="space-y-1 px-2">
|
||||
{isDesignMode ? (
|
||||
// 디자인 모드: 샘플 데이터
|
||||
<>
|
||||
@@ -372,22 +372,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
<div
|
||||
key={itemId}
|
||||
onClick={() => handleLeftItemSelect(item)}
|
||||
className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
|
||||
isSelected ? "bg-blue-50 text-blue-700" : "text-gray-700"
|
||||
className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-muted ${
|
||||
isSelected ? "bg-primary/10 text-primary" : "text-foreground"
|
||||
}`}
|
||||
>
|
||||
<div className="truncate font-medium">{displayTitle}</div>
|
||||
{displaySubtitle && <div className="truncate text-xs text-gray-500">{displaySubtitle}</div>}
|
||||
{displaySubtitle && <div className="truncate text-xs text-muted-foreground">{displaySubtitle}</div>}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
// 검색 결과 없음
|
||||
<div className="py-8 text-center text-sm text-gray-500">
|
||||
<div className="py-8 text-center text-sm text-muted-foreground">
|
||||
{leftSearchQuery ? (
|
||||
<>
|
||||
<p>검색 결과가 없습니다.</p>
|
||||
<p className="mt-1 text-xs text-gray-400">다른 검색어를 입력해보세요.</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground/70">다른 검색어를 입력해보세요.</p>
|
||||
</>
|
||||
) : (
|
||||
"데이터가 없습니다."
|
||||
@@ -405,9 +405,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
{resizable && (
|
||||
<div
|
||||
onMouseDown={handleMouseDown}
|
||||
className="group flex w-1 cursor-col-resize items-center justify-center bg-gray-200 transition-colors hover:bg-blue-400"
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-gray-400 group-hover:text-white" />
|
||||
className="group flex w-1 cursor-col-resize items-center justify-center bg-border transition-colors hover:bg-primary"
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground group-hover:text-primary-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -431,7 +431,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
</div>
|
||||
{componentConfig.rightPanel?.showSearch && (
|
||||
<div className="relative mt-2">
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||||
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="검색..."
|
||||
value={rightSearchQuery}
|
||||
@@ -441,14 +441,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 overflow-auto p-4">
|
||||
<CardContent className="flex-1 overflow-auto">
|
||||
{/* 우측 데이터 */}
|
||||
{isLoadingRight ? (
|
||||
// 로딩 중
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Loader2 className="mx-auto h-8 w-8 animate-spin text-blue-500" />
|
||||
<p className="mt-2 text-sm text-gray-500">데이터를 불러오는 중...</p>
|
||||
<Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
|
||||
<p className="mt-2 text-sm text-muted-foreground">데이터를 불러오는 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : rightData ? (
|
||||
@@ -469,10 +469,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
|
||||
return filteredData.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="mb-2 text-xs text-gray-500">
|
||||
<div className="mb-2 text-xs text-muted-foreground">
|
||||
{filteredData.length}개의 관련 데이터
|
||||
{rightSearchQuery && filteredData.length !== rightData.length && (
|
||||
<span className="ml-1 text-blue-600">(전체 {rightData.length}개 중)</span>
|
||||
<span className="ml-1 text-primary">(전체 {rightData.length}개 중)</span>
|
||||
)}
|
||||
</div>
|
||||
{filteredData.map((item, index) => {
|
||||
@@ -493,14 +493,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
{/* 요약 정보 (클릭 가능) */}
|
||||
<div
|
||||
onClick={() => toggleRightItemExpansion(itemId)}
|
||||
className="cursor-pointer p-3 transition-colors hover:bg-gray-50"
|
||||
className="cursor-pointer p-3 transition-colors hover:bg-muted"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
{firstValues.map(([key, value], idx) => (
|
||||
<div key={key} className="mb-1 last:mb-0">
|
||||
<div className="text-xs font-medium text-gray-500">{getColumnLabel(key)}</div>
|
||||
<div className="truncate text-sm text-gray-900" title={String(value || "-")}>
|
||||
<div className="text-xs font-medium text-muted-foreground">{getColumnLabel(key)}</div>
|
||||
<div className="truncate text-sm text-foreground" title={String(value || "-")}>
|
||||
{String(value || "-")}
|
||||
</div>
|
||||
</div>
|
||||
@@ -508,9 +508,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 items-start pt-1">
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-5 w-5 text-gray-400" />
|
||||
<ChevronUp className="h-5 w-5 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-5 w-5 text-gray-400" />
|
||||
<ChevronDown className="h-5 w-5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -522,13 +522,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
<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">
|
||||
<tbody className="divide-y divide-border">
|
||||
{allValues.map(([key, value]) => (
|
||||
<tr key={key} className="hover:bg-gray-50">
|
||||
<td className="px-3 py-2 font-medium whitespace-nowrap text-gray-600">
|
||||
<tr key={key} className="hover:bg-muted">
|
||||
<td className="px-3 py-2 font-medium whitespace-nowrap text-muted-foreground">
|
||||
{getColumnLabel(key)}
|
||||
</td>
|
||||
<td className="px-3 py-2 break-all text-gray-900">{String(value)}</td>
|
||||
<td className="px-3 py-2 break-all text-foreground">{String(value)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@@ -541,11 +541,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-8 text-center text-sm text-gray-500">
|
||||
<div className="py-8 text-center text-sm text-muted-foreground">
|
||||
{rightSearchQuery ? (
|
||||
<>
|
||||
<p>검색 결과가 없습니다.</p>
|
||||
<p className="mt-1 text-xs text-gray-400">다른 검색어를 입력해보세요.</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground/70">다른 검색어를 입력해보세요.</p>
|
||||
</>
|
||||
) : (
|
||||
"관련 데이터가 없습니다."
|
||||
@@ -578,15 +578,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
<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>
|
||||
<span className="text-muted-foreground">항목 1:</span>
|
||||
<span className="font-medium">값 1</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">항목 2:</span>
|
||||
<span className="text-muted-foreground">항목 2:</span>
|
||||
<span className="font-medium">값 2</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">항목 3:</span>
|
||||
<span className="text-muted-foreground">항목 3:</span>
|
||||
<span className="font-medium">값 3</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -595,7 +595,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||
) : (
|
||||
// 선택 없음
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="text-center text-sm text-gray-500">
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
<p className="mb-2">좌측에서 항목을 선택하세요</p>
|
||||
<p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user