다국어 지원 및 테이블 설정 현황 문서를 업데이트하고, 컴포넌트 패널에서 UI 개선을 통해 사용자 경험을 향상시켰습니다. 또한, 통합 패널의 너비를 조정하고, 패널 토글 기능을 추가하여 인터페이스의 유연성을 높였습니다.

frontend/components/screen/panels/ComponentsPanel.tsx

@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
 import { ComponentDefinition, ComponentCategory } from "@/types/component";
-import { Search, Package, Grid, Layers, Palette, Zap, MousePointer, Database } from "lucide-react";
+import { Search, Package, Grid, Layers, Palette, Zap, MousePointer, Database, GripVertical } from "lucide-react";
 import { TableInfo, ColumnInfo } from "@/types/screen";
 import TablesPanel from "./TablesPanel";
 
@@ -72,8 +72,8 @@ export function ComponentsPanel({
         // unified-hierarchy 제거 - 현재 미사용
         {
           id: "unified-repeater",
-          name: "통합 반복 데이터",
-          description: "반복 데이터 관리 (인라인/모달/버튼 모드)",
+          name: "리피터 그리드",
+          description: "행 단위로 데이터를 추가/수정/삭제",
           category: "data" as ComponentCategory,
           tags: ["repeater", "table", "modal", "button", "unified"],
           defaultSize: { width: 600, height: 300 },
@@ -188,7 +188,25 @@ export function ComponentsPanel({
     e.dataTransfer.effectAllowed = "copy";
   };
 
-  // 컴포넌트 카드 렌더링 함수
+  // 카테고리별 배경색 매핑
+  const getCategoryColor = (category: string) => {
+    switch (category) {
+      case "data":
+        return "from-blue-500/10 to-blue-600/10 text-blue-600 group-hover:from-blue-500/20 group-hover:to-blue-600/20";
+      case "display":
+        return "from-emerald-500/10 to-emerald-600/10 text-emerald-600 group-hover:from-emerald-500/20 group-hover:to-emerald-600/20";
+      case "input":
+        return "from-violet-500/10 to-violet-600/10 text-violet-600 group-hover:from-violet-500/20 group-hover:to-violet-600/20";
+      case "layout":
+        return "from-amber-500/10 to-amber-600/10 text-amber-600 group-hover:from-amber-500/20 group-hover:to-amber-600/20";
+      case "action":
+        return "from-rose-500/10 to-rose-600/10 text-rose-600 group-hover:from-rose-500/20 group-hover:to-rose-600/20";
+      default:
+        return "from-slate-500/10 to-slate-600/10 text-slate-600 group-hover:from-slate-500/20 group-hover:to-slate-600/20";
+    }
+  };
+
+  // 컴포넌트 카드 렌더링 함수 (컴팩트 버전)
   const renderComponentCard = (component: ComponentDefinition) => (
     <div
       key={component.id}
@@ -202,21 +220,27 @@ export function ComponentsPanel({
         e.currentTarget.style.opacity = "1";
         e.currentTarget.style.transform = "none";
       }}
-      className="group bg-card hover:border-primary/50 cursor-grab rounded-lg border p-3 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:scale-[0.98] active:cursor-grabbing"
+      className="group bg-card hover:border-primary/40 cursor-grab rounded-lg border px-3 py-2.5 transition-all duration-200 hover:shadow-sm active:scale-[0.98] active:cursor-grabbing"
     >
-      <div className="flex items-start gap-3">
-        <div className="bg-primary/10 text-primary group-hover:bg-primary/20 flex h-10 w-10 items-center justify-center rounded-md transition-all duration-200">
+      <div className="flex items-center gap-2.5">
+        <div
+          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-gradient-to-br transition-all duration-200 ${getCategoryColor(component.category)}`}
+        >
           {getCategoryIcon(component.category)}
         </div>
         <div className="min-w-0 flex-1">
-          <h4 className="mb-1 text-xs leading-tight font-semibold">{component.name}</h4>
-          <p className="text-muted-foreground mb-1.5 line-clamp-2 text-xs leading-relaxed">{component.description}</p>
-          <div className="flex items-center">
-            <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium">
+          <span className="text-foreground block truncate text-xs font-medium">{component.name}</span>
+          <div className="flex items-center gap-2">
+            <span className="text-muted-foreground text-[10px] capitalize">{component.category}</span>
+            <span className="text-muted-foreground/60 text-[10px]">|</span>
+            <span className="text-muted-foreground text-[10px]">
               {component.defaultSize.width}×{component.defaultSize.height}
             </span>
           </div>
         </div>
+        <div className="text-muted-foreground/40 group-hover:text-muted-foreground/60 transition-colors">
+          <GripVertical className="h-3.5 w-3.5" />
+        </div>
       </div>
     </div>
   );
@@ -275,13 +299,13 @@ export function ComponentsPanel({
 
         {/* 테이블 컬럼 탭 */}
         <TabsContent value="tables" className="mt-0 flex-1 overflow-y-auto">
-            <TablesPanel
-              tables={tables}
-              searchTerm={searchTerm}
-              onSearchChange={onSearchChange || (() => {})}
+          <TablesPanel
+            tables={tables}
+            searchTerm={searchTerm}
+            onSearchChange={onSearchChange || (() => {})}
             onDragStart={onTableDragStart || (() => {})}
-              selectedTableName={selectedTableName}
-              placedColumns={placedColumns}
+            selectedTableName={selectedTableName}
+            placedColumns={placedColumns}
             onTableSelect={onTableSelect}
             showTableSelector={showTableSelector}
           />