v0.1.1

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.0`
+- 현재 기준 버전: `v0.1.1`
 
 ## 기준 디자인
 
@@ -45,6 +45,8 @@
 - `NEXT DAY` 영역의 요일도 본문 날짜와 같은 규칙으로 주말 색상이 적용된다.
 - 플래너 화면에서는 `PRINT DAY` 버튼으로 현재 선택 날짜 문서를 바로 출력할 수 있다.
 - 인쇄 시에는 현재 선택된 하루 플래너 본문만 남기고, 헤더/사이드패널/통계 화면은 숨긴다.
+- 출력 버튼은 `PRINT 1-UP` / `PRINT 2-UP`으로 분리되어 있다.
+- `PRINT 2-UP`은 현재 날짜와 다음 날짜를 A4 가로 기준으로 나란히 출력하는 용도다.
 
 ## 확정된 결정사항
 

TODO.md

@@ -71,6 +71,7 @@
 - [ ] 사용자별 문서 분리 저장 구조를 설계한다.
 - [ ] 공유가 아닌 개인 보관용 서비스 흐름으로 요구사항을 정리한다.
 - [x] 향후 출력 기능을 위한 인쇄 레이아웃 요구사항을 정리한다.
+- [x] A4 가로 기준 2장 출력 모드를 지원한다.
 
 ## 메모
 

package-lock.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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))))
@@ -600,7 +601,9 @@ function clearTaskLabels(record) {
   })
 }
 
-function printSelectedPlanner() {
+async function printSelectedPlanner(layout = 'single') {
+  printLayout.value = layout
+  await nextTick()
   window.print()
 }
 </script>
@@ -672,14 +675,25 @@ function printSelectedPlanner() {
                 NEXT DAY
               </button>
             </div>
-            <button
+            <div
               v-if="screenMode === 'planner'"
-              type="button"
+              class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
-              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"
             >
-              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>
@@ -866,6 +880,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">
+          <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

@@ -22,6 +22,11 @@
 }
 
 @media print {
+  @page {
+    size: A4 landscape;
+    margin: 0;
+  }
+
   html,
   body {
     background: #ffffff !important;
@@ -29,31 +34,77 @@
 
   body {
     min-height: auto;
+    margin: 0;
   }
 
   .print-hidden {
     display: none !important;
   }
 
+  .print-only {
+    display: block !important;
+  }
+
   .print-root {
+    display: block !important;
     max-width: none !important;
     padding: 0 !important;
     gap: 0 !important;
   }
 
-  .print-target {
+  .print-paper {
-    display: block !important;
+    min-height: 100vh;
-    width: 100% !important;
+    display: flex !important;
-    max-width: none !important;
+    align-items: center;
-    box-shadow: none !important;
+    justify-content: center;
-    border: 0 !important;
     background: #ffffff !important;
-    padding: 0 !important;
+    padding: 0;
   }
 
-  .print-target article {
+  .print-paper--double {
-    max-width: none !important;
+    display: grid !important;
+    grid-template-columns: repeat(2, 148mm);
+    justify-content: center;
+    align-content: center;
+    gap: 0;
+  }
+
+  .print-sheet-frame {
+    width: 148mm;
+    height: 210mm;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background: #ffffff !important;
+  }
+
+  .print-paper--double .print-sheet-frame {
+    width: 148.5mm;
+    height: 210mm;
+  }
+
+  .planner-sheet {
     box-shadow: none !important;
-    padding: 0 !important;
+  }
+
+  .print-sheet-frame .planner-sheet {
+    width: 762px !important;
+    max-width: none !important;
+    transform-origin: top left;
+    transform: scale(0.733);
+    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;
   }
 }