v4.0.0: 헤더 로고 크기 brand.css로 통일

페이지마다 흩어져 있던 로고 스타일을 brand.css 단일 정의(32px)로 모아 전 화면에서 동일하게 표시되도록 수정했다. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-23 11:43:26 +09:00
parent a281d731a1
commit e11b1dc6df
14 changed files with 50 additions and 42 deletions
--- a/admin.html
+++ b/admin.html
@@ -12,7 +12,7 @@
        <nav class="admin-nav">
            <div class="admin-nav-inner">
                <a href="/" class="admin-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                    <span class="admin-brand-label">관리자</span>
                </a>
                <div id="auth-header-slot"></div>
--- a/deckHistory.html
+++ b/deckHistory.html
@@ -14,7 +14,7 @@
        <nav class="app-nav">
            <div class="app-nav-inner">
                <a href="/" class="app-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                </a>
                <div id="auth-header-slot"></div>
            </div>
--- a/docs/convention.md
+++ b/docs/convention.md
@@ -24,6 +24,7 @@

 ## CSS 규칙
 - 공통 UI는 가능한 한 Tailwind 유틸리티 클래스를 우선 사용한다.
+- **헤더 로고**는 `style/brand.css`의 `.app-brand-logo` + `--brand-logo-height`(32px)만 사용한다. 페이지마다 `h-8` 등 Tailwind로 크기를 주지 않는다.
 - `style/output.css`는 **빌드 산출물**이다. HTML 등에 새 Tailwind 클래스를 추가한 뒤 `npm run build:css`로 재생성한다.
 - `style/output.css`에 포함되지 않은 유틸리티 클래스는 적용되지 않으므로, 빌드 전까지는 페이지 특화 스타일을 인라인 `<style>` 또는 전용 CSS 파일(`style/auth-pages.css` 등)에 명시한다.
 - 페이지 특화 보정 스타일만 인라인 `<style>` 또는 전용 CSS 파일에 둔다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -55,7 +55,8 @@
 - `script/page-help.js`: 페이지 제목 `?` 툴팁
 - `script/page-i18n.js`: `data-i18n` / `data-i18n-html` / `data-i18n-placeholder`, `UaPageI18n.t()`
 - `script/deck-favorites.js`: 덱 즐겨찾기 (localStorage)
- `script/deck-preview-hold.js`: 덱 썸네일 클릭·길게 눌러 확대 (내 덱·공개 덱)
+- `script/deck-preview-hold.js`: 덱 썸네일 길게 눌러 확대 (내 덱·공개 덱)
+- `style/brand.css`: 헤더 UNIARE 로고 크기 통일 (32px)
 - `script/api.js`: API 클라이언트 (`updateProfile`, `changePassword` 포함)
 - `script/auth-header.js`: 헤더 프로필 드롭다운 (i18n), 로그인 시 **썸네일 옆 닉네임** 표시 (`auth-profile-trigger`)
 - `script/image-utils.js`: 클라이언트 이미지 PNG 리사이즈 (`UaImageUtils.resizeImageToPng`)
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,12 @@
 # 업데이트 이력

+## 2026-06-22 / v4.0.0 — 헤더 로고 크기 통일
+
+### 수행 작업
+- `style/brand.css` 신설: `--brand-logo-height: 2rem`(32px), `.app-brand-logo` 단일 정의
+- `app-shell.css`, `auth-pages.css`, `admin.css`에서 중복 로고 스타일 제거 → `@import brand.css`
+- `index.html`: Tailwind `h-8` 제거 → `app-brand-logo` + `brand.css` 로드
+
 ## 2026-06-22 / v4.0.0 — 덱 카드 조회 수 제거

 ### 수행 작업
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="./style/output.css" />
+        <link rel="stylesheet" href="./style/brand.css" />
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet" />

        <script src="/script/navigation.js"></script>
@@ -58,8 +59,8 @@
    <body class="text-slate-900">
        <nav class="sticky top-0 z-50 bg-white/70 backdrop-blur-lg border-b border-slate-200">
            <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-                <a href="/" class="inline-flex items-center">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="h-8 w-auto" />
+                <a href="/" class="app-brand">
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" width="120" height="32" />
                </a>

                <div class="flex items-center gap-4">
--- a/login.html
+++ b/login.html
@@ -12,7 +12,7 @@
        <nav class="auth-nav">
            <div class="auth-nav-inner">
                <a href="/" class="auth-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                </a>
            </div>
        </nav>
--- a/preset.html
+++ b/preset.html
@@ -14,7 +14,7 @@
        <nav class="app-nav">
            <div class="app-nav-inner">
                <a href="/" class="app-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                </a>
                <div id="auth-header-slot"></div>
            </div>
--- a/profile.html
+++ b/profile.html
@@ -14,7 +14,7 @@
        <nav class="app-nav">
            <div class="app-nav-inner">
                <a href="/" class="app-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                </a>
                <div id="auth-header-slot"></div>
            </div>
--- a/signup.html
+++ b/signup.html
@@ -12,7 +12,7 @@
        <nav class="auth-nav">
            <div class="auth-nav-inner">
                <a href="/" class="auth-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                </a>
            </div>
        </nav>
--- a/style/admin.css
+++ b/style/admin.css
@@ -2,6 +2,8 @@
 * 관리자 페이지 (admin.html)
 */

+@import './brand.css';
+
 .admin-page {
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    min-height: 100vh;
@@ -29,18 +31,8 @@
 }

 .admin-brand {
-    display: inline-flex;
-    align-items: center;
    gap: 0.625rem;
-    text-decoration: none;
    letter-spacing: -0.025em;
-    line-height: 0;
-}
-
-.admin-brand .app-brand-logo {
-    height: 2rem;
-    width: auto;
-    display: block;
 }

 .admin-brand-label {
--- a/style/app-shell.css
+++ b/style/app-shell.css
@@ -3,6 +3,8 @@
 * index.html, cardList.html 과 동일한 콘텐츠 최대 너비 기준
 */

+@import './brand.css';
+
 :root {
    --app-max-width: 80rem; /* 1280px — Tailwind max-w-7xl */
    --app-gutter: 1.5rem;
@@ -37,19 +39,6 @@
    gap: 1rem;
 }

-.app-brand {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    line-height: 0;
-}
-
-.app-brand-logo {
-    height: 2rem;
-    width: auto;
-    display: block;
-}
-
 .app-ad-top {
    max-width: var(--app-max-width);
    margin: 0 auto;
--- a/style/auth-pages.css
+++ b/style/auth-pages.css
@@ -3,6 +3,8 @@
 * (Tailwind 빌드에 없는 max-w-* 유틸 대체)
 */

+@import './brand.css';
+
 .auth-page {
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    min-height: 100vh;
@@ -30,17 +32,7 @@
 }

 .auth-brand {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
    color: #1e293b;
-    line-height: 0;
-}
-
-.auth-brand .app-brand-logo {
-    height: 2rem;
-    width: auto;
-    display: block;
 }

 .auth-main {
--- a/style/brand.css
+++ b/style/brand.css
@@ -0,0 +1,25 @@
+/**
+ * UNIARE 헤더 로고 — 모든 페이지 공통 (32px)
+ */
+
+:root {
+    --brand-logo-height: 2rem;
+}
+
+.app-brand,
+.auth-brand,
+.admin-brand {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    text-decoration: none;
+    line-height: 0;
+}
+
+.app-brand-logo {
+    height: var(--brand-logo-height);
+    width: auto;
+    max-height: var(--brand-logo-height);
+    display: block;
+    object-fit: contain;
+}