kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

카테고리

This commit is contained in:
kjs 2025-11-05 18:09:16 +09:00
parent bc029d1df8
commit ad46249c8b
1 changed files with 17 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/components/table-category/CategoryColumnList.tsx
View File

@ -20,11 +20,7 @@ interface CategoryColumnListProps {
* 카테고리 컬럼 목록 (좌측 패널)
* - 현재 테이블에서 input_type='category'인 컬럼들을 표시 (테이블 스코프)
*/
export function CategoryColumnList({
tableName,
selectedColumn,
onColumnSelect,
}: CategoryColumnListProps) {
export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect }: CategoryColumnListProps) {
const [columns, setColumns] = useState<CategoryColumn[]>([]);
const [isLoading, setIsLoading] = useState(false);
@ -36,9 +32,7 @@ export function CategoryColumnList({
setIsLoading(true);
try {
// table_type_columns에서 input_type = 'category'인 컬럼 조회
const response = await apiClient.get(
`/table-management/tables/${tableName}/columns`
);
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
console.log("🔍 테이블 컬럼 API 응답:", {
tableName,
@ -49,7 +43,7 @@ export function CategoryColumnList({
// API 응답 구조 파싱 (여러 가능성 대응)
let allColumns: any[] = [];
if (Array.isArray(response.data)) {
// response.data가 직접 배열인 경우
allColumns = response.data;
@ -74,7 +68,7 @@ export function CategoryColumnList({
// category 타입만 필터링
const categoryColumns = allColumns.filter(
(col: any) => col.inputType === "category" || col.input_type === "category"
(col: any) => col.inputType === "category" || col.input_type === "category",
);
console.log("✅ 카테고리 컬럼:", {
@ -90,7 +84,7 @@ export function CategoryColumnList({
columnName: col.columnName || col.column_name,
columnLabel: col.columnLabel || col.column_label || col.displayName || col.columnName || col.column_name,
inputType: col.inputType || col.input_type,
}))
})),
);
// 첫 번째 컬럼 자동 선택
@ -111,7 +105,7 @@ export function CategoryColumnList({
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
<Loader2 className="h-6 w-6 animate-spin text-primary" />
<Loader2 className="text-primary h-6 w-6 animate-spin" />
</div>
);
}
@ -120,14 +114,11 @@ export function CategoryColumnList({
return (
<div className="space-y-3">
<h3 className="text-lg font-semibold">카테고리 컬럼</h3>
<div className="rounded-lg border bg-muted/50 p-6 text-center">
<FolderTree className="mx-auto h-8 w-8 text-muted-foreground" />
<p className="mt-2 text-sm text-muted-foreground">
카테고리 타입 컬럼이 없습니다
</p>
<p className="mt-1 text-xs text-muted-foreground">
테이블 타입 관리에서 컬럼의 입력 타입을 &apos;카테고리&apos;로
설정하세요
<div className="bg-muted/50 rounded-lg border p-6 text-center">
<FolderTree className="text-muted-foreground mx-auto h-8 w-8" />
<p className="text-muted-foreground mt-2 text-sm">카테고리 타입 컬럼이 없습니다</p>
<p className="text-muted-foreground mt-1 text-xs">
테이블 타입 관리에서 컬럼의 입력 타입을 &apos;카테고리&apos;로 설정하세요
</p>
</div>
</div>
@ -138,42 +129,25 @@ export function CategoryColumnList({
<div className="space-y-3">
<div className="space-y-1">
<h3 className="text-lg font-semibold">카테고리 컬럼</h3>
<p className="text-xs text-muted-foreground">
관리할 카테고리 컬럼을 선택하세요
</p>
<p className="text-muted-foreground text-xs">관리할 카테고리 컬럼을 선택하세요</p>
</div>
<div className="space-y-2">
{columns.map((column) => (
<div
key={column.columnName}
onClick={() =>
onColumnSelect(
column.columnName,
column.columnLabel || column.columnName
)
}
onClick={() => onColumnSelect(column.columnName, column.columnLabel || column.columnName)}
className={`cursor-pointer rounded-lg border p-4 transition-all ${
selectedColumn === column.columnName
? "border-primary bg-primary/10 shadow-sm"
: "hover:bg-muted/50"
selectedColumn === column.columnName ? "border-primary bg-primary/10 shadow-sm" : "hover:bg-muted/50"
}`}
>
<div className="flex items-center gap-2">
<FolderTree
className={`h-4 w-4 ${
selectedColumn === column.columnName
? "text-primary"
: "text-muted-foreground"
}`}
className={`h-4 w-4 ${selectedColumn === column.columnName ? "text-primary" : "text-muted-foreground"}`}
/>
<div className="flex-1">
<h4 className="text-sm font-semibold">
{column.columnLabel || column.columnName}
</h4>
<p className="text-xs text-muted-foreground">
{column.columnName}
</p>
<h4 className="text-sm font-semibold">{column.columnLabel || column.columnName}</h4>
<p className="text-muted-foreground text-xs">{column.columnName}</p>
</div>
</div>
</div>
@ -182,4 +156,3 @@ export function CategoryColumnList({
</div>
);
}