397485e150
작업보고서 작성 페이지의 시간 입력을 모바일/터치 환경에 최적화 주요 변경사항: - 기존 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>
6.7 KiB
6.7 KiB
작업보고서 시간 입력 가이드
대상: 현장 작업자, 관리자
페이지: 일일 작업보고서 작성 (/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시간 근무했습니다.
입력 방법:
- 작업시간 영역 터치
- [8시간] 버튼 터치
- [확인] 버튼 터치
결과: 8시간 표시
예시 2: 8시간 30분 근무
상황: 오늘 8시간 30분 근무했습니다.
입력 방법:
- 작업시간 영역 터치
- [8시간] 버튼 터치
- [+30분] 버튼 터치 (현재: 8시간 30분)
- [확인] 버튼 터치
결과: 8시간 30분 표시
예시 3: 7시간 근무 (7시간 30분에서 조정)
상황: 처음에 7시간 30분을 선택했는데, 7시간으로 수정하고 싶습니다.
입력 방법:
- 작업시간 영역 터치
- [8시간] 버튼 터치
- [-30분] 버튼 터치 (현재: 7시간 30분)
- [-30분] 버튼 한 번 더 터치 (현재: 7시간)
- [확인] 버튼 터치
결과: 7시간 표시
예시 4: 부적합 시간 입력
상황: 8시간 근무했는데, 그 중 1시간은 설계 미스로 인한 부적합 작업이었습니다.
입력 방법:
- 작업시간: 8시간 입력 (위 예시 1 참고)
- 부적합 시간 영역 터치
- [1시간] 버튼 터치
- [확인] 버튼 터치
- 부적합 원인 드롭다운에서 설계미스 선택
결과:
- 작업시간:
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 작성자: 테크니컬코리아 개발팀