hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 안전 코드 tksafety 이관 + 사용자 관리 정리 + UI Tailwind 전환

Browse Source 
Phase 1: tksafety에 출입신청/체크리스트 API·웹 추가, tkfb 안전 코드 삭제
Phase 2: 사용자 관리 페이지 삭제, API 축소, 알림 수신자 tkuser 이관
Phase 3: tkuser 권한 페이지 정의 업데이트
Phase 4: 전체 34개 페이지 Tailwind CSS + tkfb-core.js 전환,
         미사용 CSS 20개·인프라 JS 10개·템플릿·컴포넌트 삭제

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-13 10:46:22 +09:00
parent 8373fe9e75
commit 9fda89a374
133 changed files with 5255 additions and 26181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
system1-factory/web/pages/work/analysis.html
View File

@@ -3,23 +3,35 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업 분석 | (주)테크니컬코리아</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/design-system.css">
<title>작업 분석 - 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">
<link rel="stylesheet" href="/css/work-analysis.css?v=41">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=3"></script>
<script src="/js/app-init.js?v=9" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
</head>
<body>
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<div class="analysis-container">
<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">
<!-- 뒤로가기 버튼 -->
<a href="javascript:history.back()" class="back-button" style="margin: 1rem 0;">
← 뒤로가기
@@ -261,10 +273,12 @@
</div>
</div>
</main>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="/static/js/tkfb-core.js"></script>
<script src="/js/api-base.js?v=3"></script>
<script type="module" src="/js/work-analysis.js?v=5"></script>
<script>
@@ -2855,5 +2869,6 @@
// 초기 모드 설정
window.currentAnalysisMode = 'period';
</script>
<script>initAuth();</script>
</body>
</html>

326
system1-factory/web/pages/work/nonconformity.html
View File

@@ -3,278 +3,71 @@
<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/common.css?v=2">
<link rel="stylesheet" href="/css/project-management.css?v=3">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=3"></script>
<script src="/js/app-init.js?v=9" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<style>
/* 통계 카드 */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-card {
background: white;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-align: center;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.875rem;
color: #6b7280;
}
.stat-card.reported .stat-number { color: #3b82f6; }
.stat-card.received .stat-number { color: #f97316; }
.stat-card.in_progress .stat-number { color: #8b5cf6; }
.stat-card.completed .stat-number { color: #10b981; }
/* 필터 바 */
.filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding: 1rem 1.25rem;
background: white;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.filter-bar select,
.filter-bar input {
padding: 0.625rem 0.875rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.875rem;
background: white;
}
.filter-bar select:focus,
.filter-bar input:focus {
outline: none;
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
.btn-new-report {
margin-left: auto;
padding: 0.625rem 1.25rem;
background: #f97316;
color: white;
border: none;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background 0.2s;
}
.btn-new-report:hover {
background: #ea580c;
}
/* 신고 목록 */
.issue-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.issue-card {
background: white;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.2s;
border: 1px solid transparent;
}
.issue-card:hover {
border-color: #fed7aa;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.issue-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.issue-id {
font-size: 0.875rem;
color: #9ca3af;
}
.issue-status {
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.issue-status.reported {
background: #dbeafe;
color: #1d4ed8;
}
.issue-status.received {
background: #fed7aa;
color: #c2410c;
}
.issue-status.in_progress {
background: #e9d5ff;
color: #7c3aed;
}
.issue-status.completed {
background: #d1fae5;
color: #047857;
}
.issue-status.closed {
background: #f3f4f6;
color: #4b5563;
}
.issue-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #1f2937;
}
.issue-category-badge {
display: inline-block;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 500;
margin-right: 0.5rem;
background: #fff7ed;
color: #c2410c;
}
.issue-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.875rem;
color: #6b7280;
}
.issue-meta-item {
display: flex;
align-items: center;
gap: 0.375rem;
}
.issue-photos {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
.issue-photos img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 0.375rem;
border: 1px solid #e5e7eb;
}
/* 빈 상태 */
.empty-state {
text-align: center;
padding: 4rem 1.5rem;
color: #6b7280;
background: white;
border-radius: 0.75rem;
}
.empty-state-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #374151;
}
@media (max-width: 768px) {
.filter-bar {
flex-direction: column;
align-items: stretch;
}
.btn-new-report {
width: 100%;
justify-content: center;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
<title>부적합 현황 - 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">
</head>
<body>
<div class="work-report-container">
<div id="navbar-container"></div>
<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>
<main class="work-report-main">
<div class="dashboard-main">
<div class="page-header">
<div class="page-title-section">
<h1 class="page-title">부적합 현황</h1>
<p class="page-description">자재, 설계, 검사 등 작업 관련 부적합 신고 현황입니다.</p>
</div>
<!-- Mobile overlay -->
<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">
<!-- Sidebar Nav -->
<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">
<!-- 페이지 헤더 -->
<div class="mb-5">
<h2 class="text-xl font-bold text-gray-800">부적합 현황</h2>
<p class="text-sm text-gray-500 mt-0.5">자재, 설계, 검사 등 작업 관련 부적합 신고 현황입니다.</p>
</div>
<!-- 통계 카드 -->
<div class="stats-grid" id="statsGrid">
<div class="stat-card reported">
<div class="stat-number" id="statReported">-</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5" id="statsGrid">
<div class="stat-card">
<div class="stat-value text-blue-600" id="statReported">-</div>
<div class="stat-label">신고</div>
</div>
<div class="stat-card received">
<div class="stat-number" id="statReceived">-</div>
<div class="stat-card">
<div class="stat-value text-orange-600" id="statReceived">-</div>
<div class="stat-label">접수</div>
</div>
<div class="stat-card in_progress">
<div class="stat-number" id="statProgress">-</div>
<div class="stat-card">
<div class="stat-value text-purple-600" id="statProgress">-</div>
<div class="stat-label">처리중</div>
</div>
<div class="stat-card completed">
<div class="stat-number" id="statCompleted">-</div>
<div class="stat-card">
<div class="stat-value text-green-600" id="statCompleted">-</div>
<div class="stat-label">완료</div>
</div>
</div>
<!-- 필터 바 -->
<div class="filter-bar">
<select id="filterStatus">
<div class="bg-white rounded-xl shadow-sm p-4 mb-5 flex flex-wrap items-center gap-3">
<select id="filterStatus" class="input-field px-3 py-2 rounded-lg text-sm">
<option value="">전체 상태</option>
<option value="reported">신고</option>
<option value="received">접수</option>
@@ -282,25 +75,22 @@
<option value="completed">완료</option>
<option value="closed">종료</option>
</select>
<input type="date" id="filterStartDate" title="시작일">
<input type="date" id="filterEndDate" title="종료일">
<a href="/pages/safety/report.html?type=nonconformity" class="btn-new-report">
+ 부적합 신고
<input type="date" id="filterStartDate" class="input-field px-3 py-2 rounded-lg text-sm" title="시작일">
<input type="date" id="filterEndDate" class="input-field px-3 py-2 rounded-lg text-sm" title="종료일">
<a id="btnNewReport" href="#" class="ml-auto inline-flex items-center gap-2 px-4 py-2 bg-orange-600 text-white rounded-lg text-sm font-semibold hover:bg-orange-700 transition-colors">
<i class="fas fa-plus"></i>부적합 신고
</a>
</div>
<!-- 신고 목록 -->
<div class="issue-list" id="issueList">
<div class="empty-state">
<div class="empty-state-title">로딩 중...</div>
</div>
<div id="issueList" class="space-y-3">
<div class="bg-white rounded-xl shadow-sm p-8 text-center text-gray-400 text-sm">로딩 중...</div>
</div>
</div>
</main>
</div>
</div>
<script src="/js/nonconformity-list.js?v=2"></script>
<script src="/static/js/tkfb-core.js"></script>
<script src="/static/js/tkfb-nonconformity.js"></script>
</body>
</html>

58
system1-factory/web/pages/work/report-create-mobile.html
View File

@@ -3,13 +3,11 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>작업보고서 | (주)테크니컬코리아</title>
<link rel="stylesheet" href="/css/design-system.css">
<title>작업보고서 - 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">
<link rel="stylesheet" href="/css/daily-work-report-mobile.css?v=1">
<link rel="stylesheet" href="/css/mobile.css?v=1">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=3"></script>
<script src="/js/app-init.js?v=9" defer></script>
<style>
/* 데스크탑이면 리다이렉트 */
@media (min-width: 769px) {
@@ -26,11 +24,29 @@
}
</script>
</head>
<body>
<!-- 네비게이션 바 (app-init에서 로드) -->
<div id="navbar-container"></div>
<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">
<div class="m-container">
<!-- Sticky 헤더 -->
<div class="m-header">
<h1 class="m-header-title">작업보고서</h1>
@@ -85,7 +101,6 @@
</div>
</div>
</div>
</div>
<!-- 시간 선택 오버레이 -->
<div class="m-time-overlay" id="mTimeOverlay" onclick="MobileReport.closeTimePicker()">
@@ -169,7 +184,13 @@
<!-- 토스트 -->
<div class="m-toast" id="mToast"></div>
</div>
</div>
</div>
<!-- 공통 모듈 -->
<script src="/static/js/tkfb-core.js"></script>
<script src="/js/api-base.js?v=3"></script>
<script src="/js/common/utils.js?v=1"></script>
<script src="/js/common/base-state.js?v=1"></script>
@@ -180,19 +201,6 @@
<!-- 모바일 전용 UI 로직 -->
<script src="/js/daily-work-report-mobile.js?v=4"></script>
<!-- 모바일 하단 네비게이션 -->
<div id="mobile-nav-container"></div>
<script>
if (window.innerWidth <= 768) {
fetch('/components/mobile-nav.html')
.then(r => r.text())
.then(html => {
document.getElementById('mobile-nav-container').innerHTML = html;
const scripts = document.getElementById('mobile-nav-container').querySelectorAll('script');
scripts.forEach(s => eval(s.textContent));
});
}
</script>
<script>initAuth();</script>
</body>
</html>

320
system1-factory/web/pages/work/report-create.html
View File

@@ -1,196 +1,162 @@
<!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=13">
<link rel="stylesheet" href="/css/mobile.css?v=1">
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- api-base.js에서 SW 캐시 강제 해제 처리 -->
<script src="/js/api-base.js?v=3"></script>
<script src="/js/app-init.js?v=9" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업보고서 작성 - 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">
<link rel="stylesheet" href="/css/daily-work-report.css?v=13">
</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 작업 항목들이 여기에 동적으로 추가됩니다 -->
<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>
</div>
</header>
<!-- 작성 완료 보고서 섹션 -->
<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>
<!-- Mobile overlay -->
<div id="mobileOverlay" class="hidden fixed inset-0 bg-black/50 z-30 lg:hidden"></div>
<!-- 완료된 보고서 목록 -->
<div id="completedReportsList">
<!-- 완료된 보고서들이 여기에 동적으로 추가됩니다 -->
</div>
</div>
</main>
</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">
<!-- Sidebar Nav -->
<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 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 class="flex-1 min-w-0">
<!-- 탭 메뉴 -->
<div class="tab-menu" style="margin-bottom: 1.5rem;">
<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">
<div id="tbmWorkList"></div>
</div>
<!-- 작성 완료 보고서 섹션 -->
<div id="completedReportSection" class="step-section" style="display: none;">
<div class="form-group" style="max-width: 300px; margin-bottom: 1.25rem;">
<label for="completedReportDate" class="form-label">조회 날짜</label>
<input type="date" id="completedReportDate" class="form-input" onchange="loadCompletedReports()">
</div>
<div id="completedReportsList"></div>
</div>
</div>
</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;">작업장소 선택</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;">공장 선택</h3>
<div id="workplaceCategoryList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;">
<!-- 카테고리 버튼들 -->
</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>
<!-- 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 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;">
지도에서 작업장을 클릭하여 선택하세요
</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>
</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 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;">작업장소 선택</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;">
<div id="categorySelectionArea">
<h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: #374151;">공장 선택</h3>
<div id="workplaceCategoryList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;"></div>
</div>
<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 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;">지도에서 작업장을 클릭하여 선택하세요</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>
</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>
<button type="button" class="confirm-btn" onclick="confirmTimeSelection()">확인</button>
</div>
</div>
<!-- 공통 모듈 -->
<script src="/js/common/utils.js?v=1"></script>
<script src="/js/common/base-state.js?v=1"></script>
<!-- 시간 선택 팝오버 -->
<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 src="/js/daily-work-report/state.js?v=2"></script>
<script src="/js/daily-work-report/utils.js?v=2"></script>
<script src="/js/daily-work-report/api.js?v=2"></script>
<!-- 기존 UI 로직 (점진적 마이그레이션) -->
<script defer src="/js/daily-work-report.js?v=36"></script>
<!-- 모바일 하단 네비게이션 -->
<div id="mobile-nav-container"></div>
<script>
if (window.innerWidth <= 768) {
fetch('/components/mobile-nav.html')
.then(r => r.text())
.then(html => {
document.getElementById('mobile-nav-container').innerHTML = html;
const scripts = document.getElementById('mobile-nav-container').querySelectorAll('script');
scripts.forEach(s => eval(s.textContent));
});
}
</script>
<script src="/static/js/tkfb-core.js"></script>
<script src="/js/api-base.js?v=3"></script>
<script src="/js/common/utils.js?v=1"></script>
<script src="/js/common/base-state.js?v=1"></script>
<script src="/js/daily-work-report/state.js?v=2"></script>
<script src="/js/daily-work-report/utils.js?v=2"></script>
<script src="/js/daily-work-report/api.js?v=2"></script>
<script defer src="/js/daily-work-report.js?v=36"></script>
<script>initAuth();</script>
</body>
</html>
</html>

127
system1-factory/web/pages/work/tbm-create.html
View File

@@ -3,27 +3,18 @@
<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 시작 | (주)테크니컬코리아</title>
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=3"></script>
<script src="/js/app-init.js?v=9" defer></script>
<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">
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
background: #f3f4f6;
margin: 0;
padding: 0;
padding-bottom: env(safe-area-inset-bottom);
-webkit-font-smoothing: antialiased;
touch-action: manipulation;
}
button, .worker-card, .list-item, .list-item-skip, .pill-btn, .pill-btn-add,
.nav-btn, .select-all-btn, [onclick] {
touch-action: manipulation;
}
@media (min-width: 480px) {
body { max-width: 480px; margin: 0 auto; min-height: 100vh; }
.tbm-create-wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; }
}
/* Fixed header */
@@ -781,52 +772,86 @@
</style>
</head>
<body>
<!-- Fixed Header -->
<div class="wizard-header">
<button type="button" class="back-btn" onclick="goBack()">&#8592;</button>
<h1>TBM 시작</h1>
<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">
<div class="tbm-create-wrap">
<!-- Fixed Header -->
<div class="wizard-header">
<button type="button" class="back-btn" onclick="goBack()">&#8592;</button>
<h1>TBM 시작</h1>
</div>
<!-- Step Indicator -->
<div class="step-indicator" id="stepIndicator">
<div class="step active"><span class="step-dot">1</span><span>작업자</span></div>
<div class="step-line"></div>
<div class="step"><span class="step-dot">2</span><span>프로젝트+공정</span></div>
<div class="step-line"></div>
<div class="step"><span class="step-dot">3</span><span>확인</span></div>
</div>
<!-- Step Content -->
<div class="step-content" id="stepContainer">
<!-- Dynamically rendered by tbm-create.js -->
</div>
<!-- Fixed Bottom Nav -->
<div class="wizard-nav" id="wizardNav">
<button type="button" class="nav-btn nav-btn-prev" id="prevBtn" style="visibility:hidden;">&#8592; 이전</button>
<button type="button" class="nav-btn nav-btn-next" id="nextBtn">다음 &#8594;</button>
</div>
<!-- Landscape Map Overlay removed - workplace selection moved to detail edit stage -->
<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
<div class="loading-spinner"></div>
<div class="loading-text" id="loadingText">데이터를 불러오는 중...</div>
</div>
<!-- Toast Container -->
<div id="toastContainer" class="toast-container"></div>
</div>
</div>
</div>
</div>
<!-- Step Indicator -->
<div class="step-indicator" id="stepIndicator">
<div class="step active"><span class="step-dot">1</span><span>작업자</span></div>
<div class="step-line"></div>
<div class="step"><span class="step-dot">2</span><span>프로젝트+공정</span></div>
<div class="step-line"></div>
<div class="step"><span class="step-dot">3</span><span>확인</span></div>
</div>
<!-- Step Content -->
<div class="step-content" id="stepContainer">
<!-- Dynamically rendered by tbm-create.js -->
</div>
<!-- Fixed Bottom Nav -->
<div class="wizard-nav" id="wizardNav">
<button type="button" class="nav-btn nav-btn-prev" id="prevBtn" style="visibility:hidden;">&#8592; 이전</button>
<button type="button" class="nav-btn nav-btn-next" id="nextBtn">다음 &#8594;</button>
</div>
<!-- Landscape Map Overlay removed - workplace selection moved to detail edit stage -->
<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
<div class="loading-spinner"></div>
<div class="loading-text" id="loadingText">데이터를 불러오는 중...</div>
</div>
<!-- Toast Container -->
<div id="toastContainer" class="toast-container"></div>
<!-- Scripts -->
<script src="/static/js/tkfb-core.js"></script>
<script src="/js/api-base.js?v=3"></script>
<!-- 공통 모듈 -->
<script src="/js/common/utils.js?v=2"></script>
<script src="/js/common/base-state.js?v=2"></script>
<script src="/js/tbm/state.js?v=3"></script>
<script src="/js/tbm/utils.js?v=3"></script>
<script src="/js/tbm/api.js?v=4"></script>
<script src="/js/tbm-create.js?v=14"></script>
<script>initAuth();</script>
</body>
</html>

38
system1-factory/web/pages/work/tbm-mobile.html
View File

@@ -3,14 +3,35 @@
<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 | (주)테크니컬코리아</title>
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=3"></script>
<script src="/js/app-init.js?v=9" defer></script>
<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">
<link rel="stylesheet" href="/css/tbm-mobile.css?v=1">
</head>
<body>
<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">
@@ -270,7 +291,13 @@
</div>
</div>
</div>
</div>
</div>
<!-- 공통 모듈 -->
<script src="/static/js/tkfb-core.js"></script>
<script src="/js/api-base.js?v=3"></script>
<script src="/js/common/utils.js?v=2"></script>
<script src="/js/common/base-state.js?v=2"></script>
@@ -278,5 +305,6 @@
<script src="/js/tbm/utils.js?v=3"></script>
<script src="/js/tbm/api.js?v=4"></script>
<script src="/js/tbm-mobile.js?v=3"></script>
<script>initAuth();</script>
</body>
</html>

612
system1-factory/web/pages/work/tbm.html
View File

@@ -3,168 +3,172 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TBM 관리 | (주)테크니컬코리아</title>
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/common.css?v=2">
<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">
<link rel="stylesheet" href="/css/tbm.css?v=5">
<link rel="stylesheet" href="/css/mobile.css?v=1">
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- 최적화된 로딩: API 설정 → 앱 초기화 (병렬 컴포넌트 로딩) -->
<script src="/js/api-base.js?v=3"></script>
<script src="/js/app-init.js?v=9" defer></script>
<!-- instant.page: 링크 호버 시 페이지 프리로딩 -->
<script src="https://instant.page/5.2.0" type="module"></script>
</head>
<body>
<div class="work-report-container">
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 메인 콘텐츠 -->
<main class="work-report-main">
<div class="tbm-container">
<!-- 페이지 헤더 -->
<div class="tbm-page-header">
<div class="tbm-title-section">
<h1 class="tbm-page-title">
<span class="tbm-page-title-icon">&#128736;</span>
TBM (Tool Box Meeting)
</h1>
<p class="tbm-page-description">아침 안전 회의 및 팀 구성 관리</p>
</div>
</div>
<!-- TBM 탭 메뉴 -->
<div class="tbm-tab-menu">
<button class="tbm-tab-btn active" data-tab="tbm-input" onclick="switchTbmTab('tbm-input')">
<span class="tbm-tab-icon">&#128221;</span>
TBM 입력
</button>
<button class="tbm-tab-btn" data-tab="tbm-manage" onclick="switchTbmTab('tbm-manage')">
<span class="tbm-tab-icon">&#128202;</span>
TBM 관리
</button>
</div>
<!-- TBM 입력 탭 -->
<div id="tbm-input-tab" class="tbm-tab-content active">
<div class="tbm-section">
<div class="tbm-section-header">
<h2 class="tbm-section-title">
<span>&#128197;</span>
오늘의 TBM
</h2>
<div class="tbm-section-actions">
<button class="tbm-btn tbm-btn-primary" onclick="openNewTbmModal()">
<span class="tbm-btn-icon">+</span>
새 TBM 시작
</button>
</div>
<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="tbm-stats-bar">
<span class="tbm-stat-item">
<span class="tbm-stat-label">오늘 등록</span>
<span class="tbm-stat-value highlight" id="todayTotalSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item">
<span class="tbm-stat-label">완료</span>
<span class="tbm-stat-value success" id="todayCompletedSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item">
<span class="tbm-stat-label">진행중</span>
<span class="tbm-stat-value warning" id="todayActiveSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
</div>
<div class="tbm-card-grid" id="todayTbmGrid">
<!-- 오늘의 TBM 세션 카드들이 여기에 동적으로 생성됩니다 -->
</div>
<!-- Empty State -->
<div class="tbm-empty-state" id="todayEmptyState" style="display: none;">
<div class="tbm-empty-icon">&#128203;</div>
<h3 class="tbm-empty-title">오늘 등록된 TBM이 없습니다</h3>
<p class="tbm-empty-description">"새 TBM 시작" 버튼을 눌러 오늘의 TBM을 시작해보세요.</p>
<button class="tbm-btn tbm-btn-primary" onclick="openNewTbmModal()">
<span class="tbm-btn-icon">+</span>
첫 TBM 시작하기
<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>
<!-- TBM 관리 탭 -->
<div id="tbm-manage-tab" class="tbm-tab-content">
<div class="tbm-section">
<div class="tbm-section-header">
<h2 class="tbm-section-title">
<span>&#128218;</span>
TBM 기록
</h2>
<div class="tbm-section-actions">
<button class="tbm-btn tbm-btn-secondary" onclick="loadMoreTbmDays()" id="loadMoreBtn">
더 보기
<!-- Mobile overlay -->
<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">
<!-- Sidebar Nav -->
<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">
<div class="tbm-container">
<!-- 페이지 헤더 -->
<div class="tbm-page-header">
<div class="tbm-title-section">
<h1 class="tbm-page-title">
<span class="tbm-page-title-icon">&#128736;</span>
TBM (Tool Box Meeting)
</h1>
<p class="tbm-page-description">아침 안전 회의 및 팀 구성 관리</p>
</div>
</div>
<!-- TBM 탭 메뉴 -->
<div class="tbm-tab-menu">
<button class="tbm-tab-btn active" data-tab="tbm-input" onclick="switchTbmTab('tbm-input')">
<span class="tbm-tab-icon">&#128221;</span>
TBM 입력
</button>
<button class="tbm-tab-btn" data-tab="tbm-manage" onclick="switchTbmTab('tbm-manage')">
<span class="tbm-tab-icon">&#128202;</span>
TBM 관리
</button>
</div>
</div>
<div class="tbm-stats-bar">
<span class="tbm-stat-item">
<span class="tbm-stat-label">총</span>
<span class="tbm-stat-value" id="totalSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item">
<span class="tbm-stat-label">완료</span>
<span class="tbm-stat-value success" id="completedSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item" id="viewModeIndicator" style="display: none;">
<span class="tbm-stat-value" id="viewModeText">내 TBM만</span>
</span>
</div>
<!-- TBM 입력 탭 -->
<div id="tbm-input-tab" class="tbm-tab-content active">
<div class="tbm-section">
<div class="tbm-section-header">
<h2 class="tbm-section-title">
<span>&#128197;</span>
오늘의 TBM
</h2>
<div class="tbm-section-actions">
<button class="tbm-btn tbm-btn-primary" onclick="openNewTbmModal()">
<span class="tbm-btn-icon">+</span>
새 TBM 시작
</button>
</div>
</div>
<!-- 날짜별 그룹 컨테이너 -->
<div class="tbm-section-body" id="tbmDateGroupsContainer">
<!-- 날짜별 TBM 그룹이 여기에 동적으로 생성됩니다 -->
</div>
<div class="tbm-stats-bar">
<span class="tbm-stat-item">
<span class="tbm-stat-label">오늘 등록</span>
<span class="tbm-stat-value highlight" id="todayTotalSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item">
<span class="tbm-stat-label">완료</span>
<span class="tbm-stat-value success" id="todayCompletedSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item">
<span class="tbm-stat-label">진행중</span>
<span class="tbm-stat-value warning" id="todayActiveSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
</div>
<!-- Empty State -->
<div class="tbm-empty-state" id="emptyState" style="display: none;">
<div class="tbm-empty-icon">&#128218;</div>
<h3 class="tbm-empty-title">등록된 TBM 세션이 없습니다</h3>
<p class="tbm-empty-description">TBM 입력 탭에서 새로운 TBM을 시작해보세요.</p>
<div class="tbm-card-grid" id="todayTbmGrid"></div>
<div class="tbm-empty-state" id="todayEmptyState" style="display: none;">
<div class="tbm-empty-icon">&#128203;</div>
<h3 class="tbm-empty-title">오늘 등록된 TBM이 없습니다</h3>
<p class="tbm-empty-description">"새 TBM 시작" 버튼을 눌러 오늘의 TBM을 시작해보세요.</p>
<button class="tbm-btn tbm-btn-primary" onclick="openNewTbmModal()">
<span class="tbm-btn-icon">+</span>
첫 TBM 시작하기
</button>
</div>
</div>
</div>
<!-- TBM 관리 탭 -->
<div id="tbm-manage-tab" class="tbm-tab-content">
<div class="tbm-section">
<div class="tbm-section-header">
<h2 class="tbm-section-title">
<span>&#128218;</span>
TBM 기록
</h2>
<div class="tbm-section-actions">
<button class="tbm-btn tbm-btn-secondary" onclick="loadMoreTbmDays()" id="loadMoreBtn">
더 보기
</button>
</div>
</div>
<div class="tbm-stats-bar">
<span class="tbm-stat-item">
<span class="tbm-stat-label">총</span>
<span class="tbm-stat-value" id="totalSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item">
<span class="tbm-stat-label">완료</span>
<span class="tbm-stat-value success" id="completedSessions">0</span>
<span class="tbm-stat-label">개</span>
</span>
<span class="tbm-stat-item" id="viewModeIndicator" style="display: none;">
<span class="tbm-stat-value" id="viewModeText">내 TBM만</span>
</span>
</div>
<div class="tbm-section-body" id="tbmDateGroupsContainer"></div>
<div class="tbm-empty-state" id="emptyState" style="display: none;">
<div class="tbm-empty-icon">&#128218;</div>
<h3 class="tbm-empty-title">등록된 TBM 세션이 없습니다</h3>
<p class="tbm-empty-description">TBM 입력 탭에서 새로운 TBM을 시작해보세요.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- TBM 생성 모달 (간소화) -->
<!-- TBM 생성 모달 -->
<div id="tbmModal" class="tbm-modal-overlay" style="display: none;">
<div class="tbm-modal" style="max-width: 800px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title" id="modalTitle">
<span>&#128221;</span>
새 TBM 시작
</h2>
<h2 class="tbm-modal-title" id="modalTitle"><span>&#128221;</span> 새 TBM 시작</h2>
<button class="tbm-modal-close" onclick="closeTbmModal()">×</button>
</div>
<div class="tbm-modal-body">
<form id="tbmForm" onsubmit="event.preventDefault(); saveTbmSession();">
<input type="hidden" id="sessionId">
<!-- 기본 정보 섹션 -->
<div class="tbm-form-section">
<h3 class="tbm-form-section-title">
<span>&#128197;</span>
기본 정보
</h3>
<h3 class="tbm-form-section-title"><span>&#128197;</span> 기본 정보</h3>
<div class="tbm-form-row">
<div class="tbm-form-group">
<label class="tbm-form-label">TBM 날짜<span class="tbm-form-required">*</span></label>
@@ -180,25 +184,18 @@
<div class="tbm-form-row">
<div class="tbm-form-group">
<label class="tbm-form-label">프로젝트</label>
<select id="newTbmProjectId" class="tbm-form-input">
<option value="">선택 안함</option>
</select>
<select id="newTbmProjectId" class="tbm-form-input"><option value="">선택 안함</option></select>
</div>
<div class="tbm-form-group">
<label class="tbm-form-label">공정<span class="tbm-form-required">*</span></label>
<select id="newTbmWorkTypeId" class="tbm-form-input" required>
<option value="">공정 선택...</option>
</select>
<select id="newTbmWorkTypeId" class="tbm-form-input" required><option value="">공정 선택...</option></select>
</div>
</div>
</div>
<!-- 작업자 선택 섹션 -->
<div class="tbm-form-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<h3 class="tbm-form-section-title" style="margin: 0; border: 0; padding: 0;">
<span>&#128101;</span>
작업자 선택
<span>&#128101;</span> 작업자 선택
<span id="newTbmWorkerCount" style="color: #3b82f6; font-size: 0.875rem;">(0명)</span>
</h3>
<div style="display: flex; gap: 0.5rem;">
@@ -206,11 +203,7 @@
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="deselectAllNewTbmWorkers()">전체 해제</button>
</div>
</div>
<div id="newTbmWorkerGrid" class="tbm-worker-select-grid">
<!-- 작업자 체크박스 그리드가 여기에 동적으로 생성됩니다 -->
</div>
<div id="newTbmWorkerGrid" class="tbm-worker-select-grid"></div>
<div class="tbm-alert tbm-alert-info" style="margin-top: 1rem;">
<span class="tbm-alert-icon">&#128161;</span>
<div class="tbm-alert-content">
@@ -220,13 +213,9 @@
</div>
</form>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeTbmModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="saveTbmSession()">
<span class="tbm-btn-icon">&#10003;</span>
저장하기
</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="saveTbmSession()"><span class="tbm-btn-icon">&#10003;</span> 저장하기</button>
</div>
</div>
</div>
@@ -235,13 +224,9 @@
<div id="bulkSettingModal" class="tbm-modal-overlay" style="display: none; z-index: 1101;">
<div class="tbm-modal" style="max-width: 700px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#9881;</span>
일괄 설정
</h2>
<h2 class="tbm-modal-title"><span>&#9881;</span> 일괄 설정</h2>
<button class="tbm-modal-close" onclick="closeBulkSettingModal()">×</button>
</div>
<div class="tbm-modal-body">
<div class="tbm-alert tbm-alert-info">
<span class="tbm-alert-icon">&#128161;</span>
@@ -250,8 +235,6 @@
<div class="tbm-alert-text">선택한 작업자들의 <strong>첫 번째 작업 라인</strong>에 동일한 정보가 적용됩니다.</div>
</div>
</div>
<!-- 작업자 선택 -->
<div class="tbm-form-section">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;">
<label class="tbm-form-label">적용할 작업자 선택<span class="tbm-form-required">*</span></label>
@@ -260,63 +243,38 @@
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="deselectAllForBulk()">해제</button>
</div>
</div>
<div id="bulkWorkerSelection" class="tbm-worker-select-grid" style="max-height: 180px;">
<!-- 작업자 체크박스들이 여기에 생성됩니다 -->
</div>
<div id="bulkWorkerSelection" class="tbm-worker-select-grid" style="max-height: 180px;"></div>
</div>
<div class="tbm-form-section" style="border-top: 1px solid #e2e8f0; padding-top: 1.5rem;">
<h3 class="tbm-form-section-title" style="border: 0; padding: 0; margin-bottom: 1rem;">
<span>&#128736;</span>
적용할 작업 정보
</h3>
<h3 class="tbm-form-section-title" style="border: 0; padding: 0; margin-bottom: 1rem;"><span>&#128736;</span> 적용할 작업 정보</h3>
<div class="tbm-form-group">
<label class="tbm-form-label">프로젝트</label>
<button type="button" id="bulkProjectBtn" onclick="openBulkItemSelect('project')" class="tbm-select-btn">
프로젝트 선택
<span class="tbm-select-arrow">&#9660;</span>
</button>
<button type="button" id="bulkProjectBtn" onclick="openBulkItemSelect('project')" class="tbm-select-btn">프로젝트 선택 <span class="tbm-select-arrow">&#9660;</span></button>
<input type="hidden" id="bulkProjectId">
</div>
<div class="tbm-form-row">
<div class="tbm-form-group">
<label class="tbm-form-label">공정<span class="tbm-form-required">*</span></label>
<button type="button" id="bulkWorkTypeBtn" onclick="openBulkItemSelect('workType')" class="tbm-select-btn">
공정 선택
<span class="tbm-select-arrow">&#9660;</span>
</button>
<button type="button" id="bulkWorkTypeBtn" onclick="openBulkItemSelect('workType')" class="tbm-select-btn">공정 선택 <span class="tbm-select-arrow">&#9660;</span></button>
<input type="hidden" id="bulkWorkTypeId">
</div>
<div class="tbm-form-group">
<label class="tbm-form-label">작업<span class="tbm-form-required">*</span></label>
<button type="button" id="bulkTaskBtn" onclick="openBulkItemSelect('task')" class="tbm-select-btn" disabled>
작업 선택
<span class="tbm-select-arrow">&#9660;</span>
</button>
<button type="button" id="bulkTaskBtn" onclick="openBulkItemSelect('task')" class="tbm-select-btn" disabled>작업 선택 <span class="tbm-select-arrow">&#9660;</span></button>
<input type="hidden" id="bulkTaskId">
</div>
</div>
<div class="tbm-form-group">
<label class="tbm-form-label">작업장<span class="tbm-form-required">*</span></label>
<button type="button" id="bulkWorkplaceBtn" onclick="openBulkWorkplaceSelect()" class="tbm-select-btn">
작업장 선택
<span class="tbm-select-arrow">&#9660;</span>
</button>
<button type="button" id="bulkWorkplaceBtn" onclick="openBulkWorkplaceSelect()" class="tbm-select-btn">작업장 선택 <span class="tbm-select-arrow">&#9660;</span></button>
<input type="hidden" id="bulkWorkplaceCategoryId">
<input type="hidden" id="bulkWorkplaceId">
</div>
</div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeBulkSettingModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="applyBulkSettings()">
<span class="tbm-btn-icon">&#10003;</span>
선택한 작업자에 적용
</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="applyBulkSettings()"><span class="tbm-btn-icon">&#10003;</span> 선택한 작업자에 적용</button>
</div>
</div>
</div>
@@ -325,122 +283,81 @@
<div id="workerSelectionModal" class="tbm-modal-overlay" style="display: none; z-index: 1101;">
<div class="tbm-modal" style="max-width: 800px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#128101;</span>
작업자 선택
</h2>
<h2 class="tbm-modal-title"><span>&#128101;</span> 작업자 선택</h2>
<button class="tbm-modal-close" onclick="closeWorkerSelectionModal()">×</button>
</div>
<div class="tbm-modal-body">
<div style="margin-bottom: 1rem; display: flex; gap: 0.5rem;">
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="selectAllWorkersInModal()">전체 선택</button>
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="deselectAllWorkersInModal()">전체 해제</button>
</div>
<div id="workerCardGrid" class="tbm-worker-select-grid">
<!-- 작업자 카드들이 여기에 생성됩니다 -->
</div>
<div id="workerCardGrid" class="tbm-worker-select-grid"></div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeWorkerSelectionModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="confirmWorkerSelection()">
<span class="tbm-btn-icon">&#10003;</span>
선택 완료
</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="confirmWorkerSelection()"><span class="tbm-btn-icon">&#10003;</span> 선택 완료</button>
</div>
</div>
</div>
<!-- 항목 선택 모달 (프로젝트/공정/작업 선택용) -->
<!-- 항목 선택 모달 -->
<div id="itemSelectModal" class="tbm-modal-overlay" style="display: none; z-index: 1102;">
<div class="tbm-modal" style="max-width: 600px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title" id="itemSelectModalTitle">항목 선택</h2>
<button class="tbm-modal-close" onclick="closeItemSelectModal()">×</button>
</div>
<div class="tbm-modal-body">
<div id="itemSelectList" class="tbm-item-list">
<!-- 선택 항목들이 여기에 생성됩니다 -->
</div>
<div id="itemSelectList" class="tbm-item-list"></div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeItemSelectModal()">취소</button>
</div>
</div>
</div>
<!-- 작업장 선택 모달 (2단계: 공장 → 작업장) -->
<!-- 작업장 선택 모달 -->
<div id="workplaceSelectModal" class="tbm-modal-overlay" style="display: none; z-index: 1102;">
<div class="tbm-modal" style="max-width: 1000px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#127981;</span>
작업장 선택
</h2>
<h2 class="tbm-modal-title"><span>&#127981;</span> 작업장 선택</h2>
<button class="tbm-modal-close" onclick="closeWorkplaceSelectModal()">×</button>
</div>
<div class="tbm-modal-body">
<!-- 1단계: 공장 선택 -->
<div class="tbm-form-section">
<h3 class="tbm-form-section-title">
<span style="background: #3b82f6; color: white; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;">1</span>
공장 선택
</h3>
<div id="categoryList" style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
<!-- 공장 카테고리 버튼들이 여기에 생성됩니다 -->
</div>
<div id="categoryList" style="display: flex; flex-wrap: wrap; gap: 0.5rem;"></div>
</div>
<!-- 2단계: 작업장 선택 (지도 기본 + 리스트 토글) -->
<div id="workplaceSelectionArea" style="display: none;">
<div class="tbm-form-section">
<h3 class="tbm-form-section-title">
<span style="background: #3b82f6; color: white; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;">2</span>
작업장 선택
</h3>
<!-- 지도 기반 선택 (기본 표시) -->
<div id="layoutMapArea" style="display: none; padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;">
<div style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.75rem;">
지도에서 작업장을 클릭하여 선택하세요
</div>
<div style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.75rem;">지도에서 작업장을 클릭하여 선택하세요</div>
<div class="tbm-workplace-map-container">
<canvas id="workplaceMapCanvas"></canvas>
</div>
<button type="button" class="landscape-trigger-btn" id="landscapeTriggerBtn" onclick="openLandscapeMap()" style="display:none;">
&#128250; 전체화면 지도
</button>
<button type="button" class="landscape-trigger-btn" id="landscapeTriggerBtn" onclick="openLandscapeMap()" style="display:none;">&#128250; 전체화면 지도</button>
</div>
<!-- 리스트 기반 선택 (모바일에서 토글) -->
<div style="margin-top: 0.75rem;">
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm"
onclick="toggleWorkplaceList()" id="toggleListBtn" style="display: none;">
리스트로 선택
</button>
<button type="button" class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="toggleWorkplaceList()" id="toggleListBtn" style="display: none;">리스트로 선택</button>
<div id="workplaceListSection">
<div id="workplaceList" class="tbm-item-list">
<div style="color: #94a3b8; text-align: center; padding: 2rem;">
공장을 먼저 선택해주세요
</div>
<div style="color: #94a3b8; text-align: center; padding: 2rem;">공장을 먼저 선택해주세요</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeWorkplaceSelectModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="confirmWorkplaceSelection()" id="confirmWorkplaceBtn" disabled>
<span class="tbm-btn-icon">&#10003;</span>
선택 완료
</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="confirmWorkplaceSelection()" id="confirmWorkplaceBtn" disabled><span class="tbm-btn-icon">&#10003;</span> 선택 완료</button>
</div>
</div>
</div>
@@ -449,13 +366,9 @@
<div id="teamModal" class="tbm-modal-overlay" style="display: none;">
<div class="tbm-modal" style="max-width: 900px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#128101;</span>
팀 구성
</h2>
<h2 class="tbm-modal-title"><span>&#128101;</span> 팀 구성</h2>
<button class="tbm-modal-close" onclick="closeTeamModal()">×</button>
</div>
<div class="tbm-modal-body">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<h3 class="tbm-form-section-title" style="margin: 0; border: 0; padding: 0;">작업자 선택</h3>
@@ -464,27 +377,17 @@
<button class="tbm-btn tbm-btn-secondary tbm-btn-sm" onclick="deselectAllWorkers()">전체 해제</button>
</div>
</div>
<div id="workerSelectionGrid" class="tbm-worker-select-grid">
<!-- 작업자 체크박스 목록이 여기에 생성됩니다 -->
</div>
<div id="workerSelectionGrid" class="tbm-worker-select-grid"></div>
<div style="margin-top: 1.5rem;">
<h3 class="tbm-form-section-title">
선택된 팀원 <span id="selectedCount" style="color: #3b82f6;">0</span>명
</h3>
<h3 class="tbm-form-section-title">선택된 팀원 <span id="selectedCount" style="color: #3b82f6;">0</span>명</h3>
<div id="selectedWorkersList" style="display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 50px; padding: 0.75rem; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0;">
<p style="margin: 0; color: #94a3b8; font-size: 0.875rem;">작업자를 선택해주세요</p>
</div>
</div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeTeamModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="saveTeamComposition()">
<span class="tbm-btn-icon">&#10003;</span>
팀 구성 완료
</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="saveTeamComposition()"><span class="tbm-btn-icon">&#10003;</span> 팀 구성 완료</button>
</div>
</div>
</div>
@@ -493,25 +396,15 @@
<div id="safetyModal" class="tbm-modal-overlay" style="display: none;">
<div class="tbm-modal" style="max-width: 700px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#128737;</span>
안전 체크리스트
</h2>
<h2 class="tbm-modal-title"><span>&#128737;</span> 안전 체크리스트</h2>
<button class="tbm-modal-close" onclick="closeSafetyModal()">×</button>
</div>
<div class="tbm-modal-body">
<div id="safetyChecklistContainer" class="tbm-safety-list">
<!-- 안전 체크리스트가 여기에 생성됩니다 -->
</div>
<div id="safetyChecklistContainer" class="tbm-safety-list"></div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeSafetyModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-success" onclick="saveSafetyChecklist()">
<span class="tbm-btn-icon">&#10003;</span>
안전 체크 완료
</button>
<button type="button" class="tbm-btn tbm-btn-success" onclick="saveSafetyChecklist()"><span class="tbm-btn-icon">&#10003;</span> 안전 체크 완료</button>
</div>
</div>
</div>
@@ -520,13 +413,9 @@
<div id="completeModal" class="tbm-modal-overlay" style="display: none;">
<div class="tbm-modal" style="max-width: 500px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#10003;</span>
TBM 완료
</h2>
<h2 class="tbm-modal-title"><span>&#10003;</span> TBM 완료</h2>
<button class="tbm-modal-close" onclick="closeCompleteModal()">×</button>
</div>
<div class="tbm-modal-body">
<div class="tbm-alert tbm-alert-warning">
<span class="tbm-alert-icon">&#9888;</span>
@@ -535,12 +424,10 @@
<div class="tbm-alert-text">완료 후에는 수정할 수 없습니다.</div>
</div>
</div>
<div class="tbm-form-group" style="margin-top: 1.5rem;">
<label class="tbm-form-label">종료 시간</label>
<input type="time" id="endTime" class="tbm-form-input">
</div>
<div class="tbm-form-group" style="margin-top: 1rem;">
<label class="tbm-form-label">작업자 근태</label>
<div id="completeAttendanceList" style="max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.5rem;">
@@ -548,13 +435,9 @@
</div>
</div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeCompleteModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-success" id="completeModalBtn" onclick="completeTbmSession()">
<span class="tbm-btn-icon">&#10003;</span>
완료
</button>
<button type="button" class="tbm-btn tbm-btn-success" id="completeModalBtn" onclick="completeTbmSession()"><span class="tbm-btn-icon">&#10003;</span> 완료</button>
</div>
</div>
</div>
@@ -563,17 +446,12 @@
<div id="handoverModal" class="tbm-modal-overlay" style="display: none;">
<div class="tbm-modal" style="max-width: 600px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#128073;</span>
작업 인계
</h2>
<h2 class="tbm-modal-title"><span>&#128073;</span> 작업 인계</h2>
<button class="tbm-modal-close" onclick="closeHandoverModal()">×</button>
</div>
<div class="tbm-modal-body">
<form id="handoverForm">
<input type="hidden" id="handoverSessionId">
<div class="tbm-form-group">
<label class="tbm-form-label">인계 사유<span class="tbm-form-required">*</span></label>
<select id="handoverReason" class="tbm-form-input" required>
@@ -584,14 +462,10 @@
<option value="other">기타</option>
</select>
</div>
<div class="tbm-form-group">
<label class="tbm-form-label">인수자 (다음 팀장)<span class="tbm-form-required">*</span></label>
<select id="toLeaderId" class="tbm-form-input" required>
<option value="">인수자 선택...</option>
</select>
<select id="toLeaderId" class="tbm-form-input" required><option value="">인수자 선택...</option></select>
</div>
<div class="tbm-form-row">
<div class="tbm-form-group">
<label class="tbm-form-label">인계 날짜<span class="tbm-form-required">*</span></label>
@@ -602,27 +476,19 @@
<input type="time" id="handoverTime" class="tbm-form-input">
</div>
</div>
<div class="tbm-form-group">
<label class="tbm-form-label">인계 내용</label>
<textarea id="handoverNotes" class="tbm-form-input" rows="4" placeholder="인수자에게 전달할 내용을 입력하세요" style="resize: vertical;"></textarea>
</div>
<div class="tbm-form-group">
<label class="tbm-form-label" style="margin-bottom: 0.75rem;">인계할 팀원 선택</label>
<div id="handoverTeamList" style="max-height: 200px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.75rem; background: #f8fafc;">
<!-- 팀원 체크박스 목록 -->
</div>
<div id="handoverTeamList" style="max-height: 200px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.75rem; background: #f8fafc;"></div>
</div>
</form>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeHandoverModal()">취소</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="saveHandover()">
<span class="tbm-btn-icon">&#128073;</span>
인계 요청
</button>
<button type="button" class="tbm-btn tbm-btn-primary" onclick="saveHandover()"><span class="tbm-btn-icon">&#128073;</span> 인계 요청</button>
</div>
</div>
</div>
@@ -631,129 +497,77 @@
<div id="detailModal" class="tbm-modal-overlay" style="display: none;">
<div class="tbm-modal" style="max-width: 900px;">
<div class="tbm-modal-header">
<h2 class="tbm-modal-title">
<span>&#128203;</span>
TBM 상세 정보
</h2>
<h2 class="tbm-modal-title"><span>&#128203;</span> TBM 상세 정보</h2>
<button class="tbm-modal-close" onclick="closeDetailModal()">×</button>
</div>
<div class="tbm-modal-body">
<!-- 세션 기본 정보 -->
<div class="tbm-form-section">
<h3 class="tbm-form-section-title">
<span>&#128197;</span>
기본 정보
</h3>
<div id="detailBasicInfo" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
<!-- 동적 생성 -->
</div>
<h3 class="tbm-form-section-title"><span>&#128197;</span> 기본 정보</h3>
<div id="detailBasicInfo" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"></div>
</div>
<!-- 팀 구성 -->
<div class="tbm-form-section">
<h3 class="tbm-form-section-title">
<span>&#128101;</span>
팀 구성
</h3>
<div id="detailTeamMembers" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;">
<!-- 동적 생성 -->
</div>
<h3 class="tbm-form-section-title"><span>&#128101;</span> 팀 구성</h3>
<div id="detailTeamMembers" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;"></div>
</div>
<!-- 안전 체크 -->
<div class="tbm-form-section">
<h3 class="tbm-form-section-title">
<span>&#128737;</span>
안전 체크리스트
</h3>
<div id="detailSafetyChecks">
<!-- 동적 생성 -->
</div>
<h3 class="tbm-form-section-title"><span>&#128737;</span> 안전 체크리스트</h3>
<div id="detailSafetyChecks"></div>
</div>
</div>
<div class="tbm-modal-footer" id="detailModalFooter">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeDetailModal()">닫기</button>
</div>
</div>
</div>
<!-- 가로모드 전체화면 지도 오버레이 -->
<!-- 가로모드 전체화면 지도 -->
<div id="landscapeOverlay" class="landscape-overlay" style="display:none;">
<div id="landscapeInner" class="landscape-inner">
<div class="landscape-header">
<h3>&#127981; 작업장 선택</h3>
<button type="button" class="landscape-close-btn" onclick="closeLandscapeMap()">×</button>
<div id="landscapeInner" class="landscape-inner">
<div class="landscape-header">
<h3>&#127981; 작업장 선택</h3>
<button type="button" class="landscape-close-btn" onclick="closeLandscapeMap()">×</button>
</div>
<div class="landscape-canvas-wrap">
<canvas id="landscapeCanvas"></canvas>
</div>
</div>
<div class="landscape-canvas-wrap">
<canvas id="landscapeCanvas"></canvas>
</div>
</div>
</div>
<!-- 분할 모달 -->
<div id="splitModal" class="tbm-modal-overlay" style="display:none;">
<div class="tbm-modal-container" style="max-width:500px;">
<div class="tbm-modal-header">
<h2>작업 분할</h2>
<button type="button" class="tbm-modal-close" onclick="closeSplitModal()">×</button>
<div class="tbm-modal-container" style="max-width:500px;">
<div class="tbm-modal-header"><h2>작업 분할</h2><button type="button" class="tbm-modal-close" onclick="closeSplitModal()">×</button></div>
<div class="tbm-modal-body">
<p style="font-size:0.8125rem; color:#6b7280; margin-bottom:0.75rem;">작업자의 배정 시간을 분할합니다.</p>
<div id="splitMemberList" style="display:flex; flex-direction:column; gap:0.5rem;"></div>
</div>
<div class="tbm-modal-footer"><button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeSplitModal()">닫기</button></div>
</div>
<div class="tbm-modal-body">
<p style="font-size:0.8125rem; color:#6b7280; margin-bottom:0.75rem;">작업자의 배정 시간을 분할합니다.</p>
<div id="splitMemberList" style="display:flex; flex-direction:column; gap:0.5rem;"></div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closeSplitModal()">닫기</button>
</div>
</div>
</div>
<!-- 빼오기 모달 -->
<div id="pullModal" class="tbm-modal-overlay" style="display:none;">
<div class="tbm-modal-container" style="max-width:500px;">
<div class="tbm-modal-header">
<h2>빼오기</h2>
<button type="button" class="tbm-modal-close" onclick="closePullModal()">×</button>
<div class="tbm-modal-container" style="max-width:500px;">
<div class="tbm-modal-header"><h2>빼오기</h2><button type="button" class="tbm-modal-close" onclick="closePullModal()">×</button></div>
<div class="tbm-modal-body">
<p style="font-size:0.8125rem; color:#6b7280; margin-bottom:0.75rem;">다른 반장의 TBM에서 작업자를 빼옵니다.</p>
<div id="pullSessionList"></div>
</div>
<div class="tbm-modal-footer"><button type="button" class="tbm-btn tbm-btn-secondary" onclick="closePullModal()">닫기</button></div>
</div>
<div class="tbm-modal-body">
<p style="font-size:0.8125rem; color:#6b7280; margin-bottom:0.75rem;">다른 반장의 TBM에서 작업자를 빼옵니다.</p>
<div id="pullSessionList"></div>
</div>
<div class="tbm-modal-footer">
<button type="button" class="tbm-btn tbm-btn-secondary" onclick="closePullModal()">닫기</button>
</div>
</div>
</div>
<!-- 토스트 알림 -->
<!-- 토스트 -->
<div class="toast-container" id="toastContainer"></div>
</div>
<!-- 공통 모듈 -->
<script src="/static/js/tkfb-core.js"></script>
<script src="/js/api-base.js?v=3"></script>
<script src="/js/common/utils.js?v=2"></script>
<script src="/js/common/base-state.js?v=2"></script>
<!-- TBM 모듈 (리팩토링된 구조) -->
<script src="/js/tbm/state.js?v=3"></script>
<script src="/js/tbm/utils.js?v=3"></script>
<script src="/js/tbm/api.js?v=4"></script>
<!-- 기존 UI 로직 (점진적 마이그레이션) -->
<script defer src="/js/tbm.js?v=13"></script>
<!-- 모바일 하단 네비게이션 -->
<div id="mobile-nav-container"></div>
<script>
if (window.innerWidth <= 768) {
fetch('/components/mobile-nav.html')
.then(r => r.text())
.then(html => {
document.getElementById('mobile-nav-container').innerHTML = html;
const scripts = document.getElementById('mobile-nav-container').querySelectorAll('script');
scripts.forEach(s => eval(s.textContent));
});
}
</script>
<script>initAuth();</script>
</body>
</html>