hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d810a8b339231af162fee526e78f2a9bc64c6562
TK-FB-Project/web-ui/pages/management/work-management.html
Hyungi Ahn d810a8b339 refactor(web-ui): 전체 UI 반응형 디자인 개선 
모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록
UI 컴포넌트를 전면 개선했습니다.

주요 변경사항:
- 네비게이션 바: flex-wrap, rem 단위, sticky positioning 적용
- 사용자 정보 영역: max-width로 크기 제한, 텍스트 overflow 처리
- 공통 헤더: clamp()로 반응형 폰트, 반응형 패딩 적용
- 모든 관리 페이지: ES6 모듈 로딩 통일 (type="module")
- 반응형 breakpoint: 1200px, 768px, 640px, 480px

개선 효과:
✅ 모든 페이지에서 일관된 헤더 표시
✅ 사용자 정보 영역 늘어나는 문제 해결
✅ 모든 화면 크기에서 최적화된 레이아웃
✅ rem 단위 사용으로 접근성 개선

수정된 파일:
- web-ui/components/navbar.html: 전면 리팩토링
- web-ui/css/common.css: 반응형 스타일 추가
- web-ui/pages/**/*.html: 모듈 로딩 및 버전 업데이트 (13개 파일)
- web-ui/js/*.js: 모듈 시스템 개선

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

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-19 08:54:44 +09:00

165 lines
7.2 KiB
HTML
Raw Blame History

<!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/common.css?v=2">
<link rel="stylesheet" href="/css/work-management.css?v=2">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js" defer></script>
</head>
<body>
<div class="work-report-container">
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 헤더 -->
<header class="work-report-header">
<h1>🔧 작업 관리</h1>
<p class="subtitle">프로젝트, 작업자, 작업 유형 등 기본 데이터를 관리합니다</p>
</header>
<!-- 메인 콘텐츠 -->
<main class="work-report-main">
<!-- 뒤로가기 버튼 -->
<a href="javascript:history.back()" class="back-button">
← 뒤로가기
</a>
<div class="dashboard-main">
<!-- 빠른 액세스 섹션 -->
<div class="quick-access-section">
<h2 class="section-title">⚡ 빠른 액세스</h2>
<div class="quick-actions-grid">
<button class="quick-action-btn" onclick="navigateToPage('/pages/management/project-management.html')">
<span class="quick-icon">📁</span>
<span class="quick-text">새 프로젝트</span>
</button>
<button class="quick-action-btn" onclick="navigateToPage('/pages/management/worker-management.html')">
<span class="quick-icon">👤</span>
<span class="quick-text">작업자 등록</span>
</button>
<button class="quick-action-btn" onclick="navigateToPage('/pages/management/code-management.html')">
<span class="quick-icon">🏷️</span>
<span class="quick-text">코드 설정</span>
</button>
<button class="quick-action-btn" onclick="navigateToPage('/pages/analysis/work-analysis.html')">
<span class="quick-icon">📊</span>
<span class="quick-text">작업 분석</span>
</button>
</div>
</div>
<!-- 관리 메뉴 카드들 -->
<div class="management-section">
<h2 class="section-title">🔧 관리 메뉴</h2>
<div class="management-grid">
<!-- 프로젝트 관리 -->
<div class="management-card" onclick="navigateToPage('/pages/management/project-management.html')">
<div class="card-header">
<div class="card-icon">📁</div>
<h3 class="card-title">프로젝트 관리</h3>
</div>
<div class="card-content">
<p class="card-description">프로젝트 등록, 수정, 삭제 및 기본 정보 관리</p>
<div class="card-stats">
<div class="stat-item">
<span class="stat-label">등록된 프로젝트</span>
<span class="stat-value" id="projectCount">-</span>
</div>
</div>
</div>
<div class="card-footer">
<span class="card-action">관리하기 →</span>
</div>
</div>
<!-- 작업자 관리 -->
<div class="management-card" onclick="navigateToPage('/pages/management/worker-management.html')">
<div class="card-header">
<div class="card-icon">👥</div>
<h3 class="card-title">작업자 관리</h3>
</div>
<div class="card-content">
<p class="card-description">작업자 등록, 수정, 비활성화 및 정보 관리</p>
<div class="card-stats">
<div class="stat-item">
<span class="stat-label">활성 작업자</span>
<span class="stat-value" id="workerCount">-</span>
</div>
</div>
</div>
<div class="card-footer">
<span class="card-action">관리하기 →</span>
</div>
</div>
<!-- 코드 관리 -->
<div class="management-card" onclick="navigateToPage('/pages/management/code-management.html')">
<div class="card-header">
<div class="card-icon">🏷️</div>
<h3 class="card-title">코드 관리</h3>
</div>
<div class="card-content">
<p class="card-description">이슈 타입, 에러 타입, 작업 상태 등 코드 관리</p>
<div class="card-stats">
<div class="stat-item">
<span class="stat-label">코드 타입</span>
<span class="stat-value" id="codeTypeCount">-</span>
</div>
</div>
</div>
<div class="card-footer">
<span class="card-action">관리하기 →</span>
</div>
</div>
</div>
</div>
<!-- 시스템 상태 섹션 -->
<div class="system-status-section">
<h2 class="section-title">📊 시스템 현황</h2>
<div class="status-grid">
<div class="status-card">
<div class="status-icon">📁</div>
<div class="status-info">
<span class="status-label">활성 프로젝트</span>
<span class="status-value" id="activeProjectCount">-</span>
</div>
</div>
<div class="status-card">
<div class="status-icon">👥</div>
<div class="status-info">
<span class="status-label">등록 작업자</span>
<span class="status-value" id="totalWorkerCount">-</span>
</div>
</div>
<div class="status-card">
<div class="status-icon">📋</div>
<div class="status-info">
<span class="status-label">이번 달 작업</span>
<span class="status-value" id="monthlyWorkCount">-</span>
</div>
</div>
<div class="status-card">
<div class="status-icon">⚠️</div>
<div class="status-info">
<span class="status-label">미완료 작업</span>
<span class="status-value" id="incompleteWorkCount">-</span>
</div>
</div>
</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/work-management.js?v=3"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink