카테고리 기능 구현

frontend/components/screen/widgets/CategoryWidget.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React, { useState } from "react";
+import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
+
+interface CategoryWidgetProps {
+  widgetId: string;
+  menuId?: number; // 현재 화면의 menuId (선택사항)
+  tableName: string; // 현재 화면의 테이블
+  selectedScreen?: any; // 화면 정보 전체 (menuId 추출용)
+}
+
+/**
+ * 카테고리 관리 위젯 (좌우 분할)
+ * - 좌측: 현재 테이블의 카테고리 타입 컬럼 목록
+ * - 우측: 선택된 컬럼의 카테고리 값 관리
+ */
+export function CategoryWidget({
+  widgetId,
+  menuId: propMenuId,
+  tableName,
+  selectedScreen,
+}: CategoryWidgetProps) {
+  const [selectedColumn, setSelectedColumn] = useState<{
+    columnName: string;
+    columnLabel: string;
+  } | null>(null);
+
+  // menuId 추출: props > selectedScreen > 기본값(1)
+  const menuId =
+    propMenuId ||
+    selectedScreen?.menuId ||
+    selectedScreen?.menu_id ||
+    1; // 기본값
+
+  // menuId가 없으면 경고 메시지 표시
+  if (!menuId || menuId === 1) {
+    console.warn("⚠️ CategoryWidget: menuId가 제공되지 않아 기본값(1)을 사용합니다", {
+      propMenuId,
+      selectedScreen,
+    });
+  }
+
+  return (
+    <div className="flex h-full min-h-[10px] gap-6">
+      {/* 좌측: 카테고리 컬럼 리스트 (30%) */}
+      <div className="w-[30%] border-r pr-6">
+        <CategoryColumnList
+          tableName={tableName}
+          menuId={menuId}
+          selectedColumn={selectedColumn?.columnName || null}
+          onColumnSelect={(columnName, columnLabel) =>
+            setSelectedColumn({ columnName, columnLabel })
+          }
+        />
+      </div>
+
+      {/* 우측: 카테고리 값 관리 (70%) */}
+      <div className="w-[70%]">
+        {selectedColumn ? (
+          <CategoryValueManager
+            tableName={tableName}
+            columnName={selectedColumn.columnName}
+            columnLabel={selectedColumn.columnLabel}
+            menuId={menuId}
+          />
+        ) : (
+          <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
+            <div className="flex flex-col items-center gap-2 text-center">
+              <p className="text-sm text-muted-foreground">
+                좌측에서 관리할 카테고리 컬럼을 선택하세요
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

frontend/components/screen/widgets/types/ButtonWidget.tsx

@@ -30,7 +30,7 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       type="button"
       onClick={handleClick}
       disabled={disabled || readonly}
-      className={`rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${className || ""} `}
+      className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${className || ""} `}
       style={{
         ...style,
         width: "100%",