v0.1.4

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.0`
+- 현재 기준 버전: `v0.1.4`
 
 ## 기준 디자인
 
@@ -45,6 +45,14 @@
 - `NEXT DAY` 영역의 요일도 본문 날짜와 같은 규칙으로 주말 색상이 적용된다.
 - 플래너 화면에서는 `PRINT DAY` 버튼으로 현재 선택 날짜 문서를 바로 출력할 수 있다.
 - 인쇄 시에는 현재 선택된 하루 플래너 본문만 남기고, 헤더/사이드패널/통계 화면은 숨긴다.
+- 출력 버튼은 `PRINT 1-UP` / `PRINT 2-UP`으로 분리되어 있다.
+- `PRINT 2-UP`은 현재 날짜와 다음 날짜를 A4 가로 기준으로 나란히 출력하는 용도다.
+- 인쇄는 일반 화면을 그대로 찍는 방식이 아니라, 별도의 `print-only` 전용 레이아웃을 사용한다.
+- A5 원본 비율을 유지한 채 A4 가로 안에 들어가도록 `1-UP` / `2-UP` 각각 별도 배율로 압축한다.
+- `PRINT 1-UP`은 A4 세로, `PRINT 2-UP`은 A4 가로 기준으로 분리해서 처리한다.
+- 브라우저 기본 인쇄 머리말/꼬리말이 켜져 있어도 2장으로 넘어가지 않도록 실제 인쇄 영역은 종이보다 조금 작게 잡는다.
+- 인쇄 시 `main`, `print-only`, `print-paper` 래퍼의 패딩/높이/페이지 분할 규칙까지 함께 제어해야 빈 2페이지를 줄일 수 있다.
+- `1-UP`은 여백이 과하지 않도록 다시 확대했고, `2-UP`은 한 페이지 고정 안정성을 위해 가로 폭과 세로 높이를 조금 더 보수적으로 조정했다.
 
 ## 확정된 결정사항
 
@@ -67,6 +75,7 @@
 - 장기적으로는 회원 가입 후 사용자별로 각자 문서를 작성/관리할 수 있어야 한다.
 - 공유 문서 서비스가 아니라, 사용자 개인 보관과 회고 중심의 서비스 구조를 목표로 한다.
 - 사용자는 스스로 통계를 확인할 수 있어야 하고, 특정 날짜에 작성한 문서는 출력 가능해야 한다.
+- 공유를 위해 나중에 이미지 저장 기능도 필요하지만, 실제 출력 품질과 텍스트 선명도는 HTML/CSS 인쇄 레이아웃을 우선 유지하는 편이 좋다.
 
 ## 다음 권장 작업
 
@@ -74,6 +83,7 @@
 - 목표나 통계 기능보다 먼저, 플래너 본문의 입력과 상호작용을 우선 구현한다.
 - 통계 화면 구현은 현재 `localStorage` 기반으로 먼저 진행해도 된다.
 - DB는 기능 탐색 속도를 해치지 않는 선에서, 저장 레이어를 분리할 수 있는 적절한 시점에 붙이는 것이 좋다.
+- 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
 
 ## 갱신 규칙
 

TODO.md

@@ -71,6 +71,9 @@
 - [ ] 사용자별 문서 분리 저장 구조를 설계한다.
 - [ ] 공유가 아닌 개인 보관용 서비스 흐름으로 요구사항을 정리한다.
 - [x] 향후 출력 기능을 위한 인쇄 레이아웃 요구사항을 정리한다.
+- [x] A4 가로 기준 2장 출력 모드를 지원한다.
+- [x] `1-UP` 세로 인쇄 / `2-UP` 가로 인쇄 기준을 분리한다.
+- [ ] 공유를 위한 이미지 저장 기능을 추가한다.
 
 ## 메모
 
@@ -78,4 +81,5 @@
 - `TIME TABLE` 드래그는 단순 사각형 선택이 아니라 시간 셀 단위의 연속 선택으로 해석한다.
 - 현재는 `localStorage`로 개발을 진행하지만, 적절한 시점에 DB를 붙여 사용자별 저장 구조로 확장해야 한다.
 - 최종적으로는 회원 가입 후 각자 자신의 문서를 작성/관리하고, 개인 통계를 확인하며, 특정 날짜 문서를 출력할 수 있어야 한다.
+- 실제 인쇄는 HTML/CSS 기반 프린트 레이아웃으로 유지하고, 공유용으로는 별도의 이미지 저장 기능을 추가하는 방향이 적합하다.
 - 구현할 때마다 완료된 항목은 체크하고, 큰 결정사항은 `HANDOFF.md`에도 함께 반영한다.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.1.0",
+      "version": "0.1.4",
       "dependencies": {
         "vue": "^3.5.13"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watch, nextTick } from 'vue'
 import MiniCalendar from './components/MiniCalendar.vue'
 import PlannerPage from './components/PlannerPage.vue'
 import StatsDashboard from './components/StatsDashboard.vue'
@@ -7,6 +7,7 @@ import StatsDashboard from './components/StatsDashboard.vue'
 const STORAGE_KEY = 'ten-minute-planner-state'
 const screenMode = ref('planner')
 const viewMode = ref('focus')
+const printLayout = ref('single')
 const selectedDate = ref(new Date())
 const calendarViewDate = ref(new Date(selectedDate.value))
 const statsRangeStart = ref(toKey(new Date(new Date().setDate(new Date().getDate() - 6))))
@@ -20,6 +21,7 @@ const hours = [
 ]
 
 const timetableCellCount = hours.length * 6
+let printPageStyleElement = null
 
 function createEmptyTimetable() {
   return Array.from({ length: timetableCellCount }, () => false)
@@ -600,7 +602,30 @@ function clearTaskLabels(record) {
   })
 }
 
-function printSelectedPlanner() {
+function applyPrintPageStyle(layout) {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const pageRule =
+    layout === 'double'
+      ? '@page { size: A4 landscape; margin: 0; }'
+      : '@page { size: A4 portrait; margin: 0; }'
+
+  if (!printPageStyleElement) {
+    printPageStyleElement = document.createElement('style')
+    printPageStyleElement.setAttribute('data-print-page-style', 'true')
+    document.head.appendChild(printPageStyleElement)
+  }
+
+  printPageStyleElement.textContent = pageRule
+  document.body.dataset.printLayout = layout
+}
+
+async function printSelectedPlanner(layout = 'single') {
+  printLayout.value = layout
+  applyPrintPageStyle(layout)
+  await nextTick()
   window.print()
 }
 </script>
@@ -672,21 +697,32 @@ function printSelectedPlanner() {
                 NEXT DAY
               </button>
             </div>
-            <button
+            <div
               v-if="screenMode === 'planner'"
-              type="button"
-              class="rounded-full border border-stone-200 bg-white px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
-              @click="printSelectedPlanner"
+              class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
             >
-              PRINT DAY
-            </button>
+              <button
+                type="button"
+                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+                @click="printSelectedPlanner('single')"
+              >
+                PRINT 1-UP
+              </button>
+              <button
+                type="button"
+                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+                @click="printSelectedPlanner('double')"
+              >
+                PRINT 2-UP
+              </button>
+            </div>
           </div>
         </div>
       </header>
 
       <section
         v-if="screenMode === 'planner' && viewMode === 'focus'"
-        class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
+        class="print-hidden grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
       >
         <div class="print-target">
           <PlannerPage
@@ -805,7 +841,7 @@ function printSelectedPlanner() {
 
       <section
         v-else-if="screenMode === 'planner'"
-        class="overflow-x-auto rounded-[32px] border border-white/60 bg-white/40 p-4 sm:p-6"
+        class="print-hidden overflow-x-auto rounded-[32px] border border-white/60 bg-white/40 p-4 sm:p-6"
       >
         <div class="flex min-w-[1260px] gap-6">
           <div class="print-target">
@@ -866,6 +902,77 @@ function printSelectedPlanner() {
         @update:range-start="statsRangeStart = $event"
         @update:range-end="statsRangeEnd = $event"
       />
+
+      <section class="print-only">
+        <div v-if="printLayout === 'single'" class="print-paper print-paper--single">
+          <div class="print-sheet-frame">
+            <PlannerPage
+              :date-main="selectedDateDisplay.main"
+              :date-weekday="selectedDateDisplay.weekday"
+              :date-weekday-tone="selectedDateDisplay.weekdayTone"
+              :dday="planner.dday"
+              :comment="planner.comment"
+              :total-time="formatTotalTime(planner)"
+              :tasks="planner.tasks"
+              :memo="planner.memo"
+              :hours="hours"
+              :timetable="planner.timetable"
+              @update:comment="updateComment(planner, $event)"
+              @update:task-label="updateTaskLabel(planner, $event)"
+              @update:task-title="updateTaskTitle(planner, $event)"
+              @toggle:task="toggleTask(planner, $event)"
+              @update:memo-label="updateMemoLabel(planner, $event)"
+              @update:memo="updateMemo(planner, $event)"
+              @update:timetable="updateTimetable(planner, $event)"
+            />
+          </div>
+        </div>
+
+        <div v-else class="print-paper print-paper--double">
+          <div class="print-sheet-frame">
+            <PlannerPage
+              :date-main="selectedDateDisplay.main"
+              :date-weekday="selectedDateDisplay.weekday"
+              :date-weekday-tone="selectedDateDisplay.weekdayTone"
+              :dday="planner.dday"
+              :comment="planner.comment"
+              :total-time="formatTotalTime(planner)"
+              :tasks="planner.tasks"
+              :memo="planner.memo"
+              :hours="hours"
+              :timetable="planner.timetable"
+              @update:comment="updateComment(planner, $event)"
+              @update:task-label="updateTaskLabel(planner, $event)"
+              @update:task-title="updateTaskTitle(planner, $event)"
+              @toggle:task="toggleTask(planner, $event)"
+              @update:memo-label="updateMemoLabel(planner, $event)"
+              @update:memo="updateMemo(planner, $event)"
+              @update:timetable="updateTimetable(planner, $event)"
+            />
+          </div>
+          <div class="print-sheet-frame">
+            <PlannerPage
+              :date-main="secondaryDateDisplay.main"
+              :date-weekday="secondaryDateDisplay.weekday"
+              :date-weekday-tone="secondaryDateDisplay.weekdayTone"
+              :dday="secondaryPlanner.dday"
+              :comment="secondaryPlanner.comment"
+              :total-time="formatTotalTime(secondaryPlanner)"
+              :tasks="secondaryPlanner.tasks"
+              :memo="secondaryPlanner.memo"
+              :hours="hours"
+              :timetable="secondaryPlanner.timetable"
+              @update:comment="updateComment(secondaryPlanner, $event)"
+              @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
+              @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
+              @toggle:task="toggleTask(secondaryPlanner, $event)"
+              @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
+              @update:memo="updateMemo(secondaryPlanner, $event)"
+              @update:timetable="updateTimetable(secondaryPlanner, $event)"
+            />
+          </div>
+        </div>
+      </section>
     </div>
   </main>
 </template>

src/components/PlannerPage.vue

@@ -115,7 +115,7 @@ onBeforeUnmount(() => {
 
 <template>
   <article
-    class="flex w-full max-w-[762px] flex-col gap-3 bg-paper px-6 py-6 text-[10px] font-bold tracking-[0.16em] text-ink shadow-paper sm:px-12 sm:py-12"
+    class="planner-sheet flex w-full max-w-[762px] flex-col gap-3 bg-paper px-6 py-6 text-[10px] font-bold tracking-[0.16em] text-ink shadow-paper sm:px-12 sm:py-12"
   >
     <div class="flex flex-col gap-4 py-[18px]">
       <div class="flex gap-4">

src/style.css

@@ -25,35 +25,125 @@
   html,
   body {
     background: #ffffff !important;
+    width: auto !important;
+    height: auto !important;
+    overflow: hidden !important;
   }
 
   body {
     min-height: auto;
+    margin: 0;
+  }
+
+  main {
+    min-height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
   }
 
   .print-hidden {
     display: none !important;
   }
 
+  .print-only {
+    display: flex !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    align-items: center;
+    justify-content: center;
+    break-inside: avoid-page;
+    page-break-inside: avoid;
+    break-after: avoid-page;
+    page-break-after: avoid;
+  }
+
   .print-root {
+    display: block !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
     max-width: none !important;
     padding: 0 !important;
     gap: 0 !important;
   }
 
-  .print-target {
-    display: block !important;
-    width: 100% !important;
-    max-width: none !important;
-    box-shadow: none !important;
-    border: 0 !important;
+  .print-paper {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
     background: #ffffff !important;
-    padding: 0 !important;
+    padding: 0;
+    overflow: hidden;
   }
 
-  .print-target article {
-    max-width: none !important;
+  body[data-print-layout='single'] .print-paper {
+    width: 206mm;
+    height: 293mm;
+  }
+
+  .print-paper--double {
+    display: grid !important;
+    grid-template-columns: repeat(2, 141mm);
+    justify-content: center;
+    align-content: center;
+    column-gap: 3mm;
+  }
+
+  body[data-print-layout='double'] .print-paper {
+    width: 287mm;
+    height: 198mm;
+  }
+
+  body[data-print-layout='single'] .print-paper--single .print-sheet-frame {
+    width: 152mm;
+    height: 216mm;
+  }
+
+  .print-sheet-frame {
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background: #ffffff !important;
+  }
+
+  body[data-print-layout='double'] .print-paper--double .print-sheet-frame {
+    width: 141mm;
+    height: 198mm;
+  }
+
+  .planner-sheet {
     box-shadow: none !important;
-    padding: 0 !important;
+  }
+
+  body[data-print-layout='single'] .print-paper--single .print-sheet-frame .planner-sheet {
+    width: 762px !important;
+    max-width: none !important;
+    transform-origin: top left;
+    transform: scale(0.732);
+    box-shadow: none !important;
+    background: #ffffff !important;
+  }
+
+  body[data-print-layout='double'] .print-paper--double .print-sheet-frame .planner-sheet {
+    width: 762px !important;
+    max-width: none !important;
+    transform-origin: top left;
+    transform: scale(0.694);
+    box-shadow: none !important;
+    background: #ffffff !important;
+  }
+
+  .print-sheet-frame .planner-sheet * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+
+@media screen {
+  .print-only {
+    display: none !important;
   }
 }