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

frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx

@@ -10,20 +10,20 @@ import { Globe, Lock } from "lucide-react";
 import type { RestAPISourceNodeData } from "@/types/node-editor";
 
 const METHOD_COLORS: Record<string, string> = {
-  GET: "bg-green-100 text-green-700",
-  POST: "bg-blue-100 text-blue-700",
-  PUT: "bg-yellow-100 text-yellow-700",
-  DELETE: "bg-red-100 text-red-700",
+  GET: "bg-emerald-100 text-emerald-700",
+  POST: "bg-primary/10 text-primary",
+  PUT: "bg-amber-100 text-yellow-700",
+  DELETE: "bg-destructive/10 text-destructive",
   PATCH: "bg-purple-100 text-purple-700",
 };
 
 export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISourceNodeData>) => {
-  const methodColor = METHOD_COLORS[data.method] || "bg-gray-100 text-gray-700";
+  const methodColor = METHOD_COLORS[data.method] || "bg-muted text-foreground";
 
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -41,24 +41,24 @@ export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISour
         {/* HTTP 메서드 */}
         <div className="mb-2 flex items-center gap-2">
           <span className={`rounded px-2 py-1 text-xs font-semibold ${methodColor}`}>{data.method}</span>
-          {data.timeout && <span className="text-xs text-gray-500">{data.timeout}ms</span>}
+          {data.timeout && <span className="text-xs text-muted-foreground">{data.timeout}ms</span>}
         </div>
 
         {/* 헤더 */}
         {data.headers && Object.keys(data.headers).length > 0 && (
           <div className="mb-2">
-            <div className="text-xs font-medium text-gray-700">헤더:</div>
+            <div className="text-xs font-medium text-foreground">헤더:</div>
             <div className="mt-1 space-y-1">
               {Object.entries(data.headers)
                 .slice(0, 2)
                 .map(([key, value]) => (
-                  <div key={key} className="flex items-center gap-2 text-xs text-gray-600">
+                  <div key={key} className="flex items-center gap-2 text-xs text-muted-foreground">
                     <span className="font-mono">{key}:</span>
-                    <span className="truncate text-gray-500">{value}</span>
+                    <span className="truncate text-muted-foreground">{value}</span>
                   </div>
                 ))}
               {Object.keys(data.headers).length > 2 && (
-                <div className="text-xs text-gray-400">... 외 {Object.keys(data.headers).length - 2}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {Object.keys(data.headers).length - 2}개</div>
               )}
             </div>
           </div>