// 이 파일이 하는 일: 페이지(주소)가 바뀔 때마다 화면을 맨 위로 스크롤한다.
//
// ⚠️ 왜 필요한가 — 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;
}
