chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui 수정 및 시현할 기능 업데이트

Browse Source
This commit is contained in:
leeheejin
2025-10-02 14:34:15 +09:00
parent 2c0dca08b4
commit 3fa410cbe4
168 changed files with 1545 additions and 1066 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
View File

@@ -71,14 +71,14 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
<h2 className="text-2xl font-bold text-gray-900 mb-2">
필드 매핑
</h2>
<p className="text-gray-600">
<p className="text-muted-foreground">
소스 테이블의 필드를 대상 테이블의 필드에 드래그하여 매핑하세요
</p>
</div>
{/* 매핑 통계 */}
<div className="grid grid-cols-4 gap-4">
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
<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>
@@ -88,7 +88,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
</div>
<div className="text-sm text-green-700">유효한 매핑</div>
</div>
<div className="bg-red-50 p-4 rounded-lg border border-red-200">
<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>
@@ -107,8 +107,8 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
{/* FROM 테이블 필드들 */}
<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-blue-100 rounded-full flex items-center justify-center">
<span className="text-blue-600 font-bold text-sm">FROM</span>
<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>
{fromTable?.name} 필드들
</h3>
@@ -122,13 +122,13 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
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-blue-200 bg-blue-50 hover:border-blue-400 hover:bg-blue-100"
: "border-primary/20 bg-accent hover:border-blue-400 hover:bg-primary/20"
}`}
>
<div className="flex items-center justify-between">
<div>
<div className="font-medium text-gray-900">{field.name}</div>
<div className="text-sm text-gray-600">{field.type}</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">
PK
@@ -170,7 +170,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
<div className="flex items-center justify-between">
<div>
<div className="font-medium text-gray-900">{field.name}</div>
<div className="text-sm text-gray-600">{field.type}</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">
PK
@@ -196,7 +196,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
{fieldMappings.find(m => m.toField.name === field.name)?.isValid ? (
<CheckCircle className="w-5 h-5 text-green-600" />
) : (
<AlertCircle className="w-5 h-5 text-red-600" />
<AlertCircle className="w-5 h-5 text-destructive" />
)}
</div>
)}
@@ -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-gray-600 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-gray-100 hover:bg-gray-200 transition-all duration-200"
>
<ArrowLeft className="w-4 h-4" />
이전 단계