아코디언 컴포넌트 생성

frontend/components/screen/panels/ComponentsPanel.tsx

@@ -23,18 +23,21 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
     return ComponentRegistry.getAllComponents();
   }, []);
 
-  // 카테고리별 분류
+  // 카테고리별 분류 (input 카테고리 제외)
   const componentsByCategory = useMemo(() => {
+    // input 카테고리 컴포넌트들을 제외한 컴포넌트만 필터링
+    const filteredComponents = allComponents.filter((component) => component.category !== "input");
+
     const categories: Record<ComponentCategory | "all", ComponentDefinition[]> = {
-      all: allComponents,
-      input: [],
+      all: filteredComponents, // input 카테고리 제외된 컴포넌트들만 포함
+      input: [], // 빈 배열로 유지 (사용되지 않음)
       display: [],
       action: [],
       layout: [],
       utility: [],
     };
 
-    allComponents.forEach((component) => {
+    filteredComponents.forEach((component) => {
       if (categories[component.category]) {
         categories[component.category].push(component);
       }
@@ -104,7 +107,7 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
         <CardTitle className="flex items-center justify-between">
           <div className="flex items-center">
             <Package className="mr-2 h-5 w-5" />
-            컴포넌트 ({allComponents.length})
+            컴포넌트 ({componentsByCategory.all.length})
           </div>
           <Button variant="outline" size="sm" onClick={handleRefresh} title="컴포넌트 새로고침">
             <RotateCcw className="h-4 w-4" />
@@ -128,16 +131,12 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
           value={selectedCategory}
           onValueChange={(value) => setSelectedCategory(value as ComponentCategory | "all")}
         >
-          {/* 카테고리 탭 */}
-          <TabsList className="grid w-full grid-cols-3 lg:grid-cols-6">
+          {/* 카테고리 탭 (input 카테고리 제외) */}
+          <TabsList className="grid w-full grid-cols-3 lg:grid-cols-5">
             <TabsTrigger value="all" className="flex items-center">
               <Package className="mr-1 h-3 w-3" />
               전체
             </TabsTrigger>
-            <TabsTrigger value="input" className="flex items-center">
-              <Grid className="mr-1 h-3 w-3" />
-              입력
-            </TabsTrigger>
             <TabsTrigger value="display" className="flex items-center">
               <Palette className="mr-1 h-3 w-3" />
               표시