feat: 테이블 테두리 및 라운드 제거, 검색 필터 제목 제거
- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거 - 테이블 컨테이너의 라운드(rounded-lg) 제거 - 테이블 행 구분선(border-b)은 유지하여 데이터 구분 - FlowWidget과 TableListComponent에 동일한 스타일 적용 - 검색 필터 영역의 회색 배경(bg-muted/30) 제거 - 검색 필터 제목 제거 - AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
This commit is contained in:
kjs
@@ -54,31 +54,31 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
|
||||
<div className="animate-in slide-in-from-right-5 fixed top-4 right-4 z-50 w-80 duration-300">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border-2 bg-white shadow-2xl",
|
||||
"rounded-lg border-2 bg-background shadow-2xl",
|
||||
summary.hasBlockingIssues
|
||||
? "border-red-500"
|
||||
? "border-destructive"
|
||||
: summary.warningCount > 0
|
||||
? "border-yellow-500"
|
||||
: "border-blue-500",
|
||||
? "border-warning"
|
||||
: "border-primary",
|
||||
)}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center justify-between p-3",
|
||||
summary.hasBlockingIssues ? "bg-red-50" : summary.warningCount > 0 ? "bg-yellow-50" : "bg-blue-50",
|
||||
summary.hasBlockingIssues ? "bg-destructive/10" : summary.warningCount > 0 ? "bg-warning/10" : "bg-primary/10",
|
||||
)}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{summary.hasBlockingIssues ? (
|
||||
<AlertCircle className="h-5 w-5 text-red-600" />
|
||||
<AlertCircle className="h-5 w-5 text-destructive" />
|
||||
) : summary.warningCount > 0 ? (
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-600" />
|
||||
<AlertTriangle className="h-5 w-5 text-warning" />
|
||||
) : (
|
||||
<Info className="h-5 w-5 text-blue-600" />
|
||||
<Info className="h-5 w-5 text-primary" />
|
||||
)}
|
||||
<span className="text-sm font-semibold text-gray-900">플로우 검증</span>
|
||||
<span className="text-sm font-semibold text-foreground">플로우 검증</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{summary.errorCount > 0 && (
|
||||
<Badge variant="destructive" className="h-5 text-[10px]">
|
||||
@@ -86,7 +86,7 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
|
||||
</Badge>
|
||||
)}
|
||||
{summary.warningCount > 0 && (
|
||||
<Badge className="h-5 bg-yellow-500 text-[10px] hover:bg-yellow-600">{summary.warningCount}</Badge>
|
||||
<Badge className="h-5 bg-warning text-[10px] hover:bg-warning/90">{summary.warningCount}</Badge>
|
||||
)}
|
||||
{summary.infoCount > 0 && (
|
||||
<Badge variant="secondary" className="h-5 text-[10px]">
|
||||
@@ -97,9 +97,9 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-4 w-4 text-gray-400" />
|
||||
<ChevronUp className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-gray-400" />
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
{onClose && (
|
||||
<Button
|
||||
@@ -109,7 +109,7 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
className="h-6 w-6 p-0 hover:bg-white/50"
|
||||
className="h-6 w-6 p-0 hover:bg-muted"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
@@ -137,10 +137,10 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
|
||||
className={cn(
|
||||
"mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium",
|
||||
firstValidation.severity === "error"
|
||||
? "bg-red-100 text-red-700"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: firstValidation.severity === "warning"
|
||||
? "bg-yellow-100 text-yellow-700"
|
||||
: "bg-blue-100 text-blue-700",
|
||||
? "bg-warning/10 text-warning"
|
||||
: "bg-primary/10 text-primary",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
@@ -153,16 +153,16 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
|
||||
{typeValidations.map((validation, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group cursor-pointer rounded-md border border-gray-200 bg-gray-50 p-2 text-xs transition-all hover:border-gray-300 hover:bg-white hover:shadow-sm"
|
||||
className="group cursor-pointer rounded-md border border-border bg-muted p-2 text-xs transition-all hover:border-primary/50 hover:bg-background hover:shadow-sm"
|
||||
onClick={() => onNodeClick?.(validation.nodeId)}
|
||||
>
|
||||
<p className="leading-relaxed text-gray-700">{validation.message}</p>
|
||||
<p className="leading-relaxed text-foreground">{validation.message}</p>
|
||||
{validation.affectedNodes && validation.affectedNodes.length > 1 && (
|
||||
<div className="mt-1 text-[10px] text-gray-500">
|
||||
<div className="mt-1 text-[10px] text-muted-foreground">
|
||||
영향받는 노드: {validation.affectedNodes.length}개
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-1 text-[10px] text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<div className="mt-1 text-[10px] text-primary opacity-0 transition-opacity group-hover:opacity-100">
|
||||
클릭하여 노드 보기 →
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,7 +178,7 @@ export const ValidationNotification = memo(({ validations, onNodeClick, onClose
|
||||
{/* 요약 메시지 (닫혀있을 때) */}
|
||||
{!isExpanded && (
|
||||
<div className="border-t px-3 py-2">
|
||||
<p className="text-xs text-gray-600">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{summary.hasBlockingIssues
|
||||
? "⛔ 오류를 해결해야 저장할 수 있습니다"
|
||||
: summary.warningCount > 0
|
||||
|
||||
Reference in New Issue
Block a user