v0.1.2

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.0.9`
+- 현재 기준 버전: `v0.1.2`
 
 ## 기준 디자인
 
@@ -43,6 +43,12 @@
 - 통계 화면에서는 전체 집중 시간, 평균 완료율, 기록 일수, 최근 7일 흐름, 최근 기록, 베스트 데이를 보여준다.
 - 통계 화면은 시작일/종료일을 직접 선택해 그 기간 기준으로 지표를 다시 계산할 수 있다.
 - `NEXT DAY` 영역의 요일도 본문 날짜와 같은 규칙으로 주말 색상이 적용된다.
+- 플래너 화면에서는 `PRINT DAY` 버튼으로 현재 선택 날짜 문서를 바로 출력할 수 있다.
+- 인쇄 시에는 현재 선택된 하루 플래너 본문만 남기고, 헤더/사이드패널/통계 화면은 숨긴다.
+- 출력 버튼은 `PRINT 1-UP` / `PRINT 2-UP`으로 분리되어 있다.
+- `PRINT 2-UP`은 현재 날짜와 다음 날짜를 A4 가로 기준으로 나란히 출력하는 용도다.
+- 인쇄는 일반 화면을 그대로 찍는 방식이 아니라, 별도의 `print-only` 전용 레이아웃을 사용한다.
+- A5 원본 비율을 유지한 채 A4 가로 안에 들어가도록 `1-UP` / `2-UP` 각각 별도 배율로 압축한다.
 
 ## 확정된 결정사항
 
@@ -65,6 +71,7 @@
 - 장기적으로는 회원 가입 후 사용자별로 각자 문서를 작성/관리할 수 있어야 한다.
 - 공유 문서 서비스가 아니라, 사용자 개인 보관과 회고 중심의 서비스 구조를 목표로 한다.
 - 사용자는 스스로 통계를 확인할 수 있어야 하고, 특정 날짜에 작성한 문서는 출력 가능해야 한다.
+- 공유를 위해 나중에 이미지 저장 기능도 필요하지만, 실제 출력 품질과 텍스트 선명도는 HTML/CSS 인쇄 레이아웃을 우선 유지하는 편이 좋다.
 
 ## 다음 권장 작업
 
@@ -72,6 +79,7 @@
 - 목표나 통계 기능보다 먼저, 플래너 본문의 입력과 상호작용을 우선 구현한다.
 - 통계 화면 구현은 현재 `localStorage` 기반으로 먼저 진행해도 된다.
 - DB는 기능 탐색 속도를 해치지 않는 선에서, 저장 레이어를 분리할 수 있는 적절한 시점에 붙이는 것이 좋다.
+- 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
 
 ## 갱신 규칙
 

TODO.md

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

package-lock.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.0.9",
+  "version": "0.1.2",
   "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))))
@@ -599,12 +600,18 @@ function clearTaskLabels(record) {
     task.label = ''
   })
 }
+
+async function printSelectedPlanner(layout = 'single') {
+  printLayout.value = layout
+  await nextTick()
+  window.print()
+}
 </script>
 
 <template>
   <main class="min-h-screen px-4 py-6 text-ink sm:px-6 lg:px-10">
-    <div class="mx-auto flex max-w-[1680px] flex-col gap-6">
-      <header class="flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
+    <div class="print-root mx-auto flex max-w-[1680px] flex-col gap-6">
+      <header class="print-hidden flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
         <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
           <div class="space-y-2">
             <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
@@ -668,35 +675,56 @@ function clearTaskLabels(record) {
                 NEXT DAY
               </button>
             </div>
+            <div
+              v-if="screenMode === 'planner'"
+              class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
+            >
+              <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]"
       >
-        <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 class="print-target">
+          <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>
 
-        <aside class="flex flex-col gap-4">
+        <aside class="print-hidden flex flex-col gap-4">
           <section class="border border-stone-200 bg-white/80 p-5">
             <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
             <div class="space-y-3">
@@ -791,52 +819,57 @@ function clearTaskLabels(record) {
 
       <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">
-          <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)"
-          />
-          <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 class="print-target">
+            <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-hidden">
+            <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>
 
       <StatsDashboard
         v-else
+        class="print-hidden"
         :overview-cards="overviewCards"
         :weekly-records="weeklyRecords"
         :recent-records="recentRecords"
@@ -847,6 +880,77 @@ function clearTaskLabels(record) {
         @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

@@ -20,3 +20,104 @@
     @apply outline-none;
   }
 }
+
+@media print {
+  @page {
+    size: A4 landscape;
+    margin: 0;
+  }
+
+  html,
+  body {
+    background: #ffffff !important;
+  }
+
+  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-paper {
+    width: 297mm;
+    height: 210mm;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff !important;
+    padding: 0;
+  }
+
+  .print-paper--double {
+    display: grid !important;
+    grid-template-columns: repeat(2, 148mm);
+    justify-content: center;
+    align-content: center;
+    gap: 0;
+  }
+
+  .print-paper--single .print-sheet-frame {
+    width: 148mm;
+    height: 210mm;
+  }
+
+  .print-sheet-frame {
+    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;
+  }
+
+  .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;
+  }
+
+  .print-paper--double .print-sheet-frame .planner-sheet {
+    width: 762px !important;
+    max-width: none !important;
+    transform-origin: top left;
+    transform: scale(0.731);
+    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;
+  }
+}