v0.1.56 - 타임테이블 안내와 달력 클릭 보정

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.55` 준비 중
+- 현재 기준 버전: `v0.1.56`
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -51,7 +51,9 @@
 - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
 - `TIME TABLE` 라벨은 왼쪽 클릭 시 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 시 붙여넣기 메뉴를 연다.
 - `TIME TABLE` 라벨 오른쪽의 `?` 아이콘으로 복사/붙여넣기 사용법을 바로 볼 수 있다.
+- 타임테이블 복사/붙여넣기 결과는 오른쪽 아래 상태 토스트로 바로 안내한다.
 - 모바일과 태블릿처럼 `TIME TABLE`이 아래로 내려가는 구간에서는 6칸 그리드가 남는 폭을 더 넓게 채우도록 조정했다.
+- 미니 달력의 월 이동, 연도 선택, 날짜 버튼은 `mousedown.prevent`로 포커스만 잡히고 실제 이동은 두 번째 클릭에 되는 느낌을 줄이도록 보정했다.
 - 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다.
 - 달력 상단은 월 좌우 화살표, 클릭형 연도 선택, `TODAY` 버튼 구조로 동작한다.
 - 입력 내용이 있는 날짜는 달력 하단에 빨간 점으로 표시된다.

package-lock.json

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

package.json

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

src/App.vue

@@ -1449,19 +1449,6 @@ watch(
   },
 )
 
-watch(
-  selectedDateKey,
-  (nextKey, previousKey) => {
-    if (!timetableCopyForm.targetDate || timetableCopyForm.targetDate === previousKey) {
-      timetableCopyForm.targetDate = nextKey
-    }
-
-    if (!timetableCopyForm.sourceDate) {
-      timetableCopyForm.sourceDate = nextKey
-    }
-  },
-)
-
 function fillTaskLabelsWithNumbers(record) {
   record.tasks.forEach((task, index) => {
     task.label = createTaskLabel(index)
@@ -3679,7 +3666,7 @@ onBeforeUnmount(() => {
       leave-to-class="translate-y-2 opacity-0"
     >
       <div
-        v-if="isAuthenticated && syncToastVisible"
+        v-if="syncToastVisible"
         class="pointer-events-none fixed bottom-5 right-5 z-40 max-w-[240px] rounded-full border border-stone-200/70 bg-white/80 px-3 py-2 shadow-[0_10px_24px_rgba(28,25,23,0.08)] backdrop-blur"
       >
         <p

src/components/GuideTooltip.vue

@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
 
     <span
       v-if="open"
-      class="absolute left-0 top-7 z-50 w-64 rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)]"
+      class="absolute right-0 top-7 z-50 w-[min(16rem,calc(100vw-2rem))] rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)] sm:left-0 sm:right-auto sm:w-64"
       @pointerdown.stop
     >
       <span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>

src/components/MiniCalendar.vue

@@ -48,6 +48,7 @@ function selectYear(year) {
           <button
             type="button"
             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"
+            @mousedown.prevent
             @click="emit('shift-month', -1)"
           >
             ←
@@ -57,6 +58,7 @@ function selectYear(year) {
             <button
               type="button"
               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]"
+              @mousedown.prevent
               @click="isYearPickerOpen = !isYearPickerOpen"
             >
               {{ yearLabel }}
@@ -65,6 +67,7 @@ function selectYear(year) {
           <button
             type="button"
             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"
+            @mousedown.prevent
             @click="emit('shift-month', 1)"
           >
             →
@@ -74,6 +77,7 @@ function selectYear(year) {
       <button
         type="button"
         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"
+        @mousedown.prevent
         @click="emit('go-today')"
       >
         TODAY
@@ -87,6 +91,7 @@ function selectYear(year) {
           <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"
+            @mousedown.prevent
             @click="emit('shift-year', -12)"
           >
             ←
@@ -97,6 +102,7 @@ function selectYear(year) {
           <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"
+            @mousedown.prevent
             @click="emit('shift-year', 12)"
           >
             →
@@ -109,6 +115,7 @@ function selectYear(year) {
             type="button"
             class="rounded-xl border px-3 py-2 text-[11px] font-semibold transition"
             :class="year === currentYearNumber ? 'border-ink bg-ink text-white' : 'border-stone-200 text-stone-700 hover:border-stone-400 hover:bg-stone-50'"
+            @mousedown.prevent
             @click="selectYear(year)"
           >
             {{ year }}
@@ -139,6 +146,7 @@ function selectYear(year) {
               : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
             day.isCurrentMonth ? '' : 'opacity-35',
           ]"
+          @mousedown.prevent
           @click="emit('select', day.date)"
         >
           <span>{{ day.label }}</span>

src/components/PlannerPage.vue

@@ -55,10 +55,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  timetableActionLabel: {
-    type: String,
-    default: '복사',
-  },
 })
 
 const emit = defineEmits([
@@ -423,9 +419,6 @@ onBeforeUnmount(() => {
           >
             <span class="shrink-0 transition-colors group-hover:text-ink">TIME TABLE</span>
             <span class="h-px flex-1 bg-ink"></span>
-            <span class="rounded-full border border-stone-200 bg-white px-3 py-1 text-[9px] font-bold tracking-[0.14em] text-stone-500 transition-colors group-hover:border-stone-400 group-hover:text-stone-900">
-              {{ timetableActionLabel }}
-            </span>
           </button>
           <GuideTooltip
             title="Time Table"