모바일웹 백버튼 UX 대응

useSupportBack.ts

import { useCallback, useEffect, useRef } from 'react';
export function useSupportBack(listening: boolean, onBack: () => void) {
  const fnRef = useRef(onBack);

  const memoizedCallback = useCallback(() => {
    fnRef.current();
    window.removeEventListener('popstate', memoizedCallback);
  }, []);

  useEffect(() => {
    fnRef.current = onBack;
  });

  useEffect(() => {
    if (!listening) return;
    window.history.pushState(null, '');
    window.addEventListener('popstate', memoizedCallback);
    return () => {
      window.removeEventListener('popstate', memoizedCallback);
    };
  }, [listening]);
}