fix(WEB): 검사입력 모달 UI/UX 개선
- ImportInspectionInputModal 수입검사 입력 모달 개선 - InspectionInputModal 작업자화면 검사입력 개선 - ProductInspectionInputModal 제품검사 입력 개선 - WipProductionModal 수정 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
유병철
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user