fix. lnb 모션 기획 수정 반영
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user