chpark/vexplor
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

2
frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx
View File

@@ -102,7 +102,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({ state, actions }) => {
<div className="text-muted-foreground border-t pt-2 text-center text-xs">
{state.fieldMappings.length}개 매핑 설정됨
{state.validationErrors.length > 0 && (
<span className="ml-1 text-orange-600">({state.validationErrors.length}개 오류)</span>
<span className="ml-1 text-amber-600">({state.validationErrors.length}개 오류)</span>
)}
</div>
)}

18
frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx
View File

@@ -44,9 +44,9 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
<Settings className="h-4 w-4" />
액션 설정
{isConfigured ? (
<CheckCircle className="h-4 w-4 text-green-600" />
<CheckCircle className="h-4 w-4 text-emerald-600" />
) : (
<AlertCircle className="h-4 w-4 text-orange-500" />
<AlertCircle className="h-4 w-4 text-amber-500" />
)}
</CardTitle>
</CardHeader>
@@ -79,15 +79,15 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
</div>
{actionConditions.length === 0 && (
<p className="text-xs text-orange-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
<p className="text-xs text-amber-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
)}
</div>
)}
{/* INSERT 액션 안내 */}
{actionType === "insert" && (
<div className="rounded-md border border-green-200 bg-green-50 p-2">
<p className="text-xs text-green-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
<div className="rounded-md border border-emerald-200 bg-emerald-50 p-2">
<p className="text-xs text-emerald-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
</div>
)}
@@ -96,13 +96,13 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
<div className="flex items-center gap-2">
{isConfigured ? (
<>
<CheckCircle className="h-3 w-3 text-green-600" />
<span className="text-xs font-medium text-green-600">설정 완료</span>
<CheckCircle className="h-3 w-3 text-emerald-600" />
<span className="text-xs font-medium text-emerald-600">설정 완료</span>
</>
) : (
<>
<AlertCircle className="h-3 w-3 text-orange-500" />
<span className="text-xs font-medium text-orange-600">설정 필요</span>
<AlertCircle className="h-3 w-3 text-amber-500" />
<span className="text-xs font-medium text-amber-600">설정 필요</span>
</>
)}
</div>

10
frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
View File

@@ -54,7 +54,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
<h4 className="text-xs font-medium text-muted-foreground">🔄 트랜잭션 설정</h4>
<div className="grid grid-cols-3 gap-2">
<div>
<Label htmlFor="batchSize" className="text-xs text-gray-500">
<Label htmlFor="batchSize" className="text-xs text-muted-foreground">
배치
</Label>
<Input
@@ -66,7 +66,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
/>
</div>
<div>
<Label htmlFor="timeout" className="text-xs text-gray-500">
<Label htmlFor="timeout" className="text-xs text-muted-foreground">
타임아웃
</Label>
<Input
@@ -78,7 +78,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
/>
</div>
<div>
<Label htmlFor="retryCount" className="text-xs text-gray-500">
<Label htmlFor="retryCount" className="text-xs text-muted-foreground">
재시도
</Label>
<Input
@@ -101,7 +101,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
<h4 className="text-xs font-medium text-muted-foreground">🌐 API 호출 설정</h4>
<div className="grid grid-cols-2 gap-2">
<div>
<Label htmlFor="timeout" className="text-xs text-gray-500">
<Label htmlFor="timeout" className="text-xs text-muted-foreground">
타임아웃 (초)
</Label>
<Input
@@ -113,7 +113,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
/>
</div>
<div>
<Label htmlFor="retryCount" className="text-xs text-gray-500">
<Label htmlFor="retryCount" className="text-xs text-muted-foreground">
재시도 횟수
</Label>
<Input

14
frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
View File

@@ -29,8 +29,8 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
onConnectionTypeChange,
}) => {
return (
<div className="p-6 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
<div className="p-6 border-b border-border">
<h2 className="text-lg font-semibold text-foreground mb-4">
연결 타입 선택
</h2>
@@ -40,21 +40,21 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
key={type.id}
className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
connectionType === type.id
? "border-orange-500 bg-orange-50 shadow-md"
: "border-gray-200 bg-white hover:border-orange-300 hover:bg-orange-25"
? "border-orange-500 bg-amber-50 shadow-md"
: "border-border bg-white hover:border-orange-300 hover:bg-orange-25"
}`}
onClick={() => onConnectionTypeChange(type.id)}
>
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${
connectionType === type.id
? "bg-orange-100 text-orange-600"
: "bg-gray-100 text-muted-foreground"
? "bg-amber-100 text-amber-600"
: "bg-muted text-muted-foreground"
}`}>
{type.icon}
</div>
<div>
<h3 className="font-medium text-gray-900">{type.label}</h3>
<h3 className="font-medium text-foreground">{type.label}</h3>
<p className="text-sm text-muted-foreground">{type.description}</p>
</div>
</div>

2
frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
View File

@@ -89,7 +89,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
<>
<Separator />
<div className="rounded-md bg-accent p-3">
<h3 className="mb-1 text-sm font-medium text-blue-800">외부 호출 모드</h3>
<h3 className="mb-1 text-sm font-medium text-primary">외부 호출 모드</h3>
<p className="text-xs text-primary">우측 패널에서 REST API 설정을 구성하세요.</p>
</div>
</>

6
frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx
View File

@@ -73,12 +73,12 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
</h4>
<div className="mt-1 flex items-center gap-2">
{mapping.isValid ? (
<Badge variant="outline" className="text-xs text-green-600">
<Badge variant="outline" className="text-xs text-emerald-600">
<CheckCircle className="mr-1 h-3 w-3" />
{mapping.fromField?.webType || "Unknown"} → {mapping.toField?.webType || "Unknown"}
</Badge>
) : (
<Badge variant="outline" className="text-xs text-orange-600">
<Badge variant="outline" className="text-xs text-amber-600">
<AlertTriangle className="mr-1 h-3 w-3" />
타입 불일치
</Badge>
@@ -119,7 +119,7 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
{/* 검증 메시지 */}
{mapping.validationMessage && (
<div className="mt-1 text-xs text-orange-600">{mapping.validationMessage}</div>
<div className="mt-1 text-xs text-amber-600">{mapping.validationMessage}</div>
)}
</div>
));

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" />
)}