From fbb3b7f05737f9571b04b0a8f4f15c0928de8545 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 7 Jul 2025 01:43:36 +0000
Subject: (대표님) 변경사항 20250707 10시 43분
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tech-vendor-possible-items-container.tsx       | 102 +++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 components/tech-vendor-possible-items/tech-vendor-possible-items-container.tsx

(limited to 'components/tech-vendor-possible-items')

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
-- 
cgit v1.2.3