feat: Safari 브라우저 사용 시 보이는 AutoplayGuideModal 생성

브라우저가 Safari일 때, 로그인 후 최초 접근일 때를 고려해서 모달이 보여지도록 구현했습니다.

추가로 영상 가운데 아이콘 부분 커서 안 잡히는 문제 해결했습니다.

src/commons/modals/SafariAutoplayGuideModal.tsx

@@ -0,0 +1,87 @@
+import { getCookie, setCookie } from 'commons/cookie/cookie';
+import React, { useEffect, useState } from 'react';
+
+interface AutoplayGuideModalProps {
+  browserInfo: string;
+}
+
+const SafariAutoplayGuideModal = ({ browserInfo }: AutoplayGuideModalProps) => {
+  const browsers = [
+    'Chrome',
+    'Opera',
+    'WebTV',
+    'Whale',
+    'Beonex',
+    'Chimera',
+    'NetPositive',
+    'Phoenix',
+    'Firefox',
+    'Safari',
+    'SkipStone',
+    'Netscape',
+    'Mozilla',
+  ];
+  const [isSafari, setIsSafari] = useState<boolean>(false);
+  const [currentBrowser, setCurrentBrowser] = useState<string>('');
+  const [isClose, setIsClose] = useState<boolean>(false);
+  const isFirstTime = getCookie('isFirstTime');
+
+  const handleCloseButton = () => {
+    setIsClose(true);
+    setCookie('isFirstTime', 'false', {
+      maxAge: 60000 * 60 * 24 * 30,
+    });
+  };
+
+  const handleBrowserInfo = async () => {
+    switch (true) {
+      case browserInfo.includes('edg'):
+        setCurrentBrowser('Edge');
+        break;
+      case browserInfo.includes('trident') || browserInfo.includes('msie'):
+        setCurrentBrowser('Internet Explorer');
+        break;
+      default:
+        if (currentBrowser === 'Safari') {
+          setIsSafari(true);
+        }
+
+        setCurrentBrowser(
+          browsers.find((browser) =>
+            browserInfo.includes(browser.toLowerCase()),
+          ) || 'Other',
+        );
+
+        break;
+    }
+  };
+
+  useEffect(() => {
+    handleBrowserInfo();
+  }, [currentBrowser]);
+
+  return isSafari && !isClose && Boolean(isFirstTime) ? (
+    <dialog
+      open={isClose}
+      className="w-[400px] h-[400px] rounded-md flex flex-col justify-around items-center z-50"
+    >
+      <button
+        className="absolute top-3 right-3 text-lg font-bold"
+        onClick={handleCloseButton}
+      >
+        X
+      </button>
+      <div className="flex flex-col gap-2 items-center">
+        <span className="font-bold text-3xl">Safari</span>
+        <span className="font-bold text-xl">자동재생 가이드</span>
+      </div>
+      <img></img>
+      <div className="flex flex-col gap-2 items-center font-normal text-lg">
+        <span className="">원활한 컨텐츠 사용을 위해</span>
+        <span className="">Safari 환경설정의 자동 재생을 켜주세요.</span>
+      </div>
+    </dialog>
+  ) : null;
+};
+
+export default SafariAutoplayGuideModal;

src/pages/home/components/HomeVideo.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+import AutoplayGuideModal from 'commons/modals/SafariAutoplayGuideModal';
 import VideoOverlay from './VideoOverlay';
 import { HomeVideoProps, VideoOverlayProps } from '../homeType';
 
@@ -17,6 +18,7 @@ const HomeVideo = (props: HomeVideoProps) => {
   const videoRef = useRef(null);
   const videoPlayerRef = useRef<HTMLVideoElement>(null);
   const [loading, setLoading] = useState(true);
+  const browserInfo = window.navigator.userAgent.toLowerCase();
 
   useEffect(() => {
     if (videoPlayerRef.current) {
@@ -110,6 +112,7 @@ const HomeVideo = (props: HomeVideoProps) => {
           <source src={url} type="video/mp4" />
         </video>
       </div>
+      <AutoplayGuideModal browserInfo={browserInfo} />
     </>
   );
 };

src/pages/home/components/VideoMuteIcon.tsx

@@ -3,7 +3,7 @@ import { VideoMuteIconProps } from '../homeType';
 const VideoMuteIcon = (props: VideoMuteIconProps) => {
   const { muted, opacity } = props;
   return (
-    <div className="absolute z-10 w-16 h-16 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+    <div className="absolute z-10 pointer-events-none w-16 h-16 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
       {!muted && (
         <img
           src="/assets/images/speaker.svg"

src/pages/login/components/LoginInputForm.tsx

@@ -5,7 +5,7 @@ import { ShelterLoginType, shelterLoginState } from 'recoil/shelterState';
 import * as Yup from 'yup';
 import { useMutation } from '@tanstack/react-query';
 import VLoginInputForm from './VLoginInputForm';
-import { setCookie } from '../../../commons/cookie/cookie';
+import { getCookie, setCookie } from '../../../commons/cookie/cookie';
 
 const LoginInputForm = () => {
   const [userInfo, setUserInfo] = useRecoilState(shelterLoginState);
@@ -21,6 +21,14 @@ const LoginInputForm = () => {
     password: Yup.string().required('비밀번호를 입력해주세요.'),
   });
 
+  const setBeginnerState = () => {
+    if (!getCookie('isFirstTime')) {
+      setCookie('isFirstTime', 'True', {
+        maxAge: 60000 * 60 * 24 * 30,
+      });
+    }
+  };
+
   const userFetch = async () => {
     const res = await fetch(`${process.env.REACT_APP_URI}/account/login`, {
       method: 'POST',
@@ -82,6 +90,7 @@ const LoginInputForm = () => {
       setCookie('loginState', 'Login', {
         maxAge: 60000 * 60 * 24,
       });
+      setBeginnerState();
 
       navigate('/');
     },