Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 066cab311b | |||
| 934f561f86 |
@@ -4,7 +4,8 @@
|
||||
|
||||
- 프로젝트명: 10 Minute Planner 웹 UI
|
||||
- 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
|
||||
- 현재 기준 버전: `v0.1.4`
|
||||
- 현재 기준 버전: `v0.1.6`
|
||||
- Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
|
||||
|
||||
## 기준 디자인
|
||||
|
||||
@@ -17,6 +18,7 @@
|
||||
- `2페이지 펼침 보기`는 비교용 보조 모드로 함께 유지한다.
|
||||
- 화면 인상은 종이 다이어리 같아야 하지만, 상호작용은 웹앱처럼 빠르고 자연스러워야 한다.
|
||||
- 현재는 개인용 단일 브라우저 흐름으로 개발 중이지만, 이후 회원 기반 개인 문서 관리 서비스로 확장해야 한다.
|
||||
- 최종적으로는 프론트엔드와 백엔드를 Docker로 묶어서 UGREEN NAS에서 구동할 예정이다.
|
||||
|
||||
## 현재 구현 상태
|
||||
|
||||
@@ -53,6 +55,8 @@
|
||||
- 브라우저 기본 인쇄 머리말/꼬리말이 켜져 있어도 2장으로 넘어가지 않도록 실제 인쇄 영역은 종이보다 조금 작게 잡는다.
|
||||
- 인쇄 시 `main`, `print-only`, `print-paper` 래퍼의 패딩/높이/페이지 분할 규칙까지 함께 제어해야 빈 2페이지를 줄일 수 있다.
|
||||
- `1-UP`은 여백이 과하지 않도록 다시 확대했고, `2-UP`은 한 페이지 고정 안정성을 위해 가로 폭과 세로 높이를 조금 더 보수적으로 조정했다.
|
||||
- `1-UP`은 세로 가운데 정렬을 없애고 상단 기준으로 붙여야 여백이 덜 커 보인다.
|
||||
- 현재 `1-UP`은 프레임 자체를 A4 세로에 가깝게 키우고 배율을 크게 올려 빈 여백을 줄이는 방향으로 맞추고 있다.
|
||||
|
||||
## 확정된 결정사항
|
||||
|
||||
@@ -76,6 +80,8 @@
|
||||
- 공유 문서 서비스가 아니라, 사용자 개인 보관과 회고 중심의 서비스 구조를 목표로 한다.
|
||||
- 사용자는 스스로 통계를 확인할 수 있어야 하고, 특정 날짜에 작성한 문서는 출력 가능해야 한다.
|
||||
- 공유를 위해 나중에 이미지 저장 기능도 필요하지만, 실제 출력 품질과 텍스트 선명도는 HTML/CSS 인쇄 레이아웃을 우선 유지하는 편이 좋다.
|
||||
- 원격 저장소 `origin`은 `https://git.sori.studio/zenn/planner.sori.studio.git`로 연결되어 있다.
|
||||
- 이후 배포 단계에서는 `docker-compose.yml`도 함께 작성해야 하며, 포트 번호와 서비스 구성은 추후 사용자와 확정한다.
|
||||
|
||||
## 다음 권장 작업
|
||||
|
||||
@@ -84,6 +90,7 @@
|
||||
- 통계 화면 구현은 현재 `localStorage` 기반으로 먼저 진행해도 된다.
|
||||
- DB는 기능 탐색 속도를 해치지 않는 선에서, 저장 레이어를 분리할 수 있는 적절한 시점에 붙이는 것이 좋다.
|
||||
- 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
|
||||
- Docker Compose는 프론트엔드와 백엔드를 함께 올리는 기준으로 설계하되, NAS 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다.
|
||||
|
||||
## 갱신 규칙
|
||||
|
||||
|
||||
3
TODO.md
3
TODO.md
@@ -74,6 +74,8 @@
|
||||
- [x] A4 가로 기준 2장 출력 모드를 지원한다.
|
||||
- [x] `1-UP` 세로 인쇄 / `2-UP` 가로 인쇄 기준을 분리한다.
|
||||
- [ ] 공유를 위한 이미지 저장 기능을 추가한다.
|
||||
- [ ] Docker 배포 구조를 정리한다.
|
||||
- [ ] UGREEN NAS 기준 `docker-compose.yml` 초안을 작성한다.
|
||||
|
||||
## 메모
|
||||
|
||||
@@ -82,4 +84,5 @@
|
||||
- 현재는 `localStorage`로 개발을 진행하지만, 적절한 시점에 DB를 붙여 사용자별 저장 구조로 확장해야 한다.
|
||||
- 최종적으로는 회원 가입 후 각자 자신의 문서를 작성/관리하고, 개인 통계를 확인하며, 특정 날짜 문서를 출력할 수 있어야 한다.
|
||||
- 실제 인쇄는 HTML/CSS 기반 프린트 레이아웃으로 유지하고, 공유용으로는 별도의 이미지 저장 기능을 추가하는 방향이 적합하다.
|
||||
- 최종 배포는 UGREEN NAS에서 Docker 기반으로 동작할 예정이며, 포트와 실제 서비스 구성은 추후 확정한다.
|
||||
- 구현할 때마다 완료된 항목은 체크하고, 큰 결정사항은 `HANDOFF.md`에도 함께 반영한다.
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "ten-minute-planner",
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.6",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ten-minute-planner",
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.6",
|
||||
"dependencies": {
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ten-minute-planner",
|
||||
"private": true,
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.6",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -79,8 +79,11 @@
|
||||
}
|
||||
|
||||
body[data-print-layout='single'] .print-paper {
|
||||
width: 206mm;
|
||||
height: 293mm;
|
||||
width: 204mm;
|
||||
height: 291mm;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 3mm;
|
||||
}
|
||||
|
||||
.print-paper--double {
|
||||
@@ -97,8 +100,8 @@
|
||||
}
|
||||
|
||||
body[data-print-layout='single'] .print-paper--single .print-sheet-frame {
|
||||
width: 152mm;
|
||||
height: 216mm;
|
||||
width: 198mm;
|
||||
height: 281mm;
|
||||
}
|
||||
|
||||
.print-sheet-frame {
|
||||
@@ -122,7 +125,7 @@
|
||||
width: 762px !important;
|
||||
max-width: none !important;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.732);
|
||||
transform: scale(0.978);
|
||||
box-shadow: none !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user