49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { StatusType } from "./types";
|
||
|
|
|
||
|
|
interface StatusCounts {
|
||
|
|
waitingCount: number;
|
||
|
|
pendingAcceptCount: number;
|
||
|
|
inProgressCount: number;
|
||
|
|
completedCount: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface PopStatusTabsProps {
|
||
|
|
currentStatus: StatusType;
|
||
|
|
counts: StatusCounts;
|
||
|
|
onStatusChange: (status: StatusType) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const STATUS_CONFIG: {
|
||
|
|
id: StatusType;
|
||
|
|
label: string;
|
||
|
|
detail: string;
|
||
|
|
countKey: keyof StatusCounts;
|
||
|
|
}[] = [
|
||
|
|
{ id: "waiting", label: "대기", detail: "내 공정 이전", countKey: "waitingCount" },
|
||
|
|
{ id: "pending-accept", label: "접수대기", detail: "내 차례", countKey: "pendingAcceptCount" },
|
||
|
|
{ id: "in-progress", label: "진행", detail: "작업중", countKey: "inProgressCount" },
|
||
|
|
{ id: "completed", label: "완료", detail: "처리완료", countKey: "completedCount" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function PopStatusTabs({ currentStatus, counts, onStatusChange }: PopStatusTabsProps) {
|
||
|
|
return (
|
||
|
|
<div className="pop-status-tabs">
|
||
|
|
{STATUS_CONFIG.map((status) => (
|
||
|
|
<div
|
||
|
|
key={status.id}
|
||
|
|
className={`pop-status-tab ${currentStatus === status.id ? "active" : ""}`}
|
||
|
|
onClick={() => onStatusChange(status.id)}
|
||
|
|
>
|
||
|
|
<span className="pop-status-tab-label">{status.label}</span>
|
||
|
|
<span className="pop-status-tab-count">{counts[status.countKey]}</span>
|
||
|
|
<span className="pop-status-tab-detail">{status.detail}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|