105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { useSearchParams, useRouter } from "next/navigation";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Link2, Layers, Filter, FormInput, Ban } from "lucide-react";
|
|
|
|
// 탭별 컴포넌트
|
|
import CascadingRelationsTab from "./tabs/CascadingRelationsTab";
|
|
import AutoFillTab from "./tabs/AutoFillTab";
|
|
import HierarchyTab from "./tabs/HierarchyTab";
|
|
import ConditionTab from "./tabs/ConditionTab";
|
|
import MutualExclusionTab from "./tabs/MutualExclusionTab";
|
|
|
|
export default function CascadingManagementPage() {
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const [activeTab, setActiveTab] = useState("relations");
|
|
|
|
// URL 쿼리 파라미터에서 탭 설정
|
|
useEffect(() => {
|
|
const tab = searchParams.get("tab");
|
|
if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion"].includes(tab)) {
|
|
setActiveTab(tab);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
// 탭 변경 시 URL 업데이트
|
|
const handleTabChange = (value: string) => {
|
|
setActiveTab(value);
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("tab", value);
|
|
router.replace(url.pathname + url.search);
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background">
|
|
<div className="space-y-6 p-6">
|
|
{/* 페이지 헤더 */}
|
|
<div className="space-y-2 border-b pb-4">
|
|
<h1 className="text-3xl font-bold tracking-tight">연쇄 드롭다운 통합 관리</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
연쇄 드롭다운, 자동 입력, 다단계 계층, 조건부 필터 등을 관리합니다.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 탭 네비게이션 */}
|
|
<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
|
|
<TabsList className="grid w-full grid-cols-5">
|
|
<TabsTrigger value="relations" className="gap-2">
|
|
<Link2 className="h-4 w-4" />
|
|
<span className="hidden sm:inline">2단계 연쇄관계</span>
|
|
<span className="sm:hidden">연쇄</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="hierarchy" className="gap-2">
|
|
<Layers className="h-4 w-4" />
|
|
<span className="hidden sm:inline">다단계 계층</span>
|
|
<span className="sm:hidden">계층</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="condition" className="gap-2">
|
|
<Filter className="h-4 w-4" />
|
|
<span className="hidden sm:inline">조건부 필터</span>
|
|
<span className="sm:hidden">조건</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="autofill" className="gap-2">
|
|
<FormInput className="h-4 w-4" />
|
|
<span className="hidden sm:inline">자동 입력</span>
|
|
<span className="sm:hidden">자동</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="exclusion" className="gap-2">
|
|
<Ban className="h-4 w-4" />
|
|
<span className="hidden sm:inline">상호 배제</span>
|
|
<span className="sm:hidden">배제</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 탭 컨텐츠 */}
|
|
<div className="mt-6">
|
|
<TabsContent value="relations">
|
|
<CascadingRelationsTab />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="hierarchy">
|
|
<HierarchyTab />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="condition">
|
|
<ConditionTab />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="autofill">
|
|
<AutoFillTab />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="exclusion">
|
|
<MutualExclusionTab />
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|