From 7a7f00dd15eae8f4c029f0298080b620ce88954e Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Wed, 30 Sep 2026 15:47:57 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20solution/site:=20=EC=B2=AB=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=ED=83=9C=EA=B7=B8=20=EC=82=AD=EC=A0=9C=C2=B7?=
 =?UTF-8?q?=EC=86=8C=EB=AC=B8=EA=B5=AC=20=EA=B3=B5=ED=86=B5=ED=99=94=20?=
 =?UTF-8?q?=E2=80=94=20=EB=B6=80=ED=8B=B0=ED=81=AC=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=EB=8F=84=20=EB=AC=B8=20=EB=AA=A8=EC=96=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 라운드·코랄·미니멀·솔숲: 히어로의 ‘주차 가능’ 칩 삭제. 일러스트: 지역 말풍선 삭제
- kit/heroSub.ts: 소문구 = 사장님 문구, 없으면 가장 가까운 명소까지 거리. 솔숲에만 있던 규칙을 9종 공통으로
- 고택·부티크: 캐치프레이즈 아래로 소문구 순서 변경
- 부티크 모바일: 전체화면 사진(664px)을 데스크톱과 같은 아치로 — 첫 화면 593px
- docs/TEMPLATE_DESIGN.md: 첫 화면 규칙

tsc·eslint 통과 · vitest 123 passed · 9종 모바일·1440px 첫 화면 캡처 확인

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/TEMPLATE_DESIGN.md                        |  4 ++++
 solution/site/src/layouts/bigtype/Hero.tsx     |  4 +++-
 solution/site/src/layouts/boutique/Hero.tsx    |  5 +++--
 .../site/src/layouts/boutique/boutique.css     | 13 +++++++++++++
 solution/site/src/layouts/cinema/Hero.tsx      |  3 ++-
 solution/site/src/layouts/coral/Hero.tsx       | 16 ++++------------
 solution/site/src/layouts/graphic/Hero.tsx     |  6 +++---
 solution/site/src/layouts/kit/heroSub.ts       | 10 ++++++++++
 solution/site/src/layouts/minimal/Hero.tsx     | 16 ++++------------
 solution/site/src/layouts/paper/Hero.tsx       |  5 +++--
 solution/site/src/layouts/pine/Hero.tsx        | 18 +++---------------
 solution/site/src/layouts/round/Hero.tsx       | 16 ++++------------
 12 files changed, 56 insertions(+), 60 deletions(-)
 create mode 100644 solution/site/src/layouts/kit/heroSub.ts

diff --git a/docs/TEMPLATE_DESIGN.md b/docs/TEMPLATE_DESIGN.md
index 570ec78..6125d3d 100644
--- a/docs/TEMPLATE_DESIGN.md
+++ b/docs/TEMPLATE_DESIGN.md
@@ -85,6 +85,10 @@
 
 ## 6. 값 보여주기
 
+- **첫 화면은 캐치프레이즈 → 그 아래 소문구.** 소문구는 사장님 문구, 없으면 가장 가까운 명소까지 거리(`kit/heroSub.ts`)
+- 첫 화면에 태그·칩(‘주차 가능’, 지역 말풍선)을 두지 않는다
+- 부티크 첫 화면은 모바일도 문(아치) 모양이다. 전체화면 사진으로 되돌리지 않는다
+
 - **‘가능 · 있음’은 ✓, ‘불가 · 없음’은 ✕ 목록으로 쓴다.** `주차 / 가능` 같은 표로 쓰지 않는다
   - 마크업: `<ul class="amen"><li class="on"><i class="ic">✓</i><span><b>주차</b> 가능</span></li>`
   - 색: ✓ `#15803d`, ✕ `#c2410c`. 가능한 것을 먼저 놓는다
diff --git a/solution/site/src/layouts/bigtype/Hero.tsx b/solution/site/src/layouts/bigtype/Hero.tsx
index fda639b..2fb7df6 100644
--- a/solution/site/src/layouts/bigtype/Hero.tsx
+++ b/solution/site/src/layouts/bigtype/Hero.tsx
@@ -2,6 +2,7 @@ import {PlaceCategory} from '@o2o/shared';
 import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
 import {bookingActionLabel, bookingLinks, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {heroSub} from '../kit/heroSub';
 import {BOOK_EVENT} from '../paper/Rooms';
 import {Weather} from './Weather';
 
@@ -12,6 +13,7 @@ export function Hero() {
     .filter((image) => image.alt?.trim())
     .sort((a, b) => Number(b.isPrimary) - Number(a.isPrimary));
   const fixed = narrative.tagline ?? narrative.heroSubline;
+  const sub = heroSub(payload);
   const lodging = place.category === PlaceCategory.LODGING;
   const stay = lodging ? stayBookingView(payload) : null;
   const link = bookingLinks(payload)[0];
@@ -29,7 +31,7 @@ export function Hero() {
             <span className="no" /> 오늘의 문장
           </p>
           {(lodging || fixed) && <p className="rot">{lodging ? <HeroCatchphrase /> : fixed}</p>}
-          {lodging && fixed && <p className="m sub">{fixed}</p>}
+          {lodging && sub && <p className="m sub">{sub}</p>}
           <div className="hx">
             {stay ? (
               <button type="button" className="line line--ink" onClick={() => window.dispatchEvent(new Event(BOOK_EVENT))}>
diff --git a/solution/site/src/layouts/boutique/Hero.tsx b/solution/site/src/layouts/boutique/Hero.tsx
index 24134e1..e91f54e 100644
--- a/solution/site/src/layouts/boutique/Hero.tsx
+++ b/solution/site/src/layouts/boutique/Hero.tsx
@@ -3,6 +3,7 @@ import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
 import {bookingActionLabel, bookingLinks, isSectionEnabled, stayBookingView} from '@site/lib/derive';
 import {PlaceCategory} from '@o2o/shared';
+import {heroSub} from '../kit/heroSub';
 import {BOOK_EVENT} from '../paper/Rooms';
 import {pad2} from './ui';
 import {Weather} from './Weather';
@@ -26,7 +27,7 @@ export function Hero() {
     }, 5000);
     return () => window.clearInterval(timer);
   }, [total]);
-  const fixed = narrative.tagline ?? narrative.heroSubline;
+  const sub = heroSub(payload);
   const english = place.englishName?.trim();
   const locality = [place.addressLocality, place.addressRegion].find(Boolean);
   const stayBooking = place.category === PlaceCategory.LODGING ? stayBookingView(payload) : null;
@@ -57,10 +58,10 @@ export function Hero() {
           {english && <p className="b-hero-en">{english}</p>}
           <h1 className={english ? 'b-hero-name' : 'b-hero-name b-hero-name--solo'}>{place.name}</h1>
           {locality && <p className="b-hero-loc">{locality}</p>}
-          {fixed && <p className="b-hero-ko">{fixed}</p>}
           <p className="b-hero-cp">
             <HeroCatchphrase />
           </p>
+          {sub && <p className="b-hero-ko">{sub}</p>}
           <div className="b-hero-act">
             {stayBooking ? (
               <button type="button" className="btn" onClick={() => window.dispatchEvent(new Event(BOOK_EVENT))}>
diff --git a/solution/site/src/layouts/boutique/boutique.css b/solution/site/src/layouts/boutique/boutique.css
index 2c98893..abcb271 100644
--- a/solution/site/src/layouts/boutique/boutique.css
+++ b/solution/site/src/layouts/boutique/boutique.css
@@ -351,3 +351,16 @@
 .w4-boutique #around .guide--card{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}
 .w4-boutique #around .kcard-t{font-size:15px}
 @media (min-width:1024px){.w4-boutique .rail>.kcard{flex-basis:calc((100% - 48px) / 3)}.w4-boutique .guide--card{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}}
+@media (max-width:1023px){
+.w4-boutique{--aw:min(250px,calc(100vw - 88px));--ah:calc(var(--aw) * 1.12)}
+.w4-boutique[data-page=home] .b-hd:not(.solid){color:var(--brown)}
+.w4-boutique .b-hero{height:auto;min-height:0;padding:calc(84px + var(--ah) + 24px) var(--g) 8px;background:transparent;overflow:visible}
+.w4-boutique .b-hero:before{content:"";position:absolute;top:100px;left:50%;width:var(--aw);height:var(--ah);margin-left:calc(var(--aw) / -2 + 14px);border-radius:999px 999px 0 0;background:var(--bg2)}
+.w4-boutique .b-hero:after{display:none}
+.w4-boutique .b-slide{inset:84px auto auto 50%;width:var(--aw);height:var(--ah);margin-left:calc(var(--aw) / -2);border-radius:999px 999px 0 0;overflow:hidden;z-index:1}
+.w4-boutique .b-hero-copy{position:relative;left:auto;right:auto;bottom:auto;padding:0;color:var(--brown)}
+.w4-boutique .b-hero-ko{color:var(--ink)}
+.w4-boutique .b-hero-count{top:calc(84px + var(--ah) - 34px);bottom:auto}
+.w4-boutique .b-hero--plain{padding-top:120px}
+.w4-boutique .b-hero--plain:before{display:none}
+}
diff --git a/solution/site/src/layouts/cinema/Hero.tsx b/solution/site/src/layouts/cinema/Hero.tsx
index 43972bb..e9cc2bd 100644
--- a/solution/site/src/layouts/cinema/Hero.tsx
+++ b/solution/site/src/layouts/cinema/Hero.tsx
@@ -3,6 +3,7 @@ import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
 import {galleryImages, isSectionEnabled} from '@site/lib/derive';
 import {useLiveWeather} from '@site/lib/use-live-weather';
+import {heroSub} from '../kit/heroSub';
 import {Car} from '../paper/Car';
 import {MoodIcon, Weather} from './Weather';
 
@@ -18,7 +19,7 @@ export function Hero() {
   const fixed = narrative.tagline ?? narrative.heroSubline;
   const lodging = place.category === PlaceCategory.LODGING;
   const where = place.addressLocality ?? place.addressRegion;
-  const sub = [where, fixed].filter(Boolean).join(' · ');
+  const sub = [where, heroSub(payload)].filter(Boolean).join(' · ');
   const showWeather = isSectionEnabled(payload, 'weather');
   const weather = useLiveWeather({
     initial: payload.local.weather,
diff --git a/solution/site/src/layouts/coral/Hero.tsx b/solution/site/src/layouts/coral/Hero.tsx
index 03e5e20..6a214a9 100644
--- a/solution/site/src/layouts/coral/Hero.tsx
+++ b/solution/site/src/layouts/coral/Hero.tsx
@@ -1,7 +1,8 @@
 import {PlaceCategory} from '@o2o/shared';
 import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
-import {bookingActionLabel, bookingLinks, heroFacts, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {bookingActionLabel, bookingLinks, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {heroSub} from '../kit/heroSub';
 import {Car} from '../paper/Car';
 import {BOOK_EVENT} from '../paper/Rooms';
 import {Weather} from './Weather';
@@ -17,10 +18,10 @@ export function Hero() {
     .slice(0, MAX_SLIDES);
   const fixed = narrative.tagline ?? narrative.heroSubline;
   const lodging = place.category === PlaceCategory.LODGING;
+  const sub = heroSub(payload);
   const region = place.addressLocality ?? place.addressRegion;
   const booking = bookingLinks(payload)[0];
   const stay = lodging ? stayBookingView(payload) : null;
-  const chips = heroFacts(payload).map((row) => `${row.label} ${row.value}`);
 
   return (
     <>
@@ -56,16 +57,7 @@ export function Hero() {
             ) : (
               fixed && <p className="hl in">{fixed}</p>
             )}
-            {lodging && fixed && <p className="tagline">{fixed}</p>}
-            {chips.length > 0 && (
-              <div className="chips">
-                {chips.map((chip) => (
-                  <span key={chip} className="chip">
-                    {chip}
-                  </span>
-                ))}
-              </div>
-            )}
+            {lodging && sub && <p className="tagline">{sub}</p>}
             <div className="hero-cta">
               {stay ? (
                 <button type="button" className="btn" onClick={() => window.dispatchEvent(new Event(BOOK_EVENT))}>
diff --git a/solution/site/src/layouts/graphic/Hero.tsx b/solution/site/src/layouts/graphic/Hero.tsx
index 2d5cdf8..a875110 100644
--- a/solution/site/src/layouts/graphic/Hero.tsx
+++ b/solution/site/src/layouts/graphic/Hero.tsx
@@ -4,6 +4,7 @@ import {useSite} from '@site/lib/site-context';
 import {useLiveWeather} from '@site/lib/use-live-weather';
 import {useWeatherNotes} from '@site/lib/use-weather-note';
 import {bookingActionLabel, bookingLinks, isSectionEnabled, stayBookingView, weatherBand, weatherMood} from '@site/lib/derive';
+import {heroSub} from '../kit/heroSub';
 import {BOOK_EVENT} from '../paper/Rooms';
 import lines from '@site/lib/lodging-catchphrases.json';
 import {Hills, Sky} from './Art';
@@ -103,7 +104,7 @@ export function Hero() {
   const {place, narrative} = payload;
   const phrase = useCatchphrase();
   const region = [place.addressRegion, place.addressLocality].filter(Boolean).join(' ');
-  const fixed = narrative.tagline ?? narrative.heroSubline;
+  const sub = heroSub(payload);
   const stay = place.category === PlaceCategory.LODGING ? stayBookingView(payload) : null;
   const link = bookingLinks(payload)[0];
 
@@ -111,7 +112,6 @@ export function Hero() {
     <section className="scene" id="top" data-pg="home" aria-labelledby="hero-heading">
       <Sky />
       <div className="hero-copy">
-        {region && <span className="tag">{region}</span>}
         <h1 id="hero-heading" className="disp">
           <Pop text={place.name} />
         </h1>
@@ -120,7 +120,7 @@ export function Hero() {
             <Pop text={phrase} />
           </p>
         )}
-        {fixed && <p className="sub">{fixed}</p>}
+        {sub && <p className="sub">{sub}</p>}
         {(stay || link || place.phone) && (
           <div className="hgo">
             {stay ? (
diff --git a/solution/site/src/layouts/kit/heroSub.ts b/solution/site/src/layouts/kit/heroSub.ts
new file mode 100644
index 0000000..0090752
--- /dev/null
+++ b/solution/site/src/layouts/kit/heroSub.ts
@@ -0,0 +1,10 @@
+import type {SitePayload} from '@o2o/shared';
+
+export function heroSub(payload: SitePayload): string | undefined {
+  const fixed = payload.narrative.tagline ?? payload.narrative.heroSubline;
+  if (fixed) return fixed;
+  const nearest = [...payload.local.attractions]
+    .filter((spot) => spot.distanceText)
+    .sort((a, b) => (a.distanceMeters ?? Infinity) - (b.distanceMeters ?? Infinity))[0];
+  return nearest ? `${nearest.name}까지 ${nearest.distanceText}` : undefined;
+}
diff --git a/solution/site/src/layouts/minimal/Hero.tsx b/solution/site/src/layouts/minimal/Hero.tsx
index 03e5e20..6a214a9 100644
--- a/solution/site/src/layouts/minimal/Hero.tsx
+++ b/solution/site/src/layouts/minimal/Hero.tsx
@@ -1,7 +1,8 @@
 import {PlaceCategory} from '@o2o/shared';
 import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
-import {bookingActionLabel, bookingLinks, heroFacts, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {bookingActionLabel, bookingLinks, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {heroSub} from '../kit/heroSub';
 import {Car} from '../paper/Car';
 import {BOOK_EVENT} from '../paper/Rooms';
 import {Weather} from './Weather';
@@ -17,10 +18,10 @@ export function Hero() {
     .slice(0, MAX_SLIDES);
   const fixed = narrative.tagline ?? narrative.heroSubline;
   const lodging = place.category === PlaceCategory.LODGING;
+  const sub = heroSub(payload);
   const region = place.addressLocality ?? place.addressRegion;
   const booking = bookingLinks(payload)[0];
   const stay = lodging ? stayBookingView(payload) : null;
-  const chips = heroFacts(payload).map((row) => `${row.label} ${row.value}`);
 
   return (
     <>
@@ -56,16 +57,7 @@ export function Hero() {
             ) : (
               fixed && <p className="hl in">{fixed}</p>
             )}
-            {lodging && fixed && <p className="tagline">{fixed}</p>}
-            {chips.length > 0 && (
-              <div className="chips">
-                {chips.map((chip) => (
-                  <span key={chip} className="chip">
-                    {chip}
-                  </span>
-                ))}
-              </div>
-            )}
+            {lodging && sub && <p className="tagline">{sub}</p>}
             <div className="hero-cta">
               {stay ? (
                 <button type="button" className="btn" onClick={() => window.dispatchEvent(new Event(BOOK_EVENT))}>
diff --git a/solution/site/src/layouts/paper/Hero.tsx b/solution/site/src/layouts/paper/Hero.tsx
index 19fb08c..605dd60 100644
--- a/solution/site/src/layouts/paper/Hero.tsx
+++ b/solution/site/src/layouts/paper/Hero.tsx
@@ -1,6 +1,7 @@
 import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
 import {isSectionEnabled} from '@site/lib/derive';
+import {heroSub} from '../kit/heroSub';
 import {Weather} from './Weather';
 import {Car} from './Car';
 
@@ -13,7 +14,7 @@ export function Hero() {
     .filter((image) => image.alt?.trim())
     .sort((a, b) => Number(b.isPrimary) - Number(a.isPrimary))
     .slice(0, MAX_SLIDES);
-  const fixed = narrative.tagline ?? narrative.heroSubline;
+  const sub = heroSub(payload);
 
   return (
     <>
@@ -41,10 +42,10 @@ export function Hero() {
             <p className="eyebrow">{place.addressLocality ?? place.addressRegion}</p>
           )}
           <h1 className="mj">{place.name}</h1>
-          {fixed && <p className="tagline">{fixed}</p>}
           <p className="cp">
             <HeroCatchphrase />
           </p>
+          {sub && <p className="tagline">{sub}</p>}
         </div>
       </section>
       {isSectionEnabled(payload, 'weather') && (
diff --git a/solution/site/src/layouts/pine/Hero.tsx b/solution/site/src/layouts/pine/Hero.tsx
index f66360a..6c749f5 100644
--- a/solution/site/src/layouts/pine/Hero.tsx
+++ b/solution/site/src/layouts/pine/Hero.tsx
@@ -1,7 +1,8 @@
 import {PlaceCategory} from '@o2o/shared';
 import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
-import {bookingActionLabel, bookingLinks, heroFacts, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {bookingActionLabel, bookingLinks, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {heroSub} from '../kit/heroSub';
 import {Car} from '../paper/Car';
 import {BOOK_EVENT} from '../paper/Rooms';
 import {Weather} from './Weather';
@@ -18,13 +19,9 @@ export function Hero() {
   const fixed = narrative.tagline ?? narrative.heroSubline;
   const lodging = place.category === PlaceCategory.LODGING;
   const region = place.addressLocality ?? place.addressRegion;
-  const nearest = [...payload.local.attractions]
-    .filter((spot) => spot.distanceText)
-    .sort((a, b) => (a.distanceMeters ?? Infinity) - (b.distanceMeters ?? Infinity))[0];
-  const sub = fixed ?? (nearest ? `${nearest.name}까지 ${nearest.distanceText}` : undefined);
+  const sub = heroSub(payload);
   const booking = bookingLinks(payload)[0];
   const stay = lodging ? stayBookingView(payload) : null;
-  const chips = heroFacts(payload).map((row) => `${row.label} ${row.value}`);
 
   return (
     <>
@@ -61,15 +58,6 @@ export function Hero() {
               fixed && <p className="hl in">{fixed}</p>
             )}
             {lodging && sub && <p className="tagline">{sub}</p>}
-            {chips.length > 0 && (
-              <div className="chips">
-                {chips.map((chip) => (
-                  <span key={chip} className="chip">
-                    {chip}
-                  </span>
-                ))}
-              </div>
-            )}
             <div className="hero-cta">
               {stay ? (
                 <button type="button" className="btn" onClick={() => window.dispatchEvent(new Event(BOOK_EVENT))}>
diff --git a/solution/site/src/layouts/round/Hero.tsx b/solution/site/src/layouts/round/Hero.tsx
index 03e5e20..6a214a9 100644
--- a/solution/site/src/layouts/round/Hero.tsx
+++ b/solution/site/src/layouts/round/Hero.tsx
@@ -1,7 +1,8 @@
 import {PlaceCategory} from '@o2o/shared';
 import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
-import {bookingActionLabel, bookingLinks, heroFacts, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {bookingActionLabel, bookingLinks, isSectionEnabled, stayBookingView} from '@site/lib/derive';
+import {heroSub} from '../kit/heroSub';
 import {Car} from '../paper/Car';
 import {BOOK_EVENT} from '../paper/Rooms';
 import {Weather} from './Weather';
@@ -17,10 +18,10 @@ export function Hero() {
     .slice(0, MAX_SLIDES);
   const fixed = narrative.tagline ?? narrative.heroSubline;
   const lodging = place.category === PlaceCategory.LODGING;
+  const sub = heroSub(payload);
   const region = place.addressLocality ?? place.addressRegion;
   const booking = bookingLinks(payload)[0];
   const stay = lodging ? stayBookingView(payload) : null;
-  const chips = heroFacts(payload).map((row) => `${row.label} ${row.value}`);
 
   return (
     <>
@@ -56,16 +57,7 @@ export function Hero() {
             ) : (
               fixed && <p className="hl in">{fixed}</p>
             )}
-            {lodging && fixed && <p className="tagline">{fixed}</p>}
-            {chips.length > 0 && (
-              <div className="chips">
-                {chips.map((chip) => (
-                  <span key={chip} className="chip">
-                    {chip}
-                  </span>
-                ))}
-              </div>
-            )}
+            {lodging && sub && <p className="tagline">{sub}</p>}
             <div className="hero-cta">
               {stay ? (
                 <button type="button" className="btn" onClick={() => window.dispatchEvent(new Event(BOOK_EVENT))}>