refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환
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
@@ -68,7 +68,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
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">
|
||||
@@ -79,22 +79,22 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
{/* 매핑 통계 */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="bg-accent p-4 rounded-lg border border-primary/20">
|
||||
<div className="text-2xl font-bold text-blue-900">{fieldMappings.length}</div>
|
||||
<div className="text-sm text-blue-700">총 매핑</div>
|
||||
<div className="text-2xl font-bold text-primary">{fieldMappings.length}</div>
|
||||
<div className="text-sm text-primary">총 매핑</div>
|
||||
</div>
|
||||
<div className="bg-green-50 p-4 rounded-lg border border-green-200">
|
||||
<div className="bg-emerald-50 p-4 rounded-lg border border-emerald-200">
|
||||
<div className="text-2xl font-bold text-green-900">
|
||||
{fieldMappings.filter(m => m.isValid).length}
|
||||
</div>
|
||||
<div className="text-sm text-green-700">유효한 매핑</div>
|
||||
<div className="text-sm text-emerald-700">유효한 매핑</div>
|
||||
</div>
|
||||
<div className="bg-destructive/10 p-4 rounded-lg border border-destructive/20">
|
||||
<div className="text-2xl font-bold text-red-900">
|
||||
{fieldMappings.filter(m => !m.isValid).length}
|
||||
</div>
|
||||
<div className="text-sm text-red-700">오류 매핑</div>
|
||||
<div className="text-sm text-destructive">오류 매핑</div>
|
||||
</div>
|
||||
<div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
|
||||
<div className="bg-amber-50 p-4 rounded-lg border border-amber-200">
|
||||
<div className="text-2xl font-bold text-yellow-900">
|
||||
{(toTable?.columns.length || 0) - fieldMappings.length}
|
||||
</div>
|
||||
@@ -106,7 +106,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* FROM 테이블 필드들 */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-primary/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-primary font-bold text-sm">FROM</span>
|
||||
</div>
|
||||
@@ -121,22 +121,22 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
onDragStart={() => handleDragStart(field)}
|
||||
className={`p-3 rounded-lg border-2 cursor-move transition-all duration-200 ${
|
||||
isFieldMapped(field.name)
|
||||
? "border-green-300 bg-green-50 opacity-60"
|
||||
: "border-primary/20 bg-accent hover:border-blue-400 hover:bg-primary/20"
|
||||
? "border-green-300 bg-emerald-50 opacity-60"
|
||||
: "border-primary/20 bg-accent hover:border-primary/60 hover:bg-primary/20"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{field.name}</div>
|
||||
<div className="font-medium text-foreground">{field.name}</div>
|
||||
<div className="text-sm text-muted-foreground">{field.type}</div>
|
||||
{field.primaryKey && (
|
||||
<span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
|
||||
<span className="text-xs bg-amber-100 text-yellow-800 px-2 py-1 rounded">
|
||||
PK
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isFieldMapped(field.name) && (
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<CheckCircle className="w-5 h-5 text-emerald-600" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,9 +146,9 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
|
||||
{/* TO 테이블 필드들 */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-green-600 font-bold text-sm">TO</span>
|
||||
<h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-emerald-600 font-bold text-sm">TO</span>
|
||||
</div>
|
||||
{toTable?.name} 필드들
|
||||
</h3>
|
||||
@@ -163,21 +163,21 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
onDrop={(e) => handleDrop(e, field)}
|
||||
className={`p-3 rounded-lg border-2 transition-all duration-200 ${
|
||||
mappedFromField
|
||||
? "border-green-300 bg-green-50"
|
||||
: "border-gray-200 bg-gray-50 hover:border-green-300 hover:bg-green-25"
|
||||
? "border-green-300 bg-emerald-50"
|
||||
: "border-border bg-muted hover:border-green-300 hover:bg-green-25"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{field.name}</div>
|
||||
<div className="font-medium text-foreground">{field.name}</div>
|
||||
<div className="text-sm text-muted-foreground">{field.type}</div>
|
||||
{field.primaryKey && (
|
||||
<span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
|
||||
<span className="text-xs bg-amber-100 text-yellow-800 px-2 py-1 rounded">
|
||||
PK
|
||||
</span>
|
||||
)}
|
||||
{mappedFromField && (
|
||||
<div className="text-xs text-green-700 mt-1">
|
||||
<div className="text-xs text-emerald-700 mt-1">
|
||||
← {mappedFromField.name} ({mappedFromField.type})
|
||||
</div>
|
||||
)}
|
||||
@@ -186,7 +186,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
{mappedFromField && (
|
||||
<button
|
||||
onClick={() => removeMapping(`${mappedFromField.name}-${field.name}`)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
</button>
|
||||
@@ -194,7 +194,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
{mappedFromField && (
|
||||
<div>
|
||||
{fieldMappings.find(m => m.toField.name === field.name)?.isValid ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<CheckCircle className="w-5 h-5 text-emerald-600" />
|
||||
) : (
|
||||
<AlertCircle className="w-5 h-5 text-destructive" />
|
||||
)}
|
||||
@@ -213,7 +213,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-muted hover:bg-muted/80 transition-all duration-200"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
이전 단계
|
||||
@@ -221,7 +221,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
||||
|
||||
<button
|
||||
onClick={onSave}
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg transition-all duration-200"
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg transition-all duration-200"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
연결 설정 저장
|
||||
|
||||
Reference in New Issue
Block a user