v0.1.47 - 데모 스크롤과 2페이지 보기 보정

src/App.vue

@@ -36,6 +36,7 @@ const viewMode = ref('focus')
 const printLayout = ref('single')
 const demoMode = ref(false)
 const demoDayOffset = ref(0)
+const demoViewMode = ref('single')
 const authDialogOpen = ref(false)
 const authMode = ref('login')
 const authBusy = ref(false)
@@ -490,6 +491,9 @@ const secondaryDateDisplay = computed(() => getDateDisplay(secondaryDate.value))
 const demoDate = computed(() => createDemoDate(demoDayOffset.value))
 const demoDateDisplay = computed(() => getDateDisplay(demoDate.value))
 const demoPlanner = computed(() => createDemoRecord(demoDayOffset.value))
+const demoNextDate = computed(() => createDemoDate(Math.min(demoDayOffset.value + 1, 1)))
+const demoNextDateDisplay = computed(() => getDateDisplay(demoNextDate.value))
+const demoNextPlanner = computed(() => createDemoRecord(Math.min(demoDayOffset.value + 1, 1)))
 const demoDday = computed(() => {
   const offset = demoDayOffset.value
 
@@ -503,6 +507,15 @@ const demoDday = computed(() => {
 
   return 'D-7 나만의 루틴 만들기'
 })
+const demoNextDday = computed(() => {
+  const offset = Math.min(demoDayOffset.value + 1, 1)
+
+  if (offset > 0) {
+    return 'D-6 나만의 루틴 만들기'
+  }
+
+  return 'D-7 나만의 루틴 만들기'
+})
 
 const monthLabel = computed(() =>
   `${calendarViewDate.value.getMonth() + 1}`.padStart(2, '0'),
@@ -2146,7 +2159,7 @@ onBeforeUnmount(() => {
             <button
               type="button"
               class="h-12 w-full rounded-full border border-stone-300 bg-white px-6 text-xs font-bold tracking-[0.18em] text-stone-700 transition hover:border-stone-500 hover:text-stone-900"
-              @click="demoMode = true; demoDayOffset = 0"
+              @click="demoMode = true; demoDayOffset = 0; demoViewMode = 'single'"
             >
               DEMO VIEW
             </button>
@@ -2170,10 +2183,10 @@ onBeforeUnmount(() => {
 
       <section
         v-else-if="!isAuthenticated && demoMode"
-        class="print-hidden mx-auto grid w-full max-w-6xl gap-5 rounded-[30px] border border-white/70 bg-white/55 p-4 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:p-6 xl:grid-cols-[minmax(0,1fr)_280px] xl:items-start"
+        class="print-hidden mx-auto grid h-[calc(100vh-3rem)] w-full max-w-6xl gap-5 rounded-[30px] border border-white/70 bg-white/55 p-4 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:p-6 xl:grid-cols-[minmax(0,1fr)_280px] xl:items-start"
       >
-        <div class="overflow-x-auto rounded-[26px] border border-white/70 bg-white/45 p-3 sm:p-4">
+        <div class="scrollbar-hide min-h-0 overflow-auto rounded-[26px] border border-white/70 bg-white/45 p-3 sm:p-4">
-          <div class="pointer-events-none mx-auto w-[762px] max-w-none">
+          <div v-if="demoViewMode === 'single'" class="pointer-events-none mx-auto w-[762px] max-w-none">
             <PlannerPage
               :date-main="demoDateDisplay.main"
               :date-weekday="demoDateDisplay.weekday"
@@ -2188,9 +2201,39 @@ onBeforeUnmount(() => {
               :timetable="demoPlanner.timetable"
             />
           </div>
+          <div v-else class="pointer-events-none mx-auto flex w-[1548px] max-w-none gap-6">
+            <PlannerPage
+              class="max-w-none"
+              :date-main="demoDateDisplay.main"
+              :date-weekday="demoDateDisplay.weekday"
+              :date-weekday-tone="demoDateDisplay.weekdayTone"
+              :dday="demoDday"
+              :show-dday="true"
+              :comment="demoPlanner.comment"
+              :total-time="formatTotalTimeKorean(demoPlanner)"
+              :tasks="demoPlanner.tasks"
+              :memo="demoPlanner.memo"
+              :hours="hours"
+              :timetable="demoPlanner.timetable"
+            />
+            <PlannerPage
+              class="max-w-none"
+              :date-main="demoNextDateDisplay.main"
+              :date-weekday="demoNextDateDisplay.weekday"
+              :date-weekday-tone="demoNextDateDisplay.weekdayTone"
+              :dday="demoNextDday"
+              :show-dday="true"
+              :comment="demoNextPlanner.comment"
+              :total-time="formatTotalTimeKorean(demoNextPlanner)"
+              :tasks="demoNextPlanner.tasks"
+              :memo="demoNextPlanner.memo"
+              :hours="hours"
+              :timetable="demoNextPlanner.timetable"
+            />
+          </div>
         </div>
 
-        <aside class="rounded-[26px] border border-white/70 bg-[#f7f2ea]/95 p-4">
+        <aside class="scrollbar-hide min-h-0 overflow-y-auto rounded-[26px] border border-white/70 bg-[#f7f2ea]/95 p-4">
           <p class="text-[10px] font-bold uppercase tracking-[0.24em] text-stone-500">DEMO PAGE</p>
           <h2 class="mt-3 text-2xl font-semibold tracking-[-0.05em] text-stone-900">
             3일치 샘플로<br>흐름을 먼저 보기
@@ -2216,6 +2259,25 @@ onBeforeUnmount(() => {
             </button>
           </div>
 
+          <div class="mt-5 grid grid-cols-2 gap-2 border-t border-stone-200 pt-5">
+            <button
+              type="button"
+              class="rounded-2xl px-4 py-3 text-xs font-bold tracking-[0.14em] transition"
+              :class="demoViewMode === 'single' ? 'bg-stone-900 text-white' : 'bg-white text-stone-500'"
+              @click="demoViewMode = 'single'"
+            >
+              1 PAGE
+            </button>
+            <button
+              type="button"
+              class="rounded-2xl px-4 py-3 text-xs font-bold tracking-[0.14em] transition"
+              :class="demoViewMode === 'spread' ? 'bg-stone-900 text-white' : 'bg-white text-stone-500'"
+              @click="demoViewMode = 'spread'"
+            >
+              2 PAGE
+            </button>
+          </div>
+
           <div class="mt-5 grid gap-2 border-t border-stone-200 pt-5">
             <button
               type="button"