파비콘 교체와 툴팁 표시 개선

2026-04-27 13:30:14 +09:00
parent e1c4a90249
commit e9f61b249e
6 changed files with 65 additions and 31 deletions
--- a/index.html
+++ b/index.html
@@ -28,7 +28,6 @@
    />
    <meta name="twitter:image" content="/og-image.png" />
    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>10 Minute Planner</title>
  </head>
  <body class="bg-stone-100">
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="10 Minute Planner">
-  <rect width="64" height="64" rx="14" fill="#f5f2eb"/>
-  <rect x="15" y="9" width="34" height="46" rx="3" fill="#fffaf1" stroke="#3f3a34" stroke-width="2"/>
-  <path d="M22 20h20M22 29h20M22 38h20" stroke="#8c7b6a" stroke-width="2" stroke-linecap="round"/>
-  <path d="M18 9v46" stroke="#c74b3f" stroke-width="3" stroke-linecap="round"/>
-  <text x="32" y="51" fill="#3f3a34" font-family="Arial, sans-serif" font-size="13" font-weight="700" text-anchor="middle">10</text>
-</svg>
--- a/public/og-image.png
+++ b/public/og-image.png
--- 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
@@ -306,7 +306,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 +413,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>