v0.1.2

HANDOFF.md

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

TODO.md

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

package-lock.json

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

package.json

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

src/App.vue

@@ -700,7 +700,7 @@ async function printSelectedPlanner(layout = 'single') {
 
       <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
@@ -819,7 +819,7 @@ async function printSelectedPlanner(layout = 'single') {
 
       <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">
@@ -882,7 +882,7 @@ async function printSelectedPlanner(layout = 'single') {
       />
 
       <section class="print-only">
-        <div v-if="printLayout === 'single'" class="print-paper">
+        <div v-if="printLayout === 'single'" class="print-paper print-paper--single">
           <div class="print-sheet-frame">
             <PlannerPage
               :date-main="selectedDateDisplay.main"

src/style.css

@@ -53,7 +53,8 @@
   }
 
   .print-paper {
-    min-height: 100vh;
+    width: 297mm;
+    height: 210mm;
     display: flex !important;
     align-items: center;
     justify-content: center;
@@ -69,9 +70,12 @@
     gap: 0;
   }
 
-  .print-sheet-frame {
+  .print-paper--single .print-sheet-frame {
     width: 148mm;
     height: 210mm;
+  }
+
+  .print-sheet-frame {
     overflow: hidden;
     display: flex;
     align-items: flex-start;
@@ -88,11 +92,20 @@
     box-shadow: none !important;
   }
 
-  .print-sheet-frame .planner-sheet {
+  .print-paper--single .print-sheet-frame .planner-sheet {
     width: 762px !important;
     max-width: none !important;
     transform-origin: top left;
-    transform: scale(0.733);
+    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;
   }