Mina Choi
64ce467f21
도메인별 스키마(company·place·fact·local·site·job)를 걷어내고 public 한 벌로 폈다.
스키마 한정자가 붙은 순간부터 ORM·raw SQL·테스트 픽스처가 각자 그 이름을 들고 다녀야 했다.
- 공용 콘텐츠를 한 테이블로 되돌린다. spots·region_stories 를 따로 파 놓고 보니
같은 성격이 세 곳으로 갈라져 있었다 — `area_contents` 가 처음부터 content_type 으로
종류를 가르는 설계였고 그걸 쓰면 됐다. 관계(거리·숨김)만 `place_area_refs` 로 남긴다.
- migrations/ + scripts/migrate.py: `init.sql` 은 **DB 를 처음 만들 때만** 돈다. 파일에
컬럼을 더해도 이미 데이터가 든 DB 에는 반영되지 않는다 — 실제로 TourAPI 가 주변 정보를
받아 와도 저장할 곳이 없어 축제·맛집이 0건이었고, 화면에는 "그냥 안 나오는 것" 으로만 보였다.
DECISIONS.md 가 예고한 그대로다("운영 DB 가 생기는 순간 다시 필요해진다").
Alembic 을 쓰지 않는 이유는 스키마 정의가 이미 두 곳(ORM·init.sql)이라 세 번째를
더하면 어긋날 자리가 하나 더 생기기 때문이다.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
203 lines
7.9 KiB
TypeScript
203 lines
7.9 KiB
TypeScript
import {useSite} from '@/lib/site-context';
|
|
import {bookingLabel, bookingLinks, heroFacts, lowestPrice} from '@/lib/derive';
|
|
|
|
/**
|
|
* 파스텔의 첫 화면 — **연노랑 판 위에 둥근 사진**.
|
|
*
|
|
* ★ 사진을 쓴다 (2026-09-03, 두 번째 반려)
|
|
* 처음엔 상호를 담은 CSS 배지를 벽지처럼 깔았다. 레퍼런스(아이스크림 브랜드)는 그게 맞다 —
|
|
* **그쪽은 파는 게 브랜드고, 여기는 파는 게 집이다.** 손님이 첫 화면에서 보고 싶은 건
|
|
* 상호를 반복한 무늬가 아니라 방이 어떻게 생겼는가다. 파스텔은 사진을 감싸는 판으로 남기고,
|
|
* 원 무늬는 사진 뒤에 몇 개만 흘려 이 안의 결만 유지한다.
|
|
* ★ 사진 모서리를 크게 굴린다(--tpl-radius 가 24px 인 안이다). 각진 사진 하나만 딱딱해 보인다.
|
|
* ★ 장식 원은 aria-hidden 이고 사진 **뒤**에 둔다. 사진을 가리면 장식이 아니라 방해다.
|
|
*/
|
|
export function Hero() {
|
|
const payload = useSite();
|
|
const {place, narrative} = payload;
|
|
const facts = heroFacts(payload);
|
|
const price = lowestPrice(payload);
|
|
const links = bookingLinks(payload);
|
|
const line = narrative.tagline ?? narrative.summary;
|
|
const locality = place.addressLocality ?? place.addressRegion;
|
|
|
|
// 대표 사진이 먼저. og:image 와 첫 장이 다르면 공유 카드와 화면이 어긋난다.
|
|
const shots = [...payload.media]
|
|
.filter((image) => image.alt?.trim())
|
|
.sort((a, b) => Number(b.isPrimary) - Number(a.isPrimary))
|
|
.slice(0, 3);
|
|
|
|
// id="top" — 상단 워드마크와 하단 바가 여기로 돌아온다.
|
|
return (
|
|
<section id="top" data-pastel="own" className="w-full">
|
|
{/* 판 1 — 연노랑 바탕. 왼쪽에 말, 오른쪽에 사진. */}
|
|
<div className="relative w-full overflow-hidden" style={{backgroundColor: 'var(--pastel-1)'}}>
|
|
{/* 장식 원 — 사진 뒤에서 살짝만 삐져나온다. 화면 밖으로 잘려도 된다. */}
|
|
<div aria-hidden className="pointer-events-none absolute inset-0">
|
|
<span
|
|
className="absolute rounded-full"
|
|
style={{
|
|
width: 'clamp(12rem, 26vw, 22rem)',
|
|
aspectRatio: '1',
|
|
backgroundColor: 'var(--pastel-2)',
|
|
right: '-6%',
|
|
top: '-6%',
|
|
opacity: 0.75,
|
|
}}
|
|
/>
|
|
<span
|
|
className="absolute rounded-full"
|
|
style={{
|
|
width: 'clamp(8rem, 18vw, 15rem)',
|
|
aspectRatio: '1',
|
|
backgroundColor: 'var(--pastel-3)',
|
|
left: '46%',
|
|
bottom: '-10%',
|
|
opacity: 0.7,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="shell relative grid items-center gap-8 lg:grid-cols-2 lg:gap-14"
|
|
style={{paddingBlock: 'var(--section-space)'}}
|
|
>
|
|
<div className="order-2 lg:order-1">
|
|
{locality && (
|
|
<p
|
|
className="inline-flex items-center rounded-full px-3 py-1 text-[length:var(--fs-xs)] font-extrabold"
|
|
style={{backgroundColor: 'var(--tpl-bg, #fff)', color: 'var(--pastel-ink)'}}
|
|
>
|
|
{locality}
|
|
</p>
|
|
)}
|
|
|
|
{/* h1 은 페이지에 하나. 가게 이름이 들어가야 "○○ 홈페이지" 질의에 잡힌다. */}
|
|
<h1
|
|
className="mt-4 break-keep"
|
|
style={{
|
|
fontSize: 'var(--fs-display)',
|
|
fontWeight: 800,
|
|
lineHeight: 1.2,
|
|
letterSpacing: 'var(--tpl-heading-tracking, -0.03em)',
|
|
}}
|
|
>
|
|
{place.name}
|
|
</h1>
|
|
|
|
{line && (
|
|
<p className="measure mt-4 text-[length:var(--fs-lead)] font-medium leading-relaxed opacity-80">
|
|
{line}
|
|
</p>
|
|
)}
|
|
|
|
{links.length > 0 && (
|
|
<a
|
|
href={links[0].url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="tap mt-7 inline-flex items-center justify-center rounded-full px-8 text-[length:var(--fs-sm)] font-extrabold transition-opacity hover:opacity-90"
|
|
style={{backgroundColor: 'var(--pastel-ink)', color: 'var(--tpl-bg, #fff)'}}
|
|
>
|
|
{bookingLabel(links[0])}로 예약
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<div className="order-1 lg:order-2">
|
|
{shots[0] && (
|
|
<div
|
|
className="relative w-full overflow-hidden"
|
|
style={{
|
|
aspectRatio: '1 / 1',
|
|
borderRadius: 'calc(var(--tpl-radius, 24px) * 1.6)',
|
|
// 그림자 대신 흰 테두리로 띄운다 — 이 안의 규칙이다.
|
|
boxShadow: '0 0 0 clamp(6px, 1.4vw, 12px) var(--tpl-bg, #fff)',
|
|
}}
|
|
>
|
|
<img
|
|
src={shots[0].url}
|
|
alt={shots[0].alt}
|
|
fetchPriority="high"
|
|
decoding="async"
|
|
className="size-full object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 나머지 두 장은 아래 작게. 사진 문장(alt)이 문서에서 사라지지 않게 남긴다. */}
|
|
{shots.length > 1 && (
|
|
<ul className="mt-3 grid grid-cols-2 gap-3">
|
|
{shots.slice(1).map((image) => (
|
|
<li
|
|
key={image.mediaId}
|
|
className="relative overflow-hidden"
|
|
style={{
|
|
aspectRatio: '4 / 3',
|
|
borderRadius: 'var(--tpl-radius, 24px)',
|
|
boxShadow: '0 0 0 clamp(4px, 1vw, 8px) var(--tpl-bg, #fff)',
|
|
}}
|
|
>
|
|
<img
|
|
src={image.url}
|
|
alt={image.alt}
|
|
loading="lazy"
|
|
decoding="async"
|
|
className="size-full object-cover"
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/*
|
|
판 2 — 가격 · 핵심 값.
|
|
★ 국내 숙박 사이트에서 첫 화면이 답해야 하는 건 셋이다: 얼마인가 · 언제 드나 ·
|
|
어디서 예약하나. 예약은 위 버튼이 받고 나머지 둘이 이 띠다.
|
|
값이 하나도 없으면(수집 전 가게) 빈 칸 네 개 대신 판을 지운다.
|
|
*/}
|
|
{(price || facts.length > 0) && (
|
|
<div className="w-full" style={{backgroundColor: 'var(--pastel-2)'}}>
|
|
<dl className="shell flex flex-wrap items-center justify-center gap-x-12 gap-y-5 py-8 text-center">
|
|
{price && (
|
|
<div>
|
|
<dt
|
|
className="text-[length:var(--fs-xs)] font-extrabold"
|
|
style={{color: 'var(--tpl-bg, #fff)', opacity: 0.85}}
|
|
>
|
|
최저가
|
|
</dt>
|
|
<dd
|
|
className="mt-1 font-extrabold tabular-nums"
|
|
style={{fontSize: 'var(--fs-h3)', color: 'var(--tpl-bg, #fff)'}}
|
|
>
|
|
{price}
|
|
</dd>
|
|
</div>
|
|
)}
|
|
{facts.map((row) => (
|
|
<div key={row.label}>
|
|
<dt
|
|
className="text-[length:var(--fs-xs)] font-extrabold"
|
|
style={{color: 'var(--tpl-bg, #fff)', opacity: 0.85}}
|
|
>
|
|
{row.label}
|
|
</dt>
|
|
<dd
|
|
className="mt-1 font-extrabold"
|
|
style={{fontSize: 'var(--fs-h3)', color: 'var(--tpl-bg, #fff)'}}
|
|
>
|
|
{row.value}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|