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

40
frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
View File

@@ -77,7 +77,7 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
return (
<div className="space-y-8">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-900 mb-2">
<h2 className="text-2xl font-bold text-foreground mb-2">
연결 선택
</h2>
<p className="text-muted-foreground">
@@ -92,8 +92,8 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
<div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
<span className="text-primary font-bold">1</span>
</div>
<h3 className="text-lg font-semibold text-gray-900">FROM 연결</h3>
<span className="text-sm text-gray-500">(데이터 소스)</span>
<h3 className="text-lg font-semibold text-foreground">FROM 연결</h3>
<span className="text-sm text-muted-foreground">(데이터 소스)</span>
</div>
<div className="space-y-2">
@@ -103,16 +103,16 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
selectedFrom === connection.id
? "border-primary bg-accent shadow-md"
: "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
: "border-border bg-white hover:border-primary/40 hover:bg-blue-25"
}`}
onClick={() => handleFromSelect(connection.id)}
>
<div className="flex items-center gap-3">
<Database className="w-6 h-6 text-primary" />
<div className="flex-1">
<h4 className="font-medium text-gray-900">{connection.name}</h4>
<h4 className="font-medium text-foreground">{connection.name}</h4>
<p className="text-sm text-muted-foreground">{connection.type}</p>
<p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
<p className="text-xs text-muted-foreground">{connection.host}:{connection.port}</p>
</div>
{selectedFrom === connection.id && (
<CheckCircle className="w-5 h-5 text-primary" />
@@ -125,19 +125,19 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
{/* 화살표 */}
<div className="hidden lg:flex items-center justify-center">
<div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
<ArrowRight className="w-6 h-6 text-orange-600" />
<div className="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
<ArrowRight className="w-6 h-6 text-amber-600" />
</div>
</div>
{/* TO 연결 */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
<span className="text-green-600 font-bold">2</span>
<div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
<span className="text-emerald-600 font-bold">2</span>
</div>
<h3 className="text-lg font-semibold text-gray-900">TO 연결</h3>
<span className="text-sm text-gray-500">(데이터 대상)</span>
<h3 className="text-lg font-semibold text-foreground">TO 연결</h3>
<span className="text-sm text-muted-foreground">(데이터 대상)</span>
</div>
<div className="space-y-2">
@@ -146,20 +146,20 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
key={connection.id}
className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
selectedTo === connection.id
? "border-green-500 bg-green-50 shadow-md"
: "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
? "border-emerald-500 bg-emerald-50 shadow-md"
: "border-border bg-white hover:border-green-300 hover:bg-green-25"
}`}
onClick={() => handleToSelect(connection.id)}
>
<div className="flex items-center gap-3">
<Database className="w-6 h-6 text-green-600" />
<Database className="w-6 h-6 text-emerald-600" />
<div className="flex-1">
<h4 className="font-medium text-gray-900">{connection.name}</h4>
<h4 className="font-medium text-foreground">{connection.name}</h4>
<p className="text-sm text-muted-foreground">{connection.type}</p>
<p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
<p className="text-xs text-muted-foreground">{connection.host}:{connection.port}</p>
</div>
{selectedTo === connection.id && (
<CheckCircle className="w-5 h-5 text-green-600" />
<CheckCircle className="w-5 h-5 text-emerald-600" />
)}
</div>
</div>
@@ -175,8 +175,8 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
disabled={!canProceed}
className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
canProceed
? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
: "bg-gray-300 text-gray-500 cursor-not-allowed"
? "bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
: "bg-muted/60 text-muted-foreground cursor-not-allowed"
}`}
>
다음 단계: 테이블 선택