모바일 플래너 여백과 타임테이블 터치 개선

정적 이미지 경로를 assets로 이동
파비콘 교체와 툴팁 표시 개선
2026-04-27 15:19:33 +09:00 · 2026-04-27 13:43:50 +09:00 · 2026-04-27 13:30:14 +09:00 · 2026-04-27 13:22:34 +09:00
8 changed files with 250 additions and 35 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -38,6 +38,7 @@
 - 백엔드 Dockerfile: `backend/Dockerfile`
 - nginx 프록시 설정: `deploy/nginx/default.conf`
 - 실행 가이드 문서: `README.md`
+- 사이트 기본 메타 태그와 파비콘/링크 이미지: `index.html`, `public/assets/favicon.png`, `public/assets/og-image.png`
 - Tailwind 설정은 완료되어 있으며, 이 프로젝트의 스타일링 기준으로 유지한다.
 - 현재 선택 날짜는 시스템 날짜 기준으로 시작한다.
 - `COMMENT`, `TASKS`, `MEMO`는 화면에서 바로 편집할 수 있다.
@@ -181,6 +182,9 @@
 - `BEST DAY`는 선택 기간 안에서 집중 시간이 가장 긴 날짜를 고르고, `RECENT RECORDS`는 선택 기간 안의 기록을 날짜 내림차순으로 최대 5개 보여준다.
 - `CARRYOVER TASK` 선택 모달은 ESC로 닫힌다. 이월 배지의 시작일 안내는 오른쪽 패널 메시지 대신 배지 옆 팝업으로 표시한다.
 - 통계의 `BEST DAY`, `RECENT RECORDS` 기준 설명은 본문 문장 대신 물음표 가이드 팝업으로 제공한다.
+- 운영 링크 미리보기용 title/description/Open Graph/Twitter Card 메타 태그를 추가했다. 루트 PNG 요청이 앞단 프록시에서 403이 나는 환경을 피하기 위해 파비콘은 `/assets/favicon.png`, 링크 카드 이미지는 `/assets/og-image.png` 경로로 제공한다.
+- 모바일 focus 화면에서는 플래너 바깥 래핑 카드의 padding을 제거해 플래너 자체 여백만 남긴다.
+- 모바일 타임테이블은 일반 터치/스크롤 중에는 칠하지 않고, 약 420ms 롱터치가 성립된 뒤에만 드래그 편집을 시작한다.

 ## 갱신 규칙

--- a/TODO.md
+++ b/TODO.md
@@ -34,6 +34,7 @@
 - [x] 달력 상단은 좌우 화살표로 월 이동하는 구조가 더 적합하다.
 - [x] 연도 클릭 시 연도 선택 UI가 열려야 한다.
 - [x] 오늘 날짜로 즉시 돌아가는 버튼이 필요하다.
+- [x] 모바일에서 플래너 래핑 카드 여백을 줄이고 타임테이블은 롱터치 후 드래그로만 편집되게 한다.

 ## 3단계: 목표와 회고 기능

@@ -88,6 +89,7 @@
 - [ ] 공유를 위한 이미지 저장 기능을 추가한다.
 - [x] Docker 배포 구조를 정리한다.
 - [x] UGREEN NAS 기준 `docker-compose.yml` 초안을 작성한다.
+- [x] 운영 링크 미리보기용 사이트 제목/소개글 메타 태그와 파비콘을 추가한다.
 - [x] 백엔드 기본 스캐폴딩을 추가한다.
 - [x] PostgreSQL 전환 초안을 적용한다.
 - [x] 로그인 화면 문구와 관리자 정보 노출 지점을 일반 사용자 기준으로 정리한다.
--- a/index.html
+++ b/index.html
@@ -3,7 +3,32 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>10분 플래너</title>
+    <meta name="theme-color" content="#f5f2eb" />
+    <meta
+      name="description"
+      content="10분 단위로 하루를 기록하고 계획하는 차분한 종이 다이어리형 플래너입니다."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:site_name" content="10 Minute Planner" />
+    <meta property="og:title" content="10 Minute Planner" />
+    <meta
+      property="og:description"
+      content="10분 단위로 하루를 기록하고 계획하는 차분한 종이 다이어리형 플래너입니다."
+    />
+    <meta property="og:image" content="/assets/og-image.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1731" />
+    <meta property="og:image:height" content="909" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="10 Minute Planner" />
+    <meta
+      name="twitter:description"
+      content="10분 단위로 하루를 기록하고 계획하는 차분한 종이 다이어리형 플래너입니다."
+    />
+    <meta name="twitter:image" content="/assets/og-image.png" />
+    <link rel="icon" type="image/png" href="/assets/favicon.png" />
+    <title>10 Minute Planner</title>
  </head>
  <body class="bg-stone-100">
    <div id="app"></div>
--- a/public/assets/favicon.png
+++ b/public/assets/favicon.png
--- a/public/assets/og-image.png
+++ b/public/assets/og-image.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -2965,8 +2965,8 @@ onBeforeUnmount(() => {
          />
        </Transition>

-        <div class="scrollbar-hide print-target border border-white/60 bg-white/45 xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3" :class="isCompactMobile ? 'rounded-[24px] p-3' : 'rounded-[28px] p-4'">
-          <div v-if="isOverlayFocusSidebar" class="mb-4 flex justify-end">
+        <div class="scrollbar-hide print-target border border-white/60 bg-white/45 xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3" :class="isCompactMobile ? 'rounded-[24px] p-2' : 'rounded-[28px] p-4'">
+          <div v-if="isOverlayFocusSidebar" class="mb-3 flex justify-end px-2 sm:px-0">
            <button
              type="button"
              class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[11px] font-bold tracking-[0.16em] text-stone-700 transition hover:border-stone-400 hover:text-ink"
--- a/src/components/GuideTooltip.vue
+++ b/src/components/GuideTooltip.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'

 const props = defineProps({
  title: {
@@ -28,18 +28,52 @@ const emit = defineEmits(['dismiss'])

 const open = ref(false)
 const rootRef = ref(null)
+const buttonRef = ref(null)
+const popupStyle = ref({})
 const isCompactButtonLabel = computed(() => String(props.buttonLabel || '').trim().length <= 1)

 function close() {
  open.value = false
 }

-function toggle() {
+function updatePopupPosition() {
+  if (!open.value || !buttonRef.value || typeof window === 'undefined') {
+    return
+  }
+
+  const rect = buttonRef.value.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const preferredWidth = Math.min(256, Math.max(196, viewportWidth - 24))
+  const horizontalPadding = 12
+  let left = rect.left
+
+  if (left + preferredWidth > viewportWidth - horizontalPadding) {
+    left = viewportWidth - preferredWidth - horizontalPadding
+  }
+
+  if (left < horizontalPadding) {
+    left = horizontalPadding
+  }
+
+  popupStyle.value = {
+    left: `${left}px`,
+    top: `${rect.bottom + 8}px`,
+    width: `${preferredWidth}px`,
+    maxWidth: `calc(100vw - ${horizontalPadding * 2}px)`,
+  }
+}
+
+async function toggle() {
  if (!props.visible) {
    return
  }

  open.value = !open.value
+
+  if (open.value) {
+    await nextTick()
+    updatePopupPosition()
+  }
 }

 function closeFromOutside(event) {
@@ -57,10 +91,14 @@ function dismiss() {

 if (typeof window !== 'undefined') {
  window.addEventListener('pointerdown', closeFromOutside)
+  window.addEventListener('resize', updatePopupPosition)
+  window.addEventListener('scroll', updatePopupPosition, true)
 }

 onBeforeUnmount(() => {
  window.removeEventListener('pointerdown', closeFromOutside)
+  window.removeEventListener('resize', updatePopupPosition)
+  window.removeEventListener('scroll', updatePopupPosition, true)
 })
 </script>

@@ -68,9 +106,10 @@ onBeforeUnmount(() => {
  <span
    v-if="visible"
    ref="rootRef"
-    class="relative inline-flex"
+    class="relative inline-flex print:hidden"
  >
    <button
+      ref="buttonRef"
      type="button"
      class="inline-flex shrink-0 items-center justify-center whitespace-nowrap border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
      :class="isCompactButtonLabel ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
@@ -81,21 +120,24 @@ onBeforeUnmount(() => {
      {{ buttonLabel }}
    </button>

-    <span
-      v-if="open"
-      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>
-      <span class="mt-2 block text-[11px] font-semibold leading-5 tracking-[0.04em] text-stone-700">{{ description }}</span>
-      <button
-        v-if="dismissible"
-        type="button"
-        class="mt-3 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
-        @click="dismiss"
+    <Teleport to="body">
+      <span
+        v-if="open"
+        class="fixed z-[120] rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)] print:hidden"
+        :style="popupStyle"
+        @pointerdown.stop
      >
-        더 이상 보지 않기
-      </button>
-    </span>
+        <span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
+        <span class="mt-2 block break-words text-[11px] font-semibold leading-5 tracking-[0.04em] text-stone-700">{{ description }}</span>
+        <button
+          v-if="dismissible"
+          type="button"
+          class="mt-3 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
+          @click="dismiss"
+        >
+          더 이상 보지 않기
+        </button>
+      </span>
+    </Teleport>
  </span>
 </template>
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -70,9 +70,14 @@ const emit = defineEmits([
  'timetable-contextmenu',
 ])

+const LONG_PRESS_DELAY_MS = 420
+const TOUCH_MOVE_CANCEL_DISTANCE = 10
+
 let dragState = null
+let timetableTouchTimer = null
 let taskSelectionDrag = null
 const selectedTaskIndexes = ref(new Set())
+const pendingTimetableTouchIndex = ref(null)

 function shouldShowTaskPlaceholder(index) {
  return index === 0 && props.tasks.every((task) => !task.title.trim())
@@ -90,6 +95,37 @@ function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
  return nextTimetable
 }

+function clearTimetableTouchTimer() {
+  if (timetableTouchTimer) {
+    window.clearTimeout(timetableTouchTimer)
+    timetableTouchTimer = null
+  }
+}
+
+function beginTimetableDrag(index, shouldFill) {
+  dragState = {
+    startIndex: index,
+    baseTimetable: [...props.timetable],
+    nextValue: shouldFill,
+    isActive: true,
+    isTouchPending: false,
+  }
+
+  pendingTimetableTouchIndex.value = null
+  emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+}
+
+function getTimetableCellIndexAtPoint(clientX, clientY) {
+  const cell = document.elementFromPoint(clientX, clientY)?.closest('[data-timetable-index]')
+  const index = Number(cell?.dataset.timetableIndex)
+
+  return Number.isInteger(index) ? index : null
+}
+
+function getTimetableCellIndexFromPointer(event) {
+  return getTimetableCellIndexAtPoint(event.clientX, event.clientY)
+}
+
 function startTimetableDrag(index, event) {
  if (props.readonly) {
    return
@@ -101,17 +137,41 @@ function startTimetableDrag(index, event) {

  const shouldFill = event.button === 2 ? false : !props.timetable[index]

-  dragState = {
-    startIndex: index,
-    baseTimetable: [...props.timetable],
-    nextValue: shouldFill,
+  if (event.pointerType === 'touch') {
+    clearTimetableTouchTimer()
+    pendingTimetableTouchIndex.value = index
+    dragState = {
+      startIndex: index,
+      baseTimetable: [...props.timetable],
+      nextValue: shouldFill,
+      isActive: false,
+      isTouchPending: true,
+      touchStartX: event.clientX,
+      touchStartY: event.clientY,
+      pointerId: event.pointerId,
+    }
+
+    event.currentTarget?.setPointerCapture?.(event.pointerId)
+    timetableTouchTimer = window.setTimeout(() => {
+      if (!dragState?.isTouchPending || dragState.pointerId !== event.pointerId) {
+        return
+      }
+
+      dragState.isTouchPending = false
+      dragState.isActive = true
+      pendingTimetableTouchIndex.value = null
+      emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+    }, LONG_PRESS_DELAY_MS)
+
+    return
  }

-  emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+  event.preventDefault()
+  beginTimetableDrag(index, shouldFill)
 }

 function moveTimetableDrag(index) {
-  if (props.readonly || !dragState) {
+  if (props.readonly || !dragState?.isActive) {
    return
  }

@@ -121,7 +181,75 @@ function moveTimetableDrag(index) {
  )
 }

+function moveTimetableDragFromPointer(event) {
+  if (props.readonly || !dragState) {
+    return
+  }
+
+  if (dragState.isTouchPending) {
+    const movedX = Math.abs(event.clientX - dragState.touchStartX)
+    const movedY = Math.abs(event.clientY - dragState.touchStartY)
+
+    if (movedX > TOUCH_MOVE_CANCEL_DISTANCE || movedY > TOUCH_MOVE_CANCEL_DISTANCE) {
+      stopTimetableDrag()
+    }
+
+    return
+  }
+
+  if (!dragState.isActive) {
+    return
+  }
+
+  if (event.pointerType === 'touch') {
+    event.preventDefault()
+  }
+
+  const index = getTimetableCellIndexFromPointer(event)
+
+  if (index !== null) {
+    moveTimetableDrag(index)
+  }
+}
+
+function moveTimetableDragFromTouch(event) {
+  if (props.readonly || !dragState) {
+    return
+  }
+
+  const touch = event.touches[0]
+
+  if (!touch) {
+    return
+  }
+
+  if (dragState.isTouchPending) {
+    const movedX = Math.abs(touch.clientX - dragState.touchStartX)
+    const movedY = Math.abs(touch.clientY - dragState.touchStartY)
+
+    if (movedX > TOUCH_MOVE_CANCEL_DISTANCE || movedY > TOUCH_MOVE_CANCEL_DISTANCE) {
+      stopTimetableDrag()
+    }
+
+    return
+  }
+
+  if (!dragState.isActive) {
+    return
+  }
+
+  event.preventDefault()
+
+  const index = getTimetableCellIndexAtPoint(touch.clientX, touch.clientY)
+
+  if (index !== null) {
+    moveTimetableDrag(index)
+  }
+}
+
 function stopTimetableDrag() {
+  clearTimetableTouchTimer()
+  pendingTimetableTouchIndex.value = null
  dragState = null
 }

@@ -232,12 +360,22 @@ function clearSelectedTasks(event) {
  clearTaskSelection()
 }

+window.addEventListener('pointermove', moveTimetableDragFromPointer)
 window.addEventListener('pointerup', stopTimetableDrag)
+window.addEventListener('pointercancel', stopTimetableDrag)
+window.addEventListener('touchmove', moveTimetableDragFromTouch, { passive: false })
+window.addEventListener('touchend', stopTimetableDrag)
+window.addEventListener('touchcancel', stopTimetableDrag)
 window.addEventListener('pointermove', moveTaskSelectionFromPointer)
 window.addEventListener('pointerup', stopTaskSelection)
 window.addEventListener('keydown', clearSelectedTasks)
 onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', moveTimetableDragFromPointer)
  window.removeEventListener('pointerup', stopTimetableDrag)
+  window.removeEventListener('pointercancel', stopTimetableDrag)
+  window.removeEventListener('touchmove', moveTimetableDragFromTouch)
+  window.removeEventListener('touchend', stopTimetableDrag)
+  window.removeEventListener('touchcancel', stopTimetableDrag)
  window.removeEventListener('pointermove', moveTaskSelectionFromPointer)
  window.removeEventListener('pointerup', stopTaskSelection)
  window.removeEventListener('keydown', clearSelectedTasks)
@@ -306,7 +444,7 @@ onBeforeUnmount(() => {
    </div>

    <div class="planner-sheet__body flex flex-col gap-5 py-[10px] lg:flex-row lg:gap-4">
-      <div class="planner-sheet__lists flex w-full flex-1 flex-col gap-[21px] lg:w-[394px]">
+      <div class="planner-sheet__lists flex w-full flex-1 flex-col gap-[26px] print:gap-[21px] lg:w-[394px]">
        <section>
          <div class="flex items-center gap-2 text-muted">
            <span class="shrink-0">TASKS</span>
@@ -413,16 +551,16 @@ onBeforeUnmount(() => {
        <div v-if="!props.readonly" class="flex items-center gap-2 text-muted">
          <button
            type="button"
-            class="group flex flex-1 items-center gap-2 rounded-full px-1 py-1 text-left transition hover:bg-stone-100/80"
+            class="shrink-0 text-left transition hover:text-ink"
            @click="emit('timetable-action')"
            @contextmenu.prevent="emit('timetable-contextmenu', $event)"
          >
-            <span class="shrink-0 transition-colors group-hover:text-ink">TIME TABLE</span>
-            <span class="h-px flex-1 bg-ink"></span>
+            <span class="shrink-0">TIME TABLE</span>
          </button>
+          <span class="h-px flex-1 bg-ink"></span>
          <GuideTooltip
            title="Time Table"
-            description="왼쪽 클릭으로 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 메뉴에서 현재 날짜에 붙여넣을 수 있습니다."
+            description="먼저 원하는 날짜의 TIME TABLE 제목을 클릭해 타임테이블을 저장하세요. 그다음 붙여넣을 날짜로 이동해서 TIME TABLE 제목을 마우스 오른쪽 클릭하면 손쉽게 같은 내용을 붙여넣을 수 있습니다."
            :dismissible="false"
          />
        </div>
@@ -447,10 +585,14 @@ onBeforeUnmount(() => {
              <div
                v-for="quarter in 6"
                :key="quarter"
-                :class="props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent'"
-                class="h-full cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
+                :data-timetable-index="index * 6 + quarter - 1"
+                :class="[
+                  props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent',
+                  pendingTimetableTouchIndex === index * 6 + quarter - 1 ? 'ring-1 ring-inset ring-stone-500/70' : '',
+                ]"
+                class="h-full cursor-crosshair touch-pan-y select-none border-r border-dashed border-line transition-colors last:border-r-0"
                @contextmenu.prevent
-                @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
+                @pointerdown="startTimetableDrag(index * 6 + quarter - 1, $event)"
                @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
              />
            </div>
Author	SHA1	Message	Date
zenn	4ed7ee6c7d	모바일 플래너 여백과 타임테이블 터치 개선	2026-04-27 15:19:33 +09:00
zenn	d5af1c9525	정적 이미지 경로를 assets로 이동	2026-04-27 13:43:50 +09:00
zenn	e9f61b249e	파비콘 교체와 툴팁 표시 개선	2026-04-27 13:30:14 +09:00
zenn	e1c4a90249	사이트 메타 정보와 파비콘 추가	2026-04-27 13:22:34 +09:00