hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ux): 전체 시스템 모바일 UX 개선 — 햄버거메뉴·필터반응형·터치타겟·iOS줌방지

Browse Source 
7개 시스템(tkpurchase/tksafety/tksupport/tkuser/system1/system2/system3)의
모바일 사용성 일괄 개선. system1(tkfb)의 모바일 메뉴 패턴을 3개 신규 시스템에 적용.

주요 변경:
- 모바일 햄버거 메뉴: tkpurchase/tksafety/tksupport에 toggleMobileMenu+overlay 추가
- 필터 반응형: 768px 이하 2열 그리드 전환 (filter-bar/filter-actions 클래스)
- 터치 타겟 44px: 테이블 액션 버튼 36px+gap, tksafety ±버튼 w-11
- iOS 줌 방지: input/select/textarea font-size 16px
- tkuser: 탭 가로스크롤+fade힌트, 사이드바·grid·드롭다운 반응형
- system1: 대시보드 인라인 width 제거, 이동설비 그리드 1열
- system2: 사진그리드 4열, 유형버튼 2열 (480px 이하)
- system3: 카드 내 액션 버튼 stopPropagation 추가
- 캐시 무효화: 전체 HTML ?v=2026031401

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-14 17:57:47 +09:00
parent 2d8ac92404
commit fe5f7cd155
86 changed files with 667 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
user-management/web/index.html
View File

@@ -7,7 +7,7 @@
<link rel="preload" href="https://cdn.tailwindcss.com" as="script">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkuser.css?v=20260224">
<link rel="stylesheet" href="/static/css/tkuser.css?v=2026031401">
</head>
<body>
<!-- Header -->
@@ -74,6 +74,7 @@
<i class="fas fa-bell mr-2"></i>알림 수신자
</button>
</div>
<div class="tab-scroll-hint lg:hidden"></div>
</div>
</nav>
@@ -101,7 +102,7 @@
<label class="block text-xs font-medium text-gray-600 mb-1">비밀번호</label>
<input type="password" id="newPassword" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="초기 비밀번호" required>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">부서</label>
<select id="newDepartmentId" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
@@ -165,7 +166,7 @@
<div class="bg-white rounded-xl shadow-sm p-5">
<div class="flex items-center justify-between mb-5">
<h2 class="text-base font-semibold text-gray-800"><i class="fas fa-building text-slate-400 mr-2"></i>부서별 기본 권한</h2>
<select id="deptPermSelect" class="input-field px-3 py-1.5 rounded-lg text-sm min-w-[200px]">
<select id="deptPermSelect" class="input-field px-3 py-1.5 rounded-lg text-sm min-w-0 w-full sm:min-w-[200px] sm:w-auto">
<option value="">부서 선택</option>
</select>
</div>
@@ -595,9 +596,9 @@
<!-- ============ 작업 탭 ============ -->
<div id="tab-tasks" class="hidden">
<div class="flex gap-6" style="height: calc(100vh - 9rem);">
<div class="flex flex-col lg:flex-row gap-6" style="height: calc(100vh - 9rem);">
<!-- 공정 사이드바 -->
<div class="w-64 flex-shrink-0 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden">
<div class="w-full lg:w-64 lg:flex-shrink-0 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden">
<div class="flex items-center justify-between mb-3">
<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">공정</div>
<button onclick="openWorkTypeModal()" class="text-xs text-slate-500 hover:text-slate-700 px-1.5 py-0.5 rounded hover:bg-gray-100" title="공정 추가"><i class="fas fa-plus"></i></button>
@@ -1996,22 +1997,22 @@
</div>
<!-- JS: Core (config, token, api, toast, helpers, init) -->
<script src="/static/js/tkuser-core.js?v=20260313a"></script>
<script src="/static/js/tkuser-core.js?v=2026031401"></script>
<!-- JS: Tabs -->
<script src="/static/js/tkuser-tabs.js?v=20260313"></script>
<script src="/static/js/tkuser-tabs.js?v=2026031401"></script>
<!-- JS: Individual modules -->
<script src="/static/js/tkuser-users.js?v=20260313"></script>
<script src="/static/js/tkuser-projects.js?v=20260224"></script>
<script src="/static/js/tkuser-departments.js?v=20260224"></script>
<script src="/static/js/tkuser-issue-types.js?v=20260224"></script>
<script src="/static/js/tkuser-workplaces.js?v=20260305"></script>
<script src="/static/js/tkuser-tasks.js?v=20260224"></script>
<script src="/static/js/tkuser-vacations.js?v=20260224"></script>
<script src="/static/js/tkuser-layout-map.js?v=20260305"></script>
<script src="/static/js/tkuser-partners.js?v=20260312"></script>
<script src="/static/js/tkuser-vendors.js?v=20260313"></script>
<script src="/static/js/tkuser-consumables.js?v=20260313"></script>
<script src="/static/js/tkuser-notificationRecipients.js?v=20260313b"></script>
<script src="/static/js/tkuser-users.js?v=2026031401"></script>
<script src="/static/js/tkuser-projects.js?v=2026031401"></script>
<script src="/static/js/tkuser-departments.js?v=2026031401"></script>
<script src="/static/js/tkuser-issue-types.js?v=2026031401"></script>
<script src="/static/js/tkuser-workplaces.js?v=2026031401"></script>
<script src="/static/js/tkuser-tasks.js?v=2026031401"></script>
<script src="/static/js/tkuser-vacations.js?v=2026031401"></script>
<script src="/static/js/tkuser-layout-map.js?v=2026031401"></script>
<script src="/static/js/tkuser-partners.js?v=2026031401"></script>
<script src="/static/js/tkuser-vendors.js?v=2026031401"></script>
<script src="/static/js/tkuser-consumables.js?v=2026031401"></script>
<script src="/static/js/tkuser-notificationRecipients.js?v=2026031401"></script>
<!-- Boot -->
<script>init();</script>
</body>