Mina Choi
71c0c1f6ab
아이템 넷(가요·일력·승차권·스케줄)만 있었고, 그마저 **발행본에는 하나도 안 나갔다.** `SectionSetting` 계약에 data 가 없어 사장님이 채운 JSON 이 payload 경계에서 통째로 버려졌다 — 소개문 body 와 같은 사연이다. 빌더에서는 보이는데 발행하면 없는 섹션이었다. 그리고 아이템 전부가 갱지색·주(朱)잉크·간판체를 hex 로 박고 있어, 템플릿을 매거진으로 바꿔도 아이템 섹션만 레트로로 남았다. 발행본은 색만 템플릿을 따랐다(계약에 생김새가 없었다). - shared/section-data: 읽는 쪽 계약을 계약 패키지로 — 항목 타입 · parseSectionData. 같은 JSON 을 빌더와 발행본이 읽는다. 파서가 두 벌이면 슬러그 규칙처럼 조용히 어긋난다 - frontend/dataSpec: 아이템 6종 추가 — 인물 열전 · 시간의 골목 · 문학 서가 · 오늘의 엽서 · 뒤집어 보는 질문 · 계절별 추천 하루. [+ 섹션 추가] 목록은 dataSpec 에서 파생돼 손댈 곳이 없다 - shared/planDay: 계절별 추천 하루는 시각을 **계산한다**. schedule 과 축이 다르다 — 저쪽은 사장님이 시각을 적고 여기는 출발 시각·소요 분에서 시각을 만든다. 조립 규칙을 shared 에 둔 이유는 파서와 같다(빌더와 발행본이 같은 시각을 내야 한다). 21시를 넘기는 칸은 넣지 않고 뺐다고 화면에 밝힌다 — 숨기면 왜 없는지 사장님이 모른다 - shared/site-payload: SectionSetting.data · SiteTheme.look 추가. backend/site_payload 는 해석 없이 싣는다 — 모양을 검사하면 프론트가 필드를 늘린 날 조용히 떨어뜨린다 - site/sections/items: 발행본 아이템 10종. **인터랙션은 옮기지 않았다** — 캔버스의 턴테이블은 '지금 한 곡'만 펴는데 그러면 나머지 곡의 문장이 HTML 에 없다. 인용이 이 사이트의 존재 이유다 - site/prerender: 아이템 항목을 고유 콘텐츠로 계수. 안 세면 "곡을 여덟 개 채웠는데 0건으로 발행이 막힌다"가 된다(intro.body 와 같은 구멍). 백엔드 fake 도 같은 규칙으로 맞췄다 - 아이템 색·서체를 전부 --tpl-* 토큰으로. retro/common → items/common, RETRO_* → ITEM_*. 글자 단계는 stone-400/500/600 대신 불투명도로 만든다 — 팔레트가 바뀌어도 위계가 남는다 - site/seo/head: look 을 --tpl-* 로 심고, 웹폰트는 템플릿이 쓰는 것만 내려보낸다. 전부 항상 실으면 쓰지도 않는 서체가 모든 발행 사이트의 첫 렌더를 늦춘다 - shared/color: deriveSurfaces 를 계약 패키지로. 캔버스·쇼케이스·발행본이 같은 식을 써야 미리보기가 거짓말을 하지 않는다. 프론트 lib/color 는 재수출만 남겼다 밟은 함정: 강조색을 그대로 쓰면 팔레트에 따라 큰 날짜 숫자와 순위 배지가 사라진다(연한 accent + 밝은 바탕). color-mix(accent 70%, currentColor) 로 색조는 남기고 대비만 확보했다. '확인/확인필요' 배지는 디자인이 아니라 신호라 신호색을 지키되 둘레 글자색만 섞는다. tsc·eslint·vite build 통과(frontend·admin·site), site 테스트 17 passed. 실물 프리렌더(레트로 look + 아이템): 열 섹션과 본문 문장 전부 포함, --tpl-font-heading 'Gugi' · border-width 2px, family=Gugi&Gowun+Batang 링크, 계절 묶음·순위·계산된 시각(09:30 출발 → 09:45 도착 → 11:15 → 11:25) 확인. 고유 콘텐츠 12건 ok=true. 옛 payload(look 없음)로 다시 구워 예전과 동일하게 나오는 것까지 확인. 백엔드는 이 환경에 PostgreSQL 이 없어 pytest 를 못 돌렸다 — _theme·_sections 는 함수 단위로 확인.
72 lines
2.2 KiB
CSS
72 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
@import "@o2o/shared/styles/base.css";
|
|
|
|
/*
|
|
* 발행 사이트의 색은 사장님이 고른 템플릿에서 온다.
|
|
* 프리렌더가 <head> 에 --tpl-* 를 심고(`seo/head.ts` themeStyle), 여기서 Tailwind 색으로 연결한다.
|
|
* 관리자 토큰(tokens.css)은 이 앱에 들어오지 않는다 — 두 색 체계를 섞지 않는다.
|
|
*
|
|
* 개발 서버에서는 <head> 주입이 없으므로 아래 :root 기본값이 쓰인다.
|
|
*/
|
|
:root {
|
|
--tpl-primary: #18181b;
|
|
--tpl-secondary: #52525b;
|
|
--tpl-bg: #ffffff;
|
|
--tpl-card: #fafafa;
|
|
--tpl-text: #09090b;
|
|
--tpl-accent: #2563eb;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-brand: var(--tpl-primary);
|
|
--color-brand-soft: var(--tpl-secondary);
|
|
--color-surface: var(--tpl-bg);
|
|
--color-surface-alt: var(--tpl-card);
|
|
--color-ink: var(--tpl-text);
|
|
--color-accent: var(--tpl-accent);
|
|
|
|
--font-sans: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif;
|
|
--font-serif: 'Noto Serif KR', 'Batang', 'Times New Roman', serif;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
/* 고정 헤더에 앵커가 가리지 않게. */
|
|
scroll-padding-top: 5rem;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-surface);
|
|
color: var(--color-ink);
|
|
/* ★ 본문 서체도 템플릿이 정한다(theme.look → seo/head.ts). 토큰이 없는 옛 payload 에서는
|
|
지금까지와 똑같이 Noto Sans KR 로 떨어진다. */
|
|
font-family: var(--tpl-font-body, var(--font-sans));
|
|
font-feature-settings: "tnum" 1;
|
|
}
|
|
|
|
@layer components {
|
|
/* 제목 서체. 이름은 'serif' 로 남아 있지만 값은 템플릿이 정한다 —
|
|
레트로면 간판체, 심플이면 고딕이다. 토큰이 없으면 예전처럼 명조로 떨어진다. */
|
|
.serif {
|
|
font-family: var(--tpl-font-heading, var(--font-serif));
|
|
letter-spacing: var(--tpl-heading-tracking, normal);
|
|
}
|
|
/* 카드·패널 테두리 두께도 템플릿이 정한다. 레트로는 2px 라야 인쇄물처럼 보인다. */
|
|
.tpl-border {
|
|
border-width: var(--tpl-border-width, 1px);
|
|
}
|
|
|
|
/* 섹션 공통 폭 — 본문이 한 줄에 너무 길어지지 않게. */
|
|
.shell {
|
|
width: 100%;
|
|
max-width: 1120px;
|
|
margin-inline: auto;
|
|
padding-inline: 1rem;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.shell {
|
|
padding-inline: 1.5rem;
|
|
}
|
|
}
|
|
}
|