diff options
Diffstat (limited to 'components/ProjectSelector.tsx')
| -rw-r--r-- | components/ProjectSelector.tsx | 50 |
1 files changed, 36 insertions, 14 deletions
diff --git a/components/ProjectSelector.tsx b/components/ProjectSelector.tsx index 652bf77b..773ab7dd 100644 --- a/components/ProjectSelector.tsx +++ b/components/ProjectSelector.tsx @@ -12,12 +12,14 @@ interface ProjectSelectorProps { selectedProjectId?: number | null; onProjectSelect: (project: Project) => void; placeholder?: string; + filterType?: string; // 옵션으로 필터 타입 지정 가능 } export function ProjectSelector({ selectedProjectId, onProjectSelect, - placeholder = "프로젝트 선택..." + placeholder = "프로젝트 선택...", + filterType = "ship" // 기본값을 plant로 설정 }: ProjectSelectorProps) { const [open, setOpen] = React.useState(false) const [searchTerm, setSearchTerm] = React.useState("") @@ -25,17 +27,24 @@ export function ProjectSelector({ const [isLoading, setIsLoading] = React.useState(false) const [selectedProject, setSelectedProject] = React.useState<Project | null>(null) - // 모든 프로젝트 데이터 로드 (한 번만) + // 모든 프로젝트 데이터 로드 후 plant 타입만 필터링 React.useEffect(() => { async function loadAllProjects() { setIsLoading(true); try { const allProjects = await getProjects(); - setProjects(allProjects); + + // filterType이 지정된 경우 해당 타입만 필터링 + const filteredByType = filterType + ? allProjects.filter(p => p.type === filterType) + : allProjects; + + console.log(`Loaded ${filteredByType.length} ${filterType || 'all'} projects`); + setProjects(filteredByType); // 초기 선택된 프로젝트가 있으면 설정 if (selectedProjectId) { - const selected = allProjects.find(p => p.id === selectedProjectId); + const selected = filteredByType.find(p => p.id === selectedProjectId); if (selected) { setSelectedProject(selected); } @@ -48,7 +57,7 @@ export function ProjectSelector({ } loadAllProjects(); - }, [selectedProjectId]); + }, [selectedProjectId, filterType]); // 클라이언트 측에서 검색어로 필터링 const filteredProjects = React.useMemo(() => { @@ -77,10 +86,15 @@ export function ProjectSelector({ role="combobox" aria-expanded={open} className="w-full justify-between" + disabled={isLoading} > - {selectedProject - ? `${selectedProject.projectCode} - ${selectedProject.projectName}` - : placeholder} + {isLoading ? ( + "프로젝트 로딩 중..." + ) : selectedProject ? ( + `${selectedProject.projectCode} - ${selectedProject.projectName}` + ) : ( + placeholder + )} <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> </Button> </PopoverTrigger> @@ -90,14 +104,22 @@ export function ProjectSelector({ placeholder="프로젝트 코드/이름 검색..." onValueChange={setSearchTerm} /> - <CommandList className="max-h-[300px]" onWheel={(e) => { - e.stopPropagation(); // 이벤트 전파 차단 - const target = e.currentTarget; - target.scrollTop += e.deltaY; // 직접 스크롤 처리 - }}> - <CommandEmpty>검색 결과가 없습니다</CommandEmpty> + <CommandList + className="max-h-[300px]" + onWheel={(e) => { + e.stopPropagation(); + const target = e.currentTarget; + target.scrollTop += e.deltaY; + }} + > {isLoading ? ( <div className="py-6 text-center text-sm">로딩 중...</div> + ) : filteredProjects.length === 0 ? ( + <CommandEmpty> + {searchTerm + ? "검색 결과가 없습니다" + : `${filterType || '해당 타입의'} 프로젝트가 없습니다`} + </CommandEmpty> ) : ( <CommandGroup> {filteredProjects.map((project) => ( |
