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

30
frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
View File

@@ -35,14 +35,14 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
return (
<div
className={`min-w-[280px] rounded-lg border-2 bg-white shadow-md transition-all ${
selected ? "border-yellow-500 shadow-lg" : "border-gray-200"
selected ? "border-yellow-500 shadow-lg" : "border-border"
}`}
>
{/* 입력 핸들 */}
<Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-yellow-500 !bg-white" />
{/* 헤더 */}
<div className="flex items-center gap-2 rounded-t-lg bg-yellow-500 px-3 py-2 text-white">
<div className="flex items-center gap-2 rounded-t-lg bg-amber-500 px-3 py-2 text-white">
<Zap className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-semibold">조건 검사</div>
@@ -54,15 +54,15 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
<div className="p-3">
{data.conditions && data.conditions.length > 0 ? (
<div className="space-y-2">
<div className="text-xs font-medium text-gray-700">조건식: ({data.conditions.length}개)</div>
<div className="text-xs font-medium text-foreground">조건식: ({data.conditions.length}개)</div>
<div className="max-h-[150px] space-y-1.5 overflow-y-auto">
{data.conditions.slice(0, 4).map((condition, idx) => (
<div key={idx} className="rounded bg-yellow-50 px-2 py-1.5 text-xs">
<div key={idx} className="rounded bg-amber-50 px-2 py-1.5 text-xs">
{idx > 0 && (
<div className="mb-1 text-center text-xs font-semibold text-yellow-600">{data.logic}</div>
<div className="mb-1 text-center text-xs font-semibold text-amber-600">{data.logic}</div>
)}
<div className="flex flex-wrap items-center gap-1">
<span className="font-mono text-gray-700">{condition.field}</span>
<span className="font-mono text-foreground">{condition.field}</span>
<span
className={`rounded px-1 py-0.5 ${
isExistsOperator(condition.operator)
@@ -82,7 +82,7 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
// 일반 연산자인 경우 값 표시
condition.value !== null &&
condition.value !== undefined && (
<span className="text-gray-600">
<span className="text-muted-foreground">
{typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
</span>
)
@@ -91,12 +91,12 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
</div>
))}
{data.conditions.length > 4 && (
<div className="text-xs text-gray-400">... 외 {data.conditions.length - 4}개</div>
<div className="text-xs text-muted-foreground/70">... 외 {data.conditions.length - 4}개</div>
)}
</div>
</div>
) : (
<div className="text-center text-xs text-gray-400">조건 없음</div>
<div className="text-center text-xs text-muted-foreground/70">조건 없음</div>
)}
</div>
@@ -105,28 +105,28 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
{/* TRUE 출력 - 오른쪽 위 */}
<div className="relative border-b p-2">
<div className="flex items-center justify-end gap-1 pr-6 text-xs">
<Check className="h-3 w-3 text-green-600" />
<span className="font-medium text-green-600">TRUE</span>
<Check className="h-3 w-3 text-emerald-600" />
<span className="font-medium text-emerald-600">TRUE</span>
</div>
<Handle
type="source"
position={Position.Right}
id="true"
className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-green-500 !bg-white"
className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-emerald-500 !bg-white"
/>
</div>
{/* FALSE 출력 - 오른쪽 아래 */}
<div className="relative p-2">
<div className="flex items-center justify-end gap-1 pr-6 text-xs">
<X className="h-3 w-3 text-red-600" />
<span className="font-medium text-red-600">FALSE</span>
<X className="h-3 w-3 text-destructive" />
<span className="font-medium text-destructive">FALSE</span>
</div>
<Handle
type="source"
position={Position.Right}
id="false"
className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-red-500 !bg-white"
className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-destructive !bg-white"
/>
</div>
</div>