Merge pull request #578 from kss2002/feat/scroll-top

feat(landing): add scroll-to-top on route change for detail pages

Author: owjs3901

apps/landing/src/app/(detail)/components/ScrollToTop.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { useScrollToTop } from '@/hooks/use-scroll-top'
+
+export function ScrollToTop() {
+  useScrollToTop()
+  return null
+}

apps/landing/src/app/(detail)/components/layout.tsx

@@ -2,12 +2,14 @@ import { Box, Flex } from '@devup-ui/react'
 
 import { RightIndex } from '../docs/RightIndex'
 import { LeftMenu } from './LeftMenu'
+import { ScrollToTop } from './ScrollToTop'
 
 export default function Layout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <>
+      <ScrollToTop />
       <Flex maxW="1920px" minH="calc(100vh - 500px)" mx="auto">
         <Box display={['none', null, 'initial']} p="20px 16px" w="220px">
           <Box pos="sticky" top={['70px', null, '90px']}>

apps/landing/src/hooks/use-scroll-top.ts

@@ -0,0 +1,13 @@
+'use client'
+import { useLenis } from 'lenis/react'
+import { usePathname } from 'next/navigation'
+import { useEffect } from 'react'
+
+export function useScrollToTop() {
+  const pathname = usePathname()
+  const lenis = useLenis()
+
+  useEffect(() => {
+    lenis?.scrollTo(0, { immediate: true })
+  }, [lenis, pathname])
+}