분할 패널 및 반복 필드 그룹 컴포넌트

frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx

@@ -10,7 +10,9 @@ import { NODE_CATEGORIES, getNodesByCategory } from "./nodePaletteConfig";
 import type { NodePaletteItem } from "@/types/node-editor";
 
 export function NodePalette() {
-  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(["source", "transform", "action"]));
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+    new Set(["source", "transform", "action", "utility"]),
+  );
 
   const toggleCategory = (categoryId: string) => {
     setExpandedCategories((prev) => {
@@ -25,7 +27,7 @@ export function NodePalette() {
   };
 
   return (
-    <div className="flex h-full flex-col">
+    <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>
@@ -46,7 +48,6 @@ export function NodePalette() {
                 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"
               >
                 {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-                <span>{category.icon}</span>
                 <span>{category.label}</span>
                 <span className="ml-auto text-xs text-gray-400">{nodes.length}</span>
               </button>
@@ -89,13 +90,8 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
       title={node.description}
     >
       <div className="flex items-start gap-2">
-        {/* 아이콘 */}
-        <div
-          className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded text-lg"
-          style={{ backgroundColor: `${node.color}20` }}
-        >
-          {node.icon}
-        </div>
+        {/* 색상 인디케이터 (좌측) */}
+        <div className="h-8 w-1 flex-shrink-0 rounded" style={{ backgroundColor: node.color }} />
 
         {/* 라벨 및 설명 */}
         <div className="min-w-0 flex-1">
@@ -104,7 +100,7 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
         </div>
       </div>
 
-      {/* 색상 인디케이터 */}
+      {/* 하단 색상 인디케이터 (hover 시) */}
       <div
         className="mt-2 h-1 w-full rounded-full opacity-0 transition-opacity group-hover:opacity-100"
         style={{ backgroundColor: node.color }}