Mina Choi
00e13bca7f
목업(/s/stay)이 참조하는 스타일시트가 서버에서 사라져(404) 그 화면을 기준으로 삼을 수
없었다. 브라우저 캐시에 남아 있던 규칙을 꺼내 레포에 되돌리고, 섹션 마크업을 목업 HTML
에서 그대로 옮겼다. Playwright 대조로 섹션 래퍼·제목 16/17, 안쪽 구조 14/17 일치.
- index.css: --fs-display~--fs-xs(유동 타이포 7) · --section-space · --color-line/muted ·
.h2 .h3 .panel .paper .measure .border-line .text-muted .divide-line .slider-viewport/track
★ 이 토큰이 없던 동안 컴포넌트가 var(--fs-display)를 써도 브라우저가 조용히 무시했다 —
히어로 제목이 본문 크기로 나오던 원인
- HeroSection: 가운데 → 좌하단. 사진 위에 글자를 한가운데 얹으면 피사체를 정확히 가린다
- AnswerBlock·EssentialInfo·Units·Gallery·Location·Faq·LocalGuide·Weather·About:
목업 마크업 그대로. embla 를 scroll-snap 으로 바꿔 스크립트 없이도 레일이 밀린다
- FestivalSection(계절 탭) · StorySection(이야기 탭 래퍼) · items/TripMap(OSM 타일 지도) 신설
★ 지도는 iframe 이 아니라 타일을 직접 깐다 — iframe 은 핀을 하나밖에 못 찍어
"어떤 순서로 도는가" 를 그릴 수 없다
- items: itinerary·event·video kind 추가(파서에 없어 payload 까지 실려 오고도 화면에서
사라지던 것) · Rail 을 slider-viewport/track 으로 · SongsSection 을 턴테이블로
- color.ts: 선 색을 secondary → mix(bg, text, .2). secondary 는 '본문 다음으로 진한
글자색' 이라 선으로 쓰면 표와 카드가 격자무늬처럼 새까맣게 그어진다
- seo/head.ts: --tpl-texture. 없으면 색만 갱지고 면은 매끈해서 인쇄물로 안 보인다
- seo/verify.ts: unitCode·numberOfRooms 를 화면 대조에서 뺀다
★ unitCode 는 ㎡의 ISO 코드로 priceCurrency 와 같은 성격인데 예외에 없었다. 그래서
room_size 가 있는 사업장은 발행 게이트가 전부 막았다(실측: 가은채 객실 12개).
stay 는 객실 2개 + room_size 없음이라 우연히 통과했다
- shared: LocalPlace.imageUrl/distanceMeters · FestivalEntry.imageUrl ·
ItineraryStop 좌표 · TemplateLook.texture · people/chronicle/postcard imageUrl
★ 좌표·사진은 모델이 만드는 칸이 아니다. 공식 API 로 조회해 채운다
검증: tsc 통과 · Playwright 대조(목업 CSS 주입) 섹션 래퍼·제목 16/17, 안쪽 14/17.
남은 차이는 데이터 한계다 — people 사진은 위키에 원본이 없고(original:false),
weather.note 는 정적 페이지에 날씨 문장을 박는 문제라 보류.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KP1ykMnWZFtLFpm2mow1Sw
63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
import {useSite} from '@/lib/site-context';
|
|
import {factualSummary} from '@/seo/meta';
|
|
import {essentialRows} from '@/lib/derive';
|
|
import {formatKoreanDate} from '@/lib/format';
|
|
|
|
/**
|
|
* 핵심 정보 요약 — AEO 의 핵심 블록.
|
|
*
|
|
* AI 검색은 페이지 전체를 요약하지 않는다. "답이 될 만한 문장"을 찾아 그대로 인용한다.
|
|
* 그래서 상단에 단정문을 둔다: "체크인은 16:00입니다." 형태.
|
|
* 표(dl)로 두는 이유는 label-value 관계가 마크업으로 드러나야 기계가 짝을 짓기 때문이다.
|
|
*
|
|
* ★ 여기 나오는 값은 전부 확인된 fact 다. essentialRows() 가 걸러 준다.
|
|
* ★ 마크업은 목업(/s/stay 의 `<section id="summary">`)에서 그대로 옮겼다.
|
|
* 좌우 5:7 그리드에 왼쪽이 제목·요약, 오른쪽이 두 칸 표다. 제목은 h2 태그지만 h3 급으로
|
|
* 그린다 — 이 블록은 섹션이 아니라 히어로에 딸린 요약이라 같은 크기로 서면 위계가 무너진다.
|
|
*/
|
|
export function AnswerBlock() {
|
|
const payload = useSite();
|
|
const rows = essentialRows(payload).slice(0, 6);
|
|
const summary = payload.narrative.summary ?? factualSummary(payload);
|
|
|
|
if (rows.length === 0 && !summary) return null;
|
|
|
|
return (
|
|
<section
|
|
id="summary"
|
|
aria-labelledby="summary-heading"
|
|
className="border-line w-full border-b py-10 sm:py-14"
|
|
style={{backgroundColor: 'var(--tpl-surface-alt, #f5f5f4)'}}
|
|
>
|
|
<div className="shell">
|
|
<div className="grid gap-8 lg:grid-cols-12 lg:gap-12">
|
|
<div className="lg:col-span-5">
|
|
<h2 id="summary-heading" className="h3">
|
|
한눈에 보는 {payload.place.name}
|
|
</h2>
|
|
{/* 단정문 한 덩어리 — 인용되기 좋은 형태. */}
|
|
<p className="measure mt-3 text-[length:var(--fs-body)] leading-relaxed">{summary}</p>
|
|
<p className="text-muted mt-3 text-[length:var(--fs-xs)]">
|
|
{formatKoreanDate(payload.site.updatedAt)} 기준, 사업자가 확인한 정보입니다.
|
|
</p>
|
|
</div>
|
|
|
|
{rows.length > 0 && (
|
|
<dl className="grid grid-cols-1 gap-x-10 lg:col-span-7 xl:grid-cols-2">
|
|
{rows.map((row) => (
|
|
<div
|
|
key={row.label}
|
|
className="border-line flex flex-col gap-0.5 py-2.5 sm:flex-row sm:gap-4 sm:border-b"
|
|
>
|
|
<dt className="text-muted shrink-0 text-[length:var(--fs-sm)] sm:w-28">{row.label}</dt>
|
|
<dd className="text-[length:var(--fs-sm)] font-semibold">{row.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|