File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import { useState } from 'react'
import type { Org } from '../api/client'
import StatusBadge from './StatusBadge'
interface Props {
orgs: Org[]
selectedId: number | null
onSelect: (id: number) => void
}
export default function OrgList({ orgs, selectedId, onSelect }: Props) {
const [keyword, setKeyword] = useState('')
const visible = orgs.filter((org) => org.orgName.includes(keyword))
return (
<div className="flex h-full flex-col overflow-hidden">
<div className="border-b border-gray-200 p-3">
<input
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
placeholder="기관명 검색"
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
</div>
<ul className="flex-1 overflow-y-auto">
{visible.map((org) => (
<li key={org.id}>
<button
type="button"
onClick={() => onSelect(org.id)}
className={`flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-50 ${
selectedId === org.id ? 'bg-blue-50' : ''
}`}
>
<span className="w-9 shrink-0 text-xs text-gray-500">{org.orgNo}</span>
<span className="flex-1 truncate text-sm">{org.orgName}</span>
<StatusBadge status={org.status} />
</button>
</li>
))}
</ul>
</div>
)
}