From 4e1263348e35e317cdd93e9e4bcf8995e5951037 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Wed, 22 Apr 2026 17:32:39 +0900
Subject: [PATCH] =?UTF-8?q?v0.1.34=20-=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=8B=AC=EB=A0=A5=20=EC=B9=B4=EB=93=9C=20=EB=B0=80=EB=8F=84?=
 =?UTF-8?q?=EC=99=80=20=EB=B2=84=ED=8A=BC=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HANDOFF.md                      |  4 +++-
 package-lock.json               |  4 ++--
 package.json                    |  2 +-
 src/components/MiniCalendar.vue | 28 ++++++++++++++--------------
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/HANDOFF.md b/HANDOFF.md
index 5a5cbb4..20e6c6b 100644
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.33` 준비 중
+- 현재 기준 버전: `v0.1.34` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -180,6 +180,8 @@
 - 모바일처럼 좁은 화면에서는 본문 래퍼 패딩을 조금 줄이고, 우측 패널 열기 버튼 문구를 `INFO`로 축약해 밀도를 낮췄다.
 - 플래너 본문은 작은 화면에서 상단 정보 영역이 세로로 쌓이고, `TIME TABLE`이 아래로 내려가도록 조정했다.
 - 모바일 구간에서는 TASKS / MEMO 행 높이와 좌우 패딩을 조금 줄여 입력 밀도를 낮췄고, 타임테이블은 필요할 때만 최소 가로 스크롤이 생기도록 바뀌었다.
+- 미니 달력은 모바일 구간에서 패딩, 월 이동 버튼, 요일 헤더, 날짜 셀 크기를 한 단계 더 줄여서 카드 내부 밀도를 정리했다.
+- 연도 선택 팝오버는 좁은 화면에서 카드 전체 폭을 활용하고, 넓은 화면에서는 기존 우측 드롭다운 폭을 유지한다.
 - 비로그인 랜딩 카드는 상단 고정이 아니라 화면 중앙에 오도록 정렬을 수정했다.
 - 현재 환경에서는 Docker 데몬이 꺼져 있어서 `docker compose build` 실검증은 하지 못했고, 데몬 시작 후 다시 확인이 필요하다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
diff --git a/package-lock.json b/package-lock.json
index 1403a8c..83c59a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.1.33",
+      "version": "0.1.34",
       "dependencies": {
         "vue": "^3.5.13"
       },
diff --git a/package.json b/package.json
index 5c77340..815fe54 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.1.33",
+  "version": "0.1.34",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/MiniCalendar.vue b/src/components/MiniCalendar.vue
index 5392d60..16301cb 100644
--- a/src/components/MiniCalendar.vue
+++ b/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,12 +124,12 @@ function selectYear(year) {
         {{ weekday }}
       </span>
     </div>
-    <div class="grid grid-cols-7 gap-2">
+    <div class="grid grid-cols-7 gap-1.5 sm:gap-2">
       <button
         v-for="day in days"
         :key="day.key"
         type="button"
-        class="aspect-square rounded-full border text-[11px] font-semibold transition"
+        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'
@@ -142,7 +142,7 @@ function selectYear(year) {
           <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>