Mina Choi
872d00f3c4
인앱 미니 블로그(AI 자동 포스트, 이메일 승인)·이용후기(즉시 게시)·예약 요청(메일 발송)을
새로 붙였고, 병행해서 /s/stay 목업과 발행 사이트 공통 렌더러(UnitsSection·FestivalSection·
LocalGuideSection·WeatherSection 등)의 UI 버그를 다수 고쳤다. 범위가 넓지만 한 주 분량
작업을 한 커밋으로 묶어 달라는 요청에 따라 하나로 묶는다.
- solution/backend: post/review/booking_request 라우터·서비스·CRUD 추가, 스케줄러에
블로그 초안 생성(새벽 4:10)·발송(아침 9:00) cron 등록, 마이그레이션 4건 추가
- solution/frontend, admin/frontend: 생성된 API 클라이언트 갱신, 리뷰 모더레이션·
블로그 글 관리 페이지 추가
- solution/site/src: 객실 상세+실시간예약(날짜선택·연락처 폼)을 모달로 통합, 축제·
주변안내 카드 클릭 시 모달 전환, 후기 목록 카드 UI, 공용 Modal 컴포넌트 신설,
날씨 문구 동기화 버그 수정(하늘줄·기온줄 한 타이머로), 시설·편의 가능/불가 아이콘
색상 하이라이트, 헤더 메뉴 순서를 실제 섹션 순서에 맞춤, 하단 탭바 아이콘 정렬 버그
(line-height) 수정, 추천일정 점선 연결+데스크톱 자동펼침/모바일 축소, 채널 라벨에
크롤링 원문("NOL")이 새던 것을 bookingLabel() 로 교체
- solution/site/scripts/mockup: /s/stay 패치 스크립트·주입 CSS·JS 다수 수정, stay4~6
빌드 스크립트 추가(다른 세션 작업)
테스트: solution/site `npx tsc --noEmit` 통과, `npx vitest run` 93 passed,
solution/backend `pytest tests/test_booking_request.py` 6 passed(로컬 DB 대상).
예약 요청 메일은 실제 발송까지 확인(place 66894a1b 소유자 이메일 누락을 DB에서 보정).
84 lines
3.8 KiB
TypeScript
84 lines
3.8 KiB
TypeScript
/**
|
|
* 인물 열전 — 발행본. 필름 한 롤에 프레임이 이어진다.
|
|
* ★ 프레임 안은 사진이 있으면 사진, 없으면 활판 이니셜이다 — 빈 회색 상자를 두지 않는다.
|
|
*/
|
|
import type {PeopleItem} from '@o2o/shared';
|
|
import {useSite} from '@site/lib/site-context';
|
|
import {sectionItems, sectionName} from '@site/lib/derive';
|
|
import {ITEM_INVERSE, ItemSection, Rail, SourceLine, tally} from './common';
|
|
|
|
export function PeopleSection() {
|
|
const payload = useSite();
|
|
const parsed = sectionItems<PeopleItem>(payload, 'people');
|
|
if (parsed.items.length === 0) return null;
|
|
|
|
return (
|
|
<ItemSection
|
|
id="people"
|
|
name={parsed.title || sectionName(payload, 'people', '인물 열전')}
|
|
subtitle={parsed.subtitle}
|
|
count={
|
|
// 각주는 실제로 활자로 대신한 인물이 있을 때만 — 전원 사진이 있으면 틀린 말이 된다.
|
|
parsed.items.some((person) => !person.imageUrl)
|
|
? `${tally(parsed.items.length, parsed.unverified, '명')} · 사진이 없는 인물은 이름 활자로 대신합니다`
|
|
: tally(parsed.items.length, parsed.unverified, '명')
|
|
}
|
|
dark
|
|
>
|
|
<div
|
|
className="tpl-border border"
|
|
// 어두운 면 위의 선도 흰색을 박지 않는다 — 둘레 글자색을 섞는다.
|
|
style={{
|
|
backgroundColor: ITEM_INVERSE,
|
|
borderColor: 'color-mix(in oklab, currentColor 22%, transparent)',
|
|
}}
|
|
>
|
|
<div className="w4-film-perf h-2.5 opacity-100" />
|
|
<div className="px-3 py-4">
|
|
<Rail label="인물 목록" arrows="overlay">
|
|
{parsed.items.map((person, index) => (
|
|
<article key={`${person.name}-${index}`} className="w-[210px] shrink-0 snap-center">
|
|
{/* 사진 출처는 카드 아래 SourceLine 옆에 붙는다(아래) — 라이선스 조건이다. */}
|
|
{person.imageUrl ? (
|
|
<img
|
|
src={person.imageUrl}
|
|
alt={`${person.name} 사진`}
|
|
loading="lazy"
|
|
decoding="async"
|
|
className="aspect-3/4 w-full border object-cover"
|
|
style={{borderColor: 'color-mix(in oklab, currentColor 28%, transparent)'}}
|
|
/>
|
|
) : (
|
|
<span
|
|
className="serif grid aspect-3/4 w-full place-items-center border text-5xl"
|
|
// 프레임 안쪽은 필름보다 한 단 밝게 — 색을 박지 않고 글자색을 섞어 만든다.
|
|
style={{
|
|
backgroundColor: 'color-mix(in oklab, currentColor 14%, transparent)',
|
|
borderColor: 'color-mix(in oklab, currentColor 28%, transparent)',
|
|
}}
|
|
aria-hidden
|
|
>
|
|
{person.name.trim().charAt(0)}
|
|
</span>
|
|
)}
|
|
<h3 className="serif mt-3 text-base font-bold">
|
|
{person.name}
|
|
{person.aka && <span className="ml-1.5 text-[length:var(--fs-xs)] opacity-100">호 {person.aka}</span>}
|
|
</h3>
|
|
<p className="mt-0.5 text-[length:var(--fs-xs)] opacity-100">
|
|
{[person.role, person.years].filter(Boolean).join(' · ')}
|
|
</p>
|
|
{person.oneLine && <p className="mt-2 text-[length:var(--fs-sm)] leading-relaxed opacity-100">{person.oneLine}</p>}
|
|
<div className="mt-2">
|
|
<SourceLine source={person.source} verified={person.verified} imageCredit={person.imageCredit} />
|
|
</div>
|
|
</article>
|
|
))}
|
|
</Rail>
|
|
</div>
|
|
<div className="w4-film-perf h-2.5 opacity-100" />
|
|
</div>
|
|
</ItemSection>
|
|
);
|
|
}
|