chpark/pipeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 작업상세 헤더+사이드바 글자 위계 조정 (산업현장 1m 거리 기준)

Browse Source 
옵션 B 적용 — 메인 본문은 그대로, 헤더와 사이드바만 한 단계 위계 업그레이드

상단 헤더:
- 라벨 (작업지시/품목/공정/지시): 12px → 14px
- 값 (CODE-00003 등): 14px → 16px
- 접수 수량 (가장 중요): 14px → 18px
- 상태/재작업 배지: 12px → 13px

사이드바:
- Phase 라벨 (작업 전/중/후, 실적, 입고): 12px → 16px
- Phase 카운터: 12px → 13px
- 그룹 항목 (베셀 상태 확인 등): 12px → 14px
- 그룹 카운터: 12px → 13px
- 섹션 (자재 투입/실적 입력/재고 입고): 12px → 14px

메인 영역(Timer/Quantity/Register)은 위계가 이미 잘 잡혀있어 변경 없음
This commit is contained in:
SeongHyun Kim
2026-04-08 12:21:34 +09:00
parent cdea6297e7
commit 0d62af8c8b
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/pop/hardcoded/production/ProcessWork.tsx
+22 -22
View File
@@ -114,7 +114,7 @@ const PHASE_LABELS: Record<string, string> = { PRE: "작업 전", IN: "작업
const DESIGN = {
bg: { page: "#F5F5F5", card: "#FFFFFF", header: "#1a1a2e", infoBar: "#1a1a2e" },
sidebar: { width: 240 },
sidebar: { width: 280 },
timer: { fontSize: 48 },
button: { height: 60, touchMin: 48 },
input: { height: 52 },
@@ -933,34 +933,34 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
<div className="flex items-center gap-4 sm:gap-8 flex-1 min-w-0 overflow-x-auto">
{wiInfo && (
<div className="flex items-center gap-1.5 shrink-0">
<span className="text-white/40 text-xs">작업지시</span>
<span className="text-white font-medium text-sm">{wiInfo.work_instruction_no}</span>
<span className="text-white/40 text-sm">작업지시</span>
<span className="text-white font-medium text-base">{wiInfo.work_instruction_no}</span>
</div>
)}
{wiInfo && (
<div className="flex items-center gap-1.5 shrink-0">
<span className="text-white/40 text-xs">품목</span>
<span className="text-white font-medium text-sm">{wiInfo.item_name}</span>
<span className="text-white/40 text-sm">품목</span>
<span className="text-white font-medium text-base">{wiInfo.item_name}</span>
</div>
)}
<div className="flex items-center gap-1.5 shrink-0">
<span className="text-white/40 text-xs">공정</span>
<span className="text-white font-medium text-sm">
<span className="text-white/40 text-sm">공정</span>
<span className="text-white font-medium text-base">
{process.seq_no ? `${process.seq_no}. ` : ""}{process.process_name || "공정"}
</span>
</div>
<div className="flex items-center gap-1.5 shrink-0">
<span className="text-white/40 text-xs">지시</span>
<span className="text-white font-medium text-sm">{parseInt(process.plan_qty || "0", 10).toLocaleString()}</span>
<span className="text-white/40 text-sm">지시</span>
<span className="text-white font-medium text-base">{parseInt(process.plan_qty || "0", 10).toLocaleString()}</span>
</div>
<div className="flex items-center gap-1.5 shrink-0">
<span className="text-amber-400/80 text-xs">접수</span>
<span className="text-amber-300 font-bold text-sm">{inputQty.toLocaleString()}</span>
<span className="text-amber-400/80 text-sm">접수</span>
<span className="text-amber-300 font-bold text-lg">{inputQty.toLocaleString()}</span>
</div>
</div>
{/* Status badge */}
<span
className={`text-xs font-bold px-2.5 py-1 rounded-full shrink-0 ${
className={`text-[13px] font-bold px-2.5 py-1 rounded-full shrink-0 ${
isCompleted
? "bg-green-500/20 text-green-300"
: process.status === "in_progress"
@@ -971,7 +971,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
{isCompleted ? "완료" : process.status === "in_progress" ? "진행중" : process.status}
</span>
{process.is_rework === "Y" && (
<span className="text-xs font-bold px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-300 shrink-0">
<span className="text-[13px] font-bold px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-300 shrink-0">
재작업
</span>
)}
@@ -1010,10 +1010,10 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<span className="text-xs font-bold text-gray-400 uppercase tracking-wider">
<span className="text-base font-bold text-gray-400 uppercase tracking-wider">
{PHASE_LABELS[phase] || phase}
</span>
<span className={`ml-auto text-xs font-semibold ${allDone ? "text-green-500" : "text-gray-300"}`}>
<span className={`ml-auto text-[13px] font-semibold ${allDone ? "text-green-500" : "text-gray-300"}`}>
{phaseDone}/{phaseTotal}
</span>
</div>
@@ -1040,13 +1040,13 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
}`}
/>
<span
className={`text-xs truncate flex-1 ${
className={`text-sm truncate flex-1 ${
isSelected ? "font-semibold text-blue-700" : isDone ? "text-gray-400" : "text-gray-700"
}`}
>
{g.title}
</span>
<span className={`text-xs shrink-0 ${isDone ? "text-green-500" : "text-gray-300"}`}>
<span className={`text-[13px] shrink-0 ${isDone ? "text-green-500" : "text-gray-300"}`}>
{g.completed}/{g.total}
</span>
</button>
@@ -1072,7 +1072,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
}`}
>
<span className="text-sm">📦</span>
<span className={`text-xs ${activeSection === "material" ? "font-semibold text-blue-700" : "text-gray-600 font-medium"}`}>
<span className={`text-sm ${activeSection === "material" ? "font-semibold text-blue-700" : "text-gray-600 font-medium"}`}>
자재 투입
</span>
</button>}
@@ -1083,7 +1083,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V19.5a2.25 2.25 0 002.25 2.25h.75" />
</svg>
</div>
<span className="text-xs font-bold text-gray-400 uppercase tracking-wider">실적</span>
<span className="text-base font-bold text-gray-400 uppercase tracking-wider">실적</span>
</div>
<button
onClick={() => {
@@ -1102,7 +1102,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className={`text-xs ${activeSection === "result" ? "font-semibold text-blue-700" : "text-amber-700 font-medium"}`}>
<span className={`text-sm ${activeSection === "result" ? "font-semibold text-blue-700" : "text-amber-700 font-medium"}`}>
실적 입력
</span>
</button>
@@ -1118,7 +1118,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
</div>
<span className="text-xs font-bold text-gray-400 uppercase tracking-wider">입고</span>
<span className="text-base font-bold text-gray-400 uppercase tracking-wider">입고</span>
</div>
<button
onClick={() => {
@@ -1137,7 +1137,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
>
<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
</svg>
<span className={`text-xs ${activeSection === "inventory" ? "font-semibold text-blue-700" : inboundDone ? "text-green-700 font-medium" : "text-amber-700 font-medium"}`}>
<span className={`text-sm ${activeSection === "inventory" ? "font-semibold text-blue-700" : inboundDone ? "text-green-700 font-medium" : "text-amber-700 font-medium"}`}>
재고 입고
</span>
{inboundDone && (