zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zenn
2026-04-27 13:30:14 +09:00
parent e1c4a90249
commit e9f61b249e
6 changed files with 65 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -28,7 +28,6 @@
/> />
<meta name="twitter:image" content="/og-image.png" /> <meta name="twitter:image" content="/og-image.png" />
<link rel="icon" type="image/png" href="/favicon.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> <title>10 Minute Planner</title>
</head> </head>
<body class="bg-stone-100"> <body class="bg-stone-100">

BIN
public/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 175 KiB

After

Width:  |  Height:  |  Size: 1.3 MiB

7
public/favicon.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 580 B

BIN
public/og-image.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

78
src/components/GuideTooltip.vue
View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, onBeforeUnmount, ref } from 'vue' import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
const props = defineProps({ const props = defineProps({
title: { title: {
@@ -28,18 +28,52 @@ const emit = defineEmits(['dismiss'])
const open = ref(false) const open = ref(false)
const rootRef = ref(null) const rootRef = ref(null)
const buttonRef = ref(null)
const popupStyle = ref({})
const isCompactButtonLabel = computed(() => String(props.buttonLabel || '').trim().length <= 1) const isCompactButtonLabel = computed(() => String(props.buttonLabel || '').trim().length <= 1)
function close() { function close() {
open.value = false 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) { if (!props.visible) {
return return
} }
open.value = !open.value open.value = !open.value
if (open.value) {
await nextTick()
updatePopupPosition()
}
} }
function closeFromOutside(event) { function closeFromOutside(event) {
@@ -57,10 +91,14 @@ function dismiss() {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
window.addEventListener('pointerdown', closeFromOutside) window.addEventListener('pointerdown', closeFromOutside)
window.addEventListener('resize', updatePopupPosition)
window.addEventListener('scroll', updatePopupPosition, true)
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener('pointerdown', closeFromOutside) window.removeEventListener('pointerdown', closeFromOutside)
window.removeEventListener('resize', updatePopupPosition)
window.removeEventListener('scroll', updatePopupPosition, true)
}) })
</script> </script>
@@ -68,9 +106,10 @@ onBeforeUnmount(() => {
<span <span
v-if="visible" v-if="visible"
ref="rootRef" ref="rootRef"
class="relative inline-flex" class="relative inline-flex print:hidden"
> >
<button <button
ref="buttonRef"
type="button" 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="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'"
@@ -81,21 +120,24 @@ onBeforeUnmount(() => {
{{ buttonLabel }} {{ buttonLabel }}
</button> </button>
<span <Teleport to="body">
v-if="open" <span
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" 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> </span>
</template> </template>

10
src/components/PlannerPage.vue
View File

@@ -306,7 +306,7 @@ onBeforeUnmount(() => {
</div> </div>
<div class="planner-sheet__body flex flex-col gap-5 py-[10px] lg:flex-row lg:gap-4"> <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> <section>
<div class="flex items-center gap-2 text-muted"> <div class="flex items-center gap-2 text-muted">
<span class="shrink-0">TASKS</span> <span class="shrink-0">TASKS</span>
@@ -413,16 +413,16 @@ onBeforeUnmount(() => {
<div v-if="!props.readonly" class="flex items-center gap-2 text-muted"> <div v-if="!props.readonly" class="flex items-center gap-2 text-muted">
<button <button
type="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')" @click="emit('timetable-action')"
@contextmenu.prevent="emit('timetable-contextmenu', $event)" @contextmenu.prevent="emit('timetable-contextmenu', $event)"
> >
<span class="shrink-0 transition-colors group-hover:text-ink">TIME TABLE</span> <span class="shrink-0">TIME TABLE</span>
<span class="h-px flex-1 bg-ink"></span>
</button> </button>
<span class="h-px flex-1 bg-ink"></span>
<GuideTooltip <GuideTooltip
title="Time Table" title="Time Table"
description="왼쪽 클릭으로 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 메뉴에서 현재 날짜에 붙여넣을 수 있습니다." description="먼저 원하는 날짜의 TIME TABLE 제목을 클릭해 타임테이블을 저장하세요. 그다음 붙여넣을 날짜로 이동해서 TIME TABLE 제목을 마우스 오른쪽 클릭하면 손쉽게 같은 내용을 붙여넣을 수 있습니다."
:dismissible="false" :dismissible="false"
/> />
</div> </div>