# 창고관리 모바일 시스템 사용 가이드

## 📱 개요

태블릿 PC 및 스마트폰에서 사용할 수 있는 창고용 입출고 관리 시스템입니다.

### 주요 기능
- ✅ **다양한 입고/출고 유형 지원**: 8가지 입고 유형, 7가지 출고 유형
- ✅ **바코드 스캔**: 카메라 스캔 및 바코드 스캐너 입력 지원
- ✅ **다중 근거 처리**: 동일 제품에 대한 여러 발주/주문 합산 처리
- ✅ **바코드 출력**: 처리 완료 후 바코드 라벨 출력
- ✅ **임시저장**: 작업 중 데이터 임시 저장 및 불러오기
- ✅ **반응형 디자인**: 모바일, 태블릿, PC 모든 화면 크기 지원
- ✅ **오프라인 지원**: 로컬 저장소를 활용한 임시 작업

---

## 🚀 시작하기

### 파일 구조

```
화면개발/
├── 창고관리.html              # 메인 HTML 파일
├── css/
│   └── pages/
│       └── warehouse.css      # 스타일시트
└── js/
    └── pages/
        └── warehouse.js       # JavaScript 로직
```

### 접속 방법

1. 브라우저에서 `창고관리.html` 파일 열기
2. 또는 서버 URL로 접속 (예: `https://your-domain.com/warehouse`)

---

## 📥 입고 처리

### 입고 유형

| 유형 | 설명 | 사용 시나리오 |
|-----|------|------------|
| 🚚 구매입고 | 외부 구매 자재/제품 입고 | 발주서 기반 자재 입고 |
| 🏭 생산품입고 | 자체 생산 완료 제품 입고 | 작업지시서 완료 후 입고 |
| ↩️ 반품입고 | 고객 반품 제품 입고 | 불량/과다 주문 반품 |
| ⚠️ 불량입고 | 불량품 별도 입고 | 검사 후 불량 판정 제품 |
| 📦 출고품반품입고 | 출고했던 제품 반입 | 배송 실패, 주소 오류 등 |
| 🔄 교환입고 | 교환 요청 제품 입고 | 고객 교환 요청 |
| 🤝 외주사급입고 | 외주업체에 지급했던 자재 회수 | 사급 자재 미사용분 반환 |
| 🏢 외주생산입고 | 외주 생산 완료 제품 입고 | 외주 가공 완료 입고 |

### 입고 처리 절차

#### 1단계: 입고 유형 선택
```
📥 입고 탭 클릭 → 입고 유형 버튼 선택
```
- 화면 상단의 **📥 입고** 탭을 클릭합니다
- 8가지 입고 유형 중 해당하는 버튼을 터치합니다
- 선택된 버튼은 파란색으로 강조 표시됩니다

#### 2단계: 바코드 스캔
```
바코드 입력 필드에 스캔 또는 📷 카메라 스캔 버튼 클릭
```

**방법 1: 바코드 스캐너 사용**
1. 바코드 입력 필드를 터치하여 포커스
2. 바코드 스캐너로 제품 바코드 스캔
3. 자동으로 품목이 목록에 추가됨

**방법 2: 카메라 스캔**
1. **📷 카메라 스캔** 버튼 클릭
2. 카메라 권한 허용
3. 바코드를 카메라에 비춤
4. 자동으로 인식되어 품목 추가

**방법 3: 수동 입력**
1. 바코드 입력 필드에 바코드 번호 입력
2. **확인** 버튼 클릭 또는 Enter 키 입력

#### 3단계: 품목 확인 및 수정
```
품목 목록에서 품목 터치 → 상세 정보 확인/수정
```

- 추가된 품목을 터치하면 상세 정보 모달이 열립니다
- 수정 가능한 항목:
  - **수량**: +/- 버튼 또는 직접 입력
  - **위치**: 창고 내 저장 위치 (예: A-01-03)
  - **LOT 번호**: 제품 LOT 번호

#### 4단계: 근거 정보 추가 (다중 근거 지원)
```
+ 근거 추가 버튼 클릭 → 근거 정보 입력
```

- **근거 유형**: 발주서, 작업지시서, 수주서, 반품요청서, 이동요청서, 기타
- **근거 번호**: 문서 번호
- **거래처명**: 관련 거래처 (선택)
- **날짜**: 문서 날짜

**다중 근거 처리 예시:**
```
상황: 동일한 "알루미늄 프로파일" 제품을 두 개의 발주서에서 입고

근거 1:
- 유형: 발주서
- 번호: PO-2024-001
- 수량: 50EA

근거 2:
- 유형: 발주서
- 번호: PO-2024-002
- 수량: 30EA

→ 시스템이 자동으로 합산하여 총 80EA로 입고 처리
```

#### 5단계: 메모 입력 (선택)
```
메모 입력 필드에 추가 정보 입력
```
- 특이사항, 손상 여부, 포장 상태 등 자유롭게 기록

#### 6단계: 처리 완료
```
입고 처리 버튼 클릭 → 확인 → 완료
```

**처리 옵션:**
- **임시저장**: 나중에 계속 작업하고 싶을 때
- **입고 처리**: 최종 입고 처리 (되돌릴 수 없음)

**자동 출력:**
- 설정에서 "처리 완료 후 자동 출력"이 활성화되어 있으면
- 바코드 라벨이 자동으로 출력됩니다

---

## 📤 출고 처리

### 출고 유형

| 유형 | 설명 | 사용 시나리오 |
|-----|------|------------|
| 📦 주문출고 | 고객 주문에 따른 출고 | 수주서 기반 제품 출고 |
| 🔄 교환출고 | 교환을 위한 출고 | 고객 교환 요청 대응 |
| ↩️ 반품출고 | 공급사로 반품 출고 | 불량품, 과다 입고 반품 |
| 🏭 생산투입출고 | 생산 공정에 투입할 자재 출고 | 작업지시서 기반 자재 출고 |
| 🔍 검사출고 | 품질 검사를 위한 출고 | 샘플링 검사 |
| 🏢 외주출고 | 외주 가공을 위한 출고 | 외주 가공 의뢰 |
| 🤝 사급자재출고 | 외주업체에 지급할 자재 출고 | 무상 지급 자재 |

### 출고 처리 절차

입고 처리와 동일한 6단계를 따릅니다:

1. **출고 유형 선택**
2. **바코드 스캔**
3. **품목 확인 및 수정**
4. **근거 정보 추가**
5. **메모 입력**
6. **처리 완료**

### 재고 확인

출고 처리 시 시스템이 자동으로 재고를 확인합니다:

```
⚠️ 재고 부족 알림
재고가 부족한 품목이 있습니다: 알루미늄 프로파일 A100
계속 진행하시겠습니까?
```

- **예**: 재고 부족 상태로 출고 처리 (마이너스 재고)
- **아니오**: 출고 취소, 수량 조정

---

## 🔄 다중 근거 합산 처리

### 개념

동일한 제품이 여러 발주/주문에서 입고 또는 출고되는 경우, 시스템이 자동으로 합산하여 처리합니다.

### 입고 시나리오

```
상황: "스테인리스 파이프" 3개의 발주서에서 입고

1차 스캔 (PO-001): 20M
2차 스캔 (PO-002): 15M
3차 스캔 (PO-003): 10M

→ 시스템 자동 합산: 총 45M 입고
→ 근거 문서 3개 모두 기록됨
```

### 출고 시나리오

```
상황: "볼트 M8" 2개의 수주서에서 출고

1차 스캔 (SO-101): 500EA
2차 스캔 (SO-102): 300EA

→ 시스템 자동 합산: 총 800EA 출고
→ 근거 문서 2개 모두 기록됨
```

### 장점

✅ **효율성**: 한 번에 여러 주문 처리  
✅ **정확성**: 각 근거 문서별 수량 추적 가능  
✅ **간편성**: 별도 분리 작업 불필요  
✅ **추적성**: 근거 문서별 이력 관리

---

## 📷 바코드 스캔 기능

### 지원 바코드 형식

- **CODE128**: 가장 일반적인 산업용 바코드
- **EAN-13**: 제품 유통용 바코드
- **QR Code**: 2차원 바코드 (추가 정보 포함 가능)
- **CODE39**: 물류/재고 관리용

### 카메라 스캔 사용법

1. **📷 카메라 스캔** 버튼 클릭
2. 카메라 권한 요청 시 **허용** 선택
3. 바코드를 카메라 중앙에 위치
4. 자동 인식 (1-2초 소요)
5. 인식 성공 시 진동 및 효과음

**팁:**
- 바코드가 화면에 가득 차도록 가까이 대세요
- 조명이 충분한 곳에서 스캔하세요
- 바코드가 구겨지거나 손상되지 않았는지 확인하세요

### 바코드 스캐너 연결

**블루투스 스캐너:**
1. 스캐너를 블루투스로 페어링
2. HID 모드로 설정 (키보드 입력 모드)
3. 바코드 입력 필드에 포커스
4. 스캔하면 자동으로 입력됨

**USB 스캐너:**
1. USB 케이블로 연결 (OTG 어댑터 필요할 수 있음)
2. 자동으로 인식됨
3. 바코드 입력 필드에 포커스
4. 스캔하면 자동으로 입력됨

---

## 🖨️ 바코드 출력

### 자동 출력

설정에서 **"처리 완료 후 자동 출력"** 활성화 시:
- 입고/출고 처리 완료 후 자동으로 출력 프리뷰 표시
- **출력** 버튼 클릭하여 라벨 프린터로 출력

### 출력 내용

```
[바코드 라벨 예시]

━━━━━━━━━━━━━━━━━━
   구매입고
2024-10-30 14:30
━━━━━━━━━━━━━━━━━━

알루미늄 프로파일 A100
┌─────────────────┐
│ ║║║ ║║ ║║║ ║║   │ (바코드 이미지)
└─────────────────┘
ITEM001 | 50 EA

━━━━━━━━━━━━━━━━━━
창고: 본사 창고
위치: A-01-03
LOT: L20241030-001
━━━━━━━━━━━━━━━━━━
```

### 지원 프린터

- **라벨 프린터**: Zebra, Brother, DYMO 등
- **일반 프린터**: A4 용지에 여러 개 출력 가능
- **모바일 프린터**: 블루투스 휴대용 프린터

---

## 💾 임시저장 기능

### 사용 시나리오

```
상황 1: 작업 중 긴급 업무 발생
→ 임시저장 → 긴급 업무 처리 → 나중에 이어서 작업

상황 2: 근거 문서 확인 필요
→ 임시저장 → 문서 확인 후 재개

상황 3: 배터리 부족
→ 임시저장 → 충전 후 작업 재개
```

### 임시저장 방법

1. **임시저장** 버튼 클릭
2. "임시저장되었습니다" 메시지 확인
3. 다른 작업 진행 가능

### 불러오기

- 다음에 앱 실행 시 자동으로 알림:
  ```
  ⚠️ 임시저장된 입고 데이터가 있습니다.
  불러오시겠습니까?
  ```
- **예**: 이전 작업 이어서 진행
- **아니오**: 새로 시작

**주의사항:**
- 임시저장은 **브라우저 로컬 저장소**에 저장됩니다
- 브라우저 캐시 삭제 시 임시저장 데이터도 삭제됩니다
- 정기적으로 처리를 완료해주세요

---

## 📊 처리 이력 조회

### 이력 보기

1. 헤더 우측의 **📋** 버튼 클릭
2. 처리 이력 모달 열림
3. 날짜 및 유형별 필터링 가능

### 이력 정보

```
━━━━━━━━━━━━━━━━━━━━━━━━
📥 입고 | 2024-10-30 14:30
구매입고 | 3개 품목
━━━━━━━━━━━━━━━━━━━━━━━━

📤 출고 | 2024-10-30 13:15
주문출고 | 5개 품목
━━━━━━━━━━━━━━━━━━━━━━━━
```

### 이력 보관

- 최근 **100건**의 이력 저장
- 로컬 저장소에 보관 (오프라인 조회 가능)
- 서버 동기화 (온라인 시 자동)

---

## ⚙️ 설정

### 설정 메뉴

헤더 우측 **⚙️** 버튼 클릭

### 설정 항목

| 설정 | 설명 | 기본값 |
|-----|------|-------|
| 처리 완료 후 자동 출력 | 입출고 처리 후 자동으로 바코드 출력 | ✅ ON |
| 스캔 효과음 | 바코드 스캔 시 효과음 재생 | ✅ ON |
| 스캔 진동 | 바코드 스캔 시 진동 피드백 | ✅ ON |
| 기본 창고 | 입출고 처리 시 기본 창고 | 본사 창고 |

### 창고 목록

- **WH01**: 본사 창고
- **WH02**: 제1공장 창고
- **WH03**: 제2공장 창고
- **WH04**: 외부 창고

---

## 📱 반응형 디자인

### 스마트폰 (< 768px)

```
┌─────────────────┐
│ 📦 창고관리  ⚙️ │ ← 헤더
├─────────────────┤
│ 📥 입고 │ 📤 출고│ ← 탭
├─────────────────┤
│                 │
│  [입고 유형]    │ ← 2열 그리드
│                 │
│  [바코드 스캔]  │
│                 │
│  [품목 목록]    │
│                 │
└─────────────────┘
```

### 태블릿 (768px - 1024px)

```
┌───────────────────────────┐
│ 📦 창고관리          ⚙️ 📋│
├───────────────────────────┤
│  📥 입고  │  📤 출고      │
├───────────────────────────┤
│ [입고 유형 - 4열 그리드]  │
├─────────────┬─────────────┤
│ [바코드]    │ [근거 정보] │
│ [품목 목록] │ [메모]      │
└─────────────┴─────────────┘
```

### PC (> 1024px)

```
┌─────────────────────────────────────┐
│ 📦 창고관리                    ⚙️ 📋│
├─────────────────────────────────────┤
│      📥 입고      │      📤 출고     │
├─────────────────────────────────────┤
│   [입고 유형 - 4열 그리드]          │
├──────────────┬──────────┬───────────┤
│  [바코드]    │[품목목록]│[근거정보] │
│              │          │[메모]     │
└──────────────┴──────────┴───────────┘
```

---

## 🎯 사용 팁

### 효율적인 작업 방법

1. **유형을 먼저 선택하세요**
   - 바코드 스캔 전 입고/출고 유형 선택
   - 스캔 후 자동으로 해당 유형으로 처리됨

2. **연속 스캔 활용**
   - 바코드 입력 필드가 계속 활성화되어 있음
   - 여러 품목을 빠르게 연속 스캔 가능

3. **근거 문서는 나중에 추가 가능**
   - 품목 스캔을 먼저 완료
   - 마지막에 근거 문서 일괄 추가

4. **임시저장 활용**
   - 불확실한 내용이 있으면 임시저장
   - 확인 후 다시 불러와서 처리

### 오류 해결

**바코드를 인식하지 못할 때:**
- 바코드가 손상되지 않았는지 확인
- 조명을 밝게 하여 재시도
- 수동 입력으로 대체

**카메라가 작동하지 않을 때:**
- 브라우저 설정에서 카메라 권한 확인
- 다른 앱이 카메라를 사용 중인지 확인
- 페이지 새로고침 후 재시도

**품목이 중복 추가될 때:**
- 시스템이 자동으로 수량을 합산함
- 의도하지 않은 중복은 품목을 터치하여 수량 수정
- 또는 삭제 후 재스캔

---

## 🔐 보안 및 권한

### 필요한 권한

- **카메라**: 바코드 스캔 기능
- **로컬 저장소**: 임시저장 및 설정 저장
- **인쇄**: 바코드 라벨 출력

### 데이터 보안

- 모든 데이터는 HTTPS로 암호화 전송
- 로컬 저장소는 브라우저 보안 정책에 따름
- 민감한 정보는 서버에만 저장

---

## 📞 지원 및 문의

### 기술 지원

- **이메일**: support@topsseal.com
- **전화**: 02-1234-5678
- **운영 시간**: 평일 09:00 - 18:00

### 피드백

사용 중 불편한 점이나 개선 아이디어가 있으시면 언제든 연락주세요!

---

## 📚 관련 문서

- [화면개발 디자인 가이드](../가이드/shadcn-ui_디자인_시스템_가이드.md)
- [컴포넌트 사용 가이드](../js/components/)
- [공통 CSS 가이드](../css/common.css)

---

## 🆕 업데이트 히스토리

### v1.0.0 (2024-10-30)
- ✨ 초기 버전 출시
- 8가지 입고 유형 지원
- 7가지 출고 유형 지원
- 바코드 스캔 기능
- 다중 근거 합산 처리
- 바코드 출력 기능
- 반응형 디자인 적용

---

**Made with ❤️ for 탑씰 생산관리시스템**