diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 64eecec..7fbb856 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -8,6 +8,7 @@ import { Routes, Route, NavLink, Navigate, Outlet } from 'react-router-dom'; import { useAuth } from './AuthContext'; import { ALL_COURSES } from './courseCatalog'; import CourseShell from './components/CourseShell'; +import ScrollToTop from './components/ScrollToTop'; import LoginPage from './pages/LoginPage'; import SignupPage from './pages/SignupPage'; import FindAccountPage from './pages/FindAccountPage'; @@ -121,7 +122,10 @@ function Layout() { export default function App() { return ( - + <> + {/* 주소가 바뀔 때마다 화면을 맨 위로 — 강좌를 클릭하면 페이지 처음부터 보이게. */} + + {/* 비로그인 접근 가능 영역: 로그인·회원가입·계정 찾기. 학습 포인트: 이 라우트들은 RequireAuth 바깥에 있어서 세션 없이도 열린다. 당연한 얘기 같지만, 회원가입 페이지가 "로그인해야 접근 가능"하면 아무도 가입할 수 없다. */} @@ -163,6 +167,7 @@ export default function App() { {/* 그 외 주소는 대시보드로 */} } /> - + + ); } diff --git a/frontend/src/components/ScrollToTop.jsx b/frontend/src/components/ScrollToTop.jsx new file mode 100644 index 0000000..3176572 --- /dev/null +++ b/frontend/src/components/ScrollToTop.jsx @@ -0,0 +1,23 @@ +// 이 파일이 하는 일: 페이지(주소)가 바뀔 때마다 화면을 맨 위로 스크롤한다. +// +// ⚠️ 왜 필요한가 — SPA(단일 페이지 앱)의 대표적 불편. +// 일반 웹사이트는 링크를 누르면 브라우저가 "새 문서"를 받아 와서 자동으로 맨 위부터 보여준다. +// 그런데 React 같은 SPA는 실제로는 문서를 새로 받지 않고 "화면 내용만 갈아끼운다". +// 그래서 목록을 한참 스크롤해 내려가서 강좌를 클릭하면, 새 강좌 페이지가 뜨긴 하는데 +// 스크롤 위치는 그대로 남아서 페이지 중간부터 보이는 황당한 일이 생긴다. +// +// 해결: 주소(pathname)가 바뀌는 순간을 useEffect로 감지해 window를 맨 위로 올린다. +// 이 컴포넌트는 화면에 아무것도 그리지 않는다(null 반환) — "동작만 하는" 부품이다. +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +export default function ScrollToTop() { + const { pathname } = useLocation(); + + // pathname이 바뀔 때마다 실행. (같은 페이지 안에서의 상태 변화로는 안 움직인다) + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +}