v0.1.35 - 사용자 노출 문구 한글화와 펼침 폭 보정

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.33` 준비 중
+- 현재 기준 버전: `v0.1.35` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -180,6 +180,12 @@
 - 모바일처럼 좁은 화면에서는 본문 래퍼 패딩을 조금 줄이고, 우측 패널 열기 버튼 문구를 `INFO`로 축약해 밀도를 낮췄다.
 - 플래너 본문은 작은 화면에서 상단 정보 영역이 세로로 쌓이고, `TIME TABLE`이 아래로 내려가도록 조정했다.
 - 모바일 구간에서는 TASKS / MEMO 행 높이와 좌우 패딩을 조금 줄여 입력 밀도를 낮췄고, 타임테이블은 필요할 때만 최소 가로 스크롤이 생기도록 바뀌었다.
+- 미니 달력은 모바일 구간에서 패딩, 월 이동 버튼, 요일 헤더, 날짜 셀 크기를 한 단계 더 줄여서 카드 내부 밀도를 정리했다.
+- 연도 선택 팝오버는 좁은 화면에서 카드 전체 폭을 활용하고, 넓은 화면에서는 기존 우측 드롭다운 폭을 유지한다.
+- 플래너 본문 안의 `TOTAL TIME` 라벨도 `총 시간`으로 바꿔서 영어 라벨을 줄였다.
+- 사용자 노출 메뉴 문구는 `보기 방식 / 날짜 이동 / 인쇄 / 1페이지 + 정보 / 2페이지 펼침 / 이전 날 / 다음 날 / 1장 인쇄 / 2장 인쇄`처럼 한글 중심으로 정리하기 시작했다.
+- 2페이지 펼침 보기 배율 계산에서 데스크톱 여유 폭을 더 보수적으로 잡아, `1920px` 근처에서 우측 페이지가 잘려 가로 스크롤이 생기던 문제를 줄이는 방향으로 조정했다.
+- 달력 날짜 버튼은 셀 안쪽에 고정 크기 원형 버튼으로 다시 배치해서 모바일에서 서로 겹쳐 보이는 현상을 줄였다.
 - 비로그인 랜딩 카드는 상단 고정이 아니라 화면 중앙에 오도록 정렬을 수정했다.
 - 현재 환경에서는 Docker 데몬이 꺼져 있어서 `docker compose build` 실검증은 하지 못했고, 데몬 시작 후 다시 확인이 필요하다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.

package-lock.json

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

package.json

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

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>

src/components/MiniCalendar.vue

@@ -40,23 +40,23 @@ function selectYear(year) {
 </script>
 
 <template>
-  <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
-    <div class="relative mb-4 flex items-start justify-between gap-4">
+  <section class="rounded-[24px] border border-stone-200 bg-white/82 p-4 shadow-[0_12px_36px_rgba(28,25,23,0.05)] sm:p-5">
+    <div class="relative mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
       <div class="min-w-0">
         <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
-        <div class="mt-2 flex items-center gap-3">
+        <div class="mt-2 flex items-center gap-2 sm:gap-3">
           <button
             type="button"
-            class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            class="flex h-9 w-9 items-center justify-center rounded-full border border-stone-200 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink sm:h-auto sm:w-auto sm:px-2 sm:py-1"
             @click="emit('shift-month', -1)"
           >
             ←
           </button>
-          <div class="flex min-w-0 items-center gap-2">
-            <p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
+          <div class="flex min-w-0 items-center gap-1.5 sm:gap-2">
+            <p class="text-[15px] font-semibold tracking-[-0.04em] text-stone-900 sm:text-base">{{ monthLabel }}</p>
             <button
               type="button"
-              class="rounded-full px-2 py-1 text-[11px] font-semibold tracking-[0.16em] text-stone-500 transition hover:bg-stone-100 hover:text-ink"
+              class="rounded-full px-2 py-1 text-[10px] font-semibold tracking-[0.16em] text-stone-500 transition hover:bg-stone-100 hover:text-ink sm:text-[11px]"
               @click="isYearPickerOpen = !isYearPickerOpen"
             >
               {{ yearLabel }}
@@ -64,7 +64,7 @@ function selectYear(year) {
           </div>
           <button
             type="button"
-            class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
+            class="flex h-9 w-9 items-center justify-center rounded-full border border-stone-200 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink sm:h-auto sm:w-auto sm:px-2 sm:py-1"
             @click="emit('shift-month', 1)"
           >
             →
@@ -73,7 +73,7 @@ function selectYear(year) {
       </div>
       <button
         type="button"
-        class="shrink-0 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+        class="shrink-0 self-start rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink sm:self-auto"
         @click="emit('go-today')"
       >
         TODAY
@@ -81,7 +81,7 @@ function selectYear(year) {
 
       <div
         v-if="isYearPickerOpen"
-        class="absolute right-0 top-14 z-10 w-[220px] rounded-2xl border border-stone-200 bg-white p-4 shadow-lg"
+        class="absolute left-0 right-0 top-[88px] z-10 rounded-2xl border border-stone-200 bg-white p-4 shadow-lg sm:left-auto sm:right-0 sm:top-14 sm:w-[220px]"
       >
         <div class="mb-3 flex items-center justify-between">
           <button
@@ -116,7 +116,7 @@ function selectYear(year) {
         </div>
       </div>
     </div>
-    <div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
+    <div class="mb-3 grid grid-cols-7 gap-1.5 text-center text-[9px] font-bold tracking-[0.1em] text-stone-400 sm:gap-2 sm:text-[10px] sm:tracking-[0.12em]">
       <span
         v-for="weekday in ['일', '월', '화', '수', '목', '금', '토']"
         :key="weekday"
@@ -124,28 +124,30 @@ function selectYear(year) {
         {{ weekday }}
       </span>
     </div>
-    <div class="grid grid-cols-7 gap-2">
-      <button
+    <div class="grid grid-cols-7 gap-1.5 sm:gap-2">
+      <div
         v-for="day in days"
         :key="day.key"
-        type="button"
-        class="aspect-square rounded-full border text-[11px] font-semibold transition"
-        :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-[5px] w-[5px] rounded-full bg-red-500"
+            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>

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>