573ef74246
Phase 1: 기반 수정 - 햄버거 메뉴 .mobile-open 규칙 커밋 (네비 버그 수정) - 36개 HTML 파일 tkfb.css 캐시 버스팅 ?v=2026031601 - tkfb.css 공통 모바일 기반: 터치 44px, iOS 줌 방지, 테이블 스크롤, 모달 최적화 Phase 2: 페이지별 최적화 - 그룹 A (심각): daily.html, work-status.html JS 카드 뷰 변환 - 그룹 A: monthly.html 모바일 컨트롤 스택 + No열 숨김 + 범례 그리드 - 공통 CSS: 페이지 헤더/컨트롤/필터 스택, 탭 가로 스크롤, 폼 2열→1열, 요약 바 wrap, 저장 바 sticky, 작업자 칩 터치 최적화, 2열 레이아웃→세로 스택, 테이블 래퍼 오버플로, 모달 풀스크린 - 개별 페이지: checkin, vacation-management, vacation-approval, projects, repair-management, annual-overview 인라인 모바일 스타일 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
311 lines
15 KiB
HTML
311 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>TBM - TK 공장관리</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
|
|
<link rel="stylesheet" href="/css/tbm-mobile.css?v=2026031401">
|
|
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
<header class="bg-orange-700 text-white sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-14">
|
|
<div class="flex items-center gap-3">
|
|
<button id="mobileMenuBtn" class="lg:hidden text-orange-200 hover:text-white"><i class="fas fa-bars text-xl"></i></button>
|
|
<i class="fas fa-industry text-xl text-orange-200"></i>
|
|
<h1 class="text-lg font-semibold">TK 공장관리</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span id="headerUserName" class="text-sm hidden sm:block">-</span>
|
|
<div id="headerUserAvatar" class="w-8 h-8 bg-orange-600 rounded-full flex items-center justify-center text-sm font-bold">-</div>
|
|
<button onclick="doLogout()" class="text-orange-200 hover:text-white" title="로그아웃"><i class="fas fa-sign-out-alt"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div id="mobileOverlay" class="hidden fixed inset-0 bg-black/50 z-30 lg:hidden"></div>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 fade-in">
|
|
<div class="flex gap-6">
|
|
<nav id="sideNav" class="hidden lg:flex flex-col gap-1 w-52 flex-shrink-0 pt-2 fixed lg:static z-40 bg-white lg:bg-transparent p-4 lg:p-0 rounded-lg lg:rounded-none shadow-lg lg:shadow-none top-14 left-0 bottom-0 overflow-y-auto"></nav>
|
|
<div class="flex-1 min-w-0">
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loadingOverlay" class="m-loading-overlay">
|
|
<div class="m-loading-spinner"></div>
|
|
<div class="m-loading-text" id="loadingText">불러오는 중...</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="m-header">
|
|
<div class="m-header-top">
|
|
<div>
|
|
<h1>TBM</h1>
|
|
<div class="m-date" id="headerDate"></div>
|
|
</div>
|
|
<button type="button" class="m-new-btn" onclick="location.href='/pages/work/tbm-create.html'">
|
|
+ 새 TBM
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="m-tabs">
|
|
<button type="button" class="m-tab active" data-tab="today" onclick="switchTab('today')">
|
|
당일 <span class="tab-count" id="todayCount">0</span>
|
|
</button>
|
|
<button type="button" class="m-tab" data-tab="all" onclick="switchTab('all')">
|
|
전체 <span class="tab-count" id="allCount">0</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="m-content" id="tbmContent">
|
|
<div class="m-skeleton"></div>
|
|
<div class="m-skeleton"></div>
|
|
<div class="m-skeleton"></div>
|
|
<div class="m-skeleton"></div>
|
|
</div>
|
|
|
|
<!-- Bottom Nav -->
|
|
<nav class="m-bottom-nav">
|
|
<a href="/pages/dashboard.html" class="m-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
</svg>
|
|
<span class="m-nav-label">홈</span>
|
|
</a>
|
|
<a href="/pages/work/tbm-mobile.html" class="m-nav-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 11l3 3L22 4"/>
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
|
</svg>
|
|
<span class="m-nav-label">TBM</span>
|
|
</a>
|
|
<a href="/pages/work/report-create.html" class="m-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
<polyline points="14 2 14 8 20 8"/>
|
|
<line x1="16" y1="13" x2="8" y2="13"/>
|
|
<line x1="16" y1="17" x2="8" y2="17"/>
|
|
</svg>
|
|
<span class="m-nav-label">작업보고</span>
|
|
</a>
|
|
<a href="/pages/attendance/checkin.html" class="m-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
<span class="m-nav-label">출근</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Toast -->
|
|
<div id="toastContainer" class="toast-container"></div>
|
|
|
|
<!-- TBM 완료 바텀시트 -->
|
|
<div id="completeOverlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9000;" onclick="closeCompleteSheet()"></div>
|
|
<div id="completeSheet" style="display:none; position:fixed; bottom:0; left:0; right:0; z-index:9001; background:white; border-radius:1rem 1rem 0 0; max-height:85vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 24px rgba(0,0,0,0.15);">
|
|
<div style="padding:1rem 1rem 0;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem;">
|
|
<h3 style="margin:0; font-size:1rem; font-weight:700;">TBM 완료</h3>
|
|
<button type="button" onclick="closeCompleteSheet()" style="background:none; border:none; font-size:1.25rem; color:#6b7280; cursor:pointer; padding:0.25rem;">✕</button>
|
|
</div>
|
|
<p style="margin:0 0 0.75rem; font-size:0.8125rem; color:#6b7280;">각 작업자의 근태를 선택하세요</p>
|
|
</div>
|
|
<div id="completeWorkerList" style="padding:0 1rem;"></div>
|
|
<div style="padding:0.75rem 1rem 1rem;">
|
|
<button type="button" id="completeSheetBtn" onclick="submitCompleteSheet()" style="width:100%; padding:0.75rem; background:#2563eb; color:white; border:none; border-radius:0.5rem; font-size:0.9375rem; font-weight:700; cursor:pointer;">완료 처리</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 세부 편집 바텀시트 -->
|
|
<div id="detailEditOverlay" class="detail-edit-overlay" onclick="closeDetailEditSheet()"></div>
|
|
<div id="detailEditSheet" class="detail-edit-sheet">
|
|
<div class="de-header">
|
|
<div class="de-header-row">
|
|
<h3>세부 내역 입력</h3>
|
|
<button type="button" class="de-close" onclick="closeDetailEditSheet()">✕</button>
|
|
</div>
|
|
</div>
|
|
<div class="de-select-all-row">
|
|
<input type="checkbox" class="de-worker-check" id="deSelectAll" onchange="toggleSelectAll()">
|
|
<span>전체 선택</span>
|
|
<span id="deSelectedCount" style="margin-left:auto; font-weight:600; color:#2563eb;"></span>
|
|
</div>
|
|
<div class="de-group-bar" id="deGroupBar">
|
|
<span id="deGroupLabel">0명 선택</span>
|
|
<button type="button" class="de-group-btn" onclick="openPicker('task')">작업 설정</button>
|
|
<button type="button" class="de-group-btn" onclick="openPicker('workplace')">장소 설정</button>
|
|
</div>
|
|
<div class="de-worker-list" id="deWorkerList"></div>
|
|
<div class="de-save-area">
|
|
<div style="display:flex; gap:0.5rem;">
|
|
<button type="button" class="de-save-btn" id="deSaveBtn" onclick="saveDetailEdit()" style="flex:2;">저장</button>
|
|
<button type="button" class="de-save-btn" onclick="completeFromDetailSheet()" style="flex:1; background:#10b981;">완료</button>
|
|
<button type="button" class="de-save-btn" onclick="handoverFromDetailSheet()" style="flex:0.7; background:#f59e0b;">인계</button>
|
|
<button type="button" class="de-save-btn" onclick="deleteFromDetailSheet()" style="flex:0.7; background:#ef4444;">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 작업/장소 선택 피커 -->
|
|
<div id="pickerOverlay" class="picker-overlay" onclick="closePicker()"></div>
|
|
<div id="pickerSheet" class="picker-sheet">
|
|
<div class="picker-header">
|
|
<h4 id="pickerTitle">선택</h4>
|
|
<button type="button" class="picker-close" onclick="closePicker()">✕</button>
|
|
</div>
|
|
<div class="picker-list" id="pickerList"></div>
|
|
<div class="picker-add-row" id="pickerAddRow">
|
|
<input type="text" class="picker-add-input" id="pickerAddInput" placeholder="새 항목 추가...">
|
|
<button type="button" class="picker-add-btn" id="pickerAddBtn" onclick="addNewItem()">추가</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 분할 바텀시트 -->
|
|
<div id="splitOverlay" class="split-overlay" onclick="closeSplitSheet()"></div>
|
|
<div id="splitSheet" class="split-sheet">
|
|
<div class="split-header">
|
|
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
<h4 id="splitTitle">작업 분할</h4>
|
|
<button type="button" onclick="closeSplitSheet()" style="background:none; border:none; font-size:1.125rem; color:#6b7280; cursor:pointer;">✕</button>
|
|
</div>
|
|
<p id="splitSubtitle">작업자의 근무 시간을 분할합니다</p>
|
|
</div>
|
|
<div class="split-body">
|
|
<div class="split-field">
|
|
<label>현재 TBM 작업 시간</label>
|
|
<input type="number" id="splitHours" class="split-input" step="0.5" min="0.5" max="7.5" placeholder="예: 5">
|
|
<div id="splitRemainder" style="font-size:0.75rem; color:#6b7280; margin-top:0.25rem;"></div>
|
|
</div>
|
|
<div class="split-field">
|
|
<label>나머지 시간 배정</label>
|
|
<div class="split-radio-group">
|
|
<div class="split-radio-item active" id="splitOptKeep" onclick="setSplitOption('keep')">현재 TBM 유지</div>
|
|
<div class="split-radio-item" id="splitOptSend" onclick="setSplitOption('send')">다른 반장에게</div>
|
|
</div>
|
|
</div>
|
|
<div class="split-field">
|
|
<label>프로젝트 (변경 시 선택)</label>
|
|
<select id="splitProjectId" class="split-input" style="padding:0.625rem;">
|
|
<option value="">현재 프로젝트 유지</option>
|
|
</select>
|
|
</div>
|
|
<div class="split-field">
|
|
<label>공정 (변경 시 선택)</label>
|
|
<select id="splitWorkTypeId" class="split-input" style="padding:0.625rem;">
|
|
<option value="">현재 공정 유지</option>
|
|
</select>
|
|
</div>
|
|
<div id="splitSessionPicker" style="display:none;">
|
|
<div class="split-field">
|
|
<label>이동할 TBM 선택</label>
|
|
<div class="split-session-list" id="splitSessionList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="split-footer">
|
|
<button type="button" class="split-btn" id="splitSaveBtn" onclick="saveSplit()">분할 저장</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 빼오기 바텀시트 -->
|
|
<div id="pullOverlay" class="pull-overlay" onclick="closePullSheet()"></div>
|
|
<div id="pullSheet" class="pull-sheet">
|
|
<div class="pull-header">
|
|
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
<h4 id="pullTitle">팀원 목록</h4>
|
|
<button type="button" onclick="closePullSheet()" style="background:none; border:none; font-size:1.125rem; color:#6b7280; cursor:pointer;">✕</button>
|
|
</div>
|
|
<p id="pullSubtitle"></p>
|
|
</div>
|
|
<div id="pullMemberList"></div>
|
|
</div>
|
|
|
|
<!-- 빼오기 시간 입력 모달 -->
|
|
<div id="pullHoursOverlay" class="split-overlay" style="z-index:9300;" onclick="closePullHoursModal()"></div>
|
|
<div id="pullHoursSheet" class="split-sheet" style="z-index:9301; max-height:60vh;">
|
|
<div class="split-header">
|
|
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
<h4 id="pullHoursTitle">빼오기</h4>
|
|
<button type="button" onclick="closePullHoursModal()" style="background:none; border:none; font-size:1.125rem; color:#6b7280; cursor:pointer;">✕</button>
|
|
</div>
|
|
<p id="pullHoursSubtitle">이동할 시간을 입력하세요</p>
|
|
</div>
|
|
<div class="split-body">
|
|
<div class="split-field">
|
|
<label>빼올 시간</label>
|
|
<input type="number" id="pullHoursInput" class="split-input" step="0.5" min="0.5" placeholder="예: 3">
|
|
</div>
|
|
<div class="split-field">
|
|
<label>내 TBM 프로젝트 (선택)</label>
|
|
<select id="pullProjectId" class="split-input" style="padding:0.625rem;">
|
|
<option value="">내 TBM 프로젝트 사용</option>
|
|
</select>
|
|
</div>
|
|
<div class="split-field">
|
|
<label>내 TBM 공정 (선택)</label>
|
|
<select id="pullWorkTypeId" class="split-input" style="padding:0.625rem;">
|
|
<option value="">내 TBM 공정 사용</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="split-footer">
|
|
<button type="button" class="split-btn" id="pullHoursSaveBtn" onclick="confirmPull()">빼오기 실행</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 인계 바텀시트 -->
|
|
<div id="handoverOverlay" class="split-overlay" onclick="closeHandoverSheet()"></div>
|
|
<div id="handoverSheet" class="split-sheet">
|
|
<div class="split-header">
|
|
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
<h4>작업 인계</h4>
|
|
<button type="button" onclick="closeHandoverSheet()" style="background:none; border:none; font-size:1.125rem; color:#6b7280; cursor:pointer;">✕</button>
|
|
</div>
|
|
<p id="handoverSubtitle">인계할 반장을 선택하세요</p>
|
|
</div>
|
|
<div class="split-body">
|
|
<div class="split-field">
|
|
<label>인계 대상 반장</label>
|
|
<select id="handoverLeaderId" class="split-input" style="padding:0.625rem;">
|
|
<option value="">반장 선택...</option>
|
|
</select>
|
|
</div>
|
|
<div class="split-field">
|
|
<label>인계할 작업자</label>
|
|
<div id="handoverWorkerList" style="max-height:200px; overflow-y:auto;"></div>
|
|
</div>
|
|
<div class="split-field">
|
|
<label>비고</label>
|
|
<input type="text" id="handoverNotes" class="split-input" placeholder="인계 사유 (선택)">
|
|
</div>
|
|
</div>
|
|
<div class="split-footer">
|
|
<button type="button" class="split-btn" onclick="submitHandover()">인계 요청</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 공통 모듈 -->
|
|
<script src="/static/js/tkfb-core.js?v=2026031601"></script>
|
|
<script src="/js/api-base.js?v=2026031401"></script>
|
|
<script src="/js/common/utils.js?v=2026031401"></script>
|
|
<script src="/js/common/base-state.js?v=2026031401"></script>
|
|
|
|
<script src="/js/tbm/state.js?v=2026031401"></script>
|
|
<script src="/js/tbm/utils.js?v=2026031401"></script>
|
|
<script src="/js/tbm/api.js?v=2026031401"></script>
|
|
<script src="/js/tbm-mobile.js?v=2026031401"></script>
|
|
<script>initAuth();</script>
|
|
</body>
|
|
</html>
|