1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
"use client"
import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
import { cn } from "@/lib/utils"
import { getProjects, type Project } from "@/lib/rfqs/service"
interface ProjectSelectorProps {
selectedProjectId?: number | null;
onProjectSelect: (project: Project) => void;
placeholder?: string;
}
export function ProjectSelector({
selectedProjectId,
onProjectSelect,
placeholder = "프로젝트 선택..."
}: ProjectSelectorProps) {
const [open, setOpen] = React.useState(false)
const [searchTerm, setSearchTerm] = React.useState("")
const [projects, setProjects] = React.useState<Project[]>([])
const [isLoading, setIsLoading] = React.useState(false)
const [selectedProject, setSelectedProject] = React.useState<Project | null>(null)
// 모든 프로젝트 데이터 로드 (한 번만)
React.useEffect(() => {
async function loadAllProjects() {
setIsLoading(true);
try {
const allProjects = await getProjects();
setProjects(allProjects);
// 초기 선택된 프로젝트가 있으면 설정
if (selectedProjectId) {
const selected = allProjects.find(p => p.id === selectedProjectId);
if (selected) {
setSelectedProject(selected);
}
}
} catch (error) {
console.error("프로젝트 목록 로드 오류:", error);
} finally {
setIsLoading(false);
}
}
loadAllProjects();
}, [selectedProjectId]);
// 클라이언트 측에서 검색어로 필터링
const filteredProjects = React.useMemo(() => {
if (!searchTerm.trim()) return projects;
const lowerSearch = searchTerm.toLowerCase();
return projects.filter(
project =>
project.projectCode.toLowerCase().includes(lowerSearch) ||
project.projectName.toLowerCase().includes(lowerSearch)
);
}, [projects, searchTerm]);
// 프로젝트 선택 처리
const handleSelectProject = (project: Project) => {
setSelectedProject(project);
onProjectSelect(project);
setOpen(false);
};
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-full justify-between"
>
{selectedProject
? `${selectedProject.projectCode} - ${selectedProject.projectName}`
: placeholder}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput
placeholder="프로젝트 코드/이름 검색..."
onValueChange={setSearchTerm}
/>
<CommandList className="max-h-[300px]" onWheel={(e) => {
e.stopPropagation(); // 이벤트 전파 차단
const target = e.currentTarget;
target.scrollTop += e.deltaY; // 직접 스크롤 처리
}}>
<CommandEmpty>검색 결과가 없습니다</CommandEmpty>
{isLoading ? (
<div className="py-6 text-center text-sm">로딩 중...</div>
) : (
<CommandGroup>
{filteredProjects.map((project) => (
<CommandItem
key={project.id}
value={`${project.projectCode} ${project.projectName}`}
onSelect={() => handleSelectProject(project)}
>
<Check
className={cn(
"mr-2 h-4 w-4",
selectedProject?.id === project.id
? "opacity-100"
: "opacity-0"
)}
/>
<span className="font-medium">{project.projectCode}</span>
<span className="ml-2 text-gray-500 truncate">- {project.projectName}</span>
</CommandItem>
))}
</CommandGroup>
)}
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
|
