125 lines
4.7 KiB
TypeScript
125 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ListWidgetConfig } from "../../types";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
|
|
interface ListTableOptionsProps {
|
|
config: ListWidgetConfig;
|
|
onChange: (updates: Partial<ListWidgetConfig>) => void;
|
|
}
|
|
|
|
/**
|
|
* 리스트 테이블 옵션 설정 컴포넌트
|
|
* - 페이지 크기, 검색, 정렬 등 설정
|
|
*/
|
|
export function ListTableOptions({ config, onChange }: ListTableOptionsProps) {
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="mb-4">
|
|
<h3 className="text-lg font-semibold text-gray-800">테이블 옵션</h3>
|
|
<p className="text-sm text-gray-600">테이블 동작과 스타일을 설정하세요</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* 컬럼 모드 */}
|
|
<div>
|
|
<Label className="mb-2 block text-sm font-medium">컬럼 설정 방식</Label>
|
|
<RadioGroup
|
|
value={config.columnMode}
|
|
onValueChange={(value: "auto" | "manual") => onChange({ columnMode: value })}
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="auto" id="auto" />
|
|
<Label htmlFor="auto" className="cursor-pointer font-normal">
|
|
자동 (쿼리 결과에서 선택)
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="manual" id="manual" />
|
|
<Label htmlFor="manual" className="cursor-pointer font-normal">
|
|
수동 (직접 추가 및 매핑)
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
{/* 페이지 크기 */}
|
|
<div>
|
|
<Label className="mb-2 block text-sm font-medium">페이지당 행 수</Label>
|
|
<Select value={String(config.pageSize)} onValueChange={(value) => onChange({ pageSize: parseInt(value) })}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="5">5개</SelectItem>
|
|
<SelectItem value="10">10개</SelectItem>
|
|
<SelectItem value="20">20개</SelectItem>
|
|
<SelectItem value="50">50개</SelectItem>
|
|
<SelectItem value="100">100개</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 기능 활성화 */}
|
|
<div className="space-y-3">
|
|
<Label className="text-sm font-medium">기능</Label>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="enablePagination"
|
|
checked={config.enablePagination}
|
|
onCheckedChange={(checked) => onChange({ enablePagination: checked as boolean })}
|
|
/>
|
|
<Label htmlFor="enablePagination" className="cursor-pointer font-normal">
|
|
페이지네이션
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 스타일 */}
|
|
<div className="space-y-3">
|
|
<Label className="text-sm font-medium">스타일</Label>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="showHeader"
|
|
checked={config.showHeader}
|
|
onCheckedChange={(checked) => onChange({ showHeader: checked as boolean })}
|
|
/>
|
|
<Label htmlFor="showHeader" className="cursor-pointer font-normal">
|
|
헤더 표시
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="stripedRows"
|
|
checked={config.stripedRows}
|
|
onCheckedChange={(checked) => onChange({ stripedRows: checked as boolean })}
|
|
/>
|
|
<Label htmlFor="stripedRows" className="cursor-pointer font-normal">
|
|
줄무늬 행
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="compactMode"
|
|
checked={config.compactMode}
|
|
onCheckedChange={(checked) => onChange({ compactMode: checked as boolean })}
|
|
/>
|
|
<Label htmlFor="compactMode" className="cursor-pointer font-normal">
|
|
압축 모드 (작은 크기)
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|