diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-07-07 01:43:36 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-07-07 01:43:36 +0000 |
| commit | fbb3b7f05737f9571b04b0a8f4f15c0928de8545 (patch) | |
| tree | 343247117a7587b8ef5c418c9528d1cf2e0b6f1c /components/tech-vendor-possible-items | |
| parent | 9945ad119686a4c3a66f7b57782750f78a366cfb (diff) | |
(대표님) 변경사항 20250707 10시 43분
Diffstat (limited to 'components/tech-vendor-possible-items')
| -rw-r--r-- | components/tech-vendor-possible-items/tech-vendor-possible-items-container.tsx | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/components/tech-vendor-possible-items/tech-vendor-possible-items-container.tsx b/components/tech-vendor-possible-items/tech-vendor-possible-items-container.tsx new file mode 100644 index 00000000..90b28176 --- /dev/null +++ b/components/tech-vendor-possible-items/tech-vendor-possible-items-container.tsx @@ -0,0 +1,102 @@ +"use client"
+
+import * as React from "react"
+import { useRouter, usePathname, useSearchParams } from "next/navigation"
+import { ChevronDown } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface VendorType {
+ id: string;
+ name: string;
+ value: string;
+}
+
+interface TechVendorPossibleItemsContainerProps {
+ vendorTypes: VendorType[];
+ children: React.ReactNode;
+}
+
+export function TechVendorPossibleItemsContainer({
+ vendorTypes,
+ children,
+}: TechVendorPossibleItemsContainerProps) {
+ const router = useRouter();
+ const pathname = usePathname();
+ const searchParamsObj = useSearchParams();
+
+ // useSearchParams를 메모이제이션하여 안정적인 참조 생성
+ const searchParams = React.useMemo(
+ () => searchParamsObj || new URLSearchParams(),
+ [searchParamsObj]
+ );
+
+ // URL에서 현재 선택된 벤더 타입 가져오기
+ const vendorType = searchParams.get("vendorType") || "all";
+
+ // 선택한 벤더 타입에 해당하는 이름 찾기
+ const selectedVendor = vendorTypes.find((vendor) => vendor.id === vendorType)?.name || "전체";
+
+ // 벤더 타입 변경 핸들러
+ const handleVendorTypeChange = React.useCallback((value: string) => {
+ const params = new URLSearchParams(searchParams.toString());
+ if (value === "all") {
+ params.delete("vendorType");
+ } else {
+ params.set("vendorType", value);
+ }
+
+ router.push(`${pathname}?${params.toString()}`);
+ }, [router, pathname, searchParams]);
+
+
+
+ return (
+ <>
+ {/* 상단 영역: 제목 왼쪽 / 벤더 타입 선택기 오른쪽 */}
+ <div className="flex items-center justify-between">
+ {/* 왼쪽: 타이틀 & 설명 */}
+ <div>
+ <h2 className="text-2xl font-bold tracking-tight">기술영업 벤더 아이템 관리</h2>
+ <p className="text-muted-foreground">
+ 기술영업 벤더별 가능 아이템을 관리합니다.
+ </p>
+ </div>
+
+ {/* 오른쪽: 벤더 타입 드롭다운 */}
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button variant="outline" className="min-w-[150px]">
+ {selectedVendor}
+ <ChevronDown className="ml-2 h-4 w-4" />
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end" className="w-[200px]">
+ {vendorTypes.map((vendor) => (
+ <DropdownMenuItem
+ key={vendor.id}
+ onClick={() => handleVendorTypeChange(vendor.id)}
+ className={vendor.id === vendorType ? "bg-muted" : ""}
+ >
+ {vendor.name}
+ </DropdownMenuItem>
+ ))}
+ </DropdownMenuContent>
+ </DropdownMenu>
+ </div>
+
+ {/* 컨텐츠 영역 */}
+ <section className="overflow-hidden">
+ <div>
+ {children}
+ </div>
+ </section>
+ </>
+ );
+}
\ No newline at end of file |