[Enhancement] useIsMobile 훅 도입으로 sessionStorage 기반 반응형 처리 제거

[seorinn]

배경

모바일 여부를 sessionStorage에 저장하고 여러 컴포넌트에서 꺼내 쓰고 있습니다. 이 방식은 화면 크기가 변경되어도 반영되지 않고, 전역 상태처럼 관리되지 않아 일관성이 없습니다.

현재 코드

// src/pages/MainHome/index.tsx
const isMobile =
  window.matchMedia("(max-width: 768px)").matches ||
  /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
sessionStorage.setItem("isMobile", isMobile.toString()); // sessionStorage에 저장

// 다른 컴포넌트에서 꺼내 씀
sessionStorage.getItem("isMobile") === "true"
  ? navigation(`/event/${data.id}`)
  : window.open(`/event/${data.id}`);

문제점

• sessionStorage 값은 MainHome 방문 전까지 없음 → 다른 페이지 직접 접근 시 null
• 화면 크기 변경(반응형) 시 실시간 업데이트 안 됨
• 여러 컴포넌트에서 sessionStorage.getItem("isMobile") 직접 호출로 의존성 분산

개선 방향

// src/hooks/useIsMobile.ts
export function useIsMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = useState(
    () => window.matchMedia(`(max-width: ${breakpoint}px)`).matches
  );

  useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, [breakpoint]);

  return isMobile;
}

// 사용
const isMobile = useIsMobile();
isMobile ? navigation(`/event/${id}`) : window.open(`/event/${id}`);

관련 파일

• src/pages/MainHome/index.tsx
• src/components/PromotionBox/index.tsx
• src/components/PhotographerBox/index.tsx