feat : 스크롤 상단 처리 (#29)

klmhyeonwoo · Jun 25, 2023 · 9dbd6a9 · 9dbd6a9
2 parents 7e52ac8 + 4461a17
commit 9dbd6a9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,6 +7,7 @@ import {
   SideHeader,
 } from "../src/components/common/component/component";
 import wrapper from "@/src/app/store";
+import ScrollToTop from "@/src/hook/ScrollToTop";
 
 function App({ Component, pageProps }: AppProps) {
   switch (pageProps.layout) {
@@ -78,6 +79,7 @@ function App({ Component, pageProps }: AppProps) {
             />
             <title> 멋쟁이사자처럼 </title>
           </Head>
+          <ScrollToTop />
           <GlobalStyles />
           <Header />
           <Component {...pageProps} />
@@ -152,6 +154,7 @@ function App({ Component, pageProps }: AppProps) {
             />
             <title> 멋쟁이사자처럼 </title>
           </Head>
+          <ScrollToTop />
           <GlobalStyles />
           <SideHeader />
           <Component {...pageProps} />

diff --git a/src/hook/ScrollToTop.ts b/src/hook/ScrollToTop.ts
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
+/* 리액트 새로고침 시, 최상단으로 이동 */
+
+export default function ScrollToTop() {
+  const { pathname } = useRouter();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}