From a29691c31ee2cf55c12882a6f44ce028cfe3f77b Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Thu, 26 Mar 2026 17:33:07 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=B2=B4=ED=81=AC=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B2=84=ED=8A=BC=20=EC=9A=B0=EC=B8=A1=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20+=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EC=B5=9C?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EA=B3=A0=EC=A0=95=20=EB=B0=8F=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=20=ED=99=95=EB=8C=80=20-=20ChecklistRowItem=20?=
 =?UTF-8?q?=EC=9A=B0=EC=B8=A1=20=EC=9E=85=EB=A0=A5=20=EC=98=81=EC=97=AD?=
 =?UTF-8?q?=EC=9D=84=20justify-center=20=E2=86=92=20justify-end=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20-=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=EC=97=90=EC=84=9C=20GroupTimerHeader?=
 =?UTF-8?q?=EB=A5=BC=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=BB=A8=ED=85=8C?=
 =?UTF-8?q?=EC=9D=B4=EB=84=88=20=EB=B0=94=EA=B9=A5(=EC=B5=9C=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8)=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20-=20?=
 =?UTF-8?q?=ED=83=80=EC=9D=B4=EB=A8=B8=20=EC=88=AB=EC=9E=90=20=ED=8F=B0?=
 =?UTF-8?q?=ED=8A=B8=2026px=20=E2=86=92=2038px,=20=EA=B2=BD=EA=B3=BC=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=ED=8F=B0=ED=8A=B8=2014px=20=E2=86=92=2016?=
 =?UTF-8?q?px=20-=20GroupTimerHeader=EC=9D=98=20sticky=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20(=EC=99=B8=EB=B6=80=20=EB=B0=B0=EC=B9=98=EB=A1=9C?=
 =?UTF-8?q?=20=EC=9E=90=EC=97=B0=EC=8A=A4=EB=9F=BD=EA=B2=8C=20=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8=20=EA=B3=A0=EC=A0=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PopWorkDetailComponent.tsx                | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx b/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
index d03b552e..b34a617c 100644
--- a/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
@@ -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>