v0.1.0

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.0.9`
+- 현재 기준 버전: `v0.1.0`
 
 ## 기준 디자인
 
@@ -43,6 +43,8 @@
 - 통계 화면에서는 전체 집중 시간, 평균 완료율, 기록 일수, 최근 7일 흐름, 최근 기록, 베스트 데이를 보여준다.
 - 통계 화면은 시작일/종료일을 직접 선택해 그 기간 기준으로 지표를 다시 계산할 수 있다.
 - `NEXT DAY` 영역의 요일도 본문 날짜와 같은 규칙으로 주말 색상이 적용된다.
+- 플래너 화면에서는 `PRINT DAY` 버튼으로 현재 선택 날짜 문서를 바로 출력할 수 있다.
+- 인쇄 시에는 현재 선택된 하루 플래너 본문만 남기고, 헤더/사이드패널/통계 화면은 숨긴다.
 
 ## 확정된 결정사항
 

TODO.md

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

package-lock.json

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

package.json

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

src/App.vue

@@ -599,12 +599,16 @@ function clearTaskLabels(record) {
     task.label = ''
   })
 }
+
+function printSelectedPlanner() {
+  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">
+    <div class="print-root 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">
+      <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,6 +672,14 @@ function clearTaskLabels(record) {
                 NEXT DAY
               </button>
             </div>
+            <button
+              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"
+            >
+              PRINT DAY
+            </button>
           </div>
         </div>
       </header>
@@ -676,27 +688,29 @@ function clearTaskLabels(record) {
         v-if="screenMode === 'planner' && viewMode === 'focus'"
         class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
       >
-        <PlannerPage
+        <div class="print-target">
-          :date-main="selectedDateDisplay.main"
+          <PlannerPage
-          :date-weekday="selectedDateDisplay.weekday"
+            :date-main="selectedDateDisplay.main"
-          :date-weekday-tone="selectedDateDisplay.weekdayTone"
+            :date-weekday="selectedDateDisplay.weekday"
-          :dday="planner.dday"
+            :date-weekday-tone="selectedDateDisplay.weekdayTone"
-          :comment="planner.comment"
+            :dday="planner.dday"
-          :total-time="formatTotalTime(planner)"
+            :comment="planner.comment"
-          :tasks="planner.tasks"
+            :total-time="formatTotalTime(planner)"
-          :memo="planner.memo"
+            :tasks="planner.tasks"
-          :hours="hours"
+            :memo="planner.memo"
-          :timetable="planner.timetable"
+            :hours="hours"
-          @update:comment="updateComment(planner, $event)"
+            :timetable="planner.timetable"
-          @update:task-label="updateTaskLabel(planner, $event)"
+            @update:comment="updateComment(planner, $event)"
-          @update:task-title="updateTaskTitle(planner, $event)"
+            @update:task-label="updateTaskLabel(planner, $event)"
-          @toggle:task="toggleTask(planner, $event)"
+            @update:task-title="updateTaskTitle(planner, $event)"
-          @update:memo-label="updateMemoLabel(planner, $event)"
+            @toggle:task="toggleTask(planner, $event)"
-          @update:memo="updateMemo(planner, $event)"
+            @update:memo-label="updateMemoLabel(planner, $event)"
-          @update:timetable="updateTimetable(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">
@@ -794,49 +808,54 @@ function clearTaskLabels(record) {
         class="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
+          <div class="print-target">
-            :date-main="selectedDateDisplay.main"
+            <PlannerPage
-            :date-weekday="selectedDateDisplay.weekday"
+              :date-main="selectedDateDisplay.main"
-            :date-weekday-tone="selectedDateDisplay.weekdayTone"
+              :date-weekday="selectedDateDisplay.weekday"
-            :dday="planner.dday"
+              :date-weekday-tone="selectedDateDisplay.weekdayTone"
-            :comment="planner.comment"
+              :dday="planner.dday"
-            :total-time="formatTotalTime(planner)"
+              :comment="planner.comment"
-            :tasks="planner.tasks"
+              :total-time="formatTotalTime(planner)"
-            :memo="planner.memo"
+              :tasks="planner.tasks"
-            :hours="hours"
+              :memo="planner.memo"
-            :timetable="planner.timetable"
+              :hours="hours"
-            @update:comment="updateComment(planner, $event)"
+              :timetable="planner.timetable"
-            @update:task-label="updateTaskLabel(planner, $event)"
+              @update:comment="updateComment(planner, $event)"
-            @update:task-title="updateTaskTitle(planner, $event)"
+              @update:task-label="updateTaskLabel(planner, $event)"
-            @toggle:task="toggleTask(planner, $event)"
+              @update:task-title="updateTaskTitle(planner, $event)"
-            @update:memo-label="updateMemoLabel(planner, $event)"
+              @toggle:task="toggleTask(planner, $event)"
-            @update:memo="updateMemo(planner, $event)"
+              @update:memo-label="updateMemoLabel(planner, $event)"
-            @update:timetable="updateTimetable(planner, $event)"
+              @update:memo="updateMemo(planner, $event)"
-          />
+              @update:timetable="updateTimetable(planner, $event)"
-          <PlannerPage
+            />
-            :date-main="secondaryDateDisplay.main"
+          </div>
-            :date-weekday="secondaryDateDisplay.weekday"
+          <div class="print-hidden">
-            :date-weekday-tone="secondaryDateDisplay.weekdayTone"
+            <PlannerPage
-            :dday="secondaryPlanner.dday"
+              :date-main="secondaryDateDisplay.main"
-            :comment="secondaryPlanner.comment"
+              :date-weekday="secondaryDateDisplay.weekday"
-            :total-time="formatTotalTime(secondaryPlanner)"
+              :date-weekday-tone="secondaryDateDisplay.weekdayTone"
-            :tasks="secondaryPlanner.tasks"
+              :dday="secondaryPlanner.dday"
-            :memo="secondaryPlanner.memo"
+              :comment="secondaryPlanner.comment"
-            :hours="hours"
+              :total-time="formatTotalTime(secondaryPlanner)"
-            :timetable="secondaryPlanner.timetable"
+              :tasks="secondaryPlanner.tasks"
-            @update:comment="updateComment(secondaryPlanner, $event)"
+              :memo="secondaryPlanner.memo"
-            @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
+              :hours="hours"
-            @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
+              :timetable="secondaryPlanner.timetable"
-            @toggle:task="toggleTask(secondaryPlanner, $event)"
+              @update:comment="updateComment(secondaryPlanner, $event)"
-            @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
+              @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
-            @update:memo="updateMemo(secondaryPlanner, $event)"
+              @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
-            @update:timetable="updateTimetable(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"

src/style.css

@@ -20,3 +20,40 @@
     @apply outline-none;
   }
 }
+
+@media print {
+  html,
+  body {
+    background: #ffffff !important;
+  }
+
+  body {
+    min-height: auto;
+  }
+
+  .print-hidden {
+    display: none !important;
+  }
+
+  .print-root {
+    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;
+    background: #ffffff !important;
+    padding: 0 !important;
+  }
+
+  .print-target article {
+    max-width: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}