From 7548e2ad6948f1c6aa102fcac408bc6c9c0f9796 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Wed, 27 Aug 2025 12:06:26 +0000
Subject: (대표님, 최겸) 기본계약, 입찰, 파일라우트, 계약서명라우트,
 인포메이션, 메뉴설정, PQ(메일템플릿 관련)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/vendor-data/project-swicher.tsx | 177 +++++++++++++++++++----------
 1 file changed, 116 insertions(+), 61 deletions(-)

(limited to 'components/vendor-data')

diff --git a/components/vendor-data/project-swicher.tsx b/components/vendor-data/project-swicher.tsx
index 609de5cc..d3123709 100644
--- a/components/vendor-data/project-swicher.tsx
+++ b/components/vendor-data/project-swicher.tsx
@@ -2,15 +2,21 @@
 
 import * as React from "react"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react"
 
 interface ContractInfo {
   contractId: number
@@ -27,13 +33,16 @@ interface ProjectInfo {
 interface ProjectSwitcherProps {
   isCollapsed: boolean
   projects: ProjectInfo[]
-
+  
   // 상위가 관리하는 "현재 선택된 contractId"
   selectedContractId: number | null
-
+  
   // 콜백: 사용자가 "어떤 contract"를 골랐는지
-  //   => 우리가 projectId도 찾아서 상위 state를 같이 갱신해야 함
+  // => 우리가 projectId도 찾아서 상위 state를 같이 갱신해야 함
   onSelectContract: (projectId: number, contractId: number) => void
+  
+  // 로딩 상태 (선택사항)
+  isLoading?: boolean
 }
 
 export function ProjectSwitcher({
@@ -41,9 +50,10 @@ export function ProjectSwitcher({
   projects,
   selectedContractId,
   onSelectContract,
+  isLoading = false,
 }: ProjectSwitcherProps) {
-  // Select value = stringified contractId
-  const selectValue = selectedContractId ? String(selectedContractId) : ""
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+  const [searchTerm, setSearchTerm] = React.useState("")
 
   // 현재 선택된 contract 객체 찾기
   const selectedContract = React.useMemo(() => {
@@ -51,7 +61,7 @@ export function ProjectSwitcher({
     for (const proj of projects) {
       const found = proj.contracts.find((c) => c.contractId === selectedContractId)
       if (found) {
-        return { ...found, projectId: proj.projectId }
+        return { ...found, projectId: proj.projectId, projectName: proj.projectName }
       }
     }
     return null
@@ -60,57 +70,102 @@ export function ProjectSwitcher({
   // Trigger label => 계약 이름 or placeholder
   const triggerLabel = selectedContract?.contractName ?? "Select a contract"
 
-  // onValueChange: val = String(contractId)
-  //   => 찾으면 projectId, contractId 모두 상위로 전달
-  function handleValueChange(val: string) {
-    const contractId = Number(val)
-    // Find which project has this contract
-    let foundProjectId = 0
-    let foundContractName = ""
+  // 검색어에 따른 필터링된 프로젝트/계약 목록
+  const filteredProjects = React.useMemo(() => {
+    if (!searchTerm) return projects
+    
+    return projects.map(project => ({
+      ...project,
+      contracts: project.contracts.filter(contract =>
+        contract.contractName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.projectName.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    })).filter(project => project.contracts.length > 0)
+  }, [projects, searchTerm])
 
-    for (const proj of projects) {
-      const found = proj.contracts.find((c) => c.contractId === contractId)
-      if (found) {
-        foundProjectId = proj.projectId
-        foundContractName = found.contractName
-        break
-      }
-    }
-    // 상위로 알림
-    onSelectContract(foundProjectId, contractId)
+  // 계약 선택 핸들러
+  function handleSelectContract(projectId: number, contractId: number) {
+    onSelectContract(projectId, contractId)
+    setPopoverOpen(false)
+    setSearchTerm("") // 검색어 초기화
   }
 
-  return (
-    <Select value={selectValue} onValueChange={handleValueChange}>
-      <SelectTrigger
-        className={cn(
-          "flex items-center gap-2",
-          isCollapsed && "flex h-9 w-9 shrink-0 items-center justify-center p-0"
-        )}
-        aria-label="Select Contract"
-      >
-        <SelectValue placeholder="Select a contract">
-          <span className={cn("ml-2", isCollapsed && "hidden")}>
-            {triggerLabel}
-          </span>
-        </SelectValue>
-      </SelectTrigger>
+  // 총 계약 수 계산 (빈 상태 표시용)
+  const totalContracts = filteredProjects.reduce((sum, project) => sum + project.contracts.length, 0)
 
-      <SelectContent>
-        {projects.map((project) => (
-          <SelectGroup key={project.projectCode}>
-            <SelectLabel>{project.projectName}</SelectLabel>
-            {project.contracts.map((contract) => (
-              <SelectItem
-                key={contract.contractId}
-                value={String(contract.contractId)}
-              >
-                {contract.contractName}
-              </SelectItem>
+  return (
+    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className={cn(
+            "justify-between relative",
+            isCollapsed ? "h-9 w-9 shrink-0 items-center justify-center p-0" : "w-full h-9"
+          )}
+          disabled={isLoading}
+          aria-label="Select Contract"
+        >
+          {isLoading ? (
+            <>
+              <span className={cn(isCollapsed && "hidden")}>Loading...</span>
+              <Loader2 className={cn("h-4 w-4 animate-spin", !isCollapsed && "ml-2")} />
+            </>
+          ) : (
+            <>
+              <span className={cn("truncate flex-grow text-left", isCollapsed && "hidden")}>
+                {triggerLabel}
+              </span>
+              <ChevronsUpDown className={cn("h-4 w-4 opacity-50 flex-shrink-0", isCollapsed && "hidden")} />
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      
+      <PopoverContent className="w-[320px] p-0" align="start">
+        <Command>
+          <CommandInput
+            placeholder="Search contracts..."
+            value={searchTerm}
+            onValueChange={setSearchTerm}
+          />
+          
+          <CommandList 
+            className="max-h-[320px]" 
+            onWheel={(e) => {
+              e.stopPropagation() // 이벤트 전파 차단
+              const target = e.currentTarget
+              target.scrollTop += e.deltaY // 직접 스크롤 처리
+            }}
+          >
+            <CommandEmpty>
+              {totalContracts === 0 ? "No contracts found." : "No search results."}
+            </CommandEmpty>
+            
+            {filteredProjects.map((project) => (
+              <CommandGroup key={project.projectCode} heading={project.projectName}>
+                {project.contracts.map((contract) => (
+                  <CommandItem
+                    key={contract.contractId}
+                    onSelect={() => handleSelectContract(project.projectId, contract.contractId)}
+                    value={`${project.projectName} ${contract.contractName}`}
+                    className="truncate"
+                    title={contract.contractName}
+                  >
+                    <span className="truncate">{contract.contractName}</span>
+                    <Check
+                      className={cn(
+                        "ml-auto h-4 w-4 flex-shrink-0",
+                        selectedContractId === contract.contractId ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
             ))}
-          </SelectGroup>
-        ))}
-      </SelectContent>
-    </Select>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   )
 }
\ No newline at end of file
-- 
cgit v1.2.3