h-lab/src/main/resources/templates/layout/base.html
hehihoho3@gmail.com 921c24f143 fix(ui): 모바일 깨짐 수정 — 표 카드뷰 opt-in, 대시보드 반응형, CSS 캐시버스팅
폰에서 화면이 깨지던 문제 수정.
- 전역 반응형 표 '카드뷰'가 모든 table에 적용돼, data-label 없는 목록 표
  (수집함·발굴·발행 등)가 거대한 행으로 변해 페이지가 32만px로 늘어남.
  → 카드뷰를 .rcards opt-in 으로 스코프. 그 클래스 가진 레거시 표
  (multi_channel_videos·videos)만 카드뷰, 나머지는 모바일에서 가로 스크롤.
- 대시보드: 모바일(≤680px) 미디어쿼리 추가 — 마스트헤드 세로 정렬, 긴
  브레드크럼 숨김, 떡상 리더보드 액션 버튼을 아랫줄 우측 정렬, 숫자 축소.
- base.html: CSS/JS 링크에 v= 캐시버스팅 — 배포 후 브라우저가 옛 CSS를
  캐시해 스타일이 깨지는 것 방지(CSS 변경 시 버전 올리기).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-17 06:56:50 +09:00

58 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h-lab - Dashboard</title>
<!-- Theme init (before paint, no flash) -->
<script>
(function () {
try { document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'light'); }
catch (e) { document.documentElement.setAttribute('data-theme', 'light'); }
})();
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Editorial identity (dashboard) -->
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<!-- CSS (v= 캐시 버스팅 — CSS 바뀌면 숫자 올리기) -->
<link rel="stylesheet" th:href="@{/css/variables.css(v=20260617)}">
<link rel="stylesheet" th:href="@{/css/style.css(v=20260617)}">
<!-- Lucide Icons (CDN for simplicity in SSR) -->
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<div style="display: flex; min-height: 100vh;">
<!-- Sidebar Fragment -->
<div th:replace="~{layout/sidebar :: sidebar}"></div>
<!-- Main Content -->
<main id="mainContent" style="flex: 1; padding: 2.5rem; position: relative; z-index: 1;">
<!-- Mobile Menu Toggle (Visible only on mobile) -->
<button id="mobileSidebarToggle" class="mobile-menu-btn">
<i data-lucide="menu" style="width: 24px; height: 24px;"></i>
</button>
<div class="container" layout:fragment="content">
<!-- Content goes here -->
</div>
</main>
</div>
<!-- JS -->
<script th:src="@{/js/common.js(v=20260617)}"></script>
<script>
lucide.createIcons();
</script>
<th:block layout:fragment="script"></th:block>
</body>
</html>