2620227
75685e41da
문제: 기존 반응형 @media 가 base.css(2번째 로드)에 있어, 뒤에 로드되는 components/layout 규칙에 덮여 사실상 무력했음(폰에서 그리드가 안 접힘). - public/css/responsive.css 신설, _header 에서 맨 마지막에 <link> → 미디어쿼리가 데스크톱 규칙을 !important 없이 정상 override - base.css 의 죽은 반응형 블록 제거(responsive.css 로 이관) - @media 640: 헤더 flex-wrap(검색창 둘째 줄 전체폭·숨김 해제), 탭 영역 44px, 크롭 스테이지 aspect-ratio 정사각, 입력 16px(iOS 확대 방지), 좌우 여백/모달 여백 축소, 프로필 히어로 세로 스택 - 데스크톱(>640)은 규칙 미적용 → 기존과 픽셀 동일 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
76 lines
3.9 KiB
Plaintext
76 lines
3.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="ko" data-aidev-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title><%= brand %></title>
|
|
<link rel="icon" href="/public/favicon.svg" type="image/svg+xml" />
|
|
<!-- Pretendard 폰트 (CDN · 인터넷 연결 환경) -->
|
|
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
|
<link rel="stylesheet" href="/public/css/tokens.css" />
|
|
<link rel="stylesheet" href="/public/css/base.css" />
|
|
<link rel="stylesheet" href="/public/css/layout.css" />
|
|
<link rel="stylesheet" href="/public/css/components.css" />
|
|
<link rel="stylesheet" href="/public/css/modal.css" />
|
|
<!-- 반응형(모바일) — 데스크톱 규칙을 덮어써야 하므로 반드시 맨 마지막에 로드. 순서 바꾸지 말 것. -->
|
|
<link rel="stylesheet" href="/public/css/responsive.css" />
|
|
<script>
|
|
// FOUC 방지: 저장된 테마를 페인트 전에 documentElement 에 적용
|
|
(function () {
|
|
try {
|
|
var t = localStorage.getItem("aidev-theme");
|
|
if (t === "dark" || t === "light") document.documentElement.setAttribute("data-aidev-theme", t);
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body<% if (typeof toast !== "undefined" && toast) { %> data-toast="<%= toast %>"<% } %><% if (typeof egg !== "undefined" && egg) { %> data-egg="<%= egg %>"<% } %><% if (typeof openModal !== "undefined" && openModal) { %> data-open-modal="<%= openModal %>"<% } %>>
|
|
<header class="hdr">
|
|
<div class="hdr-inner">
|
|
<a class="brand" href="/" id="brandLink">
|
|
<span class="brand-mark"><%- icon("codeslash", { size: 22 }) %></span>
|
|
<span class="brand-name"><%= brand %></span>
|
|
<span class="brand-sub">사내 개발 포털</span>
|
|
</a>
|
|
|
|
<% if (user) { %>
|
|
<div class="hdr-search">
|
|
<span class="hdr-search-ico"><%- icon("search", { size: 15 }) %></span>
|
|
<input type="search" id="feedSearch" placeholder="<%= typeof searchPlaceholder !== 'undefined' && searchPlaceholder ? searchPlaceholder : '공유 프로젝트 검색…' %>" autocomplete="off" />
|
|
</div>
|
|
|
|
<div class="hdr-right">
|
|
<button class="icon-btn" id="themeToggle" type="button" title="테마 전환" aria-label="테마 전환">
|
|
<span class="theme-ico theme-ico-moon"><%- icon("moon", { size: 16 }) %></span>
|
|
<span class="theme-ico theme-ico-sun"><%- icon("sun", { size: 16 }) %></span>
|
|
</button>
|
|
|
|
<a class="hdr-link" href="<%= manualUrl %>" target="_blank" rel="noopener" title="포털 사용 매뉴얼">
|
|
<%- icon("book", { size: 15 }) %><span>매뉴얼</span>
|
|
</a>
|
|
|
|
<% if (user.isAdmin) { %>
|
|
<span class="admin-pill"><%- icon("lock", { size: 11 }) %>관리자</span>
|
|
<% } %>
|
|
|
|
<div class="usermenu">
|
|
<button class="usermenu-btn" id="userMenuBtn" type="button" aria-haspopup="true" aria-expanded="false">
|
|
<span class="who"><%= user.sabun %></span>
|
|
<%- avatar(user.sabun, 26) %>
|
|
<span class="caret"><%- icon("caret", { size: 14 }) %></span>
|
|
</button>
|
|
<div class="usermenu-pop" id="userMenuPop" hidden>
|
|
<div class="usermenu-head">
|
|
<div class="usermenu-label">로그인 계정</div>
|
|
<div class="usermenu-sabun"><%= user.sabun %></div>
|
|
<div class="usermenu-role"><%= user.isAdmin ? "관리자 (admin)" : "일반 사용자" %></div>
|
|
</div>
|
|
<a class="usermenu-item" href="/u/<%= user.sabun %>"><span class="usermenu-ico"><%- icon("repo", { size: 15 }) %></span>내 프로필</a>
|
|
<a class="usermenu-item" href="/logout"><span class="usermenu-ico"><%- icon("signout", { size: 15 }) %></span>로그아웃</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</header>
|