feat(tkfb): 모바일 전체 최적화 — 네비 수정 + 공통 기반 + 페이지별 개선

Phase 1: 기반 수정
- 햄버거 메뉴 .mobile-open 규칙 커밋 (네비 버그 수정)
- 36개 HTML 파일 tkfb.css 캐시 버스팅 ?v=2026031601
- tkfb.css 공통 모바일 기반: 터치 44px, iOS 줌 방지, 테이블 스크롤, 모달 최적화

Phase 2: 페이지별 최적화
- 그룹 A (심각): daily.html, work-status.html JS 카드 뷰 변환
- 그룹 A: monthly.html 모바일 컨트롤 스택 + No열 숨김 + 범례 그리드
- 공통 CSS: 페이지 헤더/컨트롤/필터 스택, 탭 가로 스크롤,
  폼 2열→1열, 요약 바 wrap, 저장 바 sticky, 작업자 칩 터치 최적화,
  2열 레이아웃→세로 스택, 테이블 래퍼 오버플로, 모달 풀스크린
- 개별 페이지: checkin, vacation-management, vacation-approval,
  projects, repair-management, annual-overview 인라인 모바일 스타일

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-16 14:39:19 +09:00
parent 65839e94a4
commit 573ef74246
37 changed files with 526 additions and 125 deletions

View File

@@ -6,7 +6,7 @@
<title>출근 체크 - TK 공장관리</title>
<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/tkfb.css">
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026031601">
<style>
.page-wrapper {
padding: 1.5rem;
@@ -156,6 +156,18 @@
background: #fef3c7;
color: #92400e;
}
/* 모바일 최적화 */
@media (max-width: 768px) {
.summary-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.75rem; }
.summary-item { flex-direction: column; text-align: center; }
.summary-count { font-size: 1.25rem; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.controls input[type="date"] { grid-column: 1 / -1; }
.worker-chip { padding: 0.625rem 1rem; font-size: 1rem; }
.btn-save { width: 100%; font-size: 1.1rem; padding: 1rem; }
.save-section { position: sticky; bottom: 0; background: white; padding: 1rem; margin: 0 -1rem; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); z-index: 20; }
}
</style>
</head>
<body class="bg-gray-50">