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

style: [WEB] 중간검사 모달 스타일을 수입검사 모달과 동일하게 변경

Browse Source 
- Dialog 레이아웃: p-0, flex col, max-h-[90vh] 적용
- 헤더/스크롤/하단 3영역 분리 (판정+버튼 하단 고정)
- 토글 버튼 스타일 통일 (black/gray-100 border)
- 인풋 h-11 rounded-lg border-gray-300 적용
- 라벨 text-sm font-bold span으로 변경
- 검사완료 버튼 bg-black, 취소 버튼 outline 스타일
This commit is contained in:
권혁성
2026-02-07 05:10:29 +09:00
parent 1fca5ed477
commit 61bf95b58e
1 changed files with 145 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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