[feat] solution/site: 미니블로그 카드를 일력 모양으로 — 계절색 대신 템플릿 색, 자동 넘김 7초
9~11월 글이 전부 가을 빨강 날짜·분홍 카드로 나와 레트로 템플릿에서 경고처럼 보였다. 4초 넘김은 읽기 전에 지나갔다. - BlogSection: 계절색 제거 — 카드 --tpl-card, 큰 날짜 숫자 --tpl-primary, 월·요일 두 줄, 구분선, 본문 --fs-body 4줄, 카드 폭 272px - 미니블로그만 autoplay 7000ms site tsc·eslint, blog.test 4 passed Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
59cd0035fa
commit
85575e9f9f
@ -5,21 +5,7 @@ import {isoDate} from '@site/lib/format';
|
|||||||
import {Carousel, CarouselSlide, Modal, Section} from '@site/lib/ui';
|
import {Carousel, CarouselSlide, Modal, Section} from '@site/lib/ui';
|
||||||
|
|
||||||
/** 미니 블로그 — 사장님이 승인한 짧은 글. */
|
/** 미니 블로그 — 사장님이 승인한 짧은 글. */
|
||||||
type Season = 'spr' | 'sum' | 'aut' | 'win';
|
const AUTOPLAY_MS = 7000;
|
||||||
|
|
||||||
const SEASON_COLOR: Record<Season, string> = {
|
|
||||||
spr: '#4f7942',
|
|
||||||
sum: '#c9820a',
|
|
||||||
aut: '#bf2f1b',
|
|
||||||
win: '#3b6ea5',
|
|
||||||
};
|
|
||||||
|
|
||||||
function seasonOf(month: number): Season {
|
|
||||||
if (month >= 3 && month <= 5) return 'spr';
|
|
||||||
if (month >= 6 && month <= 8) return 'sum';
|
|
||||||
if (month >= 9 && month <= 11) return 'aut';
|
|
||||||
return 'win';
|
|
||||||
}
|
|
||||||
|
|
||||||
/** ISO → 한국 시간 기준 월·일·요일. */
|
/** ISO → 한국 시간 기준 월·일·요일. */
|
||||||
function kstDateParts(iso: string) {
|
function kstDateParts(iso: string) {
|
||||||
@ -46,9 +32,9 @@ export function BlogSection() {
|
|||||||
title="미니 블로그"
|
title="미니 블로그"
|
||||||
lead="사장님이 남기는 숙소 이야기입니다."
|
lead="사장님이 남기는 숙소 이야기입니다."
|
||||||
>
|
>
|
||||||
<Carousel label={`${payload.place.name} 미니 블로그`} align="start" gap={0.875} loop>
|
<Carousel label={`${payload.place.name} 미니 블로그`} align="start" gap={0.875} loop autoplay={AUTOPLAY_MS}>
|
||||||
{posts.map((post) => (
|
{posts.map((post) => (
|
||||||
<CarouselSlide key={post.postId} basis="basis-[225px]">
|
<CarouselSlide key={post.postId} basis="basis-[272px]">
|
||||||
<PostCard post={post} onOpen={() => setOpenId(post.postId)} />
|
<PostCard post={post} onOpen={() => setOpenId(post.postId)} />
|
||||||
</CarouselSlide>
|
</CarouselSlide>
|
||||||
))}
|
))}
|
||||||
@ -65,21 +51,29 @@ export function BlogSection() {
|
|||||||
|
|
||||||
function PostCard({post, onOpen}: {post: PostEntry; onOpen: () => void}) {
|
function PostCard({post, onOpen}: {post: PostEntry; onOpen: () => void}) {
|
||||||
const {month, day, weekday} = kstDateParts(post.publishedAt);
|
const {month, day, weekday} = kstDateParts(post.publishedAt);
|
||||||
const season = seasonOf(month);
|
|
||||||
const color = SEASON_COLOR[season];
|
|
||||||
const dateLabel = `${month}월 ${day}일 · ${weekday}`;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onOpen}
|
onClick={onOpen}
|
||||||
className="panel flex aspect-square w-full flex-col gap-2 p-4 text-left"
|
aria-label={`${month}월 ${day}일 ${weekday} 글 열기`}
|
||||||
style={{backgroundColor: `color-mix(in srgb, ${color} 9%, var(--tpl-card, #efe7d3))`}}
|
className="panel flex h-full min-h-[17rem] w-full flex-col p-5 text-left"
|
||||||
|
style={{backgroundColor: 'var(--tpl-card)'}}
|
||||||
>
|
>
|
||||||
<time dateTime={post.publishedAt} className="block shrink-0 text-[length:var(--fs-xs)] font-bold tracking-wide" style={{color}}>
|
<time dateTime={post.publishedAt} className="flex shrink-0 items-center gap-3">
|
||||||
{dateLabel}
|
<span
|
||||||
|
className="text-[2.75rem] leading-none tabular-nums"
|
||||||
|
style={{color: 'var(--tpl-primary)', fontFamily: 'var(--tpl-font-heading)', fontWeight: 'var(--tpl-heading-weight, 700)'}}
|
||||||
|
>
|
||||||
|
{day}
|
||||||
|
</span>
|
||||||
|
<span className="flex flex-col text-[length:var(--fs-xs)] leading-snug opacity-75">
|
||||||
|
<span>{month}월</span>
|
||||||
|
<span>{weekday}</span>
|
||||||
|
</span>
|
||||||
</time>
|
</time>
|
||||||
<p className="line-clamp-5 min-h-0 flex-1 whitespace-pre-line break-keep text-[length:var(--fs-xs)] leading-relaxed">
|
<span aria-hidden className="my-4 block h-px w-full shrink-0" style={{backgroundColor: 'var(--tpl-border, currentColor)', opacity: 0.6}} />
|
||||||
|
<p className="line-clamp-4 min-h-0 whitespace-pre-line break-keep text-[length:var(--fs-body)] leading-relaxed">
|
||||||
{post.body}
|
{post.body}
|
||||||
</p>
|
</p>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user