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>
216 lines
9.7 KiB
TypeScript
216 lines
9.7 KiB
TypeScript
/**
|
|
* 영상 — 발행본.
|
|
*
|
|
* ★ **누르기 전에는 iframe 을 붙이지 않는다.**
|
|
* 유튜브 임베드 하나는 첫 요청에만 수백 KB, 실행까지 1MB 가 넘는 남의 스크립트를 끌고 온다.
|
|
* 이 사이트는 정적으로 구워 빠른 것이 존재 이유인데, 영상 한 편이 그걸 통째로 무른다.
|
|
* 그래서 **표지 사진 + 재생 버튼**만 두고, 손님이 누른 그 영상만 iframe 으로 바꾼다.
|
|
* 덤으로 재생 전에는 추적 쿠키가 심기지 않는다(누른 뒤에도 `youtube-nocookie`).
|
|
*
|
|
* ★ 스크립트가 없어도 영상으로 갈 수 있어야 한다.
|
|
* 표지는 `<a href>` 로 감싼다 — 크롤러는 링크를 읽고, JS 가 죽어도 손님은 유튜브로 간다.
|
|
* 눌렀을 때만 기본 이동을 막고 그 자리에서 재생한다.
|
|
*
|
|
* ★ 시작 여백을 없앴다 (2026-09-04, 사장님: "카로셀 시작 패딩 없게")
|
|
* 트랙에 px-[7%] 를 두고 카드를 snap-center 로 잡았더니, 390px 에서 첫 영상이 섹션 제목보다
|
|
* **24px 더 안쪽**에서 시작했다. 왼쪽 선이 둘이 되면 목록이 섹션에 안 붙은 것처럼 보인다.
|
|
* 여백을 걷고 snap-start 로 바꿔 첫 장을 제목과 같은 선에 세운다 — basis 가 86% 라
|
|
* 다음 장이 걸쳐 보이는 신호는 그대로다.
|
|
* ★ 쇼츠는 9:16 이다. 16:9 틀에 넣으면 좌우가 비고 영상이 손톱만 해진다 —
|
|
* 주소가 이미 말해 주는 것(`/shorts/`)을 무시하지 않는다.
|
|
*
|
|
* ★ 좁은 화면에서는 옆으로 민다. 세로로 쌓으면 영상 두세 편이 화면 몇 개 분량이 되어
|
|
* 그 아래 섹션이 안 읽힌다. 넓은 화면에서는 격자 그대로다.
|
|
* **폭으로 컴포넌트를 갈아 끼우지 않고 CSS 로만 가른다** — 서버 렌더는 화면 폭을 모르니
|
|
* 렌더 중에 matchMedia 를 읽으면 하이드레이션이 어긋난다. 스크립트가 없어도 밀린다.
|
|
*/
|
|
import {useCallback, useEffect, useRef, useState} from 'react';
|
|
import {ChevronLeft, ChevronRight, Play} from 'lucide-react';
|
|
import {
|
|
isVerticalVideo,
|
|
youtubeEmbed,
|
|
youtubeId,
|
|
youtubePoster,
|
|
type VideoItem,
|
|
} from '@o2o/shared';
|
|
import {useSite} from '@/lib/site-context';
|
|
import {sectionItems, sectionName} from '@/lib/derive';
|
|
import {ITEM_BORDER, ITEM_CARD, ItemSection, SourceLine} from './common';
|
|
|
|
export function VideoSection() {
|
|
const payload = useSite();
|
|
const parsed = sectionItems<VideoItem>(payload, 'video');
|
|
// 지금 재생 중인 한 편. 여러 편을 동시에 띄우지 않는다 — 소리가 겹친다.
|
|
const [playing, setPlaying] = useState<number>();
|
|
const scroller = useRef<HTMLUListElement>(null);
|
|
// 끝에 닿으면 화살표를 지운다 — 눌러도 안 움직이는 버튼은 고장으로 읽힌다.
|
|
const [edge, setEdge] = useState({prev: false, next: true});
|
|
|
|
const syncEdges = useCallback(() => {
|
|
const box = scroller.current;
|
|
if (!box) return;
|
|
const max = box.scrollWidth - box.clientWidth;
|
|
// 소수점 폭 때문에 scrollLeft 가 끝에 정확히 닿지 못한다 — 8px 여유를 둔다.
|
|
setEdge({prev: box.scrollLeft > 8, next: box.scrollLeft < max - 8});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
syncEdges();
|
|
// 폭이 바뀌면(회전·창 조절) 격자↔슬라이더가 갈리므로 다시 잰다.
|
|
window.addEventListener('resize', syncEdges);
|
|
return () => window.removeEventListener('resize', syncEdges);
|
|
}, [syncEdges]);
|
|
|
|
const nudge = useCallback((dir: -1 | 1) => {
|
|
const box = scroller.current;
|
|
if (!box) return;
|
|
// 한 화면을 통째로 넘기지 않는다(0.85) — 방금 본 영상이 조금 남아야 이어진 목록으로 읽힌다.
|
|
const still = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
box.scrollBy({left: dir * box.clientWidth * 0.85, behavior: still ? 'auto' : 'smooth'});
|
|
}, []);
|
|
|
|
if (parsed.items.length === 0) return null;
|
|
|
|
// 한 편뿐이면 밀 곳이 없다 — 슬라이더로 만들지 않는다.
|
|
const many = parsed.items.length > 1;
|
|
|
|
return (
|
|
<ItemSection
|
|
id="video"
|
|
name={parsed.title || sectionName(payload, 'video', '영상으로 보기')}
|
|
subtitle={parsed.subtitle}
|
|
link={
|
|
parsed.linkUrl ? {url: parsed.linkUrl, label: parsed.linkLabel ?? '더 보기'} : undefined
|
|
}
|
|
>
|
|
<div className="relative">
|
|
<ul
|
|
ref={scroller}
|
|
onScroll={syncEdges}
|
|
className={`gap-5 ${
|
|
many
|
|
? 'flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 lg:gap-0 [scrollbar-width:none] lg:grid lg:grid-cols-3 lg:snap-none lg:overflow-visible lg:pb-0 [&::-webkit-scrollbar]:hidden'
|
|
: 'grid grid-cols-1'
|
|
}`}
|
|
>
|
|
{parsed.items.map((item, index) => {
|
|
const id = youtubeId(item.url);
|
|
const vertical = isVerticalVideo(item.url);
|
|
const on = playing === index;
|
|
return (
|
|
<li
|
|
key={`${item.url}-${index}`}
|
|
/* 다음 편이 걸쳐 보여야 "옆으로 더 있다"가 읽힌다. 넓은 화면은 격자 칸이 폭을 정한다. */
|
|
className={many ? 'shrink-0 basis-[86%] snap-start sm:basis-[56%] lg:basis-auto' : ''}
|
|
>
|
|
<figure className="space-y-2">
|
|
<div
|
|
className="tpl-border relative mx-auto overflow-hidden border"
|
|
style={{
|
|
borderColor: ITEM_BORDER,
|
|
backgroundColor: ITEM_CARD,
|
|
aspectRatio: vertical ? '9 / 16' : '16 / 9',
|
|
// 세로 영상이 카드 폭을 다 먹으면 한 편이 화면 하나가 된다.
|
|
width: vertical ? 'min(100%, 22rem)' : '100%',
|
|
}}
|
|
>
|
|
{on && id ? (
|
|
<iframe
|
|
src={youtubeEmbed(id)}
|
|
title={item.caption || '영상'}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowFullScreen
|
|
className="size-full border-0"
|
|
/>
|
|
) : (
|
|
<a
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={(event) => {
|
|
// 유튜브 주소일 때만 그 자리에서 재생한다. 아니면 그냥 링크로 나간다.
|
|
if (!id) return;
|
|
event.preventDefault();
|
|
setPlaying(index);
|
|
}}
|
|
aria-label={`${item.caption || '영상'} 재생`}
|
|
className="group block size-full"
|
|
>
|
|
{id ? (
|
|
<img
|
|
src={youtubePoster(id)}
|
|
alt=""
|
|
loading="lazy"
|
|
decoding="async"
|
|
className="size-full object-cover"
|
|
/>
|
|
) : (
|
|
<span className="text-muted grid size-full place-items-center px-4 text-center text-[length:var(--fs-xs)]">
|
|
유튜브 영상이 아닙니다 — 눌러서 원본으로 갑니다
|
|
</span>
|
|
)}
|
|
<span className="absolute inset-0 grid place-items-center">
|
|
<span
|
|
className="grid size-14 place-items-center rounded-full backdrop-blur transition-transform group-hover:scale-110"
|
|
style={{
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--tpl-inverse, #1c1917) 70%, transparent)',
|
|
color: 'var(--tpl-bg, #fff)',
|
|
}}
|
|
>
|
|
<Play className="size-6" />
|
|
</span>
|
|
</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
{item.caption && (
|
|
<figcaption className="text-[length:var(--fs-sm)] leading-relaxed opacity-80">
|
|
{item.caption}
|
|
</figcaption>
|
|
)}
|
|
<SourceLine source={item.source} verified={item.verified} />
|
|
</figure>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
{/* 손가락으로 밀 수 있어도 화살표가 있어야 "옆에 더 있다"가 보인다. 넓은 화면은 격자라 감춘다. */}
|
|
{many && (
|
|
<>
|
|
<ScrollNav dir="prev" onClick={() => nudge(-1)} disabled={!edge.prev} />
|
|
<ScrollNav dir="next" onClick={() => nudge(1)} disabled={!edge.next} />
|
|
</>
|
|
)}
|
|
</div>
|
|
</ItemSection>
|
|
);
|
|
}
|
|
|
|
function ScrollNav({
|
|
dir,
|
|
onClick,
|
|
disabled,
|
|
}: {
|
|
dir: 'prev' | 'next';
|
|
onClick: () => void;
|
|
disabled: boolean;
|
|
}) {
|
|
const Icon = dir === 'prev' ? ChevronLeft : ChevronRight;
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
aria-label={dir === 'prev' ? '이전 영상' : '다음 영상'}
|
|
className={`tap absolute top-1/2 z-10 flex -translate-y-1/2 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur transition hover:bg-black/75 disabled:pointer-events-none disabled:opacity-0 lg:hidden ${
|
|
dir === 'prev' ? 'left-1' : 'right-1'
|
|
}`}
|
|
>
|
|
<Icon className="size-5" />
|
|
</button>
|
|
);
|
|
}
|