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 는 함수 단위로 확인.
94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
import {
|
|
AboutSection,
|
|
AnswerBlock,
|
|
BookingSection,
|
|
EssentialInfoSection,
|
|
ExhibitionSection,
|
|
FaqSection,
|
|
GallerySection,
|
|
HeroSection,
|
|
InquirySection,
|
|
ITEM_SECTIONS,
|
|
LocalGuideSection,
|
|
WeatherSection,
|
|
LocationSection,
|
|
RulesSection,
|
|
SpaceSection,
|
|
UnitsSection,
|
|
} from '@/sections';
|
|
import {useSite} from '@/lib/site-context';
|
|
import {isSectionEnabled} from '@/lib/derive';
|
|
|
|
/**
|
|
* 홈.
|
|
*
|
|
* 섹션 순서는 관리자 에디터가 정한 것(theme.sections)을 따른다.
|
|
* ★ 히어로 바로 다음에 AnswerBlock 이 온다. 이 자리는 순서 설정과 무관하게 고정이다 —
|
|
* AI 검색이 답을 뽑아 가는 자리라, 사장님이 아래로 내리면 인용률이 떨어진다.
|
|
*
|
|
* ★ variantId 는 아직 해석하지 않는다.
|
|
* `SectionSetting.variantId` 에 사장님이 [디자인] 탭에서 고른 배리에이션 키
|
|
* (예: 'rules.cards')가 실려 오지만, 발행본은 그 값을 보지 않고 섹션마다 하나뿐인
|
|
* 기본 레이아웃으로 그린다. 배리에이션 40종을 발행본에 옮기는 건 별도 작업이다.
|
|
* 렌더러가 모르는 키가 와도 화면이 깨지지 않아야 한다는 규칙(site-payload.ts)은
|
|
* "값을 통째로 무시한다"로 이미 지켜진다.
|
|
* ★ 붙여넣기 아이템(songs·daily·…)은 배리에이션이 타입당 하나뿐이라 지금은 어긋날 것이 없다.
|
|
*/
|
|
export function HomePage() {
|
|
const payload = useSite();
|
|
|
|
/**
|
|
* 섹션 id → 발행본 컴포넌트.
|
|
*
|
|
* ★ 에디터의 섹션 타입(admin `builder/canvas/registry.ts`)과 이 표의 키가 어긋나면,
|
|
* 사장님이 켜 둔 섹션이 아래 `if (!Component) return null` 에서 말없이 사라진다.
|
|
* 실제로 rules(이용 규정)·booking·space·inquiry·exhibition 다섯이 그렇게 빠져 있었고,
|
|
* 숙박 사장님이 써 넣은 환불 규정이 payload 까지 실려 오고도 발행본에 없었다.
|
|
* 에디터에 섹션 타입을 늘릴 때는 여기도 같이 늘린다.
|
|
*/
|
|
const SECTION_COMPONENTS: Record<string, () => React.ReactElement | null> = {
|
|
intro: AboutSection,
|
|
info: EssentialInfoSection,
|
|
rooms: UnitsSection,
|
|
menu: UnitsSection,
|
|
programs: UnitsSection,
|
|
rules: RulesSection,
|
|
booking: BookingSection,
|
|
space: SpaceSection,
|
|
inquiry: InquirySection,
|
|
exhibition: ExhibitionSection,
|
|
photos: GallerySection,
|
|
local: LocalGuideSection,
|
|
weather: WeatherSection,
|
|
map: LocationSection,
|
|
faq: FaqSection,
|
|
// 붙여넣기 아이템 아홉. 데이터가 fact 가 아니라 theme.sections[].data 의 JSON 에서 온다.
|
|
// ★ 같은 컴포넌트를 두 번 그리지 않는 아래 규칙과 상관없다 — 아이템마다 컴포넌트가 다르다.
|
|
...ITEM_SECTIONS,
|
|
};
|
|
|
|
const rendered = new Set<string>();
|
|
|
|
return (
|
|
<main className="w-full flex-1">
|
|
<HeroSection />
|
|
<AnswerBlock />
|
|
|
|
{payload.theme.sections
|
|
.filter((section) => section.enabled && section.id !== 'hero')
|
|
.map((section) => {
|
|
const Component = SECTION_COMPONENTS[section.id];
|
|
if (!Component) return null;
|
|
// 같은 컴포넌트를 두 번 그리지 않는다(rooms/menu/programs 가 모두 UnitsSection).
|
|
const key = Component.name;
|
|
if (rendered.has(key)) return null;
|
|
rendered.add(key);
|
|
return <Component key={section.id} />;
|
|
})}
|
|
|
|
{/* 섹션 설정에 없더라도 오시는 길은 항상 나간다 — 위치 질의의 근거다. */}
|
|
{!isSectionEnabled(payload, 'map') && <LocationSection />}
|
|
</main>
|
|
);
|
|
}
|