fix(ux): 페이지 이동 시 스크롤 맨 위로 (ScrollToTop)

SPA 특성상 라우트가 바뀌어도 스크롤 위치가 유지돼, 강좌 목록을 내려가
강좌를 클릭하면 강좌 페이지가 중간부터 보이던 불편.
useLocation의 pathname 변화 시 window.scrollTo(0,0). App 최상단에 배치.

검증: 학습센터 3000px 스크롤 후 React Native 클릭 → 강좌 페이지 스크롤 0 확인.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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 (
-    <Routes>
+    <>
+      {/* 주소가 바뀔 때마다 화면을 맨 위로 — 강좌를 클릭하면 페이지 처음부터 보이게. */}
+      <ScrollToTop />
+      <Routes>
       {/* 비로그인 접근 가능 영역: 로그인·회원가입·계정 찾기.
           학습 포인트: 이 라우트들은 RequireAuth 바깥에 있어서 세션 없이도 열린다.
           당연한 얘기 같지만, 회원가입 페이지가 "로그인해야 접근 가능"하면 아무도 가입할 수 없다. */}
@@ -163,6 +167,7 @@ export default function App() {
       </Route>
       {/* 그 외 주소는 대시보드로 */}
       <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
+      </Routes>
+    </>
   );
 }

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;
+}