feat(system3): TKQC 모바일 전용 페이지 구현 및 데스크탑 관리함 반응형 개선

- 모바일 전용 페이지 신규: /m/dashboard, /m/inbox, /m/management
- 공통 모바일 CSS/JS: m-common.css, m-common.js (바텀시트, 바텀네비, 터치 최적화)
- nginx.conf에 /m/ location 블록 추가
- 데스크탑 HTML에 모바일 뷰포트 리다이렉트 추가 (<=768px)
- 데스크탑 관리함 카드 헤더 반응형 레이아웃 (flex-wrap, 1280px 브레이크포인트)
- collapse-content overflow:hidden → overflow:visible 수정 (내용 잘림 해결)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-05 13:34:52 +09:00
parent abd7564e6b
commit 9b81a52283
16 changed files with 2952 additions and 73 deletions

View File

@@ -91,13 +91,14 @@
/* 관리함 전용 collapse-content (max-height 기반 트랜지션) */
.collapse-content {
max-height: 1000px;
overflow: hidden;
max-height: 5000px;
overflow: visible;
transition: max-height 0.3s ease-out;
}
.collapse-content.collapsed {
max-height: 0;
overflow: hidden;
}
/* 관리함 전용 이슈 카드 오버라이드 */
@@ -121,3 +122,62 @@
width: 16px;
text-align: center;
}
/* ===== 카드 헤더 반응형 ===== */
.issue-card-header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.issue-card-header .header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.issue-card-header .header-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.issue-card-header .header-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex-shrink: 0;
}
.issue-card-header .header-actions button {
white-space: nowrap;
}
/* 중간 화면에서 버튼 줄바꿈 */
@media (max-width: 1280px) {
.issue-card-header .header-top {
flex-direction: column;
}
.issue-card-header .header-actions {
width: 100%;
justify-content: flex-end;
}
}
/* 완료됨 카드 3열 → 좁은 화면에서 적응 */
@media (max-width: 1280px) and (min-width: 769px) {
.completed-card-grid {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 960px) and (min-width: 769px) {
.completed-card-grid {
grid-template-columns: 1fr !important;
}
}