Files
TK-FB-Project/web-ui/pages.backup.20260202/work/report-create.html
Hyungi Ahn 74d3a78aa3 feat: 페이지 구조 재구성 및 사이드바 네비게이션 구현
- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성
  - work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동
  - common/ → attendance/: 근태/휴가 관련 페이지 이동
  - admin/ 정리: safety-* 파일들을 safety/로 이동

- 사이드바 네비게이션 메뉴 구현
  - 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리
  - 접기/펼치기 기능 및 상태 저장
  - 관리자 전용 메뉴 자동 표시/숨김

- 날씨 API 연동 (기상청 단기예보)
  - TBM 및 navbar에 현재 날씨 표시
  - weatherService.js 추가

- 안전 체크리스트 확장
  - 기본/날씨별/작업별 체크 유형 추가
  - checklist-manage.html 페이지 추가

- 이슈 신고 시스템 구현
  - workIssueController, workIssueModel, workIssueRoutes 추가

- DB 마이그레이션 파일 추가 (실행 대기)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-02 14:27:22 +09:00

180 lines
8.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>일일 작업보고서 작성 | (주)테크니컬코리아</title>
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/daily-work-report.css?v=11">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js" defer></script>
</head>
<body>
<div class="work-report-container">
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="work-report-main">
<!-- 탭 메뉴 -->
<div class="tab-menu" style="margin-bottom: var(--space-6);">
<button class="tab-btn active" id="tbmReportTab" onclick="switchTab('tbm')">
작업보고서 작성
</button>
<button class="tab-btn" id="completedReportTab" onclick="switchTab('completed')">
작성 완료 보고서
</button>
</div>
<!-- 메시지 영역 -->
<div id="message-container"></div>
<!-- TBM 작업보고 섹션 -->
<div id="tbmReportSection" class="step-section active">
<!-- TBM 작업 목록 -->
<div id="tbmWorkList">
<!-- TBM 작업 항목들이 여기에 동적으로 추가됩니다 -->
</div>
</div>
<!-- 작성 완료 보고서 섹션 -->
<div id="completedReportSection" class="step-section" style="display: none;">
<!-- 날짜 선택 필터 -->
<div class="form-group" style="max-width: 300px; margin-bottom: var(--space-5);">
<label for="completedReportDate" class="form-label">조회 날짜</label>
<input type="date" id="completedReportDate" class="form-input" onchange="loadCompletedReports()">
</div>
<!-- 완료된 보고서 목록 -->
<div id="completedReportsList">
<!-- 완료된 보고서들이 여기에 동적으로 추가됩니다 -->
</div>
</div>
</main>
</div>
<!-- 저장 결과 모달 -->
<div id="saveResultModal" class="modal-overlay" style="display: none;">
<div class="modal-container result-modal">
<div class="modal-header">
<h2 id="resultModalTitle">저장 결과</h2>
<button class="modal-close-btn" onclick="closeSaveResultModal()">×</button>
</div>
<div class="modal-body">
<div id="resultModalContent" class="result-content">
<!-- 결과 내용이 여기에 동적으로 추가됩니다 -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="closeSaveResultModal()">
확인
</button>
</div>
</div>
</div>
<!-- 작업장소 선택 모달 (지도 기반) -->
<div id="workplaceModal" class="modal-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1002; align-items: center; justify-content: center; overflow-y: auto; padding: 2rem 0;">
<div class="modal-container" style="background: white; border-radius: 8px; max-width: 1000px; width: 90%; max-height: none; margin: auto; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column;">
<div class="modal-header" style="padding: 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center;">
<h2 style="font-size: 1.25rem; font-weight: 600; color: #111827; margin: 0;">
<span style="margin-right: 0.5rem;">🗺️</span>작업장소 선택
</h2>
<button class="modal-close" onclick="closeWorkplaceModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #6b7280; padding: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 4px;">&times;</button>
</div>
<div class="modal-body" style="padding: 1.5rem; flex: 1; overflow-y: visible;">
<!-- 1단계: 카테고리 선택 -->
<div id="categorySelectionArea">
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: #374151;">
<span style="margin-right: 0.5rem;">🏭</span>공장 선택
</h3>
<div id="workplaceCategoryList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;">
<!-- 카테고리 버튼들 -->
</div>
</div>
<!-- 2단계: 작업장 선택 (지도 + 리스트) -->
<div id="workplaceSelectionArea" style="display: none; margin-top: 1.5rem;">
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: #374151;">
<span style="margin-right: 0.5rem;">📍</span>
<span id="selectedCategoryTitle">작업장 선택</span>
</h3>
<!-- 지도 기반 선택 영역 -->
<div id="layoutMapArea" style="display: none; margin-bottom: 1.5rem; padding: 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem;">
<div style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.75rem;">
<span style="margin-right: 0.25rem;">🗺️</span>
지도에서 작업장을 클릭하여 선택하세요
</div>
<div style="text-align: center; position: relative; display: inline-block; max-width: 100%;">
<canvas id="workplaceMapCanvas" style="max-width: 100%; border-radius: 0.5rem; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"></canvas>
</div>
</div>
<!-- 리스트 선택 영역 -->
<div style="margin-bottom: 1rem;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
<span style="font-size: 0.875rem; color: #6b7280;">
<span style="margin-right: 0.25rem;">📋</span>
리스트에서 선택
</span>
</div>
<div id="workplaceListArea" style="display: flex; flex-direction: column; gap: 0.5rem; max-height: 200px; overflow-y: auto; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: white;">
<!-- 작업장소 목록 -->
</div>
</div>
<div style="display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;">
<button type="button" class="btn btn-secondary" onclick="closeWorkplaceModal()">취소</button>
<button type="button" class="btn btn-primary" id="confirmWorkplaceBtn" onclick="confirmWorkplaceSelection()" disabled>선택 완료</button>
</div>
</div>
</div>
</div>
</div>
<!-- 시간 선택 팝오버 -->
<div id="timePickerOverlay" class="time-picker-overlay" style="display: none;" onclick="closeTimePicker()">
<div class="time-picker-popup" onclick="event.stopPropagation()">
<div class="time-picker-header">
<h3 id="timePickerTitle">작업시간 선택</h3>
<button class="time-picker-close" onclick="closeTimePicker()">&times;</button>
</div>
<div class="quick-time-grid">
<button type="button" class="time-btn" onclick="setTimeValue(0.5)">
<span class="time-value">30분</span>
</button>
<button type="button" class="time-btn" onclick="setTimeValue(1)">
<span class="time-value">1시간</span>
</button>
<button type="button" class="time-btn" onclick="setTimeValue(2)">
<span class="time-value">2시간</span>
</button>
<button type="button" class="time-btn" onclick="setTimeValue(4)">
<span class="time-value">4시간</span>
</button>
<button type="button" class="time-btn" onclick="setTimeValue(8)">
<span class="time-value">8시간</span>
</button>
</div>
<div class="time-adjust-area">
<span class="current-time-label">현재:</span>
<strong id="currentTimeDisplay" class="current-time-value">0시간</strong>
<div class="adjust-buttons">
<button type="button" class="adjust-btn" onclick="adjustTime(-0.5)">-30분</button>
<button type="button" class="adjust-btn" onclick="adjustTime(0.5)">+30분</button>
</div>
</div>
<button type="button" class="confirm-btn" onclick="confirmTimeSelection()">확인</button>
</div>
</div>
<!-- 스크립트 -->
<script type="module" src="/js/api-config.js?v=3"></script>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/daily-work-report.js?v=25"></script>
</body>
</html>