feat: [worker-screen] 사이드바 대기/완료 탭 분리 (기본: 대기만 표시)

This commit is contained in:
김보곤
2026-03-22 12:44:30 +09:00
parent a1c32edb6e
commit 67ffdc2f5b

View File

@@ -1780,6 +1780,7 @@ function SidebarContent({
apiOrders,
}: SidebarContentProps) {
const [sidebarTab, setSidebarTab] = useState<'orders' | 'wip'>('orders');
const [showCompleted, setShowCompleted] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
// 수주목록 / 재공품 분리
@@ -1790,15 +1791,23 @@ function SidebarContent({
apiOrders.filter((o) => o.subType === 'wip'),
[apiOrders]);
// 완료/미완료 필터링
const pendingRegular = useMemo(() => regularOrders.filter(o => o.status !== 'completed'), [regularOrders]);
const completedRegular = useMemo(() => regularOrders.filter(o => o.status === 'completed'), [regularOrders]);
const pendingWip = useMemo(() => wipOrders.filter(o => o.status !== 'completed'), [wipOrders]);
const completedWip = useMemo(() => wipOrders.filter(o => o.status === 'completed'), [wipOrders]);
// 검색 필터링
const displayOrders = useMemo(() => {
const source = sidebarTab === 'orders' ? regularOrders : wipOrders;
if (!searchTerm.trim()) return source;
const baseOrders = sidebarTab === 'orders'
? (showCompleted ? completedRegular : pendingRegular)
: (showCompleted ? completedWip : pendingWip);
if (!searchTerm.trim()) return baseOrders;
const q = searchTerm.toLowerCase();
return source.filter((o) =>
return baseOrders.filter((o) =>
o.siteName.toLowerCase().includes(q) || o.date.includes(q)
);
}, [sidebarTab, regularOrders, wipOrders, searchTerm]);
}, [sidebarTab, showCompleted, pendingRegular, completedRegular, pendingWip, completedWip, searchTerm]);
const renderOrders = (orders: SidebarOrder[]) => (
<>
@@ -1861,7 +1870,7 @@ function SidebarContent({
<div className="flex border-b">
<button
type="button"
onClick={() => { setSidebarTab('orders'); setSearchTerm(''); }}
onClick={() => { setSidebarTab('orders'); setShowCompleted(false); setSearchTerm(''); }}
className={cn(
'flex-1 text-sm font-medium py-2 border-b-2 transition-colors',
sidebarTab === 'orders'
@@ -1869,11 +1878,11 @@ function SidebarContent({
: 'border-transparent text-gray-500 hover:text-gray-700'
)}
>
({regularOrders.length})
({pendingRegular.length})
</button>
<button
type="button"
onClick={() => { setSidebarTab('wip'); setSearchTerm(''); }}
onClick={() => { setSidebarTab('wip'); setShowCompleted(false); setSearchTerm(''); }}
className={cn(
'flex-1 text-sm font-medium py-2 border-b-2 transition-colors',
sidebarTab === 'wip'
@@ -1881,7 +1890,31 @@ function SidebarContent({
: 'border-transparent text-gray-500 hover:text-gray-700'
)}
>
({wipOrders.length})
({pendingWip.length})
</button>
</div>
{/* 대기/완료 토글 */}
<div className="flex gap-1 px-1">
<button
type="button"
onClick={() => setShowCompleted(false)}
className={cn(
'flex-1 text-xs font-medium py-1.5 rounded-md transition-colors',
!showCompleted ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
)}
>
({sidebarTab === 'orders' ? pendingRegular.length : pendingWip.length})
</button>
<button
type="button"
onClick={() => setShowCompleted(true)}
className={cn(
'flex-1 text-xs font-medium py-1.5 rounded-md transition-colors',
showCompleted ? 'bg-gray-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
)}
>
({sidebarTab === 'orders' ? completedRegular.length : completedWip.length})
</button>
</div>