58 lines
1.9 KiB
TypeScript
58 lines
1.9 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;
|
|
tableName: string; // 현재 화면의 테이블
|
|
}
|
|
|
|
/**
|
|
* 카테고리 관리 위젯 (좌우 분할)
|
|
* - 좌측: 현재 테이블의 카테고리 타입 컬럼 목록
|
|
* - 우측: 선택된 컬럼의 카테고리 값 관리 (테이블 스코프)
|
|
*/
|
|
export function CategoryWidget({ widgetId, tableName }: CategoryWidgetProps) {
|
|
const [selectedColumn, setSelectedColumn] = useState<{
|
|
columnName: string;
|
|
columnLabel: string;
|
|
} | null>(null);
|
|
|
|
return (
|
|
<div className="flex h-full min-h-[10px] gap-6">
|
|
{/* 좌측: 카테고리 컬럼 리스트 (15%) */}
|
|
<div className="w-[15%] border-r pr-6">
|
|
<CategoryColumnList
|
|
tableName={tableName}
|
|
selectedColumn={selectedColumn?.columnName || null}
|
|
onColumnSelect={(columnName, columnLabel) =>
|
|
setSelectedColumn({ columnName, columnLabel })
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* 우측: 카테고리 값 관리 (85%) */}
|
|
<div className="w-[85%]">
|
|
{selectedColumn ? (
|
|
<CategoryValueManager
|
|
tableName={tableName}
|
|
columnName={selectedColumn.columnName}
|
|
columnLabel={selectedColumn.columnLabel}
|
|
/>
|
|
) : (
|
|
<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>
|
|
);
|
|
}
|
|
|