From 7f6f16f30778dabc6c10d2afaa1b8fce4bd3afb6 Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Mon, 28 Sep 2026 17:05:39 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20solution/site:=20=EA=B3=A0=ED=83=9D=20?=
 =?UTF-8?q?=E2=80=94=20=EB=82=A0=EC=94=A8=EB=A5=BC=20=EC=B2=AB=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EB=B0=94=EB=A1=9C=20=EC=95=84=EB=9E=98=EB=A1=9C=20?=
 =?UTF-8?q?=C2=B7=20=EC=98=88=EC=95=BD=20=EC=9A=94=EC=B2=AD=20=EC=B0=BD?=
 =?UTF-8?q?=EC=9D=80=20=EB=8B=AC=EB=A0=A5=EB=B6=80=ED=84=B0=20=ED=8E=BC?=
 =?UTF-8?q?=EC=B9=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

섹션 순서가 업종 기본(날씨 맨 뒤)을 따라가서 stay2 와 달리 날씨가 맨 아래로 갔고,
예약 요청 창은 '날짜 · 시간 선택' 을 접어 두어 손님이 한 번 더 눌러야 달력이 보였다.

- paper/Hero: 날씨 섹션이 켜져 있으면 첫 화면 바로 뒤에 그린다(레이아웃의 weather 자리는 비움)
- paper/BookingForm: 날짜·시간 칸을 처음부터 펼친다
- app.test: 날씨를 섹션 목록 맨 뒤에 둬도 첫 화면 바로 다음에 나오는지

site tsc·eslint·vitest 107 passed, 로컬 발행(stayyyy v3)에서 순서와 예약 창 확인

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 solution/site/src/app.test.tsx                | 13 ++++
 solution/site/src/layouts/index.ts            |  3 +-
 .../site/src/layouts/paper/BookingForm.tsx    |  2 +-
 solution/site/src/layouts/paper/Hero.tsx      | 69 +++++++++++--------
 4 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/solution/site/src/app.test.tsx b/solution/site/src/app.test.tsx
index 8a789fe..cc5611e 100644
--- a/solution/site/src/app.test.tsx
+++ b/solution/site/src/app.test.tsx
@@ -38,3 +38,16 @@ it('첫 화면 문구가 따로 있어도 한 줄 요약이 화면에 나온다'
     expect(renderToStaticMarkup(<App payload={payload} />)).toContain('검색에 쓰는 한 줄 요약');
   }
 });
+
+it('고택은 섹션 순서와 상관없이 날씨를 첫 화면 바로 아래에 둔다', () => {
+  const payload = withTemplate('paper');
+  const weather = payload.theme.sections.find((section) => section.id === 'weather');
+  if (weather) weather.enabled = true;
+  payload.theme.sections = [...payload.theme.sections.filter((s) => s.id !== 'weather'), ...(weather ? [weather] : [])];
+  const html = renderToStaticMarkup(<App payload={payload} />);
+  const hero = html.indexOf('class="hero"');
+  const brief = html.indexOf('class="wbrief"');
+  expect(hero).toBeGreaterThan(-1);
+  expect(brief).toBeGreaterThan(hero);
+  expect(html.slice(hero, brief)).not.toContain('class="sec');
+});
diff --git a/solution/site/src/layouts/index.ts b/solution/site/src/layouts/index.ts
index cbef1e4..2ddad67 100644
--- a/solution/site/src/layouts/index.ts
+++ b/solution/site/src/layouts/index.ts
@@ -17,7 +17,6 @@ import {SectionHead as PaperSectionHead} from './paper/SectionHead';
 import {Story as PaperStory} from './paper/Story';
 import {StoryTail as PaperStoryTail} from './paper/StoryTail';
 import {Video as PaperVideo} from './paper/Video';
-import {Weather as PaperWeather} from './paper/Weather';
 
 const Nothing = () => null;
 
@@ -29,7 +28,7 @@ export const LAYOUTS: Record<LayoutId, Layout> = {
     SectionHead: PaperSectionHead,
     sections: {
       hero: PaperHero,
-      weather: PaperWeather,
+      weather: Nothing,
       intro: PaperIntro,
       blog: Nothing,
       rooms: PaperRooms,
diff --git a/solution/site/src/layouts/paper/BookingForm.tsx b/solution/site/src/layouts/paper/BookingForm.tsx
index 80e60f2..15f5dc2 100644
--- a/solution/site/src/layouts/paper/BookingForm.tsx
+++ b/solution/site/src/layouts/paper/BookingForm.tsx
@@ -30,7 +30,7 @@ export function BookingForm() {
   const slots = useMemo(() => buildArrivalSlots(checkIn), [checkIn]);
   const [today, setToday] = useState<Date | null>(null);
   const [offset, setOffset] = useState(0);
-  const [openStep, setOpenStep] = useState(false);
+  const [openStep, setOpenStep] = useState(true);
   const [dateIso, setDateIso] = useState<string | null>(null);
   const [slot, setSlot] = useState<string | null>(null);
   const [unitId, setUnitId] = useState<string | null>(units[0]?.unitId ?? null);
diff --git a/solution/site/src/layouts/paper/Hero.tsx b/solution/site/src/layouts/paper/Hero.tsx
index 7bba111..19fb08c 100644
--- a/solution/site/src/layouts/paper/Hero.tsx
+++ b/solution/site/src/layouts/paper/Hero.tsx
@@ -1,5 +1,7 @@
 import {HeroCatchphrase} from '@site/sections/HeroCatchphrase';
 import {useSite} from '@site/lib/site-context';
+import {isSectionEnabled} from '@site/lib/derive';
+import {Weather} from './Weather';
 import {Car} from './Car';
 
 const MAX_SLIDES = 5;
@@ -14,35 +16,42 @@ export function Hero() {
   const fixed = narrative.tagline ?? narrative.heroSubline;
 
   return (
-    <section className="hero" id="top" data-pg="home">
-      <Car
-        label={`${place.name} 사진`}
-        autoplay={5000}
-        dots
-        style={{height: '100%'}}
-        slides={slides.map((image, i) => (
-          <img
-            key={image.mediaId}
-            src={image.url}
-            alt={image.alt}
-            fetchPriority={i === 0 ? 'high' : 'low'}
-            loading={i === 0 ? undefined : 'lazy'}
-            decoding="async"
-            style={{height: '100%'}}
-          />
-        ))}
-      />
-      <div className="veil" />
-      <div className="herocopy">
-        {(place.addressLocality ?? place.addressRegion) && (
-          <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>
-      </div>
-    </section>
+    <>
+      <section className="hero" id="top" data-pg="home">
+        <Car
+          label={`${place.name} 사진`}
+          autoplay={5000}
+          dots
+          style={{height: '100%'}}
+          slides={slides.map((image, i) => (
+            <img
+              key={image.mediaId}
+              src={image.url}
+              alt={image.alt}
+              fetchPriority={i === 0 ? 'high' : 'low'}
+              loading={i === 0 ? undefined : 'lazy'}
+              decoding="async"
+              style={{height: '100%'}}
+            />
+          ))}
+        />
+        <div className="veil" />
+        <div className="herocopy">
+          {(place.addressLocality ?? place.addressRegion) && (
+            <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>
+        </div>
+      </section>
+      {isSectionEnabled(payload, 'weather') && (
+        <div data-editor-id="weather" style={{display: 'contents'}}>
+          <Weather />
+        </div>
+      )}
+    </>
   );
 }