From 61bf95b58ed472a3d6014e1a14bef9173d71cfd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Sat, 7 Feb 2026 05:10:29 +0900
Subject: [PATCH] =?UTF-8?q?style:=20[WEB]=20=EC=A4=91=EA=B0=84=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EC=9D=84=20=EC=88=98=EC=9E=85=EA=B2=80=EC=82=AC=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EA=B3=BC=20=EB=8F=99=EC=9D=BC=ED=95=98=EA=B2=8C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dialog 레이아웃: p-0, flex col, max-h-[90vh] 적용
- 헤더/스크롤/하단 3영역 분리 (판정+버튼 하단 고정)
- 토글 버튼 스타일 통일 (black/gray-100 border)
- 인풋 h-11 rounded-lg border-gray-300 적용
- 라벨 text-sm font-bold span으로 변경
- 검사완료 버튼 bg-black, 취소 버튼 outline 스타일
---
 .../WorkerScreen/InspectionInputModal.tsx     | 290 +++++++++---------
 1 file changed, 145 insertions(+), 145 deletions(-)

diff --git a/src/components/production/WorkerScreen/InspectionInputModal.tsx b/src/components/production/WorkerScreen/InspectionInputModal.tsx
index 6a9f0492..8a45ca38 100644
--- a/src/components/production/WorkerScreen/InspectionInputModal.tsx
+++ b/src/components/production/WorkerScreen/InspectionInputModal.tsx
@@ -20,7 +20,6 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
 
@@ -82,15 +81,15 @@ function StatusToggle({
   onChange: (v: 'good' | 'bad') => void;
 }) {
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-2 flex-1">
       <button
         type="button"
         onClick={() => onChange('good')}
         className={cn(
-          'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
+          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
           value === 'good'
-            ? 'bg-orange-500 text-white'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            ? 'bg-black text-white'
+            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
         )}
       >
         양호
@@ -99,10 +98,10 @@ function StatusToggle({
         type="button"
         onClick={() => onChange('bad')}
         className={cn(
-          'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
+          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
           value === 'bad'
-            ? 'bg-gray-700 text-white'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            ? 'bg-black text-white'
+            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
         )}
       >
         불량
@@ -120,15 +119,15 @@ function OkNgToggle({
   onChange: (v: 'ok' | 'ng') => void;
 }) {
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-2 flex-1">
       <button
         type="button"
         onClick={() => onChange('ok')}
         className={cn(
-          'px-6 py-2 rounded-lg text-sm font-medium transition-colors',
+          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
           value === 'ok'
-            ? 'bg-gray-700 text-white'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            ? 'bg-black text-white'
+            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
         )}
       >
         OK
@@ -137,10 +136,10 @@ function OkNgToggle({
         type="button"
         onClick={() => onChange('ng')}
         className={cn(
-          'px-6 py-2 rounded-lg text-sm font-medium transition-colors',
+          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
           value === 'ng'
-            ? 'bg-gray-700 text-white'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            ? 'bg-black text-white'
+            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
         )}
       >
         NG
@@ -158,15 +157,15 @@ function JudgmentToggle({
   onChange: (v: 'pass' | 'fail') => void;
 }) {
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-2 flex-1">
       <button
         type="button"
         onClick={() => onChange('pass')}
         className={cn(
-          'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
+          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
           value === 'pass'
-            ? 'bg-orange-500 text-white'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            ? 'bg-orange-600 text-white'
+            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
         )}
       >
         적합
@@ -175,10 +174,10 @@ function JudgmentToggle({
         type="button"
         onClick={() => onChange('fail')}
         className={cn(
-          'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
+          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
           value === 'fail'
-            ? 'bg-gray-700 text-white'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            ? 'bg-black text-white'
+            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
         )}
       >
         부적합
@@ -286,79 +285,79 @@ export function InspectionInputModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[95vw] max-w-[500px] sm:max-w-[500px]">
-        <DialogHeader>
+      <DialogContent className="w-[95vw] max-w-[500px] sm:max-w-[500px] max-h-[90vh] flex flex-col p-0">
+        <DialogHeader className="px-6 pt-6 pb-0 shrink-0">
           <DialogTitle className="text-lg font-bold">
             {PROCESS_TITLES[processType]}
           </DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-6 mt-4 max-h-[70vh] overflow-y-auto pr-2">
-          {/* 제품명 */}
-          <div className="space-y-2">
-            <Label className="text-muted-foreground">제품명</Label>
-            <Input
-              value={formData.productName}
-              readOnly
-              className=""
-            />
-          </div>
-
-          {/* 규격 */}
-          <div className="space-y-2">
-            <Label className="text-muted-foreground">규격</Label>
-            <Input
-              value={formData.specification}
-              readOnly
-              className=""
-            />
+        <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-5">
+          {/* 기본 정보 (읽기전용) */}
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <span className="text-sm font-bold">제품명</span>
+              <Input
+                value={formData.productName}
+                readOnly
+                className="h-11 bg-gray-100 border-gray-300 rounded-lg"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="text-sm font-bold">규격</span>
+              <Input
+                value={formData.specification}
+                readOnly
+                className="h-11 bg-gray-100 border-gray-300 rounded-lg"
+              />
+            </div>
           </div>
 
           {/* ===== 재고생산 (bending_wip) 검사 항목 ===== */}
           {processType === 'bending_wip' && (
             <>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 절곡상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 절곡상태</span>
                 <StatusToggle
                   value={formData.bendingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, bendingStatus: v }))}
                 />
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">길이 (1,000)</Label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">길이 (1,000)</span>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.length ?? ''}
                     onChange={(e) => handleNumberChange('length', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">너비 (1,000)</Label>
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">너비 (1,000)</span>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.width ?? ''}
                     onChange={(e) => handleNumberChange('width', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">간격 (1,000)</Label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">간격 (1,000)</span>
                   <div className="flex gap-2">
                     <Input
                       type="number"
                       placeholder="①"
-                      className=""
+                      className="h-11 rounded-lg border-gray-300"
                     />
                     <Input
                       type="number"
                       placeholder="1,000"
-                      className=""
+                      className="h-11 rounded-lg border-gray-300"
                     />
                   </div>
                 </div>
@@ -369,51 +368,51 @@ export function InspectionInputModal({
           {/* ===== 스크린 검사 항목 ===== */}
           {processType === 'screen' && (
             <>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 가공상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 가공상태</span>
                 <StatusToggle
                   value={formData.processingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                 />
               </div>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 재봉상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 재봉상태</span>
                 <StatusToggle
                   value={formData.sewingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, sewingStatus: v }))}
                 />
               </div>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 조립상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 조립상태</span>
                 <StatusToggle
                   value={formData.assemblyStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
                 />
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">길이 (1,000)</Label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">길이 (1,000)</span>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.length ?? ''}
                     onChange={(e) => handleNumberChange('length', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">너비 (1,000)</Label>
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">너비 (1,000)</span>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.width ?? ''}
                     onChange={(e) => handleNumberChange('width', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
               </div>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">간격 (400 이하)</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">간격 (400 이하)</span>
                 <OkNgToggle
                   value={formData.gapStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, gapStatus: v }))}
@@ -425,50 +424,50 @@ export function InspectionInputModal({
           {/* ===== 슬랫 검사 항목 ===== */}
           {processType === 'slat' && (
             <>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 가공상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 가공상태</span>
                 <StatusToggle
                   value={formData.processingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                 />
               </div>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 조립상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 조립상태</span>
                 <StatusToggle
                   value={formData.assemblyStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
                 />
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">① 높이 (16.5 ± 1)</Label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">① 높이 (16.5 ± 1)</span>
                   <Input
                     type="number"
                     placeholder="16.5"
                     value={formData.height1 ?? ''}
                     onChange={(e) => handleNumberChange('height1', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">② 높이 (14.5 ± 1)</Label>
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">② 높이 (14.5 ± 1)</span>
                   <Input
                     type="number"
                     placeholder="14.5"
                     value={formData.height2 ?? ''}
                     onChange={(e) => handleNumberChange('height2', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
               </div>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">길이 (0)</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">길이 (0)</span>
                 <Input
                   type="number"
                   placeholder="0"
                   value={formData.length ?? ''}
                   onChange={(e) => handleNumberChange('length', e.target.value)}
-                  className=""
+                  className="h-11 rounded-lg border-gray-300"
                 />
               </div>
             </>
@@ -477,61 +476,61 @@ export function InspectionInputModal({
           {/* ===== 조인트바 검사 항목 ===== */}
           {processType === 'slat_jointbar' && (
             <>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 가공상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 가공상태</span>
                 <StatusToggle
                   value={formData.processingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                 />
               </div>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 조립상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 조립상태</span>
                 <StatusToggle
                   value={formData.assemblyStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
                 />
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">① 높이 (16.5 ± 1)</Label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">① 높이 (16.5 ± 1)</span>
                   <Input
                     type="number"
                     placeholder="16.5"
                     value={formData.height1 ?? ''}
                     onChange={(e) => handleNumberChange('height1', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">② 높이 (14.5 ± 1)</Label>
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">② 높이 (14.5 ± 1)</span>
                   <Input
                     type="number"
                     placeholder="14.5"
                     value={formData.height2 ?? ''}
                     onChange={(e) => handleNumberChange('height2', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">③ 길이 (300 ± 1)</Label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">③ 길이 (300 ± 1)</span>
                   <Input
                     type="number"
                     placeholder="300"
                     value={formData.length3 ?? ''}
                     onChange={(e) => handleNumberChange('length3', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">④ 간격 (150 ± 1)</Label>
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">④ 간격 (150 ± 1)</span>
                   <Input
                     type="number"
                     placeholder="150"
                     value={formData.gap4 ?? ''}
                     onChange={(e) => handleNumberChange('gap4', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
               </div>
@@ -541,40 +540,40 @@ export function InspectionInputModal({
           {/* ===== 절곡 검사 항목 ===== */}
           {processType === 'bending' && (
             <>
-              <div className="space-y-2">
-                <Label className="text-muted-foreground">검모양 절곡상태</Label>
+              <div className="space-y-1.5">
+                <span className="text-sm font-bold">검모양 절곡상태</span>
                 <StatusToggle
                   value={formData.bendingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, bendingStatus: v }))}
                 />
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">길이 (1,000)</Label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">길이 (1,000)</span>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.length ?? ''}
                     onChange={(e) => handleNumberChange('length', e.target.value)}
-                    className=""
+                    className="h-11 rounded-lg border-gray-300"
                   />
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-muted-foreground">너비 (N/A)</Label>
+                <div className="space-y-1.5">
+                  <span className="text-sm font-bold">너비 (N/A)</span>
                   <Input
                     type="text"
                     placeholder="N/A"
                     value={formData.width ?? 'N/A'}
                     readOnly
-                    className=""
+                    className="h-11 bg-gray-100 border-gray-300 rounded-lg"
                   />
                 </div>
               </div>
               <div className="space-y-3">
-                <Label className="text-muted-foreground">간격</Label>
+                <span className="text-sm font-bold">간격</span>
                 {gapPoints.map((point, index) => (
                   <div key={index} className="grid grid-cols-3 gap-2 items-center">
-                    <span className="text-muted-foreground text-sm">⑤{index + 1}</span>
+                    <span className="text-gray-500 text-sm font-medium">⑤{index + 1}</span>
                     <Input
                       type="number"
                       placeholder={String(30 + index * 10)}
@@ -587,7 +586,7 @@ export function InspectionInputModal({
                         };
                         setGapPoints(newPoints);
                       }}
-                      className=""
+                      className="h-11 rounded-lg border-gray-300"
                     />
                     <Input
                       type="number"
@@ -601,7 +600,7 @@ export function InspectionInputModal({
                         };
                         setGapPoints(newPoints);
                       }}
-                      className=""
+                      className="h-11 rounded-lg border-gray-300"
                     />
                   </div>
                 ))}
@@ -609,44 +608,45 @@ export function InspectionInputModal({
             </>
           )}
 
-          {/* 공통: 판정 */}
-          <div className="space-y-2">
-            <Label className="text-muted-foreground">판정</Label>
-            <JudgmentToggle
-              value={formData.judgment}
-              onChange={(v) => setFormData((prev) => ({ ...prev, judgment: v }))}
-            />
-          </div>
-
-          {/* 공통: 부적합 내용 */}
-          <div className="space-y-2">
-            <Label className="text-muted-foreground">부적합 내용</Label>
+          {/* 부적합 내용 */}
+          <div className="space-y-1.5">
+            <span className="text-sm font-bold">부적합 내용</span>
             <Textarea
               value={formData.nonConformingContent}
               onChange={(e) =>
                 setFormData((prev) => ({ ...prev, nonConformingContent: e.target.value }))
               }
               placeholder="입력 시 '일련번호: 내용' 형태로 취합되어 표시"
-              className="min-h-[80px]"
+              className="min-h-[80px] rounded-lg border-gray-300"
             />
           </div>
         </div>
 
-        {/* 버튼 영역 */}
-        <div className="flex gap-3 mt-6">
-          <Button
-            variant="outline"
-            onClick={handleCancel}
-            className="flex-1"
-          >
-            취소
-          </Button>
-          <Button
-            onClick={handleComplete}
-            className="flex-1 bg-orange-500 hover:bg-orange-600 text-white"
-          >
-            검사 완료
-          </Button>
+        {/* 하단 고정: 판정 + 버튼 */}
+        <div className="shrink-0 border-t bg-white px-5 pb-5 pt-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+          <div className="space-y-2 mb-4">
+            <span className="text-sm font-bold">판정</span>
+            <JudgmentToggle
+              value={formData.judgment}
+              onChange={(v) => setFormData((prev) => ({ ...prev, judgment: v }))}
+            />
+          </div>
+          <div className="flex gap-3">
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              className="flex-1 h-11 rounded-lg border-gray-300 font-bold"
+            >
+              취소
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={handleComplete}
+              className="flex-1 h-11 rounded-lg bg-black hover:bg-gray-800 text-white font-bold"
+            >
+              검사 완료
+            </Button>
+          </div>
         </div>
       </DialogContent>
     </Dialog>