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/HttpRequestActionNode.tsx

@@ -12,12 +12,12 @@ import type { HttpRequestActionNodeData } from "@/types/node-editor";
 
 // HTTP 메서드별 색상
 const METHOD_COLORS: Record<string, { bg: string; text: string }> = {
-  GET: { bg: "bg-green-100", text: "text-green-700" },
-  POST: { bg: "bg-blue-100", text: "text-blue-700" },
-  PUT: { bg: "bg-orange-100", text: "text-orange-700" },
-  PATCH: { bg: "bg-yellow-100", text: "text-yellow-700" },
-  DELETE: { bg: "bg-red-100", text: "text-red-700" },
-  HEAD: { bg: "bg-gray-100", text: "text-gray-700" },
+  GET: { bg: "bg-emerald-100", text: "text-emerald-700" },
+  POST: { bg: "bg-primary/10", text: "text-primary" },
+  PUT: { bg: "bg-amber-100", text: "text-orange-700" },
+  PATCH: { bg: "bg-amber-100", text: "text-yellow-700" },
+  DELETE: { bg: "bg-destructive/10", text: "text-destructive" },
+  HEAD: { bg: "bg-muted", text: "text-foreground" },
   OPTIONS: { bg: "bg-purple-100", text: "text-purple-700" },
 };
 
@@ -39,7 +39,7 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-cyan-500 shadow-lg" : "border-gray-200"
+        selected ? "border-cyan-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -65,12 +65,12 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
             {data.method}
           </span>
           {hasAuth ? (
-            <span className="flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs text-green-700">
+            <span className="flex items-center gap-1 rounded bg-emerald-100 px-1.5 py-0.5 text-xs text-emerald-700">
               <Lock className="h-3 w-3" />
               {data.authentication?.type}
             </span>
           ) : (
-            <span className="flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500">
+            <span className="flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
               <Unlock className="h-3 w-3" />
               인증없음
             </span>
@@ -79,28 +79,28 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
 
         {/* URL */}
         <div className="text-xs">
-          <span className="text-gray-500">URL: </span>
+          <span className="text-muted-foreground">URL: </span>
           {hasUrl ? (
-            <span className="truncate text-gray-700" title={data.url}>
+            <span className="truncate text-foreground" title={data.url}>
               {getDomain(data.url)}
             </span>
           ) : (
-            <span className="text-orange-500">URL 설정 필요</span>
+            <span className="text-amber-500">URL 설정 필요</span>
           )}
         </div>
 
         {/* 바디 타입 */}
         {data.bodyType && data.bodyType !== "none" && (
           <div className="text-xs">
-            <span className="text-gray-500">Body: </span>
-            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-gray-600">
+            <span className="text-muted-foreground">Body: </span>
+            <span className="rounded bg-muted px-1.5 py-0.5 text-muted-foreground">
               {data.bodyType.toUpperCase()}
             </span>
           </div>
         )}
 
         {/* 타임아웃 & 재시도 */}
-        <div className="flex gap-2 text-xs text-gray-500">
+        <div className="flex gap-2 text-xs text-muted-foreground">
           {data.options?.timeout && (
             <span>타임아웃: {Math.round(data.options.timeout / 1000)}초</span>
           )}