Files
TK-FB-Project/web-ui/pages.backup.20260202/admin/projects.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

259 lines
12 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/admin-pages.css?v=6">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js" defer></script>
</head>
<body>
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 메인 레이아웃: 사이드바 + 콘텐츠 -->
<div class="page-container">
<!-- 사이드바 -->
<aside class="sidebar">
<nav class="sidebar-nav">
<div class="sidebar-header">
<h3 class="sidebar-title">관리 메뉴</h3>
</div>
<ul class="sidebar-menu">
<li class="menu-item active">
<a href="/pages/admin/projects.html">
<span class="menu-icon">📁</span>
<span class="menu-text">프로젝트 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/workers.html">
<span class="menu-icon">👥</span>
<span class="menu-text">작업자 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/workplaces.html">
<span class="menu-icon">🏗️</span>
<span class="menu-text">작업장 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/equipments.html">
<span class="menu-icon">⚙️</span>
<span class="menu-text">설비 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/tasks.html">
<span class="menu-icon">📋</span>
<span class="menu-text">작업 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/codes.html">
<span class="menu-icon">🏷️</span>
<span class="menu-text">코드 관리</span>
</a>
</li>
<li class="menu-divider"></li>
<li class="menu-item">
<a href="/pages/dashboard.html">
<span class="menu-icon">🏠</span>
<span class="menu-text">대시보드로</span>
</a>
</li>
</ul>
</nav>
</aside>
<!-- 메인 콘텐츠 -->
<main class="main-content">
<div class="dashboard-main">
<!-- 페이지 헤더: 타이틀 + 액션 버튼 -->
<div class="page-header">
<div class="page-title-section">
<h1 class="page-title">
<span class="title-icon">📁</span>
프로젝트 관리
</h1>
<p class="page-description">프로젝트 등록, 수정, 삭제 및 기본 정보를 관리합니다</p>
</div>
<div class="page-actions">
<button class="btn btn-primary" onclick="openProjectModal()">
<span class="btn-icon"></span>
새 프로젝트 등록
</button>
<button class="btn btn-secondary" onclick="refreshProjectList()">
<span class="btn-icon">🔄</span>
새로고침
</button>
</div>
</div>
<!-- 검색 및 필터 -->
<div class="search-section">
<div class="search-bar">
<input type="text" id="searchInput" placeholder="프로젝트명 또는 Job No.로 검색..." class="search-input">
<button class="search-btn" onclick="searchProjects()">
<span class="search-icon">🔍</span>
</button>
</div>
<div class="filter-options">
<select id="statusFilter" class="filter-select" onchange="filterProjects()">
<option value="">전체 상태</option>
<option value="active">진행중</option>
<option value="completed">완료</option>
<option value="paused">중단</option>
</select>
<select id="sortBy" class="filter-select" onchange="sortProjects()">
<option value="created_at">등록일순</option>
<option value="project_name">프로젝트명순</option>
<option value="due_date">납기일순</option>
</select>
</div>
</div>
<!-- 프로젝트 목록 -->
<div class="projects-section">
<div class="section-header">
<h2 class="section-title">등록된 프로젝트</h2>
<div class="project-stats">
<span class="stat-item active-stat" onclick="filterByStatus('active')" title="활성 프로젝트만 보기">
<span class="stat-icon">🟢</span>
활성 <span id="activeProjects">0</span>
</span>
<span class="stat-item inactive-stat" onclick="filterByStatus('inactive')" title="비활성 프로젝트만 보기">
<span class="stat-icon">🔴</span>
비활성 <span id="inactiveProjects">0</span>
</span>
<span class="stat-item total-stat" onclick="filterByStatus('all')" title="전체 프로젝트 보기">
<span class="stat-icon">📊</span>
<span id="totalProjects">0</span>
</span>
</div>
</div>
<div class="projects-grid" id="projectsGrid">
<!-- 프로젝트 카드들이 여기에 동적으로 생성됩니다 -->
</div>
<div class="empty-state" id="emptyState" style="display: none;">
<div class="empty-icon">📁</div>
<h3>등록된 프로젝트가 없습니다</h3>
<p>새 프로젝트를 등록해보세요.</p>
<button class="btn btn-primary" onclick="openProjectModal()">
<span class="btn-icon"></span>
첫 번째 프로젝트 등록
</button>
</div>
</div>
</main>
<!-- 프로젝트 등록/수정 모달 -->
<div id="projectModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="modalTitle">새 프로젝트 등록</h2>
<button class="modal-close-btn" onclick="closeProjectModal()">×</button>
</div>
<div class="modal-body">
<form id="projectForm">
<input type="hidden" id="projectId">
<div class="form-row">
<div class="form-group">
<label class="form-label">Job No. *</label>
<input type="text" id="jobNo" class="form-control" required placeholder="예: TK-2024-001">
</div>
<div class="form-group">
<label class="form-label">프로젝트명 *</label>
<input type="text" id="projectName" class="form-control" required placeholder="프로젝트명을 입력하세요">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">계약일</label>
<input type="date" id="contractDate" class="form-control">
</div>
<div class="form-group">
<label class="form-label">납기일</label>
<input type="date" id="dueDate" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">납품방법</label>
<select id="deliveryMethod" class="form-control">
<option value="">선택하세요</option>
<option value="직접납품">직접납품</option>
<option value="택배">택배</option>
<option value="화물">화물</option>
<option value="현장설치">현장설치</option>
</select>
</div>
<div class="form-group">
<label class="form-label">현장</label>
<input type="text" id="site" class="form-control" placeholder="현장 위치를 입력하세요">
</div>
</div>
<div class="form-group">
<label class="form-label">PM (프로젝트 매니저)</label>
<input type="text" id="pm" class="form-control" placeholder="담당 PM을 입력하세요">
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">프로젝트 상태</label>
<select id="projectStatus" class="form-control">
<option value="planning">📋 계획</option>
<option value="active" selected>🚀 진행중</option>
<option value="completed">✅ 완료</option>
<option value="cancelled">❌ 취소</option>
</select>
</div>
<div class="form-group">
<label class="form-label">완료일 (납품일)</label>
<input type="date" id="completedDate" class="form-control">
</div>
</div>
<div class="form-group">
<label class="form-label" style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="isActive" checked style="margin: 0;">
<span>프로젝트 활성화</span>
</label>
<small style="color: #6b7280; font-size: 0.8rem;">체크 해제 시 작업보고서 입력에서 숨겨집니다</small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeProjectModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteProjectBtn" onclick="deleteProject()" style="display: none;">
🗑️ 삭제
</button>
<button type="button" class="btn btn-primary" onclick="saveProject()">
💾 저장
</button>
</div>
</div>
</div>
</main>
</div>
<!-- JavaScript -->
<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/project-management.js?v=3"></script>
</body>
</html>