v0.1.49 - 데모 페이지 스크롤 구조 단순화

src/App.vue

@@ -36,7 +36,6 @@ 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)
@@ -491,9 +490,6 @@ 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
 
@@ -507,15 +503,6 @@ 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'),
@@ -2132,8 +2119,7 @@ onBeforeUnmount(() => {
           <div>
             <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">MEMBERS ONLY</p>
             <h2 class="mt-3 text-3xl font-semibold tracking-[-0.05em] text-stone-900 sm:text-4xl">
-              오늘을 흘려보내지 않는<br>
-              10분의 기록
+              10 MINITES PLANNER
             </h2>
             <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-stone-600 sm:text-base">
               할 일, 집중 시간, 짧은 코멘트를 한 장의 다이어리로 남기고 내일의 첫 작업까지 이어가세요.
@@ -2159,7 +2145,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; demoViewMode = 'single'"
+              @click="demoMode = true; demoDayOffset = 0"
             >
               DEMO VIEW
             </button>
@@ -2183,10 +2169,10 @@ onBeforeUnmount(() => {
 
       <section
         v-else-if="!isAuthenticated && demoMode"
-        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"
+        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:h-[calc(100vh-3rem)] xl:min-h-0 xl:overflow-hidden xl:grid-cols-[minmax(0,1fr)_280px]"
       >
-        <div class="scrollbar-hide min-h-0 overflow-auto rounded-[26px] border border-white/70 bg-white/45 p-3 sm:p-4">
-          <div v-if="demoViewMode === 'single'" class="mx-auto w-[762px] max-w-none">
+        <div class="min-h-0 overflow-y-auto overflow-x-auto overscroll-contain rounded-[26px] border border-white/70 bg-white/45 p-3 sm:p-4 xl:h-full">
+          <div class="mx-auto w-[762px] max-w-none">
             <PlannerPage
               readonly
               :date-main="demoDateDisplay.main"
@@ -2202,41 +2188,9 @@ onBeforeUnmount(() => {
               :timetable="demoPlanner.timetable"
             />
           </div>
-          <div v-else class="mx-auto flex w-[1548px] max-w-none gap-6">
-            <PlannerPage
-              readonly
-              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
-              readonly
-              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="scrollbar-hide min-h-0 overflow-y-auto rounded-[26px] border border-white/70 bg-[#f7f2ea]/95 p-4">
+        <aside class="min-h-0 overflow-y-auto rounded-[26px] border border-white/70 bg-[#f7f2ea]/95 p-4 xl:h-full">
           <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>흐름을 먼저 보기
@@ -2262,25 +2216,6 @@ 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"