feat: 작업보고서 시간 입력 UX 개선 - 터치 최적화
작업보고서 작성 페이지의 시간 입력을 모바일/터치 환경에 최적화 주요 변경사항: - 기존 number input → 큰 버튼 기반 팝오버 방식으로 전환 - 퀵 선택 버튼 5개 (30분, 1시간, 2시간, 4시간, 8시간) - ±30분 미세 조정 버튼 추가 - 터치 타겟 최소 48-64px로 확대 - "8시간 30분" 형식으로 직관적 표시 - TBM 작업보고 및 수동 입력 모두 적용 기술 구현: - Hidden input + display div 패턴으로 폼 호환성 유지 - 팝오버 오버레이 with ESC/클릭 외부 닫기 - CSS 애니메이션 추가 - 캐시 버스팅 (CSS v9, JS v24) 문서: - 개발 로그: 개발 log/2026-01-27-time-input-ux-improvement.md - 사용자 가이드: docs/guides/work-report-time-input-guide.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
242
docs/guides/work-report-time-input-guide.md
Normal file
242
docs/guides/work-report-time-input-guide.md
Normal file
@@ -0,0 +1,242 @@
|
||||
# 작업보고서 시간 입력 가이드
|
||||
|
||||
**대상**: 현장 작업자, 관리자
|
||||
**페이지**: 일일 작업보고서 작성 (`/pages/work/report-create.html`)
|
||||
**업데이트**: 2026-01-27
|
||||
|
||||
---
|
||||
|
||||
## 📱 시간 입력 방법
|
||||
|
||||
작업보고서 작성 시 작업시간과 부적합 시간을 쉽고 빠르게 입력할 수 있습니다.
|
||||
|
||||
### 1단계: 시간 입력 영역 터치
|
||||
|
||||
작업보고서 테이블에서 **작업시간** 또는 **부적합 시간** 영역을 터치하세요.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 작업자 │ 날짜 │ 작업시간 │ 부적합 │
|
||||
├─────────────────────────────────────┤
|
||||
│ 김철수 │ 01.27│ [시간 선택] │ [0시간] │
|
||||
└─────────────────────────────────────┘
|
||||
↑ 여기를 터치
|
||||
```
|
||||
|
||||
### 2단계: 원하는 시간 선택
|
||||
|
||||
팝업 창에서 자주 사용하는 시간을 선택하세요.
|
||||
|
||||
```
|
||||
┌──────────────────────────────────┐
|
||||
│ 시간 선택 │
|
||||
├──────────────────────────────────┤
|
||||
│ [30분] [1시간] [2시간] │
|
||||
│ [4시간] [8시간] │ ← 큰 버튼으로 쉽게 선택
|
||||
├──────────────────────────────────┤
|
||||
│ 현재: 8시간 │
|
||||
│ [-30분] [+30분] │ ← 미세 조정
|
||||
├──────────────────────────────────┤
|
||||
│ [확인] │
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3단계: 확인 버튼 터치
|
||||
|
||||
선택한 시간이 맞으면 **확인** 버튼을 터치하세요.
|
||||
|
||||
---
|
||||
|
||||
## ⏱️ 사용 예시
|
||||
|
||||
### 예시 1: 8시간 근무
|
||||
|
||||
**상황**: 오늘 8시간 근무했습니다.
|
||||
|
||||
**입력 방법**:
|
||||
1. 작업시간 영역 터치
|
||||
2. **[8시간]** 버튼 터치
|
||||
3. **[확인]** 버튼 터치
|
||||
|
||||
**결과**: `8시간` 표시
|
||||
|
||||
---
|
||||
|
||||
### 예시 2: 8시간 30분 근무
|
||||
|
||||
**상황**: 오늘 8시간 30분 근무했습니다.
|
||||
|
||||
**입력 방법**:
|
||||
1. 작업시간 영역 터치
|
||||
2. **[8시간]** 버튼 터치
|
||||
3. **[+30분]** 버튼 터치 (현재: 8시간 30분)
|
||||
4. **[확인]** 버튼 터치
|
||||
|
||||
**결과**: `8시간 30분` 표시
|
||||
|
||||
---
|
||||
|
||||
### 예시 3: 7시간 근무 (7시간 30분에서 조정)
|
||||
|
||||
**상황**: 처음에 7시간 30분을 선택했는데, 7시간으로 수정하고 싶습니다.
|
||||
|
||||
**입력 방법**:
|
||||
1. 작업시간 영역 터치
|
||||
2. **[8시간]** 버튼 터치
|
||||
3. **[-30분]** 버튼 터치 (현재: 7시간 30분)
|
||||
4. **[-30분]** 버튼 한 번 더 터치 (현재: 7시간)
|
||||
5. **[확인]** 버튼 터치
|
||||
|
||||
**결과**: `7시간` 표시
|
||||
|
||||
---
|
||||
|
||||
### 예시 4: 부적합 시간 입력
|
||||
|
||||
**상황**: 8시간 근무했는데, 그 중 1시간은 설계 미스로 인한 부적합 작업이었습니다.
|
||||
|
||||
**입력 방법**:
|
||||
1. **작업시간**: 8시간 입력 (위 예시 1 참고)
|
||||
2. **부적합 시간** 영역 터치
|
||||
3. **[1시간]** 버튼 터치
|
||||
4. **[확인]** 버튼 터치
|
||||
5. 부적합 원인 드롭다운에서 **설계미스** 선택
|
||||
|
||||
**결과**:
|
||||
- 작업시간: `8시간`
|
||||
- 부적합: `1시간`
|
||||
- 원인: `설계미스`
|
||||
|
||||
---
|
||||
|
||||
## 🎯 빠른 입력 팁
|
||||
|
||||
### 자주 사용하는 시간
|
||||
대부분의 경우 아래 시간을 많이 사용합니다:
|
||||
- **8시간**: 표준 근무시간
|
||||
- **4시간**: 반일 근무
|
||||
- **2시간**: 단시간 작업
|
||||
- **1시간**: 짧은 작업
|
||||
- **30분**: 아주 짧은 작업
|
||||
|
||||
### +/- 버튼 활용
|
||||
- **+30분**: 30분 단위로 증가
|
||||
- **-30분**: 30분 단위로 감소
|
||||
- 여러 번 터치 가능 (예: +30분 3번 = 1시간 30분 증가)
|
||||
|
||||
### 취소 방법
|
||||
잘못 선택한 경우:
|
||||
- 팝업 창 바깥을 터치하거나
|
||||
- ESC 키를 누르면
|
||||
- 변경 없이 닫힙니다
|
||||
|
||||
---
|
||||
|
||||
## ❗ 주의사항
|
||||
|
||||
### 시간 범위
|
||||
- **최소**: 0시간
|
||||
- **최대**: 24시간
|
||||
- **단위**: 30분 (0.5시간)
|
||||
|
||||
### 부적합 시간 제한
|
||||
- 부적합 시간은 작업시간을 초과할 수 없습니다
|
||||
- 예: 작업시간 8시간 → 부적합 최대 8시간
|
||||
|
||||
### 부적합 시간 입력 시
|
||||
- 부적합 시간이 0보다 크면 자동으로 **부적합 원인** 선택창이 나타납니다
|
||||
- 반드시 원인을 선택해야 제출할 수 있습니다
|
||||
|
||||
---
|
||||
|
||||
## 🔍 자주 묻는 질문 (FAQ)
|
||||
|
||||
### Q1: 15분 단위로 입력할 수 있나요?
|
||||
**A**: 현재는 30분 단위만 지원합니다. 15분 단위가 필요하면 관리자에게 문의하세요.
|
||||
|
||||
### Q2: 시간을 잘못 입력했어요. 어떻게 수정하나요?
|
||||
**A**: 같은 영역을 다시 터치하면 팝업이 열립니다. 원하는 시간으로 다시 선택하고 확인하세요.
|
||||
|
||||
### Q3: 팝업이 안 닫혀요.
|
||||
**A**:
|
||||
- 팝업 바깥 영역을 터치하거나
|
||||
- X 버튼을 터치하거나
|
||||
- ESC 키를 누르세요
|
||||
|
||||
### Q4: 숫자로 직접 입력할 수 없나요?
|
||||
**A**: 터치 환경 최적화를 위해 버튼 선택 방식으로 변경되었습니다. 더 빠르고 정확한 입력이 가능합니다.
|
||||
|
||||
### Q5: 이전 입력 값을 기억할 수 있나요?
|
||||
**A**: 현재는 지원하지 않습니다. 향후 업데이트에서 추가 예정입니다.
|
||||
|
||||
---
|
||||
|
||||
## 💡 실전 활용 시나리오
|
||||
|
||||
### 시나리오 1: 일반 근무일
|
||||
```
|
||||
작업자: 김철수
|
||||
작업시간: 8시간
|
||||
부적합: 없음
|
||||
|
||||
입력 순서:
|
||||
1. 작업시간 터치 → 8시간 → 확인
|
||||
2. 부적합은 0시간으로 유지
|
||||
3. 제출
|
||||
```
|
||||
|
||||
### 시나리오 2: 자재 지연으로 인한 부적합
|
||||
```
|
||||
작업자: 이영희
|
||||
작업시간: 8시간
|
||||
부적합: 2시간 (입고지연)
|
||||
|
||||
입력 순서:
|
||||
1. 작업시간 터치 → 8시간 → 확인
|
||||
2. 부적합 터치 → 2시간 → 확인
|
||||
3. 부적합 원인: 입고지연 선택
|
||||
4. 제출
|
||||
```
|
||||
|
||||
### 시나리오 3: 반일 근무
|
||||
```
|
||||
작업자: 박민수
|
||||
작업시간: 4시간
|
||||
부적합: 없음
|
||||
|
||||
입력 순서:
|
||||
1. 작업시간 터치 → 4시간 → 확인
|
||||
2. 부적합은 0시간으로 유지
|
||||
3. 제출
|
||||
```
|
||||
|
||||
### 시나리오 4: 잔업 (10시간 30분)
|
||||
```
|
||||
작업자: 최지훈
|
||||
작업시간: 10시간 30분
|
||||
부적합: 없음
|
||||
|
||||
입력 순서:
|
||||
1. 작업시간 터치 → 8시간 → +30분 5번 → 확인
|
||||
(또는 1시간 → +30분 19번)
|
||||
2. 부적합은 0시간으로 유지
|
||||
3. 제출
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📞 문의 및 지원
|
||||
|
||||
### 기술 지원
|
||||
- **이메일**: support@technical-korea.com
|
||||
- **전화**: 02-XXXX-XXXX
|
||||
- **근무시간**: 평일 09:00 - 18:00
|
||||
|
||||
### 피드백
|
||||
개선 사항이나 건의사항이 있으시면 관리자에게 알려주세요.
|
||||
|
||||
---
|
||||
|
||||
**마지막 업데이트**: 2026-01-27
|
||||
**버전**: 1.0
|
||||
**작성자**: 테크니컬코리아 개발팀
|
||||
Reference in New Issue
Block a user