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

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

View File

@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AI 신고 도우미 | (주)테크니컬코리아</title>
<link rel="icon" type="image/png" href="/img/favicon.png">
<link rel="stylesheet" href="/css/chat-report.css?v=3">
<script src="/js/api-base.js?v=20260313"></script>
<script src="/js/app-init.js?v=20260313" defer></script>
<link rel="stylesheet" href="/css/chat-report.css?v=2026031401">
<script src="/js/api-base.js?v=2026031401"></script>
<script src="/js/app-init.js?v=2026031401" defer></script>
</head>
<body>
<!-- Header -->
@@ -32,7 +32,7 @@
<!-- Hidden file input -->
<input type="file" id="chatPhotoInput" accept="image/*" style="display:none">
<script src="/js/cross-nav.js?v=1"></script>
<script src="/js/chat-report.js?v=3"></script>
<script src="/js/cross-nav.js?v=2026031401"></script>
<script src="/js/chat-report.js?v=2026031401"></script>
</body>
</html>

View File

@@ -5,11 +5,11 @@
<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/common.css?v=2">
<link rel="stylesheet" href="/css/project-management.css?v=3">
<link rel="stylesheet" href="/css/common.css?v=2026031401">
<link rel="stylesheet" href="/css/project-management.css?v=2026031401">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=20260313"></script>
<script src="/js/app-init.js?v=20260313" defer></script>
<script src="/js/api-base.js?v=2026031401"></script>
<script src="/js/app-init.js?v=2026031401" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<style>
/* 상태 배지 */
@@ -472,6 +472,6 @@
</div>
</div>
<script src="/js/issue-detail.js?v=20260313"></script>
<script src="/js/issue-detail.js?v=2026031401"></script>
</body>
</html>

View File

@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>신고 등록 | (주)테크니컬코리아</title>
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=20260313"></script>
<script src="/js/app-init.js?v=20260313" defer></script>
<script src="/js/api-base.js?v=2026031401"></script>
<script src="/js/app-init.js?v=2026031401" defer></script>
<style>
* { box-sizing: border-box; }
body {
@@ -633,6 +633,10 @@
@media (min-width: 480px) {
body { max-width: 480px; margin: 0 auto; min-height: 100vh; }
}
@media (max-width: 480px) {
.photo-grid { grid-template-columns: repeat(4, 1fr); }
.type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
.type-grid { gap: 0.5rem; }
.type-btn { padding: 0.875rem 0.375rem; }
@@ -777,7 +781,7 @@
<!-- Hidden file input for camera/gallery -->
<input type="file" id="photoInput" accept="image/*" style="display:none">
<script src="/js/cross-nav.js?v=1"></script>
<script src="/js/issue-report.js?v=7"></script>
<script src="/js/cross-nav.js?v=2026031401"></script>
<script src="/js/issue-report.js?v=2026031401"></script>
</body>
</html>

View File

@@ -5,11 +5,11 @@
<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/common.css?v=2">
<link rel="stylesheet" href="/css/project-management.css?v=3">
<link rel="stylesheet" href="/css/common.css?v=2026031401">
<link rel="stylesheet" href="/css/project-management.css?v=2026031401">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/api-base.js?v=20260313"></script>
<script src="/js/app-init.js?v=20260313" defer></script>
<script src="/js/api-base.js?v=2026031401"></script>
<script src="/js/app-init.js?v=2026031401" defer></script>
<script src="https://instant.page/5.2.0" type="module"></script>
<style>
/* 통계 카드 */
@@ -300,7 +300,7 @@
</main>
</div>
<script src="/js/cross-nav.js?v=1"></script>
<script src="/js/safety-report-list.js?v=2"></script>
<script src="/js/cross-nav.js?v=2026031401"></script>
<script src="/js/safety-report-list.js?v=2026031401"></script>
</body>
</html>