refactor: 앱 설치 버튼 구현 및 버튼 누르면 나오는 설치 방법 설명 모달 구현한다

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/public/manifest.json

@@ -50,7 +50,8 @@
       "src": "icons/192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "density": "4.0"
+      "density": "4.0",
+      "purpose": "any maskable"
     },
     {
       "src": "icons/512.png",

frontend/public/pwabuilder-sw.js

@@ -3,7 +3,7 @@
 
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
 
-const CACHE = 'car-ffeine-v2';
+const CACHE = 'car-ffeine-v3';
 
 // TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
 const offlineFallbackPage = 'index.html';

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/google-maps/marker/LargeDeltaAreaMarkerContainer/components/StyledClusterMarker.tsx

@@ -10,12 +10,12 @@ const StyledClusterMarker = ({ count }: StyledClusterMarkerProps) => {
     <FlexBox
       p={4}
       borderRadius="50%"
-      bgColor="#D9E5FF"
+      bgColor="#d9e5ffcb"
       width="70px"
       height="70px"
       justifyContent="center"
       alignItems="center"
-      border={true}
+      border
       borderColor="#3366FF"
       borderWidth="1px"
     >

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={10}
+      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;