Feature: 발표자 페이지 모바일 접근 막기

[Byeonjin]

Feature Description

발표자 페이지 모바일 접근 막기

To-Do

• modernizr 적용
• 적용한 modernizr 바탕으로 touchEvent 판별
• 판별 기준으로 발표자 페이지 접근 제한
• modernizr type 선언

추가 사항

modernizr 처리

🔗Modernizr download builder

상단 페이지에서 touch events를 선택하여 modernizr-custom.js를 빌드하여 이를 src 폴더에 위치시킵니다. 전역으로 Modernizr를 사용하기 위하여 index.html에 script 태그를 이용하여 이를 불러옵니다.

<script type="text/javascript" src="/src/modernizr.js"></script>

TypeScript 환경에서 작업하고 있기 때문에 이에 대한 type을 선언하였습니다. types 폴더 하위에 다양한 type들을 정의할 수 있도록 작업하려 하였으나 기존에 작업하였던 "types": ["vite-plugin-svgr/client"],과 typesRoot 설정이 겹쳐 svg 관련 코드가 정상적으로 동작하지 않을 것을 고려하여 global로 관리할 수 있도록 하였습니다.

src 하위에 global.d.ts를 정의하여 아래와 같이 type을 정의하였습니다.

declare global {
  interface ModernizrStatic {
    touchevents: boolean;
  }
  var Modernizr: ModernizrStatic;
}

export {};

이를 적용하기 위해 tsconfig.json에 다음을 추가하였습니다.

"include": ["src/**/*", "src/global.d.ts"],

이를 바탕으로 Modernizr는 아래와 같이 활용할 수 있습니다.

{Modernizr.touchevents ? (
            ""
          ) : ( ...