diff --git a/frontend/public/index.html b/frontend/public/index.html index 0ce55937e..b03502168 100644 --- a/frontend/public/index.html +++ b/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); + }); + } + })(); diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json index bbc5cf5eb..eb8d3861d 100644 --- a/frontend/public/manifest.json +++ b/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", diff --git a/frontend/public/pwabuilder-sw.js b/frontend/public/pwabuilder-sw.js index 6b8512fa3..f11945123 100644 --- a/frontend/public/pwabuilder-sw.js +++ b/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'; diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b57680281..70e3ade94 100644 --- a/frontend/src/App.tsx +++ b/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 ; case Status.FAILURE: - return <>에러 발생; + return ; case Status.SUCCESS: return ; } diff --git a/frontend/src/components/google-maps/marker/LargeDeltaAreaMarkerContainer/components/StyledClusterMarker.tsx b/frontend/src/components/google-maps/marker/LargeDeltaAreaMarkerContainer/components/StyledClusterMarker.tsx index fa730808e..a6411fc60 100644 --- a/frontend/src/components/google-maps/marker/LargeDeltaAreaMarkerContainer/components/StyledClusterMarker.tsx +++ b/frontend/src/components/google-maps/marker/LargeDeltaAreaMarkerContainer/components/StyledClusterMarker.tsx @@ -10,12 +10,12 @@ const StyledClusterMarker = ({ count }: StyledClusterMarkerProps) => { diff --git a/frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx b/frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx index 6b94e0f7d..a7164c63e 100644 --- a/frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx +++ b/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(); }; + const handleOpenHowToAppInstallModal = () => { + modalActions.openModal(); + }; + return ( @@ -122,6 +127,18 @@ const Menu = () => { 피드백 + + ); }; diff --git a/frontend/src/components/ui/modal/HowToAppInstallModal.tsx b/frontend/src/components/ui/modal/HowToAppInstallModal.tsx new file mode 100644 index 000000000..e912e83bb --- /dev/null +++ b/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 ( + + + {screen.get('isMobile') ? ( + <> + ) : ( + + + 크롬 브라우저인가요? + + + 주소창 오른쪽에 위치한 + 아이콘을 누르세요. + + 아쉽게도 사파리는 지원하지 않습니다 + + )} +
+ + IOS 모바일인가요? + + + 주소창 근처에 있는 + 아이콘을 누르세요. + + + 그리고 홈 화면에 추가 를 눌러주세요. + +
+
+ + 안드로이드인가요? + + + 주소창 오른쪽에 위치한 + 아이콘을 누르거나 + + + 아이콘을 누른 뒤, 앱 설치 버튼 + 을 누르세요. + +
+ + ); +}; + +export default HowToAppInstallModal;