fix. lnb 모션 기획 수정 반영

This commit is contained in:
clkim
2026-01-21 15:57:52 +09:00
parent 886328bc72
commit 9ec38c3bcf

View File

@@ -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<typeof setTimeout> | null = null
const isShowLnbWithScroll = ref(true)
const activeSection = ref<string>('')
const lnbList = computed<Record<string, PageDataLnbMenu>>(
@@ -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()
})
</script>
@@ -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;