fix(WEB): 검사입력 모달 UI/UX 개선

- ImportInspectionInputModal 수입검사 입력 모달 개선
- InspectionInputModal 작업자화면 검사입력 개선
- ProductInspectionInputModal 제품검사 입력 개선
- WipProductionModal 수정

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/production/WorkerScreen/InspectionInputModal.tsx

@@ -90,7 +90,7 @@ function StatusToggle({
           'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
           value === 'good'
             ? 'bg-orange-500 text-white'
-            : 'bg-gray-700 text-white hover:bg-gray-600'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
         )}
       >
         양호
@@ -101,8 +101,8 @@ function StatusToggle({
         className={cn(
           'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
           value === 'bad'
-            ? 'bg-gray-900 text-white'
-            : 'bg-gray-700 text-white hover:bg-gray-600'
+            ? 'bg-gray-700 text-white'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
         )}
       >
         불량
@@ -127,8 +127,8 @@ function OkNgToggle({
         className={cn(
           'px-6 py-2 rounded-lg text-sm font-medium transition-colors',
           value === 'ok'
-            ? 'bg-gray-900 text-white'
-            : 'bg-gray-700 text-white hover:bg-gray-600'
+            ? 'bg-gray-700 text-white'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
         )}
       >
         OK
@@ -139,8 +139,8 @@ function OkNgToggle({
         className={cn(
           'px-6 py-2 rounded-lg text-sm font-medium transition-colors',
           value === 'ng'
-            ? 'bg-gray-900 text-white'
-            : 'bg-gray-700 text-white hover:bg-gray-600'
+            ? 'bg-gray-700 text-white'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
         )}
       >
         NG
@@ -166,7 +166,7 @@ function JudgmentToggle({
           'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
           value === 'pass'
             ? 'bg-orange-500 text-white'
-            : 'bg-gray-700 text-white hover:bg-gray-600'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
         )}
       >
         적합
@@ -177,8 +177,8 @@ function JudgmentToggle({
         className={cn(
           'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
           value === 'fail'
-            ? 'bg-gray-900 text-white'
-            : 'bg-gray-700 text-white hover:bg-gray-600'
+            ? 'bg-gray-700 text-white'
+            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
         )}
       >
         부적합
@@ -286,9 +286,9 @@ export function InspectionInputModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[95vw] max-w-[500px] sm:max-w-[500px] bg-gray-900 text-white border-gray-700">
+      <DialogContent className="w-[95vw] max-w-[500px] sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle className="text-white text-lg font-bold">
+          <DialogTitle className="text-lg font-bold">
             {PROCESS_TITLES[processType]}
           </DialogTitle>
         </DialogHeader>
@@ -296,21 +296,21 @@ export function InspectionInputModal({
         <div className="space-y-6 mt-4 max-h-[70vh] overflow-y-auto pr-2">
           {/* 제품명 */}
           <div className="space-y-2">
-            <Label className="text-gray-300">제품명</Label>
+            <Label className="text-muted-foreground">제품명</Label>
             <Input
               value={formData.productName}
               readOnly
-              className="bg-gray-800 border-gray-700 text-white"
+              className=""
             />
           </div>
 
           {/* 규격 */}
           <div className="space-y-2">
-            <Label className="text-gray-300">규격</Label>
+            <Label className="text-muted-foreground">규격</Label>
             <Input
               value={formData.specification}
               readOnly
-              className="bg-gray-800 border-gray-700 text-white"
+              className=""
             />
           </div>
 
@@ -318,7 +318,7 @@ export function InspectionInputModal({
           {processType === 'bending_wip' && (
             <>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 절곡상태</Label>
+                <Label className="text-muted-foreground">검모양 절곡상태</Label>
                 <StatusToggle
                   value={formData.bendingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, bendingStatus: v }))}
@@ -326,39 +326,39 @@ export function InspectionInputModal({
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label className="text-gray-300">길이 (1,000)</Label>
+                  <Label className="text-muted-foreground">길이 (1,000)</Label>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.length ?? ''}
                     onChange={(e) => handleNumberChange('length', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-gray-300">너비 (1,000)</Label>
+                  <Label className="text-muted-foreground">너비 (1,000)</Label>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.width ?? ''}
                     onChange={(e) => handleNumberChange('width', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label className="text-gray-300">간격 (1,000)</Label>
+                  <Label className="text-muted-foreground">간격 (1,000)</Label>
                   <div className="flex gap-2">
                     <Input
                       type="number"
                       placeholder="①"
-                      className="bg-gray-800 border-gray-700 text-white"
+                      className=""
                     />
                     <Input
                       type="number"
                       placeholder="1,000"
-                      className="bg-gray-800 border-gray-700 text-white"
+                      className=""
                     />
                   </div>
                 </div>
@@ -370,21 +370,21 @@ export function InspectionInputModal({
           {processType === 'screen' && (
             <>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 가공상태</Label>
+                <Label className="text-muted-foreground">검모양 가공상태</Label>
                 <StatusToggle
                   value={formData.processingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                 />
               </div>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 재봉상태</Label>
+                <Label className="text-muted-foreground">검모양 재봉상태</Label>
                 <StatusToggle
                   value={formData.sewingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, sewingStatus: v }))}
                 />
               </div>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 조립상태</Label>
+                <Label className="text-muted-foreground">검모양 조립상태</Label>
                 <StatusToggle
                   value={formData.assemblyStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
@@ -392,28 +392,28 @@ export function InspectionInputModal({
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label className="text-gray-300">길이 (1,000)</Label>
+                  <Label className="text-muted-foreground">길이 (1,000)</Label>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.length ?? ''}
                     onChange={(e) => handleNumberChange('length', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-gray-300">너비 (1,000)</Label>
+                  <Label className="text-muted-foreground">너비 (1,000)</Label>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.width ?? ''}
                     onChange={(e) => handleNumberChange('width', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
               </div>
               <div className="space-y-2">
-                <Label className="text-gray-300">간격 (400 이하)</Label>
+                <Label className="text-muted-foreground">간격 (400 이하)</Label>
                 <OkNgToggle
                   value={formData.gapStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, gapStatus: v }))}
@@ -426,14 +426,14 @@ export function InspectionInputModal({
           {processType === 'slat' && (
             <>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 가공상태</Label>
+                <Label className="text-muted-foreground">검모양 가공상태</Label>
                 <StatusToggle
                   value={formData.processingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                 />
               </div>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 조립상태</Label>
+                <Label className="text-muted-foreground">검모양 조립상태</Label>
                 <StatusToggle
                   value={formData.assemblyStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
@@ -441,34 +441,34 @@ export function InspectionInputModal({
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label className="text-gray-300">① 높이 (16.5 ± 1)</Label>
+                  <Label className="text-muted-foreground">① 높이 (16.5 ± 1)</Label>
                   <Input
                     type="number"
                     placeholder="16.5"
                     value={formData.height1 ?? ''}
                     onChange={(e) => handleNumberChange('height1', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-gray-300">② 높이 (14.5 ± 1)</Label>
+                  <Label className="text-muted-foreground">② 높이 (14.5 ± 1)</Label>
                   <Input
                     type="number"
                     placeholder="14.5"
                     value={formData.height2 ?? ''}
                     onChange={(e) => handleNumberChange('height2', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
               </div>
               <div className="space-y-2">
-                <Label className="text-gray-300">길이 (0)</Label>
+                <Label className="text-muted-foreground">길이 (0)</Label>
                 <Input
                   type="number"
                   placeholder="0"
                   value={formData.length ?? ''}
                   onChange={(e) => handleNumberChange('length', e.target.value)}
-                  className="bg-gray-800 border-gray-700 text-white"
+                  className=""
                 />
               </div>
             </>
@@ -478,14 +478,14 @@ export function InspectionInputModal({
           {processType === 'slat_jointbar' && (
             <>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 가공상태</Label>
+                <Label className="text-muted-foreground">검모양 가공상태</Label>
                 <StatusToggle
                   value={formData.processingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                 />
               </div>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 조립상태</Label>
+                <Label className="text-muted-foreground">검모양 조립상태</Label>
                 <StatusToggle
                   value={formData.assemblyStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
@@ -493,45 +493,45 @@ export function InspectionInputModal({
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label className="text-gray-300">① 높이 (16.5 ± 1)</Label>
+                  <Label className="text-muted-foreground">① 높이 (16.5 ± 1)</Label>
                   <Input
                     type="number"
                     placeholder="16.5"
                     value={formData.height1 ?? ''}
                     onChange={(e) => handleNumberChange('height1', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-gray-300">② 높이 (14.5 ± 1)</Label>
+                  <Label className="text-muted-foreground">② 높이 (14.5 ± 1)</Label>
                   <Input
                     type="number"
                     placeholder="14.5"
                     value={formData.height2 ?? ''}
                     onChange={(e) => handleNumberChange('height2', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label className="text-gray-300">③ 길이 (300 ± 1)</Label>
+                  <Label className="text-muted-foreground">③ 길이 (300 ± 1)</Label>
                   <Input
                     type="number"
                     placeholder="300"
                     value={formData.length3 ?? ''}
                     onChange={(e) => handleNumberChange('length3', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-gray-300">④ 간격 (150 ± 1)</Label>
+                  <Label className="text-muted-foreground">④ 간격 (150 ± 1)</Label>
                   <Input
                     type="number"
                     placeholder="150"
                     value={formData.gap4 ?? ''}
                     onChange={(e) => handleNumberChange('gap4', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
               </div>
@@ -542,7 +542,7 @@ export function InspectionInputModal({
           {processType === 'bending' && (
             <>
               <div className="space-y-2">
-                <Label className="text-gray-300">검모양 절곡상태</Label>
+                <Label className="text-muted-foreground">검모양 절곡상태</Label>
                 <StatusToggle
                   value={formData.bendingStatus || null}
                   onChange={(v) => setFormData((prev) => ({ ...prev, bendingStatus: v }))}
@@ -550,31 +550,31 @@ export function InspectionInputModal({
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label className="text-gray-300">길이 (1,000)</Label>
+                  <Label className="text-muted-foreground">길이 (1,000)</Label>
                   <Input
                     type="number"
                     placeholder="1,000"
                     value={formData.length ?? ''}
                     onChange={(e) => handleNumberChange('length', e.target.value)}
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-gray-300">너비 (N/A)</Label>
+                  <Label className="text-muted-foreground">너비 (N/A)</Label>
                   <Input
                     type="text"
                     placeholder="N/A"
                     value={formData.width ?? 'N/A'}
                     readOnly
-                    className="bg-gray-800 border-gray-700 text-white"
+                    className=""
                   />
                 </div>
               </div>
               <div className="space-y-3">
-                <Label className="text-gray-300">간격</Label>
+                <Label className="text-muted-foreground">간격</Label>
                 {gapPoints.map((point, index) => (
                   <div key={index} className="grid grid-cols-3 gap-2 items-center">
-                    <span className="text-gray-400 text-sm">⑤{index + 1}</span>
+                    <span className="text-muted-foreground text-sm">⑤{index + 1}</span>
                     <Input
                       type="number"
                       placeholder={String(30 + index * 10)}
@@ -587,7 +587,7 @@ export function InspectionInputModal({
                         };
                         setGapPoints(newPoints);
                       }}
-                      className="bg-gray-800 border-gray-700 text-white"
+                      className=""
                     />
                     <Input
                       type="number"
@@ -601,7 +601,7 @@ export function InspectionInputModal({
                         };
                         setGapPoints(newPoints);
                       }}
-                      className="bg-gray-800 border-gray-700 text-white"
+                      className=""
                     />
                   </div>
                 ))}
@@ -611,7 +611,7 @@ export function InspectionInputModal({
 
           {/* 공통: 판정 */}
           <div className="space-y-2">
-            <Label className="text-gray-300">판정</Label>
+            <Label className="text-muted-foreground">판정</Label>
             <JudgmentToggle
               value={formData.judgment}
               onChange={(v) => setFormData((prev) => ({ ...prev, judgment: v }))}
@@ -620,14 +620,14 @@ export function InspectionInputModal({
 
           {/* 공통: 부적합 내용 */}
           <div className="space-y-2">
-            <Label className="text-gray-300">부적합 내용</Label>
+            <Label className="text-muted-foreground">부적합 내용</Label>
             <Textarea
               value={formData.nonConformingContent}
               onChange={(e) =>
                 setFormData((prev) => ({ ...prev, nonConformingContent: e.target.value }))
               }
               placeholder="입력 시 '일련번호: 내용' 형태로 취합되어 표시"
-              className="bg-gray-800 border-gray-700 text-white min-h-[80px]"
+              className="min-h-[80px]"
             />
           </div>
         </div>
@@ -637,7 +637,7 @@ export function InspectionInputModal({
           <Button
             variant="outline"
             onClick={handleCancel}
-            className="flex-1 bg-gray-800 border-gray-700 text-white hover:bg-gray-700"
+            className="flex-1"
           >
             취소
           </Button>