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

refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

Browse Source 
447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor
This commit is contained in:
DDD1542
2026-03-09 14:31:59 +09:00
parent d967cf0a0d
commit 4f10b5e42d
447 changed files with 4520 additions and 4520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
View File

@@ -19,16 +19,16 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
}) => {
return (
<div className="p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
<h2 className="text-lg font-semibold text-foreground mb-4">
매핑 정보
</h2>
{/* 통계 카드 */}
<div className="grid grid-cols-2 gap-3 mb-6">
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<div className="bg-emerald-50 p-3 rounded-lg border border-emerald-200">
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" />
<span className="text-sm font-medium text-green-800">유효한 매핑</span>
<CheckCircle className="w-4 h-4 text-emerald-600" />
<span className="text-sm font-medium text-emerald-800">유효한 매핑</span>
</div>
<div className="text-2xl font-bold text-green-900 mt-1">
{mappingStats.validMappings}
@@ -48,16 +48,16 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
<div className="bg-accent p-3 rounded-lg border border-primary/20">
<div className="flex items-center gap-2">
<Database className="w-4 h-4 text-primary" />
<span className="text-sm font-medium text-blue-800">총 매핑</span>
<span className="text-sm font-medium text-primary">총 매핑</span>
</div>
<div className="text-2xl font-bold text-blue-900 mt-1">
<div className="text-2xl font-bold text-primary mt-1">
{mappingStats.totalMappings}
</div>
</div>
<div className="bg-yellow-50 p-3 rounded-lg border border-yellow-200">
<div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
<div className="flex items-center gap-2">
<AlertCircle className="w-4 h-4 text-yellow-600" />
<AlertCircle className="w-4 h-4 text-amber-600" />
<span className="text-sm font-medium text-yellow-800">누락 필드</span>
</div>
<div className="text-2xl font-bold text-yellow-900 mt-1">
@@ -68,12 +68,12 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
{/* 매핑 목록 */}
<div className="space-y-2">
<h3 className="text-sm font-medium text-gray-700 mb-2">
<h3 className="text-sm font-medium text-foreground mb-2">
필드 매핑 목록
</h3>
{fieldMappings.length === 0 ? (
<div className="text-center py-8 text-gray-500">
<div className="text-center py-8 text-muted-foreground">
<Database className="w-8 h-8 mx-auto mb-2 opacity-50" />
<p className="text-sm">아직 매핑이 없습니다</p>
<p className="text-xs">3단계에서 필드를 매핑하세요</p>
@@ -85,37 +85,37 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
key={mapping.id}
className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
selectedMapping === mapping.id
? "border-orange-500 bg-orange-50"
? "border-orange-500 bg-amber-50"
: mapping.isValid
? "border-green-200 bg-green-50 hover:border-green-300"
: "border-destructive/20 bg-destructive/10 hover:border-red-300"
? "border-emerald-200 bg-emerald-50 hover:border-green-300"
: "border-destructive/20 bg-destructive/10 hover:border-destructive/30"
}`}
onClick={() => onMappingSelect(mapping.id)}
>
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-900 truncate">
<span className="text-sm font-medium text-foreground truncate">
{mapping.fromField.name}
</span>
<span className="text-gray-400">→</span>
<span className="text-sm font-medium text-gray-900 truncate">
<span className="text-muted-foreground/70">→</span>
<span className="text-sm font-medium text-foreground truncate">
{mapping.toField.name}
</span>
</div>
<div className="flex items-center gap-2 mt-1">
<span className={`text-xs px-2 py-1 rounded ${
mapping.fromField.type === mapping.toField.type
? "bg-green-100 text-green-800"
: "bg-yellow-100 text-yellow-800"
? "bg-emerald-100 text-emerald-800"
: "bg-amber-100 text-yellow-800"
}`}>
{mapping.fromField.type}
</span>
<span className="text-gray-400">→</span>
<span className="text-muted-foreground/70">→</span>
<span className={`text-xs px-2 py-1 rounded ${
mapping.fromField.type === mapping.toField.type
? "bg-green-100 text-green-800"
: "bg-yellow-100 text-yellow-800"
? "bg-emerald-100 text-emerald-800"
: "bg-amber-100 text-yellow-800"
}`}>
{mapping.toField.type}
</span>
@@ -124,7 +124,7 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
<div className="ml-2">
{mapping.isValid ? (
<CheckCircle className="w-4 h-4 text-green-600" />
<CheckCircle className="w-4 h-4 text-emerald-600" />
) : (
<XCircle className="w-4 h-4 text-destructive" />
)}