pop화면
This commit is contained in:
leeheejin
274
frontend/components/pop/PopWorkCard.tsx
Normal file
274
frontend/components/pop/PopWorkCard.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
"use client";
|
||||
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import { WorkOrder, Process, StatusType } from "./types";
|
||||
import { STATUS_TEXT } from "./data";
|
||||
|
||||
interface PopWorkCardProps {
|
||||
workOrder: WorkOrder;
|
||||
currentStatus: StatusType;
|
||||
selectedProcess: Process | null;
|
||||
onAccept: () => void;
|
||||
onCancelAccept: () => void;
|
||||
onStartProduction: () => void;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function PopWorkCard({
|
||||
workOrder,
|
||||
currentStatus,
|
||||
selectedProcess,
|
||||
onAccept,
|
||||
onCancelAccept,
|
||||
onStartProduction,
|
||||
onClick,
|
||||
}: PopWorkCardProps) {
|
||||
const chipsRef = useRef<HTMLDivElement>(null);
|
||||
const [showLeftBtn, setShowLeftBtn] = useState(false);
|
||||
const [showRightBtn, setShowRightBtn] = useState(false);
|
||||
|
||||
const progress = ((workOrder.producedQuantity / workOrder.orderQuantity) * 100).toFixed(1);
|
||||
const isReturnWork = workOrder.isReturn === true;
|
||||
|
||||
// 공정 스크롤 버튼 표시 여부 확인
|
||||
const checkScrollButtons = () => {
|
||||
const container = chipsRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const isScrollable = container.scrollWidth > container.clientWidth;
|
||||
if (isScrollable) {
|
||||
const scrollLeft = container.scrollLeft;
|
||||
const maxScroll = container.scrollWidth - container.clientWidth;
|
||||
setShowLeftBtn(scrollLeft > 5);
|
||||
setShowRightBtn(scrollLeft < maxScroll - 5);
|
||||
} else {
|
||||
setShowLeftBtn(false);
|
||||
setShowRightBtn(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 현재 공정으로 스크롤
|
||||
const scrollToCurrentProcess = () => {
|
||||
const container = chipsRef.current;
|
||||
if (!container || !workOrder.processFlow) return;
|
||||
|
||||
let targetIndex = -1;
|
||||
|
||||
// 내 공정 우선
|
||||
if (selectedProcess) {
|
||||
targetIndex = workOrder.processFlow.findIndex(
|
||||
(step) =>
|
||||
step.id === selectedProcess.id &&
|
||||
(step.status === "current" || step.status === "pending")
|
||||
);
|
||||
}
|
||||
|
||||
// 없으면 현재 진행 중인 공정
|
||||
if (targetIndex === -1) {
|
||||
targetIndex = workOrder.processFlow.findIndex((step) => step.status === "current");
|
||||
}
|
||||
|
||||
if (targetIndex === -1) return;
|
||||
|
||||
const chips = container.querySelectorAll(".pop-process-chip");
|
||||
if (chips.length > targetIndex) {
|
||||
const targetChip = chips[targetIndex] as HTMLElement;
|
||||
const scrollPos =
|
||||
targetChip.offsetLeft - container.clientWidth / 2 + targetChip.offsetWidth / 2;
|
||||
container.scrollLeft = Math.max(0, scrollPos);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToCurrentProcess();
|
||||
checkScrollButtons();
|
||||
|
||||
const container = chipsRef.current;
|
||||
if (container) {
|
||||
container.addEventListener("scroll", checkScrollButtons);
|
||||
return () => container.removeEventListener("scroll", checkScrollButtons);
|
||||
}
|
||||
}, [workOrder, selectedProcess]);
|
||||
|
||||
const handleScroll = (direction: "left" | "right", e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const container = chipsRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const scrollAmount = 150;
|
||||
container.scrollLeft += direction === "left" ? -scrollAmount : scrollAmount;
|
||||
setTimeout(checkScrollButtons, 100);
|
||||
};
|
||||
|
||||
// 상태 텍스트 결정
|
||||
const statusText =
|
||||
isReturnWork && currentStatus === "pending-accept" ? "리턴" : STATUS_TEXT[workOrder.status];
|
||||
const statusClass = isReturnWork ? "return" : workOrder.status;
|
||||
|
||||
// 완료된 공정 수
|
||||
const completedCount = workOrder.processFlow.filter((s) => s.status === "completed").length;
|
||||
const totalCount = workOrder.processFlow.length;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`pop-work-card ${isReturnWork ? "return-card" : ""}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="pop-work-card-header">
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)", flex: 1, flexWrap: "wrap" }}>
|
||||
<span className="pop-work-number">{workOrder.id}</span>
|
||||
{isReturnWork && <span className="pop-return-badge">리턴</span>}
|
||||
{workOrder.acceptedQuantity && workOrder.acceptedQuantity > 0 && workOrder.acceptedQuantity < workOrder.orderQuantity && (
|
||||
<span className="pop-partial-badge">
|
||||
{workOrder.acceptedQuantity}/{workOrder.orderQuantity} 접수
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`pop-work-status ${statusClass}`}>{statusText}</span>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
{currentStatus === "pending-accept" && (
|
||||
<div className="pop-work-card-actions">
|
||||
<button
|
||||
className="pop-btn pop-btn-sm pop-btn-primary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
접수
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{currentStatus === "in-progress" && (
|
||||
<div className="pop-work-card-actions">
|
||||
<button
|
||||
className="pop-btn pop-btn-sm pop-btn-ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCancelAccept();
|
||||
}}
|
||||
>
|
||||
접수취소
|
||||
</button>
|
||||
<button
|
||||
className="pop-btn pop-btn-sm pop-btn-success"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onStartProduction();
|
||||
}}
|
||||
>
|
||||
생산진행
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 리턴 정보 배너 */}
|
||||
{isReturnWork && currentStatus === "pending-accept" && (
|
||||
<div className="pop-return-banner">
|
||||
<span className="pop-return-banner-icon">🔄</span>
|
||||
<div>
|
||||
<div className="pop-return-banner-title">
|
||||
{workOrder.returnFromProcessName} 공정에서 리턴됨
|
||||
</div>
|
||||
<div className="pop-return-banner-reason">{workOrder.returnReason || "사유 없음"}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 바디 */}
|
||||
<div className="pop-work-card-body">
|
||||
<div className="pop-work-info-line">
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">품목</span>
|
||||
<span className="pop-work-info-value">{workOrder.itemName}</span>
|
||||
</div>
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">규격</span>
|
||||
<span className="pop-work-info-value">{workOrder.spec}</span>
|
||||
</div>
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">지시</span>
|
||||
<span className="pop-work-info-value">{workOrder.orderQuantity}</span>
|
||||
</div>
|
||||
<div className="pop-work-info-item">
|
||||
<span className="pop-work-info-label">납기</span>
|
||||
<span className="pop-work-info-value">{workOrder.dueDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 공정 타임라인 */}
|
||||
<div className="pop-process-timeline">
|
||||
<div className="pop-process-bar">
|
||||
<div className="pop-process-bar-header">
|
||||
<span className="pop-process-bar-label">공정 진행</span>
|
||||
<span className="pop-process-bar-count">
|
||||
<span>{completedCount}</span>/{totalCount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pop-process-segments">
|
||||
{workOrder.processFlow.map((step, index) => {
|
||||
let segmentClass = "";
|
||||
if (step.status === "completed") segmentClass = "done";
|
||||
else if (step.status === "current") segmentClass = "current";
|
||||
if (selectedProcess && step.id === selectedProcess.id) {
|
||||
segmentClass += " my-work";
|
||||
}
|
||||
return <div key={index} className={`pop-process-segment ${segmentClass}`} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pop-process-chips-container">
|
||||
<button
|
||||
className={`pop-process-scroll-btn left ${!showLeftBtn ? "hidden" : ""}`}
|
||||
onClick={(e) => handleScroll("left", e)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<div className="pop-process-chips" ref={chipsRef}>
|
||||
{workOrder.processFlow.map((step, index) => {
|
||||
let chipClass = "";
|
||||
if (step.status === "completed") chipClass = "done";
|
||||
else if (step.status === "current") chipClass = "current";
|
||||
if (selectedProcess && step.id === selectedProcess.id) {
|
||||
chipClass += " my-work";
|
||||
}
|
||||
return (
|
||||
<div key={index} className={`pop-process-chip ${chipClass}`}>
|
||||
<span className="pop-chip-num">{index + 1}</span>
|
||||
{step.name}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
className={`pop-process-scroll-btn right ${!showRightBtn ? "hidden" : ""}`}
|
||||
onClick={(e) => handleScroll("right", e)}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 진행률 바 */}
|
||||
{workOrder.status !== "completed" && (
|
||||
<div className="pop-work-progress">
|
||||
<div className="pop-progress-info">
|
||||
<span className="pop-progress-text">
|
||||
{workOrder.producedQuantity} / {workOrder.orderQuantity} EA
|
||||
</span>
|
||||
<span className="pop-progress-percent">{progress}%</span>
|
||||
</div>
|
||||
<div className="pop-progress-bar">
|
||||
<div className="pop-progress-fill" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user