hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web-ui): 전체 UI 반응형 디자인 개선

Browse Source 
모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록
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>
This commit is contained in:
Hyungi Ahn
2026-01-19 08:54:44 +09:00
parent 344ad35651
commit d810a8b339
14 changed files with 645 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
web-ui/components/navbar.html
View File

@@ -66,65 +66,85 @@
<style>
.navbar {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
padding: 12px 24px;
padding: 0.75rem 1.5rem;
color: white;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
gap: 1rem;
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15);
font-family: 'Malgun Gothic', sans-serif;
position: relative;
position: sticky;
top: 0;
z-index: 1000;
min-height: 4rem;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 12px;
gap: 0.75rem;
min-width: 0;
flex-shrink: 0;
}
.logo-small {
height: 40px;
height: 2.5rem;
width: auto;
border-radius: 6px;
border-radius: 0.375rem;
flex-shrink: 0;
}
.brand-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.brand-text {
font-size: 1.2rem;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand-subtitle {
font-size: 0.8rem;
font-size: 0.75rem;
opacity: 0.9;
font-weight: 400;
white-space: nowrap;
}
.navbar-center {
display: flex;
align-items: center;
flex: 0 1 auto;
justify-content: center;
min-width: 0;
}
.current-time {
font-size: 0.9rem;
font-size: 0.875rem;
font-weight: 500;
padding: 8px 16px;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.1);
border-radius: 20px;
border-radius: 1.25rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
white-space: nowrap;
}
.navbar-menu {
display: flex;
align-items: center;
gap: 20px;
gap: 1.25rem;
flex-shrink: 1;
flex-wrap: nowrap;
justify-content: flex-end;
min-width: 0;
}
/* 프로필 드롭다운 스타일 */
@@ -135,29 +155,34 @@
.user-info {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
gap: 0.75rem;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.1);
border-radius: 25px;
border-radius: 1.5625rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
cursor: pointer;
transition: all 0.3s ease;
min-width: 0;
max-width: 15rem;
flex-shrink: 0;
}
.user-info:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-1px);
}
.user-info.active {
background: rgba(255,255,255,0.25);
box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
box-shadow: 0 0 0 0.1875rem rgba(255,255,255,0.2);
}
.dropdown-arrow {
font-size: 0.7rem;
margin-left: 4px;
font-size: 0.625rem;
margin-left: 0.25rem;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.user-info.active .dropdown-arrow {
@@ -165,47 +190,55 @@
}
.user-avatar {
width: 36px;
height: 36px;
width: 2.25rem;
height: 2.25rem;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-size: 1.125rem;
flex-shrink: 0;
}
.user-details {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.user-name {
font-weight: 600;
font-size: 0.9rem;
font-size: 0.875rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.user-role {
font-size: 0.7rem;
font-size: 0.6875rem;
opacity: 0.8;
font-weight: 400;
white-space: nowrap;
}
/* 드롭다운 메뉴 */
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
top: calc(100% + 0.5rem);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
min-width: 240px;
border-radius: 0.75rem;
box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
min-width: 15rem;
max-width: 20rem;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
transform: translateY(-0.625rem);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
@@ -278,24 +311,26 @@
background: #ffebee;
}
/* 기존 버튼 스타일 */
/* 버튼 스타일 */
.navbar-buttons {
display: flex;
gap: 12px;
gap: 0.75rem;
flex-wrap: wrap;
}
.nav-btn {
padding: 8px 16px;
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
font-size: 0.85rem;
border-radius: 1.25rem;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 6px;
gap: 0.375rem;
font-family: inherit;
white-space: nowrap;
}
.dashboard-btn {
@@ -306,29 +341,29 @@
.dashboard-btn:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-1px);
transform: translateY(-0.0625rem);
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}
.system-btn {
background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
color: white;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 2px 8px rgba(156,39,176,0.3);
box-shadow: 0 0.125rem 0.5rem rgba(156,39,176,0.3);
}
.system-btn:hover {
background: linear-gradient(135deg, #8e24aa 0%, #5e35b1 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(156,39,176,0.4);
transform: translateY(-0.0625rem);
box-shadow: 0 0.25rem 0.75rem rgba(156,39,176,0.4);
}
/* 반응형 */
@media (max-width: 1024px) {
/* 반응형 디자인 */
@media (max-width: 1200px) {
.navbar {
padding: 12px 20px;
justify-content: space-between;
}
.navbar-center {
display: none;
}
@@ -336,33 +371,96 @@
@media (max-width: 768px) {
.navbar {
padding: 12px 16px;
padding: 0.625rem 1rem;
gap: 0.75rem;
}
.navbar-brand {
gap: 0.5rem;
flex: 0 0 auto;
}
.brand-text {
font-size: 1rem;
}
.brand-subtitle {
font-size: 0.6875rem;
}
.navbar-menu {
gap: 0.75rem;
flex-wrap: wrap;
}
.navbar-buttons {
gap: 0.5rem;
}
.nav-btn {
padding: 0.4rem 0.75rem;
font-size: 0.75rem;
}
.user-info {
max-width: 12rem;
}
.dropdown-menu {
right: 0;
min-width: 12rem;
}
}
@media (max-width: 640px) {
.brand-content {
display: none;
}
.navbar-menu {
gap: 12px;
.navbar-center {
display: none;
}
.dropdown-menu {
right: -16px;
.navbar-buttons .nav-btn {
font-size: 0;
padding: 0.5rem;
gap: 0;
}
.navbar-buttons .nav-btn::before {
content: attr(title);
font-size: 1.125rem;
}
.user-details {
display: none;
}
.dropdown-arrow {
display: none;
}
.user-info {
padding: 0.5rem;
}
}
@media (max-width: 480px) {
.dashboard-btn, .admin-btn, .system-btn {
display: none;
.navbar {
padding: 0.5rem 0.75rem;
}
.user-details {
display: none;
.logo-small {
height: 2rem;
}
.dropdown-arrow {
display: none;
.navbar-buttons {
gap: 0.375rem;
}
.dropdown-menu {
right: -0.5rem;
min-width: 10rem;
}
}
</style>

63
web-ui/css/common.css
View File

@@ -11,27 +11,34 @@
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 3rem 2rem;
padding: 2rem 1.5rem;
margin-bottom: 0;
}
.work-report-header h1 {
font-size: 2.5rem;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
margin: 0 0 1rem 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
margin: 0 0 0.75rem 0;
text-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3);
word-wrap: break-word;
overflow-wrap: break-word;
}
.work-report-header .subtitle {
font-size: 1.1rem;
font-size: clamp(0.875rem, 2vw, 1.1rem);
opacity: 0.9;
margin: 0;
font-weight: 300;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.work-report-main {
background: #f8f9fa;
min-height: calc(100vh - 200px);
min-height: calc(100vh - 12rem);
padding-top: 2rem;
}
@@ -43,18 +50,52 @@
background: rgba(255, 255, 255, 0.9);
color: #495057;
text-decoration: none;
border-radius: 8px;
border-radius: 0.5rem;
font-weight: 500;
margin: 0 2rem 2rem 2rem;
margin: 0 1.5rem 1.5rem 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
white-space: nowrap;
}
.back-button:hover {
background: white;
color: #007bff;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
transform: translateY(-0.0625rem);
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
}
/* 반응형 헤더 */
@media (max-width: 768px) {
.work-report-header {
padding: 1.5rem 1rem;
}
.work-report-header h1 {
margin-bottom: 0.5rem;
}
.back-button {
margin: 0 1rem 1rem 1rem;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.work-report-header {
padding: 1.25rem 0.75rem;
}
.work-report-header .subtitle {
font-size: 0.8125rem;
}
.back-button {
margin: 0 0.75rem 0.75rem 0.75rem;
padding: 0.5rem 1rem;
font-size: 0.8125rem;
}
}
/* Reset and Base Styles */

53
web-ui/js/api-config.js
View File

@@ -118,18 +118,34 @@ async function apiCall(url, method = 'GET', data = null) {
if (!response.ok) {
let errorMessage = `HTTP ${response.status}`;
try {
const errorData = await response.json();
errorMessage = errorData.error || errorData.message || errorMessage;
console.error('📋 서버 에러 상세:', errorData);
} catch (e) {
// JSON 파싱 실패시 텍스트로 시도
try {
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/json')) {
const errorData = await response.json();
console.error('📋 서버 에러 상세:', errorData);
// 에러 메시지 추출 (여러 형식 지원)
if (typeof errorData === 'string') {
errorMessage = errorData;
} else if (errorData.error) {
errorMessage = typeof errorData.error === 'string'
? errorData.error
: JSON.stringify(errorData.error);
} else if (errorData.message) {
errorMessage = errorData.message;
} else if (errorData.details) {
errorMessage = errorData.details;
} else {
errorMessage = `HTTP ${response.status}: ${JSON.stringify(errorData)}`;
}
} else {
const errorText = await response.text();
console.error('📋 서버 에러 텍스트:', errorText);
errorMessage = errorText || errorMessage;
} catch (e2) {
console.error('📋 에러 파싱 실패');
}
} catch (e) {
console.error('📋 에러 파싱 중 예외 발생:', e.message);
// 파싱 실패해도 HTTP 상태 코드는 전달
}
throw new Error(errorMessage);
}
@@ -182,10 +198,31 @@ async function testApiConnection() {
}
}
// API 헬퍼 함수들
async function apiGet(url) {
return apiCall(url, 'GET');
}
async function apiPost(url, data) {
return apiCall(url, 'POST', data);
}
async function apiPut(url, data) {
return apiCall(url, 'PUT', data);
}
async function apiDelete(url) {
return apiCall(url, 'DELETE');
}
// 전역 함수로 설정
window.ensureAuthenticated = ensureAuthenticated;
window.getAuthHeaders = getAuthHeaders;
window.apiCall = apiCall;
window.apiGet = apiGet;
window.apiPost = apiPost;
window.apiPut = apiPut;
window.apiDelete = apiDelete;
window.testApiConnection = testApiConnection;
window.isTokenExpired = isTokenExpired;
window.clearAuthData = clearAuthData;

2
web-ui/js/component-loader.js
View File

@@ -11,7 +11,7 @@ import { config } from './config.js';
export async function loadComponent(componentName, containerSelector, domProcessor = null) {
const container = document.querySelector(containerSelector);
if (!container) {
console.error(`🔴 컴포넌트를 삽입할 컨테이너를 찾을 수 없습니다: ${containerSelector}`);
console.warn(`⚠️ 컴포넌트를 삽입할 컨테이너를 찾을 수 없습니다: ${containerSelector} (선택사항일 수 있음)`);
return;
}

51
web-ui/js/modules/calendar/CalendarAPI.js
View File

@@ -90,7 +90,7 @@
/**
* 폴백: 순차적 로딩 (지연 시간 포함) - Private helper
* @param {number} year
* @param {number} year
* @param {number} month (0-indexed)
* @returns {Promise<object>}
*/
@@ -101,22 +101,43 @@
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const currentDay = new Date(firstDay);
const promises = [];
while (currentDay <= lastDay) {
const dateStr = currentDay.toISOString().split('T')[0];
promises.push(window.apiGet(`/daily-work-reports?date=${dateStr}&view_all=true`));
currentDay.setDate(currentDay.getDate() + 1);
}
const results = await Promise.all(promises);
console.log(`📅 폴백: ${monthKey} 순차 로딩 시작 (rate limit 방지)`);
// 순차적으로 요청하되 작은 배치로 나눔 (5개씩)
const BATCH_SIZE = 5;
const DELAY_BETWEEN_BATCHES = 100; // 100ms
let day = 1;
for (const result of results) {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
monthData[dateStr] = result.success && Array.isArray(result.data) ? result.data : [];
day++;
while (currentDay <= lastDay) {
const batch = [];
// 배치 생성
for (let i = 0; i < BATCH_SIZE && currentDay <= lastDay; i++) {
const dateStr = currentDay.toISOString().split('T')[0];
batch.push({
date: dateStr,
promise: window.apiGet(`/daily-work-reports?date=${dateStr}&view_all=true`)
});
currentDay.setDate(currentDay.getDate() + 1);
}
// 배치 실행
const results = await Promise.all(batch.map(b => b.promise));
// 결과 저장
batch.forEach((item, index) => {
const result = results[index];
monthData[item.date] = result.success && Array.isArray(result.data) ? result.data : [];
});
// 다음 배치 전 잠시 대기 (rate limit 방지)
if (currentDay <= lastDay) {
await new Promise(resolve => setTimeout(resolve, DELAY_BETWEEN_BATCHES));
}
}
console.log(`✅ 폴백: ${monthKey} 순차 로딩 완료`);
return monthData;
} catch (error) {
console.error(`${monthKey} 순차 로딩 오류:`, error);

33
web-ui/js/work-report-calendar.js
View File

@@ -29,19 +29,20 @@ const elements = {
// 초기화
document.addEventListener('DOMContentLoaded', async function() {
console.log('🚀 작업 현황 캘린더 초기화 시작');
// DOM 요소 초기화
// DOM 요소 초기화 (기존 + CalendarView)
initializeElements();
CalendarView.initializeElements();
// 이벤트 리스너 등록
setupEventListeners();
// 작업자 데이터 로드 (한 번만)
await loadWorkersData();
// 현재 월 캘린더 렌더링
await renderCalendar();
await CalendarView.renderCalendar();
console.log('✅ 작업 현황 캘린더 초기화 완료');
});
@@ -69,17 +70,17 @@ function initializeElements() {
function setupEventListeners() {
elements.prevMonthBtn.addEventListener('click', () => {
CalendarState.currentDate.setMonth(CalendarState.currentDate.getMonth() - 1);
renderCalendar();
CalendarView.renderCalendar();
});
elements.nextMonthBtn.addEventListener('click', () => {
CalendarState.currentDate.setMonth(CalendarState.currentDate.getMonth() + 1);
renderCalendar();
CalendarView.renderCalendar();
});
elements.todayBtn.addEventListener('click', () => {
CalendarState.currentDate = new Date();
renderCalendar();
CalendarView.renderCalendar();
});
elements.statusFilter.addEventListener('change', filterWorkersList);
@@ -518,9 +519,9 @@ async function deleteWorkerDayWork(workerId, date, workerName) {
// 모달 데이터 새로고침
await openDailyWorkModal(CalendarState.currentModalDate);
// 캘린더도 새로고침
await renderCalendar();
await CalendarView.renderCalendar();
} catch (error) {
console.error('❌ 작업 삭제 실패:', error);
@@ -741,9 +742,9 @@ async function saveWorkEntry() {
// 기존 작업 탭으로 전환
switchTab('existing');
// 캘린더 새로고침
await renderCalendar();
await CalendarView.renderCalendar();
// 현재 열린 모달이 있다면 새로고침
if (CalendarState.currentModalDate) {

4
web-ui/pages/common/daily-work-report-viewer.html
View File

@@ -334,9 +334,9 @@
</div>
<!-- JavaScript -->
<script src="/js/api-config.js?v=13"></script>
<script type="module" src="/js/api-config.js?v=13"></script>
<script src="/js/auth-check.js?v=13"></script>
<script src="/js/load-navbar.js?v=4"></script>
<!-- load-navbar.js 제거: 이 페이지는 자체 헤더 사용 -->
<script src="/js/modules/calendar/CalendarState.js?v=1"></script>
<script src="/js/modules/calendar/CalendarAPI.js?v=1"></script>
<script src="/js/modules/calendar/CalendarView.js?v=1"></script>

6
web-ui/pages/common/daily-work-report.html
View File

@@ -171,8 +171,8 @@
</div>
<!-- 스크립트 -->
<script src="/js/api-config.js?v=2"></script>
<script src="/js/load-navbar.js?v=3"></script>
<script src="/js/daily-work-report.js?v=10"></script>
<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/daily-work-report.js?v=11"></script>
</body>
</html>

8
web-ui/pages/common/worker-individual-report.html
View File

@@ -8,8 +8,8 @@
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/daily-work-report.css">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-config.js"></script>
<script type="module" src="/js/api-config.js?v=3"></script>
<script src="/js/auth-check.js" defer></script>
</head>
<body>
@@ -164,7 +164,7 @@
</div>
<!-- 스크립트 -->
<script src="/js/load-navbar.js"></script>
<script src="/js/worker-individual-report.js?v=2"></script>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/worker-individual-report.js?v=3"></script>
</body>
</html>

8
web-ui/pages/management/code-management.html
View File

@@ -4,11 +4,11 @@
<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=1">
<link rel="stylesheet" href="/css/common.css?v=2">
<link rel="stylesheet" href="/css/project-management.css?v=4">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js?v=1" defer></script>
<script src="/js/api-config.js?v=1" defer></script>
<script type="module" src="/js/api-config.js?v=3"></script>
</head>
<body>
<div class="work-report-container">
@@ -252,7 +252,7 @@
</main>
</div>
<script src="/js/load-navbar.js?v=4"></script>
<script src="/js/code-management.js?v=1"></script>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/code-management.js?v=2"></script>
</body>
</html>

2
web-ui/pages/management/project-management.html
View File

@@ -4,7 +4,7 @@
<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=1">
<link rel="stylesheet" href="/css/common.css?v=2">
<link rel="stylesheet" href="/css/project-management.css?v=4">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js" defer></script>

8
web-ui/pages/management/work-management.html
View File

@@ -4,7 +4,7 @@
<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=1">
<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>
@@ -157,8 +157,8 @@
</div>
<!-- JavaScript -->
<script src="/js/api-config.js?v=13"></script>
<script src="/js/load-navbar.js?v=4"></script>
<script src="/js/work-management.js?v=2"></script>
<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>

2
web-ui/pages/management/worker-management.html
View File

@@ -4,7 +4,7 @@
<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=1">
<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/auth-check.js?v=1" defer></script>