193 lines
7.7 KiB
TypeScript
193 lines
7.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* V2 카테고리 관리 설정 패널 (토스식 리디자인)
|
||
|
|
* 토스식 단계별 UX: 뷰 모드 -> 트리 설정 -> 레이아웃(접힘)
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { useState } from "react";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
import { Switch } from "@/components/ui/switch";
|
||
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||
|
|
import { Settings, ChevronDown, FolderTree } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import type { V2CategoryManagerConfig, ViewMode } from "@/lib/registry/components/v2-category-manager/types";
|
||
|
|
import { defaultV2CategoryManagerConfig } from "@/lib/registry/components/v2-category-manager/types";
|
||
|
|
|
||
|
|
interface V2CategoryManagerConfigPanelProps {
|
||
|
|
config: Partial<V2CategoryManagerConfig>;
|
||
|
|
onChange: (config: Partial<V2CategoryManagerConfig>) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const V2CategoryManagerConfigPanel: React.FC<V2CategoryManagerConfigPanelProps> = ({
|
||
|
|
config: externalConfig,
|
||
|
|
onChange,
|
||
|
|
}) => {
|
||
|
|
const [layoutOpen, setLayoutOpen] = useState(false);
|
||
|
|
|
||
|
|
const config: V2CategoryManagerConfig = {
|
||
|
|
...defaultV2CategoryManagerConfig,
|
||
|
|
...externalConfig,
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleChange = <K extends keyof V2CategoryManagerConfig>(key: K, value: V2CategoryManagerConfig[K]) => {
|
||
|
|
onChange({ ...config, [key]: value });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* ─── 1단계: 뷰 모드 설정 ─── */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<FolderTree className="h-4 w-4 text-muted-foreground" />
|
||
|
|
<p className="text-sm font-medium">뷰 모드 설정</p>
|
||
|
|
</div>
|
||
|
|
<p className="text-[11px] text-muted-foreground">카테고리 표시 방식을 설정해요</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<span className="text-xs text-muted-foreground">기본 뷰 모드</span>
|
||
|
|
<Select
|
||
|
|
value={config.viewMode}
|
||
|
|
onValueChange={(value: ViewMode) => handleChange("viewMode", value)}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-7 w-[120px] text-xs">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="tree">트리 뷰</SelectItem>
|
||
|
|
<SelectItem value="list">목록 뷰</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm">뷰 모드 토글</p>
|
||
|
|
<p className="text-[11px] text-muted-foreground">트리/목록 전환 버튼을 표시해요</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
checked={config.showViewModeToggle}
|
||
|
|
onCheckedChange={(checked) => handleChange("showViewModeToggle", checked)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ─── 2단계: 트리 설정 ─── */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p className="text-sm font-medium">트리 설정</p>
|
||
|
|
<p className="text-[11px] text-muted-foreground">트리 뷰의 기본 동작을 설정해요</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<div>
|
||
|
|
<span className="text-xs text-muted-foreground">기본 펼침 단계</span>
|
||
|
|
<p className="text-[10px] text-muted-foreground mt-0.5">처음 로드 시 펼쳐지는 깊이</p>
|
||
|
|
</div>
|
||
|
|
<Select
|
||
|
|
value={String(config.defaultExpandLevel)}
|
||
|
|
onValueChange={(value) => handleChange("defaultExpandLevel", Number(value))}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-7 w-[120px] text-xs">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="1">1단계 (대분류만)</SelectItem>
|
||
|
|
<SelectItem value="2">2단계 (중분류까지)</SelectItem>
|
||
|
|
<SelectItem value="3">3단계 (전체 펼침)</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm">비활성 항목 표시</p>
|
||
|
|
<p className="text-[11px] text-muted-foreground">비활성화된 카테고리도 보여줘요</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
checked={config.showInactiveItems}
|
||
|
|
onCheckedChange={(checked) => handleChange("showInactiveItems", checked)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ─── 3단계: 레이아웃 (Collapsible) ─── */}
|
||
|
|
<Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
|
||
|
|
<CollapsibleTrigger asChild>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Settings className="h-4 w-4 text-muted-foreground" />
|
||
|
|
<span className="text-sm font-medium">레이아웃 설정</span>
|
||
|
|
</div>
|
||
|
|
<ChevronDown
|
||
|
|
className={cn(
|
||
|
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
||
|
|
layoutOpen && "rotate-180"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
</CollapsibleTrigger>
|
||
|
|
<CollapsibleContent>
|
||
|
|
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm">컬럼 목록 표시</p>
|
||
|
|
<p className="text-[11px] text-muted-foreground">좌측 카테고리 컬럼 목록 패널을 보여줘요</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
checked={config.showColumnList}
|
||
|
|
onCheckedChange={(checked) => handleChange("showColumnList", checked)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{config.showColumnList && (
|
||
|
|
<div className="ml-1 border-l-2 border-primary/20 pl-3">
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<div>
|
||
|
|
<span className="text-xs text-muted-foreground">좌측 패널 너비 (%)</span>
|
||
|
|
<p className="text-[10px] text-muted-foreground mt-0.5">10~40% 범위</p>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={10}
|
||
|
|
max={40}
|
||
|
|
value={config.leftPanelWidth}
|
||
|
|
onChange={(e) => handleChange("leftPanelWidth", Number(e.target.value))}
|
||
|
|
className="h-7 w-[80px] text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<div>
|
||
|
|
<span className="text-xs text-muted-foreground">높이</span>
|
||
|
|
<p className="text-[10px] text-muted-foreground mt-0.5">px 또는 % (예: 100%, 600)</p>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
value={String(config.height)}
|
||
|
|
onChange={(e) => {
|
||
|
|
const v = e.target.value;
|
||
|
|
handleChange("height", isNaN(Number(v)) ? v : Number(v));
|
||
|
|
}}
|
||
|
|
placeholder="100%"
|
||
|
|
className="h-7 w-[100px] text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CollapsibleContent>
|
||
|
|
</Collapsible>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
V2CategoryManagerConfigPanel.displayName = "V2CategoryManagerConfigPanel";
|
||
|
|
|
||
|
|
export default V2CategoryManagerConfigPanel;
|