feat: 앱 설치 버튼 구현 및 버튼 누르면 나오는 설치 방법 모달 구현

[#899]

frontend/public/index.html

@@ -62,16 +62,18 @@
         alert('잘못 된 api key 입니다.');
       }
 
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker
-          .register('pwabuilder-sw.js')
-          .then(function (registration) {
-            registration.scope;
-          })
-          .catch(function (error) {
-            console.log('Service Worker registration failed', error);
-          });
-      }
+      (function () {
+        if ('serviceWorker' in navigator) {
+          navigator.serviceWorker
+            .register('pwabuilder-sw.js')
+            .then(function (registration) {
+              registration.scope;
+            })
+            .catch(function (error) {
+              console.log('Service Worker registration failed', error);
+            });
+        }
+      })();
     </script>
 
     <!-- Google tag (gtag.js) -->

frontend/src/App.tsx

@@ -3,12 +3,14 @@ import Loading from 'components/ui/Loading';
 
 import CarFfeineMap from '@map/CarFfeineMap';
 
+import NotFound from '@ui/NotFound';
+
 const render = (status: Status) => {
   switch (status) {
     case Status.LOADING:
       return <Loading />;
     case Status.FAILURE:
-      return <>에러 발생</>;
+      return <NotFound />;
     case Status.SUCCESS:
       return <CarFfeineMap />;
   }

frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx

@@ -1,7 +1,7 @@
 import { AdjustmentsHorizontalIcon, Bars3Icon, UserCircleIcon } from '@heroicons/react/24/outline';
 import { css } from 'styled-components';
 
-import { HiArrowPath, HiOutlineChatBubbleOvalLeftEllipsis } from 'react-icons/hi2';
+import { HiOutlineArrowDownTray, HiOutlineChatBubbleOvalLeftEllipsis } from 'react-icons/hi2';
 
 import { useExternalValue } from '@utils/external-state';
 
@@ -16,6 +16,7 @@ import PersonalMenu from '@ui/Navigator/NavigationBar/PersonalMenu';
 import ServerStationFilters from '@ui/ServerStationFilters';
 import StationListWindow from '@ui/StationListWindow';
 import StationSearchWindow from '@ui/StationSearchWindow';
+import HowToAppInstallModal from '@ui/modal/HowToAppInstallModal';
 import LoginModal from '@ui/modal/LoginModal/LoginModal';
 
 import { displayNoneInMobile, displayNoneInWeb } from '@style/mediaQuery';
@@ -38,6 +39,10 @@ const Menu = () => {
     modalActions.openModal(<LoginModal />);
   };
 
+  const handleOpenHowToAppInstallModal = () => {
+    modalActions.openModal(<HowToAppInstallModal />);
+  };
+
   return (
     <FlexBox css={[fixedPositionCss, paddingCss, borderCss, flexCss]} noRadius="all" nowrap>
       <Button
@@ -52,13 +57,13 @@ const Menu = () => {
 
       <Button
         noRadius="all"
+        aria-label="카페인 앱 설치하기"
         css={displayNoneInWeb}
-        aria-label="새로 고침"
-        onClick={() => location.reload()}
+        onClick={handleOpenHowToAppInstallModal}
       >
-        <HiArrowPath size="2.8rem" fill="#555" />
+        <HiOutlineArrowDownTray size="2.8rem" stroke="#555" />
         <Text mt={0.5} variant="caption">
-          새로고침
+          앱설치
         </Text>
       </Button>
 
@@ -122,6 +127,18 @@ const Menu = () => {
           피드백
         </Text>
       </Button>
+
+      <Button
+        noRadius="all"
+        aria-label="카페인 앱 설치하기"
+        onClick={handleOpenHowToAppInstallModal}
+        css={displayNoneInMobile}
+      >
+        <HiOutlineArrowDownTray size="2.8rem" stroke="#555" />
+        <Text mt={0.5} variant="caption">
+          앱설치
+        </Text>
+      </Button>
     </FlexBox>
   );
 };

frontend/src/components/ui/modal/HowToAppInstallModal.tsx

@@ -0,0 +1,75 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { FlexBox } from 'car-ffeine-design-system';
+
+import { BsArrowDownSquare, BsPlusSquare } from 'react-icons/bs';
+import { FiMoreVertical } from 'react-icons/fi';
+import { IoShareOutline } from 'react-icons/io5';
+import { MdInstallDesktop, MdInstallMobile } from 'react-icons/md';
+
+import { modalActions } from '@stores/layout/modalStore';
+
+import useMediaQueries from '@hooks/useMediaQueries';
+
+import Button from '@common/Button';
+import Text from '@common/Text';
+
+const HowToAppInstallModal = () => {
+  const screen = useMediaQueries();
+
+  return (
+    <FlexBox
+      maxWidth={40}
+      width="calc(100vw - 4.8rem)"
+      rowGap={2}
+      pt={4}
+      px={6}
+      pb={9}
+      direction="column"
+    >
+      <Button mt={1} mr={0} mb={-6} ml="auto" onClick={modalActions.closeModal}>
+        <XMarkIcon width={28} />
+      </Button>
+      {screen.get('isMobile') ? (
+        <></>
+      ) : (
+        <FlexBox direction="column" rowGap={2} mb={3}>
+          <Text tag="h2" variant="h6">
+            크롬 브라우저인가요?
+          </Text>
+          <FlexBox tag="p" alignItems="center">
+            주소창 오른쪽에 위치한
+            <MdInstallDesktop size={20} display="inline-block" /> 아이콘을 누르세요.
+          </FlexBox>
+          <Text tag="h3">아쉽게도 사파리는 지원하지 않습니다</Text>
+        </FlexBox>
+      )}
+      <div>
+        <Text tag="h2" variant="h6" mb={2}>
+          IOS 모바일인가요?
+        </Text>
+        <FlexBox tag="p" alignItems="center" mb={2}>
+          주소창 근처에 있는 <IoShareOutline size={20} />
+          아이콘을 누르세요.
+        </FlexBox>
+        <FlexBox tag="p" alignItems="center">
+          그리고 홈 화면에 추가 <BsPlusSquare size={20} />를 눌러주세요.
+        </FlexBox>
+      </div>
+      <div>
+        <Text tag="h2" variant="h6" mt={3} mb={2}>
+          안드로이드인가요?
+        </Text>
+        <FlexBox tag="p" alignItems="center" mb={2}>
+          주소창 오른쪽에 위치한 <BsArrowDownSquare size={20} />
+          아이콘을 누르거나
+        </FlexBox>
+        <FlexBox tag="p" alignItems="center">
+          <FiMoreVertical /> 아이콘을 누른 뒤, 앱 설치 버튼
+          <MdInstallMobile size={20} />을 누르세요.
+        </FlexBox>
+      </div>
+    </FlexBox>
+  );
+};
+
+export default HowToAppInstallModal;