데스크탑으로 접속시 모바일로 접속 유도하기

정혜인·2024년 12월 3일

문제해결 프론트

간단한 문제 해결기

목록 보기

6/7

이번에 진행하는 프로젝트에서는, 지도와 캔버스를 함께 움직이는 프로젝트라 마우스 이벤트가 부정확한 문제점이 있었습니다.

애초에 저희 프로젝트는 모바일 서비스로 기획되기도 했고, 마우스 이벤트를 완전하지 않은 상태에서 내보내는 것보다는 모바일로 유도하는 것이 훨씬 낫겠다는 생각을 하였습니다.

인턴할 때 유사하게 이런 문제를 겪었어서 height를 고정하기 위해 많은 세팅을 걸어줬었는데, 그때 기억이 남아 있어서인지 훨씬 금방 해결할 수 있었습니다.

그때 당시 이렇게 가로로 접속하거나 데스크탑으로 접속하면 세로모드로 진행해달라는 화면을 띄우고 아무 이벤트가 동작하지 않도록 해주었었는데, 이것과 유사하게 만들어두면 되겠다고 생각했습니다.

https://nfm-trd-2023.apoc.day/#/

위 url이 제가 인턴할 때 만들었던 컨텐츠인데, 이 페이지도 모바일 전용 화면이라 데스크탑으로 접속했을 때 height에 맞게 화면을 채우고, 빈 화면은 약간 투명한 검은색으로 만들어주도록 구현했던 기억이 있습니다.

그래서 이번에는 정말 빠르게 구현할 수 있었는데, 코드를 어떻게 작성했는지 정도만 간단하게 작성해보려고 합니다!!

🔍 핵심 코드

가장 처음 접속하는 App.tsx 파일에서 관리해주었고, 아래 코드는 모두 App.tsx 파일에 대한 설명입니다.

1️⃣ 기기 감지 및 상태 관리

window.innerWidth와 navigator.userAgent를 사용해 화면 크기와 디바이스 정보를 기반으로 모바일 여부를 판단했습니다.

useEffect(() => {
  const checkIsMobile = () => {
    const isMobileScreen = window.innerWidth <= 768;

    const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
    const isMobileDevice = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
      userAgent,
    );

    setIsMobile(isMobileScreen || isMobileDevice);
  };

  checkIsMobile();

  window.addEventListener('resize', checkIsMobile);

  return () => window.removeEventListener('resize', checkIsMobile);
}, []);

2️⃣ 첫 방문 유저를 위한 온보딩 처리

localStorage를 사용해 방문 여부를 기록합니다. 첫 방문 시 온보딩 화면을 보여주고, 이후에는 일반 화면으로 이동합니다.

이 부분은 따로 포스팅해두었기에, https://velog.io/@happyhyep/%EC%98%A8%EB%B3%B4%EB%94%A9-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B5%AC%ED%98%84-%EC%8A%A4%ED%86%A0%EB%A6%AC 이 포스팅을 참고해주시면 될 것 같습니다!

useEffect(() => {
  if (location.pathname === '/') {
    const firstVisit = loadLocalData(AppConfig.KEYS.FIRST_VISIT);
    if (firstVisit === null) {
      saveLocalData(AppConfig.KEYS.FIRST_VISIT, 'true');
      setIsFirstVisit(true);
    } else if (firstVisit === 'true') {
      setIsFirstVisit(true);
    } else {
      setIsFirstVisit(false);
    }
  } else {
    setIsFirstVisit(false);
  }
}, [location.pathname]);

const handleOnboardingComplete = () => {
  saveLocalData(AppConfig.KEYS.FIRST_VISIT, 'false');
  setIsFirstVisit(false);
};

3️⃣ 데스크탑 유도 화면

모바일이 아닌 경우, 유도 메시지를 오버레이 형태로 표시하여 데스크탑 접근을 제한했습니다.

if (!isMobile) {
  return (
    <>
      <div className="overlay">
        <div className="message">
          모바일로 접속해주세요! <span>많은 관심 감사합니다.</span>
          <span>데스크탑 버전은 추후 업데이트될 예정이니 조금만 기다려주세요!</span>
        </div>
      </div>
      <IndexRoutes />
    </>
  );
}