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

정적 이미지 경로를 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 · 2026-04-24 17:14:04 +09:00 · 2026-04-24 16:52:56 +09:00
12 changed files with 588 additions and 71 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -4,7 +4,7 @@
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
- 현재 기준 버전: `v0.1.52` 준비 중
+- 현재 기준 버전: `v0.1.56`
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 ## 기준 디자인
@@ -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`는 화면에서 바로 편집할 수 있다.
@@ -49,6 +50,11 @@
 - `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다.
 - `TIME TABLE` 숫자 영역은 선택/드래그로 텍스트가 잡히지 않도록 막아두었다.
 - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
 - `TIME TABLE` 라벨은 왼쪽 클릭 시 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 시 붙여넣기 메뉴를 연다.
 - `TIME TABLE` 라벨 오른쪽의 `?` 아이콘으로 복사/붙여넣기 사용법을 바로 볼 수 있다.
 - 타임테이블 복사/붙여넣기 결과는 오른쪽 아래 상태 토스트로 바로 안내한다.
 - 모바일과 태블릿처럼 `TIME TABLE`이 아래로 내려가는 구간에서는 6칸 그리드가 남는 폭을 더 넓게 채우도록 조정했다.
 - 미니 달력의 월 이동, 연도 선택, 날짜 버튼은 `mousedown.prevent`로 포커스만 잡히고 실제 이동은 두 번째 클릭에 되는 느낌을 줄이도록 보정했다.
 - 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다.
 - 달력 상단은 월 좌우 화살표, 클릭형 연도 선택, `TODAY` 버튼 구조로 동작한다.
 - 입력 내용이 있는 날짜는 달력 하단에 빨간 점으로 표시된다.
@@ -121,7 +127,6 @@
 ## 다음 권장 작업
 - 관리자 페이지에 사용자 검색, 상태 필터, 최근 접속/문서 수 기준 정렬 UX를 추가한다.
 - 목표 화면에 완료 처리와 보관 상태를 분리해서, 진행 중 목표와 지난 목표를 더 명확하게 나눈다.
 - `READ NEXT`의 자동 제안 규칙을 더 자연스럽게 다듬고, 빈 상태 문구도 상황별로 정리한다.
 - 공유용 이미지 저장 기능을 인쇄 레이아웃과 같은 기준으로 설계하고 구현한다.
@@ -177,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
@@ -18,6 +18,7 @@
 - [x] `TIME TABLE`을 마우스 드래그로 칠할 수 있게 만든다.
 - [x] `TIME TABLE` 드래그가 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 처리한다.
 - [x] 선택된 `TIME TABLE` 구간을 기준으로 `TOTAL TIME`을 자동 계산한다.
 - [x] 원하는 날짜의 `TIME TABLE`을 다른 날짜로 복사할 수 있게 한다.
 ## 2단계: 달력과 이동 기능
@@ -33,6 +34,7 @@
 - [x] 달력 상단은 좌우 화살표로 월 이동하는 구조가 더 적합하다.
 - [x] 연도 클릭 시 연도 선택 UI가 열려야 한다.
 - [x] 오늘 날짜로 즉시 돌아가는 버튼이 필요하다.
 - [x] 모바일에서 플래너 래핑 카드 여백을 줄이고 타임테이블은 롱터치 후 드래그로만 편집되게 한다.
 ## 3단계: 목표와 회고 기능
@@ -87,6 +89,7 @@
 - [ ] 공유를 위한 이미지 저장 기능을 추가한다.
 - [x] Docker 배포 구조를 정리한다.
 - [x] UGREEN NAS 기준 `docker-compose.yml` 초안을 작성한다.
 - [x] 운영 링크 미리보기용 사이트 제목/소개글 메타 태그와 파비콘을 추가한다.
 - [x] 백엔드 기본 스캐폴딩을 추가한다.
 - [x] PostgreSQL 전환 초안을 적용한다.
 - [x] 로그인 화면 문구와 관리자 정보 노출 지점을 일반 사용자 기준으로 정리한다.
@@ -103,4 +106,4 @@
 - [x] 메일 발송 인프라와 발신 도메인 정책을 Resend 기준으로 확정한다.
 - [x] 관리자 페이지에서 계정 비활성화 / 강제 로그아웃 / 삭제 기능을 추가한다.
 - [x] 관리자 페이지에서 사용자별 문서 상세 조회 기능을 추가한다.
- [ ] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.
+- [x] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.
--- 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/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "ten-minute-planner",
-  "version": "0.1.52",
+  "version": "0.1.56",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ten-minute-planner",
-      "version": "0.1.52",
+      "version": "0.1.56",
      "dependencies": {
        "vue": "^3.5.13"
      },
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "ten-minute-planner",
  "private": true,
-  "version": "0.1.52",
+  "version": "0.1.56",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- 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
@@ -44,6 +44,7 @@ const GUIDE_TOOLTIP_STORAGE_KEY = 'ten-minute-guide-tooltips-hidden'
 const DDAY_DISABLED_STORAGE_KEY = 'ten-minute-dday-disabled-dates'
 const CARRYOVER_CHECK_POLICY_STORAGE_KEY = 'ten-minute-carryover-check-policy'
 const CARRYOVER_CHECK_POLICIES = ['ask', 'all', 'current']
 const TIMETABLE_CLIPBOARD_PREFIX = 'TEN_MINUTE_TIMETABLE:'
 const screenMode = ref('planner')
 const viewMode = ref('focus')
 const printLayout = ref('single')
@@ -131,6 +132,14 @@ const adminUsers = ref([])
 const adminRecentLogins = ref([])
 const adminSelectedUserId = ref(null)
 const adminUserDetail = ref(null)
 const timetableClipboard = ref(null)
 const timetableContextMenu = ref({
  open: false,
  x: 0,
  y: 0,
  dateKey: '',
  record: null,
 })
 const hours = [
  '6', '7', '8', '9', '10', '11', '12',
@@ -520,6 +529,7 @@ const secondaryDate = computed(() => {
 })
 const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value))
 const secondaryDateKey = computed(() => toKey(secondaryDate.value))
 function getDateDisplay(date) {
  const main = `${date.getFullYear()}. ${`${date.getMonth() + 1}`.padStart(2, '0')}. ${`${date.getDate()}`.padStart(2, '0')}.`
@@ -912,6 +922,11 @@ function handleGlobalKeydown(event) {
    event.preventDefault()
    closeCarryoverCheckPrompt()
  }
  if (event.key === 'Escape' && timetableContextMenu.value.open) {
    event.preventDefault()
    closeTimetableContextMenu()
  }
 }
 function clearTasks(record, indexes) {
@@ -969,6 +984,115 @@ function carryIncompleteTasksToNextDay() {
      : `${nextDateLabel} 빈칸 ${copyCount}개까지만 이월했습니다.`
 }
 function normalizeTimetableClipboard(candidate) {
  if (!candidate || typeof candidate !== 'object') {
    return null
  }
  const sourceDateKey = typeof candidate.sourceDateKey === 'string' ? candidate.sourceDateKey : ''
  const timetable = Array.isArray(candidate.timetable) ? candidate.timetable : []
  if (!sourceDateKey || timetable.length !== timetableCellCount || timetable.some((value) => typeof value !== 'boolean')) {
    return null
  }
  return {
    sourceDateKey,
    timetable: [...timetable],
  }
 }
 async function copyTimetableToClipboard(record, sourceDateKey) {
  const clipboardPayload = normalizeTimetableClipboard({
    sourceDateKey,
    timetable: record.timetable,
  })
  if (!clipboardPayload) {
    setSyncFeedback('local', '복사할 타임테이블을 찾지 못했습니다.')
    return
  }
  timetableClipboard.value = clipboardPayload
  let copiedToSystemClipboard = false
  try {
    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(
        `${TIMETABLE_CLIPBOARD_PREFIX}${JSON.stringify(clipboardPayload)}`,
      )
      copiedToSystemClipboard = true
    }
  } catch (error) {
    copiedToSystemClipboard = false
  }
  setSyncFeedback(
    'local',
    copiedToSystemClipboard
      ? `${createDateLabel(sourceDateKey)} 타임테이블을 클립보드에 저장했습니다.`
      : `${createDateLabel(sourceDateKey)} 타임테이블을 앱 안에 복사했습니다.`,
  )
 }
 function pasteTimetableFromClipboard(record, targetDateKey, clipboardPayload = timetableClipboard.value) {
  const normalizedClipboard = normalizeTimetableClipboard(clipboardPayload)
  if (!normalizedClipboard) {
    setSyncFeedback('local', '붙여넣을 타임테이블이 없습니다.')
    return
  }
  record.timetable = [...normalizedClipboard.timetable]
  schedulePlannerSyncForRecord(record)
  timetableClipboard.value = normalizedClipboard
  setSyncFeedback(
    'local',
    normalizedClipboard.timetable.some(Boolean)
      ? `${createDateLabel(normalizedClipboard.sourceDateKey)} 타임테이블을 ${createDateLabel(targetDateKey)}에 붙여넣었습니다.`
      : `${createDateLabel(normalizedClipboard.sourceDateKey)} 타임테이블이 비어 있어 ${createDateLabel(targetDateKey)}도 비웠습니다.`,
  )
 }
 async function handleTimetableHeaderAction(record, dateKey) {
  closeTimetableContextMenu()
  await copyTimetableToClipboard(record, dateKey)
 }
 function openTimetableContextMenu(record, dateKey, event) {
  timetableContextMenu.value = {
    open: true,
    x: event.clientX,
    y: event.clientY,
    dateKey,
    record,
  }
 }
 function closeTimetableContextMenu() {
  timetableContextMenu.value = {
    open: false,
    x: 0,
    y: 0,
    dateKey: '',
    record: null,
  }
 }
 function pasteTimetableToContextTarget() {
  const { record, dateKey } = timetableContextMenu.value
  if (!record || !dateKey) {
    closeTimetableContextMenu()
    return
  }
  pasteTimetableFromClipboard(record, dateKey)
  closeTimetableContextMenu()
 }
 function updateMemo(record, { index, value }) {
  record.memo[index].text = value
  schedulePlannerSyncForRecord(record)
@@ -2841,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 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-4 flex justify-end">
+          <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"
@@ -2851,27 +2975,29 @@ onBeforeUnmount(() => {
              {{ isCompactMobile ? 'INFO' : 'OPEN SIDE PANEL' }}
            </button>
          </div>
-          <PlannerPage
+            <PlannerPage
-            :date-main="selectedDateDisplay.main"
+              :date-main="selectedDateDisplay.main"
-            :date-weekday="selectedDateDisplay.weekday"
+              :date-weekday="selectedDateDisplay.weekday"
-            :date-weekday-tone="selectedDateDisplay.weekdayTone"
+              :date-weekday-tone="selectedDateDisplay.weekdayTone"
-            :dday="plannerDday"
+              :dday="plannerDday"
-            :show-dday="showPlannerDday"
+              :show-dday="showPlannerDday"
-            :comment="planner.comment"
+              :comment="planner.comment"
-            :total-time="formatTotalTimeKorean(planner)"
+              :total-time="formatTotalTimeKorean(planner)"
-            :tasks="planner.tasks"
+              :tasks="planner.tasks"
-            :memo="planner.memo"
+              :memo="planner.memo"
-            :hours="hours"
+              :hours="hours"
-            :timetable="planner.timetable"
+              :timetable="planner.timetable"
-            @update:comment="updateComment(planner, $event)"
+              @update:comment="updateComment(planner, $event)"
-            @update:task-label="updateTaskLabel(planner, $event)"
+              @update:task-label="updateTaskLabel(planner, $event)"
-            @update:task-title="updateTaskTitle(planner, $event)"
+              @update:task-title="updateTaskTitle(planner, $event)"
-            @toggle:task="toggleTask(planner, $event)"
+              @toggle:task="toggleTask(planner, $event)"
-            @clear:tasks="clearTasks(planner, $event)"
+              @clear:tasks="clearTasks(planner, $event)"
-            @update:memo-label="updateMemoLabel(planner, $event)"
+              @update:memo-label="updateMemoLabel(planner, $event)"
-            @update:memo="updateMemo(planner, $event)"
+              @update:memo="updateMemo(planner, $event)"
-            @update:timetable="updateTimetable(planner, $event)"
+              @update:timetable="updateTimetable(planner, $event)"
-          />
+              @timetable-action="handleTimetableHeaderAction(planner, selectedDateKey)"
              @timetable-contextmenu="openTimetableContextMenu(planner, selectedDateKey, $event)"
            />
        </div>
        <aside
@@ -3191,6 +3317,8 @@ onBeforeUnmount(() => {
              @update:memo-label="updateMemoLabel(planner, $event)"
              @update:memo="updateMemo(planner, $event)"
              @update:timetable="updateTimetable(planner, $event)"
              @timetable-action="handleTimetableHeaderAction(planner, selectedDateKey)"
              @timetable-contextmenu="openTimetableContextMenu(planner, selectedDateKey, $event)"
            />
          </div>
          <div class="print-hidden overflow-hidden" :style="spreadPageFrameStyle">
@@ -3215,6 +3343,8 @@ onBeforeUnmount(() => {
              @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
              @update:memo="updateMemo(secondaryPlanner, $event)"
              @update:timetable="updateTimetable(secondaryPlanner, $event)"
              @timetable-action="handleTimetableHeaderAction(secondaryPlanner, secondaryDateKey)"
              @timetable-contextmenu="openTimetableContextMenu(secondaryPlanner, secondaryDateKey, $event)"
            />
          </div>
        </div>
@@ -3333,6 +3463,42 @@ onBeforeUnmount(() => {
      </div>
    </div>
      <div
        v-if="timetableContextMenu.open"
        class="print-hidden fixed inset-0 z-40"
        @click="closeTimetableContextMenu"
        @contextmenu.prevent="closeTimetableContextMenu"
      >
        <section
          class="absolute z-50 min-w-[220px] rounded-[24px] border border-stone-200 bg-white p-3 shadow-[0_24px_80px_rgba(28,25,23,0.18)]"
          :style="{
            left: `${Math.min(timetableContextMenu.x, windowWidth - 236)}px`,
            top: `${timetableContextMenu.y}px`,
          }"
          @click.stop
          @contextmenu.prevent
        >
          <p class="px-2 pb-2 text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">Time Table Menu</p>
          <button
            type="button"
            class="flex w-full items-center justify-between rounded-2xl px-3 py-3 text-left text-sm font-semibold transition"
            :class="timetableClipboard ? 'text-stone-800 hover:bg-[#f7f2ea]' : 'cursor-not-allowed text-stone-400'"
            :disabled="!timetableClipboard"
            @click="pasteTimetableToContextTarget"
          >
            <span>현재 날짜에 붙여넣기</span>
            <span class="text-[10px] font-bold tracking-[0.14em] text-stone-400">
              {{ timetableClipboard ? '준비됨' : '비어 있음' }}
            </span>
          </button>
          <p
            class="mt-2 rounded-2xl bg-[#faf7f2] px-3 py-3 text-[11px] font-semibold leading-5 text-stone-500"
          >
            {{ timetableClipboard ? `${createDateLabel(timetableClipboard.sourceDateKey)} 타임테이블이 복사되어 있습니다.` : '먼저 다른 날짜의 TIME TABLE 라벨을 왼쪽 클릭해 복사해 주세요.' }}
          </p>
        </section>
      </div>
      <AuthDialog
        :open="authDialogOpen"
        :mode="authMode"
@@ -3500,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
--- a/src/components/AdminDashboard.vue
+++ b/src/components/AdminDashboard.vue
@@ -1,4 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
 const props = defineProps({
  summary: {
    type: Object,
@@ -45,6 +47,10 @@ const emit = defineEmits([
  'delete-user',
 ])
 const userSearch = ref('')
 const userStatusFilter = ref('all')
 const userSort = ref('lastLoginDesc')
 function formatDate(value) {
  if (!value) {
    return '기록 없음'
@@ -86,6 +92,61 @@ function getPlannerSummary(payload) {
    memoCount: memo.filter((item) => item?.text?.trim?.() || item?.label?.trim?.()).length,
  }
 }
 const filteredUsers = computed(() => {
  const search = userSearch.value.trim().toLowerCase()
  const filtered = props.users.filter((user) => {
    const matchesSearch = !search
      || String(user.id).includes(search)
      || user.nickname?.toLowerCase().includes(search)
      || user.email?.toLowerCase().includes(search)
    if (!matchesSearch) {
      return false
    }
    switch (userStatusFilter.value) {
      case 'active':
        return !user.disabledAt && user.isActiveRecently
      case 'disabled':
        return Boolean(user.disabledAt)
      case 'unverified':
        return !user.emailVerifiedAt
      case 'admin':
        return user.role === 'admin'
      case 'member':
        return user.role !== 'admin'
      default:
        return true
    }
  })
  return [...filtered].sort((left, right) => {
    switch (userSort.value) {
      case 'plannerDesc':
        return right.plannerEntryCount - left.plannerEntryCount || right.id - left.id
      case 'goalDesc':
        return right.goalCount - left.goalCount || right.id - left.id
      case 'createdDesc':
        return new Date(right.createdAt || 0).getTime() - new Date(left.createdAt || 0).getTime() || right.id - left.id
      case 'nicknameAsc':
        return String(left.nickname || '').localeCompare(String(right.nickname || ''), 'ko')
      case 'lastLoginDesc':
      default:
        return new Date(right.lastLoginAt || right.createdAt || 0).getTime()
          - new Date(left.lastLoginAt || left.createdAt || 0).getTime()
          || right.id - left.id
    }
  })
 })
 const filteredUsersSummary = computed(() => {
  const total = filteredUsers.value.length
  const disabled = filteredUsers.value.filter((user) => user.disabledAt).length
  const active = filteredUsers.value.filter((user) => !user.disabledAt && user.isActiveRecently).length
  return { total, disabled, active }
 })
 </script>
 <template>
@@ -178,6 +239,53 @@ function getPlannerSummary(payload) {
          {{ message }}
        </p>
        <div class="mt-5 grid gap-3 rounded-[24px] border border-stone-200 bg-[#fcfaf6] p-4 md:grid-cols-[minmax(0,1.2fr)_180px_180px]">
          <label class="grid gap-2">
            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">검색</span>
            <input
              v-model="userSearch"
              type="text"
              placeholder="닉네임, 이메일, ID 검색"
              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition placeholder:text-stone-400 focus:border-stone-400"
            />
          </label>
          <label class="grid gap-2">
            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">상태 필터</span>
            <select
              v-model="userStatusFilter"
              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
            >
              <option value="all">전체 사용자</option>
              <option value="active">최근 활동</option>
              <option value="disabled">비활성화</option>
              <option value="unverified">미인증</option>
              <option value="member">일반 사용자</option>
              <option value="admin">관리자</option>
            </select>
          </label>
          <label class="grid gap-2">
            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">정렬</span>
            <select
              v-model="userSort"
              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
            >
              <option value="lastLoginDesc">최근 접속순</option>
              <option value="plannerDesc">문서 많은 순</option>
              <option value="goalDesc">목표 많은 순</option>
              <option value="createdDesc">최근 가입순</option>
              <option value="nicknameAsc">이름순</option>
            </select>
          </label>
        </div>
        <div class="mt-4 flex flex-wrap items-center gap-2 text-[11px] font-bold tracking-[0.12em] text-stone-500">
          <span class="rounded-full bg-white px-3 py-2">표시 {{ filteredUsersSummary.total }}명</span>
          <span class="rounded-full bg-white px-3 py-2">활동 {{ filteredUsersSummary.active }}명</span>
          <span class="rounded-full bg-white px-3 py-2">비활성 {{ filteredUsersSummary.disabled }}명</span>
        </div>
        <div class="mt-5 overflow-hidden rounded-[24px] border border-stone-200 bg-white">
          <div class="hidden grid-cols-[84px_minmax(0,1.2fr)_110px_150px_90px_90px_150px_190px] gap-3 border-b border-stone-200 bg-[#f8f4ed] px-5 py-4 text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500 xl:grid">
            <span>ID</span>
@@ -192,7 +300,7 @@ function getPlannerSummary(payload) {
          <div class="divide-y divide-stone-200">
            <article
-              v-for="user in users"
+              v-for="user in filteredUsers"
              :key="user.id"
              class="px-5 py-4"
            >
@@ -273,10 +381,10 @@ function getPlannerSummary(payload) {
            </article>
            <div
-              v-if="!busy && users.length === 0"
+              v-if="!busy && filteredUsers.length === 0"
              class="px-5 py-10 text-center text-sm font-semibold text-stone-500"
            >
-              표시할 사용자가 없습니다.
+              조건에 맞는 사용자가 없습니다.
            </div>
          </div>
        </div>
--- a/src/components/GuideTooltip.vue
+++ b/src/components/GuideTooltip.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeUnmount, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 const props = defineProps({
  title: {
@@ -28,21 +28,52 @@ const emit = defineEmits(['dismiss'])
 const open = ref(false)
 const rootRef = ref(null)
-
+const buttonRef = ref(null)
-function isCompactButtonLabel() {
+const popupStyle = ref({})
-  return String(props.buttonLabel || '').trim().length <= 1
+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) {
@@ -60,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>
@@ -71,12 +106,13 @@ 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 min-w-[22px] items-center justify-center 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="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'"
+      :class="isCompactButtonLabel ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
      aria-label="가이드 보기"
      :aria-expanded="open"
      @click.stop="toggle"
@@ -84,21 +120,24 @@ onBeforeUnmount(() => {
      {{ buttonLabel }}
    </button>
-    <span
+    <Teleport to="body">
-      v-if="open"
+      <span
-      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)]"
+        v-if="open"
-      @pointerdown.stop
+        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"
-      <span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
+        @pointerdown.stop
      <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"
      >
-        더 이상 보지 않기
+        <span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
-      </button>
+        <span class="mt-2 block break-words text-[11px] font-semibold leading-5 tracking-[0.04em] text-stone-700">{{ description }}</span>
-    </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/MiniCalendar.vue
+++ b/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>
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -66,11 +66,18 @@ const emit = defineEmits([
  'update:memo-label',
  'update:memo',
  'update:timetable',
  'timetable-action',
  '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())
@@ -88,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
@@ -99,17 +137,41 @@ function startTimetableDrag(index, event) {
  const shouldFill = event.button === 2 ? false : !props.timetable[index]
-  dragState = {
+  if (event.pointerType === 'touch') {
-    startIndex: index,
+    clearTimetableTouchTimer()
-    baseTimetable: [...props.timetable],
+    pendingTimetableTouchIndex.value = index
-    nextValue: shouldFill,
+    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
  }
@@ -119,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
 }
@@ -230,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)
@@ -304,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>
@@ -408,16 +548,32 @@ onBeforeUnmount(() => {
      </div>
      <section class="planner-sheet__timetable w-full shrink-0 lg:w-[210px]">
-        <div class="flex items-center gap-2 text-muted">
+        <div v-if="!props.readonly" class="flex items-center gap-2 text-muted">
          <button
            type="button"
            class="shrink-0 text-left transition hover:text-ink"
            @click="emit('timetable-action')"
            @contextmenu.prevent="emit('timetable-contextmenu', $event)"
          >
            <span class="shrink-0">TIME TABLE</span>
          </button>
          <span class="h-px flex-1 bg-ink"></span>
          <GuideTooltip
            title="Time Table"
            description="먼저 원하는 날짜의 TIME TABLE 제목을 클릭해 타임테이블을 저장하세요. 그다음 붙여넣을 날짜로 이동해서 TIME TABLE 제목을 마우스 오른쪽 클릭하면 손쉽게 같은 내용을 붙여넣을 수 있습니다."
            :dismissible="false"
          />
        </div>
        <div v-else class="flex items-center gap-2 text-muted">
          <span class="shrink-0">TIME TABLE</span>
          <span class="h-px flex-1 bg-ink"></span>
        </div>
        <div class="planner-sheet__timetable-scroll overflow-x-auto pb-1">
-          <div class="planner-sheet__timetable-grid min-w-[210px]">
+          <div class="planner-sheet__timetable-grid min-w-[210px] w-full">
            <div
              v-for="(hour, index) in hours"
              :key="`${hour}-${index}`"
-              class="flex h-[25px] border-b sm:h-[30px]"
+              class="grid h-[25px] grid-cols-[30px_repeat(6,minmax(0,1fr))] border-b sm:h-[30px] lg:grid-cols-[30px_repeat(6,30px)]"
              :class="index === hours.length - 1 ? 'border-ink' : 'border-line'"
            >
              <div
@@ -429,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'"
+                :data-timetable-index="index * 6 + quarter - 1"
-                class="h-full w-[30px] cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
+                :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
zenn	3dd3109c8b	v0.1.56 - 타임테이블 안내와 달력 클릭 보정	2026-04-24 17:14:04 +09:00
zenn	23dcd1c778	v0.1.55 - 타임테이블 복사 메뉴와 사용 안내 추가	2026-04-24 16:52:56 +09:00
zenn	8d6ac66677	v0.1.54 - 타임테이블 날짜 복사와 모바일 폭 보정	2026-04-24 16:39:38 +09:00
zenn	ce5872c93c	v0.1.53 - 관리자 목록 UX와 이월 배지 보정	2026-04-24 16:16:39 +09:00