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/sidebar/NodePalette.tsx

@@ -29,9 +29,9 @@ export function NodePalette() {
   return (
     <div className="flex h-full flex-col bg-white">
       {/* 헤더 */}
-      <div className="border-b bg-gray-50 p-4">
-        <h3 className="text-sm font-semibold text-gray-900">노드 라이브러리</h3>
-        <p className="mt-1 text-xs text-gray-500">캔버스로 드래그하여 추가</p>
+      <div className="border-b bg-muted p-4">
+        <h3 className="text-sm font-semibold text-foreground">노드 라이브러리</h3>
+        <p className="mt-1 text-xs text-muted-foreground">캔버스로 드래그하여 추가</p>
       </div>
 
       {/* 노드 목록 */}
@@ -45,11 +45,11 @@ export function NodePalette() {
               {/* 카테고리 헤더 */}
               <button
                 onClick={() => toggleCategory(category.id)}
-                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm font-medium text-gray-700 hover:bg-gray-100"
+                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm font-medium text-foreground hover:bg-muted"
               >
                 {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                 <span>{category.label}</span>
-                <span className="ml-auto text-xs text-gray-400">{nodes.length}</span>
+                <span className="ml-auto text-xs text-muted-foreground/70">{nodes.length}</span>
               </button>
 
               {/* 노드 아이템들 */}
@@ -66,8 +66,8 @@ export function NodePalette() {
       </div>
 
       {/* 푸터 도움말 */}
-      <div className="border-t bg-gray-50 p-3">
-        <p className="text-xs text-gray-500">💡 노드를 드래그하여 캔버스에 배치하고 연결선으로 연결하세요</p>
+      <div className="border-t bg-muted p-3">
+        <p className="text-xs text-muted-foreground">💡 노드를 드래그하여 캔버스에 배치하고 연결선으로 연결하세요</p>
       </div>
     </div>
   );
@@ -84,7 +84,7 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
 
   return (
     <div
-      className="group cursor-move rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all hover:border-gray-300 hover:shadow-md"
+      className="group cursor-move rounded-lg border border-border bg-white p-3 shadow-sm transition-all hover:border-input hover:shadow-md"
       draggable
       onDragStart={onDragStart}
       title={node.description}
@@ -95,8 +95,8 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
 
         {/* 라벨 및 설명 */}
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-gray-900">{node.label}</div>
-          <div className="mt-0.5 truncate text-xs text-gray-500">{node.description}</div>
+          <div className="text-sm font-medium text-foreground">{node.label}</div>
+          <div className="mt-0.5 truncate text-xs text-muted-foreground">{node.description}</div>
         </div>
       </div>