1 files changed, 116 insertions, 0 deletions
diff --git a/components/vendor-data/project-swicher.tsx b/components/vendor-data/project-swicher.tsx
new file mode 100644
index 00000000..609de5cc
--- /dev/null
+++ b/components/vendor-data/project-swicher.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface ContractInfo {
+  contractId: number
+  contractName: string
+}
+
+interface ProjectInfo {
+  projectId: number
+  projectCode: string
+  projectName: string
+  contracts: ContractInfo[]
+}
+
+interface ProjectSwitcherProps {
+  isCollapsed: boolean
+  projects: ProjectInfo[]
+
+  // 상위가 관리하는 "현재 선택된 contractId"
+  selectedContractId: number | null
+
+  // 콜백: 사용자가 "어떤 contract"를 골랐는지
+  //   => 우리가 projectId도 찾아서 상위 state를 같이 갱신해야 함
+  onSelectContract: (projectId: number, contractId: number) => void
+}
+
+export function ProjectSwitcher({
+  isCollapsed,
+  projects,
+  selectedContractId,
+  onSelectContract,
+}: ProjectSwitcherProps) {
+  // Select value = stringified contractId
+  const selectValue = selectedContractId ? String(selectedContractId) : ""
+
+  // 현재 선택된 contract 객체 찾기
+  const selectedContract = React.useMemo(() => {
+    if (!selectedContractId) return null
+    for (const proj of projects) {
+      const found = proj.contracts.find((c) => c.contractId === selectedContractId)
+      if (found) {
+        return { ...found, projectId: proj.projectId }
+      }
+    }
+    return null
+  }, [projects, selectedContractId])
+
+  // 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 = ""
+
+    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)
+  }
+
+  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>
+
+      <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>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+\ No newline at end of file