diff --git a/HANDOFF.md b/HANDOFF.md index 9bb732b..584e35f 100644 --- a/HANDOFF.md +++ b/HANDOFF.md @@ -4,7 +4,7 @@ - 프로젝트명: 10 Minute Planner 웹 UI - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript -- 현재 기준 버전: `v0.1.2` +- 현재 기준 버전: `v0.1.3` ## 기준 디자인 @@ -49,6 +49,8 @@ - `PRINT 2-UP`은 현재 날짜와 다음 날짜를 A4 가로 기준으로 나란히 출력하는 용도다. - 인쇄는 일반 화면을 그대로 찍는 방식이 아니라, 별도의 `print-only` 전용 레이아웃을 사용한다. - A5 원본 비율을 유지한 채 A4 가로 안에 들어가도록 `1-UP` / `2-UP` 각각 별도 배율로 압축한다. +- `PRINT 1-UP`은 A4 세로, `PRINT 2-UP`은 A4 가로 기준으로 분리해서 처리한다. +- 브라우저 기본 인쇄 머리말/꼬리말이 켜져 있어도 2장으로 넘어가지 않도록 실제 인쇄 영역은 종이보다 조금 작게 잡는다. ## 확정된 결정사항 diff --git a/TODO.md b/TODO.md index b90e73f..95e4999 100644 --- a/TODO.md +++ b/TODO.md @@ -72,6 +72,7 @@ - [ ] 공유가 아닌 개인 보관용 서비스 흐름으로 요구사항을 정리한다. - [x] 향후 출력 기능을 위한 인쇄 레이아웃 요구사항을 정리한다. - [x] A4 가로 기준 2장 출력 모드를 지원한다. +- [x] `1-UP` 세로 인쇄 / `2-UP` 가로 인쇄 기준을 분리한다. - [ ] 공유를 위한 이미지 저장 기능을 추가한다. ## 메모 diff --git a/package-lock.json b/package-lock.json index a17ba71..359f3e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ten-minute-planner", - "version": "0.1.2", + "version": "0.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ten-minute-planner", - "version": "0.1.2", + "version": "0.1.3", "dependencies": { "vue": "^3.5.13" }, diff --git a/package.json b/package.json index 0333259..bb73686 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ten-minute-planner", "private": true, - "version": "0.1.2", + "version": "0.1.3", "type": "module", "scripts": { "dev": "vite", diff --git a/src/App.vue b/src/App.vue index 06a1110..531ede5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,6 +21,7 @@ const hours = [ ] const timetableCellCount = hours.length * 6 +let printPageStyleElement = null function createEmptyTimetable() { return Array.from({ length: timetableCellCount }, () => false) @@ -601,8 +602,29 @@ function clearTaskLabels(record) { }) } +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() } diff --git a/src/style.css b/src/style.css index 1a3e156..5a4d993 100644 --- a/src/style.css +++ b/src/style.css @@ -22,11 +22,6 @@ } @media print { - @page { - size: A4 landscape; - margin: 0; - } - html, body { background: #ffffff !important; @@ -53,24 +48,33 @@ } .print-paper { - width: 297mm; - height: 210mm; display: flex !important; align-items: center; justify-content: center; background: #ffffff !important; padding: 0; + overflow: hidden; + } + + body[data-print-layout='single'] .print-paper { + width: 202mm; + height: 289mm; } .print-paper--double { display: grid !important; - grid-template-columns: repeat(2, 148mm); + grid-template-columns: repeat(2, 143mm); justify-content: center; align-content: center; gap: 0; } - .print-paper--single .print-sheet-frame { + body[data-print-layout='double'] .print-paper { + width: 289mm; + height: 202mm; + } + + body[data-print-layout='single'] .print-paper--single .print-sheet-frame { width: 148mm; height: 210mm; } @@ -83,29 +87,29 @@ background: #ffffff !important; } - .print-paper--double .print-sheet-frame { - width: 148.5mm; - height: 210mm; + body[data-print-layout='double'] .print-paper--double .print-sheet-frame { + width: 143mm; + height: 202mm; } .planner-sheet { box-shadow: none !important; } - .print-paper--single .print-sheet-frame .planner-sheet { + 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); + transform: scale(0.718); box-shadow: none !important; background: #ffffff !important; } - .print-paper--double .print-sheet-frame .planner-sheet { + 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.731); + transform: scale(0.703); box-shadow: none !important; background: #ffffff !important; }