kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

design: 체크리스트 버튼 우측 정렬 + 타이머 최상단 고정 및 크기 확대 

- ChecklistRowItem 우측 입력 영역을 justify-center → justify-end로 변경
- 리스트 모드에서 GroupTimerHeader를 스크롤 컨테이너 바깥(최상단)으로 이동
- 타이머 숫자 폰트 26px → 38px, 경과 시간 폰트 14px → 16px
- GroupTimerHeader의 sticky 제거 (외부 배치로 자연스럽게 상단 고정)
This commit is contained in:
SeongHyun Kim 2026-03-26 17:33:07 +09:00
parent 3249611cfc
commit a29691c31e
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
View File

@ -1202,15 +1202,8 @@ export function PopWorkDetailComponent({
</>
) : (
/* ======== 리스트 모드 ======== */
<div ref={contentRef} className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin' }}>
{/* KPI 카드 (콘텐츠와 함께 스크롤) */}
<KpiCards
inputQty={parseInt(processData?.input_qty ?? "0", 10) || 0}
completedQty={parseInt(processData?.total_production_qty ?? "0", 10) || 0}
defectQty={parseInt(processData?.defect_qty ?? "0", 10) || 0}
/>
{/* 그룹 헤더 + 타이머 (sticky) */}
<>
{/* 그룹 헤더 + 타이머 (콘텐츠 최상단 고정) */}
{selectedGroup && (
<GroupTimerHeader
group={selectedGroup}
@ -1224,6 +1217,13 @@ export function PopWorkDetailComponent({
onTimerAction={handleGroupTimerAction}
/>
)}
<div ref={contentRef} className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin' }}>
{/* KPI 카드 (콘텐츠와 함께 스크롤) */}
<KpiCards
inputQty={parseInt(processData?.input_qty ?? "0", 10) || 0}
completedQty={parseInt(processData?.total_production_qty ?? "0", 10) || 0}
defectQty={parseInt(processData?.defect_qty ?? "0", 10) || 0}
/>
{/* 체크리스트 콘텐츠 */}
<div className="px-4 py-3" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
@ -1271,6 +1271,7 @@ export function PopWorkDetailComponent({
)}
</div>
</div>
</>
)}
</div>
</div>
@ -2206,7 +2207,7 @@ function GroupTimerHeader({
onTimerAction,
}: GroupTimerHeaderProps) {
return (
<div className="border-b border-gray-100 bg-white" style={{ position: 'sticky', top: 0, zIndex: 10 }}>
<div className="shrink-0 border-b border-gray-100 bg-white" style={{ zIndex: 10 }}>
{/* 그룹 제목 + 진행 카운트 */}
<div className="flex items-center justify-between px-6 pb-1.5 pt-3">
<div className="flex items-center gap-2.5">
@ -2226,10 +2227,10 @@ function GroupTimerHeader({
<div className="flex items-center gap-6">
<div className="flex items-center gap-2">
<Timer className="h-5 w-5 text-blue-500" />
<span className="font-mono font-bold tabular-nums text-blue-700" style={{ fontSize: 26 }}>{groupTimerFormatted}</span>
<span className="font-mono font-bold tabular-nums text-blue-700" style={{ fontSize: 38 }}>{groupTimerFormatted}</span>
</div>
<div className="flex items-center gap-1.5">
<span className="font-mono tabular-nums text-gray-400" style={{ fontSize: 14 }}>경과 {groupElapsedFormatted}</span>
<span className="font-mono tabular-nums text-gray-400" style={{ fontSize: 16 }}>경과 {groupElapsedFormatted}</span>
</div>
</div>
{!isProcessCompleted && !isGroupCompleted && (
@ -2360,7 +2361,7 @@ function ChecklistRowItem({ item, saving, disabled, onSave }: {
</div>
{/* 오른쪽: 입력 (측정값, 체크박스, OK/NG) */}
<div className="flex flex-1 items-center justify-center gap-4 px-4 py-2">
<div className="flex flex-1 items-center justify-end gap-4 px-4 py-2">
<ChecklistItemInput item={item} saving={saving} disabled={disabled} onSave={onSave} />
</div>
</div>