82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|