[Next.js] installHook.js:1 Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element

🚨 문제 상황

모달을 열면 console에 아래와 같은 에러가 떴다.

installHook.js:1 Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element: <div role=​"dialog" aria-modal=​"true" aria-labelledby=​"login-title" class=​"fixed inset-0 z-50 flex items-center justify-center">​…​</div>​
overrideMethod @ installHook.js:1
shouldSkipElement @ layout-router.tsx:139
InnerScrollAndFocusHandler.handlePotentialScroll @ layout-router.tsx:227
componentDidMount @ layout-router.tsx:294
react_stack_bottom_frame @ react-dom-client.development.js:23606
runWithFiberInDEV @ react-dom-client.development.js:871
commitLayoutEffectOnFiber @ react-dom-client.development.js:13070
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13246
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13215
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13163
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13163
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13052
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13047
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13254
recursivelyTraverseLayoutEffects @ react-dom-client.development.js:14120
commitLayoutEffectOnFiber @ react-dom-client.development.js:13129
flushLayoutEffects @ react-dom-client.development.js:16155
commitRoot @ react-dom-client.development.js:15996
commitRootWhenReady @ react-dom-client.development.js:15227
performWorkOnRoot @ react-dom-client.development.js:15146
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:16815
performWorkUntilDeadline @ scheduler.development.js:45
turbopack-hot-reloader-common.ts:43 [Fast Refresh] rebuilding
report-hmr-latency.ts:26 [Fast Refresh] done in 98ms
turbopack-hot-reloader-common.ts:43 [Fast Refresh] rebuilding
report-hmr-latency.ts:26 [Fast Refresh] done in 561ms

 

🥁 해결 방법

modal 창이 띄워지는 url로 이동할 때 scroll 옵션을 false로 추가한다.

• Link 태그를 사용해서 이동하는 경우: `<Link href="/auth/login" scroll={false}>로그인</Link>`
• useRouter로 이동하는 경우: `router.push('/auth/login', { scroll: false })`