Merge pull request #283 from prgrms-web-devcourse-final-project/feat/282-scrollUp

[feat] 페이지 이동시 스크롤 위로 구현

Author: kangsuyeong

src/components/ScrollToTop.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router';
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth', // 부드럽게 스크롤 (즉시 이동은 'auto')
+    });
+  }, [pathname]);
+
+  return null;
+}
+
+export default ScrollToTop;

src/main.tsx

@@ -5,6 +5,7 @@ import { registerSW } from 'virtual:pwa-register';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './styles/index.css';
 import App from './App.tsx';
+import ScrollToTop from '@/components/ScrollToTop.tsx';
 
 // PWA 서비스 워커 등록
 const updateSW = registerSW({
@@ -24,6 +25,7 @@ const queryClient = new QueryClient();
 createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>
     <BrowserRouter>
+      <ScrollToTop />
       <App />
     </BrowserRouter>
     <ReactQueryDevtools initialIsOpen={false} />