SamProject/sam-react-prod
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
유병철
2026-02-06 09:41:27 +09:00
parent 16a349292b
commit 881f4668da
4 changed files with 116 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/material/ReceivingManagement/ImportInspectionInputModal.tsx
View File

@@ -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>

4
src/components/production/WorkOrders/WipProductionModal.tsx
View File

@@ -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>

126
src/components/production/WorkerScreen/InspectionInputModal.tsx
View File

@@ -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>

40
src/components/quality/InspectionManagement/ProductInspectionInputModal.tsx
View File

@@ -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>