From 2462d7905379cbf4b52c0c2fcc9adb9e839d1860 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Wed, 22 Apr 2026 17:38:57 +0900
Subject: [PATCH] =?UTF-8?q?v0.1.35=20-=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EB=85=B8=EC=B6=9C=20=EB=AC=B8=EA=B5=AC=20=ED=95=9C=EA=B8=80?=
 =?UTF-8?q?=ED=99=94=EC=99=80=20=ED=8E=BC=EC=B9=A8=20=ED=8F=AD=20=EB=B3=B4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HANDOFF.md                      |  6 +++++-
 package-lock.json               |  4 ++--
 package.json                    |  2 +-
 src/App.vue                     | 38 ++++++++++++++++-----------------
 src/components/MiniCalendar.vue | 28 +++++++++++++-----------
 src/components/PlannerPage.vue  |  2 +-
 6 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/HANDOFF.md b/HANDOFF.md
index 20e6c6b..95ba31f 100644
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.34` 준비 중
+- 현재 기준 버전: `v0.1.35` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -182,6 +182,10 @@
 - 모바일 구간에서는 TASKS / MEMO 행 높이와 좌우 패딩을 조금 줄여 입력 밀도를 낮췄고, 타임테이블은 필요할 때만 최소 가로 스크롤이 생기도록 바뀌었다.
 - 미니 달력은 모바일 구간에서 패딩, 월 이동 버튼, 요일 헤더, 날짜 셀 크기를 한 단계 더 줄여서 카드 내부 밀도를 정리했다.
 - 연도 선택 팝오버는 좁은 화면에서 카드 전체 폭을 활용하고, 넓은 화면에서는 기존 우측 드롭다운 폭을 유지한다.
+- 플래너 본문 안의 `TOTAL TIME` 라벨도 `총 시간`으로 바꿔서 영어 라벨을 줄였다.
+- 사용자 노출 메뉴 문구는 `보기 방식 / 날짜 이동 / 인쇄 / 1페이지 + 정보 / 2페이지 펼침 / 이전 날 / 다음 날 / 1장 인쇄 / 2장 인쇄`처럼 한글 중심으로 정리하기 시작했다.
+- 2페이지 펼침 보기 배율 계산에서 데스크톱 여유 폭을 더 보수적으로 잡아, `1920px` 근처에서 우측 페이지가 잘려 가로 스크롤이 생기던 문제를 줄이는 방향으로 조정했다.
+- 달력 날짜 버튼은 셀 안쪽에 고정 크기 원형 버튼으로 다시 배치해서 모바일에서 서로 겹쳐 보이는 현상을 줄였다.
 - 비로그인 랜딩 카드는 상단 고정이 아니라 화면 중앙에 오도록 정렬을 수정했다.
 - 현재 환경에서는 Docker 데몬이 꺼져 있어서 `docker compose build` 실검증은 하지 못했고, 데몬 시작 후 다시 확인이 필요하다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
diff --git a/package-lock.json b/package-lock.json
index 83c59a1..80b58fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.1.34",
+      "version": "0.1.35",
       "dependencies": {
         "vue": "^3.5.13"
       },
diff --git a/package.json b/package.json
index 815fe54..4eefc75 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.1.34",
+  "version": "0.1.35",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.vue b/src/App.vue
index bd19dbb..64a6ba8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -718,7 +718,7 @@ const focusSidebarGridClass = computed(() =>
     : 'grid-cols-1',
 )
 const spreadScale = computed(() => {
-  const reservedWidth = windowWidth.value >= 1280 ? 410 : 96
+  const reservedWidth = windowWidth.value >= 1280 ? 532 : 120
   const availableWidth = Math.max(windowWidth.value - reservedWidth, 980)
   const baseWidth = 1548
   const nextScale = Math.min(1, availableWidth / baseWidth)
@@ -1531,7 +1531,7 @@ onBeforeUnmount(() => {
           </section>
 
           <section v-if="isAuthenticated && screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">VIEW</p>
+            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">보기 방식</p>
             <div class="mt-4 grid gap-2">
               <button
                 type="button"
@@ -1539,7 +1539,7 @@ onBeforeUnmount(() => {
                 :class="viewMode === 'focus' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                 @click="setViewMode('focus')"
               >
-                1 PAGE + INFO
+                1페이지 + 정보
               </button>
               <button
                 type="button"
@@ -1547,47 +1547,47 @@ onBeforeUnmount(() => {
                 :class="viewMode === 'spread' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                 @click="setViewMode('spread')"
               >
-                2 PAGE SPREAD
+                2페이지 펼침
               </button>
             </div>
           </section>
 
           <section v-if="isAuthenticated && screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">DAY MOVE</p>
+            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">날짜 이동</p>
             <div class="mt-4 grid gap-2">
               <button
                 type="button"
                 class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                 @click="shiftDate(-1)"
               >
-                PREV DAY
+                이전 날
               </button>
               <button
                 type="button"
                 class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                 @click="shiftDate(1)"
               >
-                NEXT DAY
+                다음 날
               </button>
             </div>
           </section>
 
           <section v-if="isAuthenticated && screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">PRINT</p>
+            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">인쇄</p>
             <div class="mt-4 grid gap-2">
               <button
                 type="button"
                 class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                 @click="printSelectedPlanner('single')"
               >
-                PRINT 1-UP
+                1장 인쇄
               </button>
               <button
                 type="button"
                 class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                 @click="printSelectedPlanner('double')"
               >
-                PRINT 2-UP
+                2장 인쇄
               </button>
             </div>
           </section>
@@ -1680,7 +1680,7 @@ onBeforeUnmount(() => {
             </section>
 
             <section v-if="screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">VIEW</p>
+              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">보기 방식</p>
               <div class="mt-4 grid gap-2">
                 <button
                   type="button"
@@ -1688,7 +1688,7 @@ onBeforeUnmount(() => {
                   :class="viewMode === 'focus' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                   @click="setViewMode('focus')"
                 >
-                  1 PAGE + INFO
+                  1페이지 + 정보
                 </button>
                 <button
                   type="button"
@@ -1696,47 +1696,47 @@ onBeforeUnmount(() => {
                   :class="viewMode === 'spread' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                   @click="setViewMode('spread')"
                 >
-                  2 PAGE SPREAD
+                  2페이지 펼침
                 </button>
               </div>
             </section>
 
             <section v-if="screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">DAY MOVE</p>
+              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">날짜 이동</p>
               <div class="mt-4 grid gap-2">
                 <button
                   type="button"
                   class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                   @click="shiftDate(-1)"
                 >
-                  PREV DAY
+                  이전 날
                 </button>
                 <button
                   type="button"
                   class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                   @click="shiftDate(1)"
                 >
-                  NEXT DAY
+                  다음 날
                 </button>
               </div>
             </section>
 
             <section v-if="screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">PRINT</p>
+              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">인쇄</p>
               <div class="mt-4 grid gap-2">
                 <button
                   type="button"
                   class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                   @click="printSelectedPlanner('single')"
                 >
-                  PRINT 1-UP
+                  1장 인쇄
                 </button>
                 <button
                   type="button"
                   class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                   @click="printSelectedPlanner('double')"
                 >
-                  PRINT 2-UP
+                  2장 인쇄
                 </button>
               </div>
             </section>
diff --git a/src/components/MiniCalendar.vue b/src/components/MiniCalendar.vue
index 16301cb..6a5b3fa 100644
--- a/src/components/MiniCalendar.vue
+++ b/src/components/MiniCalendar.vue
@@ -125,27 +125,29 @@ function selectYear(year) {
       </span>
     </div>
     <div class="grid grid-cols-7 gap-1.5 sm:gap-2">
-      <button
+      <div
         v-for="day in days"
         :key="day.key"
-        type="button"
-        class="aspect-square min-h-[34px] rounded-full border text-[10px] font-semibold transition sm:min-h-[40px] sm:text-[11px]"
-        :class="[
-          day.key === selectedKey
-            ? 'border-ink bg-ink text-white'
-            : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
-          day.isCurrentMonth ? '' : 'opacity-35',
-        ]"
-        @click="emit('select', day.date)"
+        class="flex items-center justify-center"
       >
-        <span class="relative flex h-full w-full items-center justify-center">
+        <button
+          type="button"
+          class="relative flex size-8 items-center justify-center rounded-full border text-[10px] font-semibold transition sm:size-10 sm:text-[11px]"
+          :class="[
+            day.key === selectedKey
+              ? 'border-ink bg-ink text-white'
+              : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
+            day.isCurrentMonth ? '' : 'opacity-35',
+          ]"
+          @click="emit('select', day.date)"
+        >
           <span>{{ day.label }}</span>
           <span
             v-if="markedKeys.includes(day.key)"
             class="absolute bottom-[3px] h-1 w-1 rounded-full bg-red-500 sm:h-[5px] sm:w-[5px]"
           />
-        </span>
-      </button>
+        </button>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/components/PlannerPage.vue b/src/components/PlannerPage.vue
index ef8e82e..850c70f 100644
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -147,7 +147,7 @@ onBeforeUnmount(() => {
           />
         </div>
         <div class="relative min-h-[82px] w-full border-t border-ink px-[10px] pt-[10px] lg:w-[210px]">
-          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TOTAL TIME</span>
+          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">총 시간</span>
           <p class="pt-5 text-[11px] tracking-[0.2em] text-ink sm:pt-6 sm:text-sm">{{ totalTime }}</p>
         </div>
       </div>