diff --git a/layers/components/blocks/Lnb.vue b/layers/components/blocks/Lnb.vue index 7aff4f1..e949a9f 100644 --- a/layers/components/blocks/Lnb.vue +++ b/layers/components/blocks/Lnb.vue @@ -17,8 +17,10 @@ const OBSERVER_OPTIONS = { rootMargin: '-20% 0px -60% 0px', // 상단 20%, 하단 60% 마진 threshold: 0, } as const +const AUTO_HIDE_MS = 5000 -const isShowLnbWithScroll = ref(false) +let autoHideTimer: ReturnType | null = null +const isShowLnbWithScroll = ref(true) const activeSection = ref('') const lnbList = computed>( @@ -72,6 +74,20 @@ const handleIntersection = (entries: IntersectionObserverEntry[]) => { const observer = new IntersectionObserver(handleIntersection, OBSERVER_OPTIONS) +const clearAutoHide = () => { + if (autoHideTimer) { + clearTimeout(autoHideTimer) + autoHideTimer = null + } +} + +const scheduleAutoHide = () => { + clearAutoHide() + autoHideTimer = setTimeout(() => { + isShowLnbWithScroll.value = false + }, AUTO_HIDE_MS) +} + // 요소 관찰 헬퍼 함수 const observeElement = (elementId: string) => { const element = document.getElementById(elementId) @@ -112,15 +128,28 @@ const handleLnbClick = (lnbItem: PageDataLnbMenu) => { } watch(directions, newVal => { - // 스크롤 업일 때만 표시, 다운이거나 멈춘 상태에서는 숨김 - isShowLnbWithScroll.value = newVal.top === true + // 스크롤 위로: 즉시 노출 + 5초 후 자동 숨김 + if (newVal.top === true) { + isShowLnbWithScroll.value = true + scheduleAutoHide() + return + } + + // 스크롤 아래로: 즉시 숨김 (딜레이 없음) + if (newVal.bottom === true) { + clearAutoHide() + isShowLnbWithScroll.value = false + } }) onMounted(() => { observeSections() + isShowLnbWithScroll.value = true + scheduleAutoHide() }) onUnmounted(() => { + clearAutoHide() observer.disconnect() }) @@ -193,7 +222,7 @@ onUnmounted(() => { z-index: -1; } .lnb-wrap.is-hidden { - @apply translate-x-[110%] delay-[5s]; + @apply translate-x-[110%]; } .lnb-main { @apply flex flex-col gap-4 items-end;