From 881f4668dab7cd82403afdea9cdf6749140fc2af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Fri, 6 Feb 2026 09:41:27 +0900
Subject: [PATCH] =?UTF-8?q?fix(WEB):=20=EA=B2=80=EC=82=AC=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EB=AA=A8=EB=8B=AC=20UI/UX=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../ImportInspectionInputModal.tsx            |  62 ++++-----
 .../WorkOrders/WipProductionModal.tsx         |   4 +-
 .../WorkerScreen/InspectionInputModal.tsx     | 126 +++++++++---------
 .../ProductInspectionInputModal.tsx           |  40 +++---
 4 files changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/components/material/ReceivingManagement/ImportInspectionInputModal.tsx b/src/components/material/ReceivingManagement/ImportInspectionInputModal.tsx
index 1bce8f10..79eb2ef8 100644
--- a/src/components/material/ReceivingManagement/ImportInspectionInputModal.tsx
+++ b/src/components/material/ReceivingManagement/ImportInspectionInputModal.tsx
@@ -68,8 +68,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
@@ -80,8 +80,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
@@ -107,7 +107,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'
         )}
       >
         적합
@@ -118,8 +118,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'
         )}
       >
         부적합
@@ -192,9 +192,9 @@ export function ImportInspectionInputModal({
 
   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">
             수입검사
           </DialogTitle>
         </DialogHeader>
@@ -202,21 +202,21 @@ export function ImportInspectionInputModal({
         <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>
 
@@ -231,7 +231,7 @@ export function ImportInspectionInputModal({
                   'px-6 py-2 rounded-lg text-sm font-medium transition-colors',
                   formData.sampleTab === tab
                     ? 'bg-orange-500 text-white'
-                    : 'bg-gray-700 text-white hover:bg-gray-600'
+                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                 )}
               >
                 {tab}
@@ -241,7 +241,7 @@ export function ImportInspectionInputModal({
 
           {/* 겉모양: OK/NG */}
           <div className="space-y-2">
-            <Label className="text-gray-300">겉모양</Label>
+            <Label className="text-muted-foreground">겉모양</Label>
             <OkNgToggle
               value={formData.appearanceStatus}
               onChange={(v) => setFormData((prev) => ({ ...prev, appearanceStatus: v }))}
@@ -251,43 +251,43 @@ export function ImportInspectionInputModal({
           {/* 두께 / 너비 */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label className="text-gray-300">두께 (1.55)</Label>
+              <Label className="text-muted-foreground">두께 (1.55)</Label>
               <Input
                 type="number"
                 step="0.01"
                 placeholder="1.55"
                 value={formData.thickness ?? ''}
                 onChange={(e) => handleNumberChange('thickness', e.target.value)}
-                className="bg-gray-800 border-gray-700 text-white"
+                className=""
               />
             </div>
             <div className="space-y-2">
-              <Label className="text-gray-300">너비 (1219)</Label>
+              <Label className="text-muted-foreground">너비 (1219)</Label>
               <Input
                 type="number"
                 placeholder="1219"
                 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">길이 (480)</Label>
+            <Label className="text-muted-foreground">길이 (480)</Label>
             <Input
               type="number"
               placeholder="480"
               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">판정</Label>
+            <Label className="text-muted-foreground">판정</Label>
             <JudgmentToggle
               value={formData.judgment}
               onChange={(v) => setFormData((prev) => ({ ...prev, judgment: v }))}
@@ -297,49 +297,49 @@ export function ImportInspectionInputModal({
           {/* 인장강도 / 연신율 */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label className="text-gray-300">인장강도 (270 이상)</Label>
+              <Label className="text-muted-foreground">인장강도 (270 이상)</Label>
               <Input
                 type="number"
                 placeholder=""
                 value={formData.tensileStrength ?? ''}
                 onChange={(e) => handleNumberChange('tensileStrength', e.target.value)}
-                className="bg-gray-800 border-gray-700 text-white"
+                className=""
               />
             </div>
             <div className="space-y-2">
-              <Label className="text-gray-300">연신율 (36 이상)</Label>
+              <Label className="text-muted-foreground">연신율 (36 이상)</Label>
               <Input
                 type="number"
                 placeholder=""
                 value={formData.elongation ?? ''}
                 onChange={(e) => handleNumberChange('elongation', 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">아연의 최소 부착량 (17 이상)</Label>
+            <Label className="text-muted-foreground">아연의 최소 부착량 (17 이상)</Label>
             <Input
               type="number"
               placeholder=""
               value={formData.zincCoating ?? ''}
               onChange={(e) => handleNumberChange('zincCoating', e.target.value)}
-              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>
             <Textarea
               value={formData.content}
               onChange={(e) =>
                 setFormData((prev) => ({ ...prev, content: e.target.value }))
               }
               placeholder=""
-              className="bg-gray-800 border-gray-700 text-white min-h-[80px]"
+              className="min-h-[80px]"
             />
           </div>
         </div>
@@ -349,7 +349,7 @@ export function ImportInspectionInputModal({
           <Button
             variant="outline"
             onClick={handleCancel}
-            className="flex-1 bg-gray-800 border-gray-700 text-white hover:bg-gray-700"
+            className="flex-1"
           >
             취소
           </Button>
diff --git a/src/components/production/WorkOrders/WipProductionModal.tsx b/src/components/production/WorkOrders/WipProductionModal.tsx
index acdd0e3a..e5771e7c 100644
--- a/src/components/production/WorkOrders/WipProductionModal.tsx
+++ b/src/components/production/WorkOrders/WipProductionModal.tsx
@@ -169,7 +169,7 @@ export function WipProductionModal({ open, onOpenChange }: WipProductionModalPro
               <div className="border rounded-md overflow-hidden">
                 <table className="w-full text-sm">
                   <thead>
-                    <tr className="bg-gray-900 text-white">
+                    <tr className="bg-muted">
                       <th className="px-3 py-2 text-center font-medium text-xs">품목코드</th>
                       <th className="px-3 py-2 text-center font-medium text-xs">품목명</th>
                       <th className="px-3 py-2 text-center font-medium text-xs">규격</th>
@@ -254,7 +254,7 @@ export function WipProductionModal({ open, onOpenChange }: WipProductionModalPro
           <Button
             variant="outline"
             onClick={handleCancel}
-            className="bg-gray-900 text-white hover:bg-gray-800 hover:text-white"
+            className=""
           >
             취소
           </Button>
diff --git a/src/components/production/WorkerScreen/InspectionInputModal.tsx b/src/components/production/WorkerScreen/InspectionInputModal.tsx
index 2e871b36..6a9f0492 100644
--- a/src/components/production/WorkerScreen/InspectionInputModal.tsx
+++ b/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>
diff --git a/src/components/quality/InspectionManagement/ProductInspectionInputModal.tsx b/src/components/quality/InspectionManagement/ProductInspectionInputModal.tsx
index 44f92c95..0b4c8f2c 100644
--- a/src/components/quality/InspectionManagement/ProductInspectionInputModal.tsx
+++ b/src/components/quality/InspectionManagement/ProductInspectionInputModal.tsx
@@ -59,7 +59,7 @@ function PassFailToggle({
           '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',
           disabled && 'opacity-50 cursor-not-allowed'
         )}
       >
@@ -72,8 +72,8 @@ function PassFailToggle({
         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',
           disabled && 'opacity-50 cursor-not-allowed'
         )}
       >
@@ -122,12 +122,12 @@ function ImageUploader({
 
   return (
     <div className="space-y-2">
-      <Label className="text-gray-300">제품 사진 ({images.length}/{maxImages})</Label>
+      <Label className="text-muted-foreground">제품 사진 ({images.length}/{maxImages})</Label>
       <div className="flex gap-3">
         {images.map((img, index) => (
           <div
             key={index}
-            className="relative w-24 h-24 rounded-lg overflow-hidden border border-gray-700"
+            className="relative w-24 h-24 rounded-lg overflow-hidden border"
           >
             <img src={img} alt={`제품 사진 ${index + 1}`} className="w-full h-full object-cover" />
             <button
@@ -143,7 +143,7 @@ function ImageUploader({
           <button
             type="button"
             onClick={() => fileInputRef.current?.click()}
-            className="w-24 h-24 rounded-lg border-2 border-dashed border-gray-600 flex flex-col items-center justify-center text-gray-400 hover:border-gray-500 hover:text-gray-300 transition-colors"
+            className="w-24 h-24 rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-muted-foreground hover:border-gray-400 hover:text-gray-600 transition-colors"
           >
             <Camera className="w-6 h-6 mb-1" />
             <span className="text-xs">사진 추가</span>
@@ -171,7 +171,7 @@ function InspectionGroup({
 }) {
   return (
     <div className="space-y-3">
-      <div className="text-sm font-medium text-orange-400 border-b border-gray-700 pb-2">
+      <div className="text-sm font-medium text-orange-500 border-b pb-2">
         {title}
       </div>
       <div className="space-y-4 pl-2">{children}</div>
@@ -189,7 +189,7 @@ function InspectionRow({
 }) {
   return (
     <div className="flex items-center justify-between">
-      <Label className="text-gray-300 text-sm">{label}</Label>
+      <Label className="text-muted-foreground text-sm">{label}</Label>
       {children}
     </div>
   );
@@ -219,9 +219,9 @@ function MeasurementInput({
           value={value ?? ''}
           onChange={(e) => onValueChange(e.target.value === '' ? null : parseFloat(e.target.value))}
           placeholder={placeholder}
-          className="w-24 bg-gray-800 border-gray-700 text-white text-sm"
+          className="w-24 text-sm"
         />
-        <span className="text-gray-400 text-xs">{unit}</span>
+        <span className="text-muted-foreground text-xs">{unit}</span>
       </div>
       <PassFailToggle value={judgment} onChange={onJudgmentChange} />
     </div>
@@ -306,9 +306,9 @@ export function ProductInspectionInputModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[95vw] max-w-[600px] bg-gray-900 text-white border-gray-700 max-h-[90vh] overflow-hidden flex flex-col">
+      <DialogContent className="w-[95vw] max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col">
         <DialogHeader>
-          <DialogTitle className="text-white text-lg font-bold">
+          <DialogTitle className="text-lg font-bold">
             # 제품검사
           </DialogTitle>
         </DialogHeader>
@@ -317,19 +317,19 @@ export function ProductInspectionInputModal({
           {/* 제품명 / 규격 */}
           <div className="grid grid-cols-2 gap-4">
             <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>
           </div>
@@ -453,22 +453,22 @@ export function ProductInspectionInputModal({
 
           {/* 특이사항 */}
           <div className="space-y-2">
-            <Label className="text-gray-300">특이사항</Label>
+            <Label className="text-muted-foreground">특이사항</Label>
             <Textarea
               value={formData.specialNotes}
               onChange={(e) => updateField('specialNotes', e.target.value)}
               placeholder="특이사항을 입력하세요"
-              className="bg-gray-800 border-gray-700 text-white min-h-[80px]"
+              className="min-h-[80px]"
             />
           </div>
         </div>
 
         {/* 버튼 영역 */}
-        <div className="flex gap-3 mt-6 pt-4 border-t border-gray-700">
+        <div className="flex gap-3 mt-6 pt-4 border-t">
           <Button
             variant="outline"
             onClick={handleCancel}
-            className="flex-1 bg-gray-800 border-gray-700 text-white hover:bg-gray-700"
+            className="flex-1"
           >
             취소
           </Button>