Files
TK-FB-Project/web-ui/pages/admin/tasks.html
Hyungi Ahn 1fc9dff69f feat: 작업 관리 페이지에 공정 관리 기능 추가
## 추가 기능
- 공정 추가/수정/삭제 기능 구현
- 공정 관리 모달 UI 추가
- 공정 탭에 편집 버튼 추가 (✏️)

## UI 변경
- 상단에 "공정 추가" 버튼 추가
- 공정 모달: 공정명, 카테고리, 설명 입력 필드
- 각 공정 탭에 편집 아이콘 표시

## JavaScript 함수
- openWorkTypeModal(): 공정 추가 모달 열기
- editWorkType(workTypeId): 공정 수정 모달 열기
- saveWorkType(): 공정 저장 (POST/PUT)
- deleteWorkType(): 공정 삭제 (연결된 작업 확인)
- closeWorkTypeModal(): 모달 닫기

## 검증 로직
- 연결된 작업이 있는 공정은 삭제 불가
- 필수 필드(공정명) 검증

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-26 15:18:14 +09:00

231 lines
9.4 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=7">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js?v=1" defer></script>
<script type="module" src="/js/api-config.js?v=3"></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">
<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 active">
<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="openWorkTypeModal()">
<span class="btn-icon">🔧</span>
공정 추가
</button>
<button class="btn btn-primary" onclick="openTaskModal()">
<span class="btn-icon"></span>
작업 추가
</button>
<button class="btn btn-secondary" onclick="refreshTasks()">
<span class="btn-icon">🔄</span>
새로고침
</button>
</div>
</div>
<!-- 공정(work_types) 탭 -->
<div class="code-tabs" id="workTypeTabs">
<button class="tab-btn active" data-work-type="" onclick="switchWorkType('')">
<span class="tab-icon">📋</span>
전체
</button>
<!-- 공정 탭들이 여기에 동적으로 생성됩니다 -->
</div>
<!-- 작업 목록 -->
<div class="code-section">
<div class="section-header">
<h2 class="section-title">
<span class="section-icon">🔧</span>
작업 목록
</h2>
</div>
<div class="code-stats" id="taskStats">
<span class="stat-item">
<span class="stat-icon">📋</span>
전체 <span id="totalCount">0</span>
</span>
<span class="stat-item">
<span class="stat-icon"></span>
활성 <span id="activeCount">0</span>
</span>
</div>
<div class="code-grid" id="taskGrid">
<!-- 작업 카드들이 여기에 동적으로 생성됩니다 -->
</div>
</div>
</div>
</main>
<!-- 작업 추가/수정 모달 -->
<div id="taskModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="taskModalTitle">작업 추가</h2>
<button class="modal-close-btn" onclick="closeTaskModal()">×</button>
</div>
<div class="modal-body">
<form id="taskForm" onsubmit="event.preventDefault(); saveTask();">
<input type="hidden" id="taskId">
<div class="form-group">
<label class="form-label">소속 공정 *</label>
<select id="taskWorkTypeId" class="form-control" required>
<option value="">공정 선택...</option>
<!-- 공정 목록이 동적으로 생성됩니다 -->
</select>
<small class="form-help">이 작업이 속한 공정을 선택하세요</small>
</div>
<div class="form-group">
<label class="form-label">작업명 *</label>
<input type="text" id="taskName" class="form-control" placeholder="예: 서스 용접, 프레임 조립" required>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea id="taskDescription" class="form-control" rows="4" placeholder="작업에 대한 설명을 입력하세요"></textarea>
</div>
<div class="form-group">
<label class="form-label" style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="taskIsActive" checked style="margin: 0;">
<span>활성화</span>
</label>
<small class="form-help">비활성화하면 TBM 입력 시 표시되지 않습니다</small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeTaskModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteTaskBtn" onclick="deleteTask()" style="display: none;">
🗑️ 삭제
</button>
<button type="button" class="btn btn-primary" onclick="saveTask()">
💾 저장
</button>
</div>
</div>
</div>
<!-- 공정 추가/수정 모달 -->
<div id="workTypeModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="workTypeModalTitle">공정 추가</h2>
<button class="modal-close-btn" onclick="closeWorkTypeModal()">×</button>
</div>
<div class="modal-body">
<form id="workTypeForm" onsubmit="event.preventDefault(); saveWorkType();">
<input type="hidden" id="workTypeId">
<div class="form-group">
<label class="form-label">공정명 *</label>
<input type="text" id="workTypeName" class="form-control" placeholder="예: Base(구조물), Vessel(용기)" required>
</div>
<div class="form-group">
<label class="form-label">카테고리</label>
<input type="text" id="workTypeCategory" class="form-control" placeholder="예: 제작, 조립">
<small class="form-help">공정을 그룹화할 카테고리 (선택사항)</small>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea id="workTypeDescription" class="form-control" rows="3" placeholder="공정에 대한 설명"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeWorkTypeModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteWorkTypeBtn" onclick="deleteWorkType()" style="display: none;">
🗑️ 삭제
</button>
<button type="button" class="btn btn-primary" onclick="saveWorkType()">
💾 저장
</button>
</div>
</div>
</div>
</div>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/task-management.js?v=1"></script>
</body>
</html>