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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

26
system1-factory/web/pages/attendance/monthly.html
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>
/* 테이블 컨테이너 */
.table-container {
@@ -349,6 +349,30 @@
border: 1px solid #d1d5db;
border-radius: 0.375rem;
}
/* 모바일 최적화 */
@media (max-width: 768px) {
.page-actions {
flex-direction: column !important;
width: 100%;
}
.page-actions input[type="month"],
.page-actions .btn { width: 100%; }
.page-actions .btn { justify-content: center; text-align: center; }
.summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.summary-card { min-width: 0; }
.legend-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.table-container { margin: 0 -0.5rem; }
.attendance-table th.fixed-no,
.attendance-table td.fixed-no { display: none; }
.attendance-table th.fixed-name,
.attendance-table td.fixed-name { left: 0; }
.attendance-table th.fixed-job,
.attendance-table td.fixed-job { left: 60px; }
.modal-content { width: 95% !important; }
.add-holiday-form { flex-direction: column; }
.add-holiday-form input, .add-holiday-form .btn { width: 100%; }
}
</style>
</head>
<body class="bg-gray-50">