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

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>