From 85575e9f9f028a24ba296510896300e140ebad17 Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Thu, 1 Oct 2026 11:42:04 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20solution/site:=20=EB=AF=B8=EB=8B=88?=
 =?UTF-8?q?=EB=B8=94=EB=A1=9C=EA=B7=B8=20=EC=B9=B4=EB=93=9C=EB=A5=BC=20?=
 =?UTF-8?q?=EC=9D=BC=EB=A0=A5=20=EB=AA=A8=EC=96=91=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=E2=80=94=20=EA=B3=84=EC=A0=88=EC=83=89=20=EB=8C=80=EC=8B=A0=20?=
 =?UTF-8?q?=ED=85=9C=ED=94=8C=EB=A6=BF=20=EC=83=89,=20=EC=9E=90=EB=8F=99?=
 =?UTF-8?q?=20=EB=84=98=EA=B9=80=207=EC=B4=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 solution/site/src/sections/BlogSection.tsx | 44 ++++++++++------------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/solution/site/src/sections/BlogSection.tsx b/solution/site/src/sections/BlogSection.tsx
index 0aa52ad..de0a294 100644
--- a/solution/site/src/sections/BlogSection.tsx
+++ b/solution/site/src/sections/BlogSection.tsx
@@ -5,21 +5,7 @@ import {isoDate} from '@site/lib/format';
 import {Carousel, CarouselSlide, Modal, Section} from '@site/lib/ui';
 
 /** 미니 블로그 — 사장님이 승인한 짧은 글. */
-type Season = 'spr' | 'sum' | 'aut' | 'win';
-
-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';
-}
+const AUTOPLAY_MS = 7000;
 
 /** ISO → 한국 시간 기준 월·일·요일. */
 function kstDateParts(iso: string) {
@@ -46,9 +32,9 @@ export function BlogSection() {
       title="미니 블로그"
       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) => (
-          <CarouselSlide key={post.postId} basis="basis-[225px]">
+          <CarouselSlide key={post.postId} basis="basis-[272px]">
             <PostCard post={post} onOpen={() => setOpenId(post.postId)} />
           </CarouselSlide>
         ))}
@@ -65,21 +51,29 @@ export function BlogSection() {
 
 function PostCard({post, onOpen}: {post: PostEntry; onOpen: () => void}) {
   const {month, day, weekday} = kstDateParts(post.publishedAt);
-  const season = seasonOf(month);
-  const color = SEASON_COLOR[season];
-  const dateLabel = `${month}월 ${day}일 · ${weekday}`;
 
   return (
     <button
       type="button"
       onClick={onOpen}
-      className="panel flex aspect-square w-full flex-col gap-2 p-4 text-left"
-      style={{backgroundColor: `color-mix(in srgb, ${color} 9%, var(--tpl-card, #efe7d3))`}}
+      aria-label={`${month}월 ${day}일 ${weekday} 글 열기`}
+      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}}>
-        {dateLabel}
+      <time dateTime={post.publishedAt} className="flex shrink-0 items-center gap-3">
+        <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>
-      <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}
       </p>
     </button>