fb9c84aa62
ADO2 로고 옆에 워드마크를 붙이던 인라인 배치를 Playreel 셸(.pr-wordmark)과 같은 문법으로 바꾼다 — ADO2 로고가 위, 제품 워드마크가 아래, 아래 줄을 로고 폭에 맞춰 락업이 사각형으로 앉는다. MOVING POSTER 는 PLAYREEL 보다 글자가 길어 같은 18px 를 쓰면 로고 폭을 넘는다. 브라우저에서 재서 16.4px + 자간 0.14em 으로 잡았다. 자간은 마지막 글자 뒤에도 붙으므로 음수 마진으로 걷어내야 오른쪽 끝이 맞는다. 실측(로고 h24 = 162.54px): 락업 컨테이너 폭 162.54px — 로고와 정확히 일치 워드마크 잉크 폭 162.34px — 오른쪽 끝 오차 0.2px (참고: Playreel 자체 워드마크는 같은 기준에서 2.75px 어긋나 있다) 390px 모바일 행: 헤더 71.4px, 메뉴 가로 스크롤 유지, 잘림 없음 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import Ado2Logo from "@/components/ado2-logo";
|
|
import NavLink from "@/components/nav-link";
|
|
import { FEATURES } from "@/lib/features";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "ADO2 무빙포스터",
|
|
description: "포스터 한 장으로 세로 영상을 만듭니다",
|
|
};
|
|
|
|
export default function Ado2Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<>
|
|
<aside className="sidebar">
|
|
<div className="sidebar-logo">
|
|
<Link href="/" className="mp-wordmark">
|
|
<Ado2Logo height={24} />
|
|
<span className="mp-mark">MOVING POSTER</span>
|
|
</Link>
|
|
</div>
|
|
<nav className="sidebar-menu">
|
|
<NavLink href="/" icon="video">무빙포스터</NavLink>
|
|
{FEATURES.styling && <NavLink href="/studio" icon="image">포스터 스타일링</NavLink>}
|
|
{FEATURES.archive && <NavLink href="/archive" icon="folder">아카이브</NavLink>}
|
|
</nav>
|
|
<div className="sidebar-foot">무빙포스터 · 내부 빌드</div>
|
|
</aside>
|
|
<main className="main-content">
|
|
<div style={{ maxWidth: 1080, margin: "0 auto" }}>{children}</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|