refactor: toggle UI/UX

frontend/public/devLocalServiceWorker.js

@@ -1,3 +1,2 @@
 /* eslint-disable no-undef */
-importScripts('/firebase-messaging-sw.js');
-importScripts('/mockServiceWorker.js');
+importScripts('/firebase-messaging-sw.js', '/mockServiceWorker.js');

frontend/public/firebase-messaging-sw.js

@@ -19,10 +19,7 @@ const firebaseConfig = {
   measurementId: 'G-8SL2D547VW',
 };
 
-firebase.initializeApp({
-  ...firebaseConfig,
-  authDomain: 'pium-7ddfe.firebaseapp.com',
-});
+firebase.initializeApp(firebaseConfig);
 
 // Retrieve an instance of Firebase Messaging so that it can handle background
 // messages.

frontend/public/index.html

@@ -44,7 +44,6 @@
       media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
       href="/assets/android-icon-512x512.png"
     />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://pium.life/" />

frontend/src/components/@common/InstallPrompt/InstallPrompt.style.ts

@@ -18,14 +18,14 @@ export const Wrapper = styled.div`
 
   display: flex;
   flex-direction: column;
+  gap: 12px;
   justify-content: space-evenly;
 
   width: 100%;
   min-width: ${({ theme }) => theme.width.mobile};
   max-width: ${({ theme }) => theme.width.pad};
-  height: 120px;
   margin: 16px 0;
-  padding: 0 32px;
+  padding: 16px 32px;
 
   background: ${({ theme }) => theme.color.background};
   border-bottom: solid 2px ${({ theme }) => theme.color.grayLight};
@@ -48,24 +48,28 @@ export const GuideParagraph = styled.p`
   font: 500 1.6rem/2.2rem NanumSquareRound;
 `;
 
-export const IosGuide = styled.p`
+export const Guide = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   justify-content: center;
-  height: 30px;
+
   font: 600 1.6rem/2.2rem NanumsquareRound;
 `;
 
+export const InfoButton = styled.button`
+  width: 100%;
+  height: 30px;
+  background-color: ${({ theme }) => theme.color.grayLight};
+  border-radius: 8px;
+`;
+
 export const ButtonWrapper = styled.div`
   display: flex;
   gap: 16px;
   height: 30px;
   font: 500 1.8rem/2.2rem NanumSquareRound;
 
-  button {
-    width: 100%;
-    background-color: ${({ theme }) => theme.color.grayLight};
-    border-radius: 8px;
-  }
-
   :last-child {
     color: ${({ theme }) => theme.color.background};
     background-color: ${({ theme }) => theme.color.primary};

frontend/src/components/@common/InstallPrompt/index.tsx

@@ -1,19 +1,65 @@
 /* eslint-disable react/no-unescaped-entities */
+import { useMemo } from 'react';
 import {
   ButtonWrapper,
   ContentWrapper,
+  Guide,
   GuideParagraph,
-  IosGuide,
+  InfoButton,
   Wrapper,
 } from './InstallPrompt.style';
 import useInstallApp from 'hooks/@common/useInstallApp';
 import theme from 'style/theme.style';
+import FireFoxButton from 'assets/firefox_add_button.png';
 import SvgFill from '../SvgIcons/SvgFill';
 
 const InstallPrompt = () => {
   const { installApp, ignoreInstallApp, showPrompt, closePrompt } = useInstallApp();
 
   const isIos = /iPhone|iPod|iPad/i.test(navigator.userAgent);
+  const isFireFox = /Firefox/i.test(navigator.userAgent);
+
+  const promptGuide = useMemo(() => {
+    if (isIos) {
+      return (
+        <Guide>
+          <p>
+            하단 탭에 있는 <SvgFill icon="ios-share" size={16} fill={theme.color.sub} /> 아이콘에서
+            "홈 화면에 추가"를 통해 바로가기를 설치 할 수 있습니다.
+          </p>
+          <InfoButton type="button" onClick={ignoreInstallApp}>
+            웹으로 볼게요
+          </InfoButton>
+        </Guide>
+      );
+    }
+
+    // firefox에서는 beforeinstallPrompt를 제공하지 않기 때문에 따로 추가해줘야 합니다
+    if (isFireFox) {
+      return (
+        <Guide>
+          <img src={FireFoxButton} width={210} height={30} alt="파이어폭스 바로가기 추가" />
+          <p>
+            상단 탭에 있는 더보기를 클릭한 다음 '설치' 버튼을 통해 바로가기를 설치할 수 있습니다.
+          </p>
+          <InfoButton type="button" onClick={ignoreInstallApp}>
+            웹으로 볼게요
+          </InfoButton>
+        </Guide>
+      );
+    }
+
+    return (
+      <ButtonWrapper>
+        <InfoButton type="button" onClick={ignoreInstallApp}>
+          웹으로 볼게요
+        </InfoButton>
+        <InfoButton type="button" onClick={installApp}>
+          바로가기 추가
+        </InfoButton>
+      </ButtonWrapper>
+    );
+  }, [ignoreInstallApp, installApp, isFireFox, isIos]);
 
   return (
     <>
@@ -31,21 +77,7 @@ const InstallPrompt = () => {
               바로가기를 추가하시면 앱처럼 사용이 가능합니다. 추가하시겠습니까?
             </GuideParagraph>
           </ContentWrapper>
-          {isIos ? (
-            <IosGuide>
-              하단 탭에 있는 <SvgFill icon="ios-share" size={16} fill={theme.color.sub} />{' '}
-              아이콘에서 "홈 화면에 추가"를 통해 바로가기를 추가 할 수 있습니다.
-            </IosGuide>
-          ) : (
-            <ButtonWrapper>
-              <button type="button" onClick={ignoreInstallApp}>
-                웹으로 볼게요
-              </button>
-              <button type="button" onClick={installApp}>
-                바로가기 추가
-              </button>
-            </ButtonWrapper>
-          )}
+          {promptGuide}
         </Wrapper>
       )}
     </>

frontend/src/components/@common/Spinner/Spinner.style.ts

@@ -0,0 +1,26 @@
+import styled, { keyframes } from 'styled-components';
+
+const spinAnimation = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+// 스피너 컴포넌트 스타일을 정의합니다.
+export const Loader = styled.div<{ $size: string }>`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  margin: 0 auto;
+
+  border: ${({ $size }) => Number($size) * 0.1}px solid rgba(255, 255, 255, 0.3);
+  border-top: ${({ $size }) => Number($size) * 0.1}px solid #0074d9;
+  border-radius: 50%;
+
+  animation: ${spinAnimation} 1s linear infinite;
+`;
+
+// UI 컨테이너 스타일을 정의합니다.
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

frontend/src/components/@common/Spinner/index.tsx

@@ -0,0 +1,15 @@
+import { Loader, Wrapper } from './Spinner.style';
+
+interface SpinnerProps {
+  size?: string;
+}
+
+const Spinner = ({ size = '40' }: SpinnerProps) => {
+  return (
+    <Wrapper>
+      <Loader $size={size} />
+    </Wrapper>
+  );
+};
+
+export default Spinner;

frontend/src/components/mypage/PushAlert/index.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from 'react';
+import Spinner from 'components/@common/Spinner';
 import { PushAlertContent, PushAlertWrapper, WarnParagraph } from './PushAlert.style';
 import PushStatus from 'models/PushStatus';
 import PushToggle from './PushToggle';
@@ -11,7 +12,7 @@ const PushAlert = () => {
     <PushAlertWrapper>
       <PushAlertContent>
         <p>리마인더 알림 받기</p>
-        <Suspense fallback={<div>로딩중잉ㅂ니다?</div>}>
+        <Suspense fallback={<Spinner size="20" />}>
           <PushToggle />
         </Suspense>
       </PushAlertContent>

frontend/src/hooks/@common/useInstallApp.ts

@@ -1,53 +1,47 @@
-import { useEffect, useState } from 'react';
+import type { BeforeInstallPromptEvent } from 'types/global';
+import { useCallback, useEffect, useState } from 'react';
 import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId';
 import { getCookie, setCookie } from 'utils/cookie';
+import { URL_PATH } from 'constants/index';
 
-declare global {
-  interface WindowEventMap {
-    beforeinstallprompt: BeforeInstallPromptEvent;
-  }
-}
-
-interface BeforeInstallPromptEvent extends Event {
-  readonly platforms: Array<string>;
-  readonly userChoice: Promise<{
-    outcome: 'accepted' | 'dismissed';
-    platform: string;
-  }>;
-  prompt(): Promise<void>;
-}
+let deferredPrompt: BeforeInstallPromptEvent | null = null;
 
 const useInstallApp = () => {
   const { isSuccess: isLoggedIn } = useCheckSessionId(false);
 
-  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [showPrompt, setShowPrompt] = useState(JSON.parse(getCookie('PromptVisible') ?? 'true'));
 
   const installApp = async () => {
     if (!deferredPrompt) return;
     await deferredPrompt.prompt();
 
     await deferredPrompt.userChoice;
 
-    setDeferredPrompt(null);
+    deferredPrompt = null;
+    setShowPrompt(false);
   };
 
   const ignoreInstallApp = () => {
-    setCookie({ key: 'PromptVisible', value: 'false' });
-    setDeferredPrompt(null);
+    setCookie({ key: 'PromptVisible', value: 'false', path: URL_PATH.reminder });
+    deferredPrompt = null;
+    setShowPrompt(false);
   };
 
   const closePrompt = () => {
-    setDeferredPrompt(null);
+    deferredPrompt = null;
+    setShowPrompt(false);
   };
 
-  const beforeInstallPromptHandler = (event: BeforeInstallPromptEvent) => {
-    event.preventDefault();
-    const showPrompt = JSON.parse(getCookie('PromptVisible') ?? 'true');
-
-    if (!showPrompt) return;
+  // TODO: 해당 이벤트를 지원하지 않는 브라우저의 경우에 어떻게 처리를 할 것인가?
+  const beforeInstallPromptHandler = useCallback(
+    (event: BeforeInstallPromptEvent) => {
+      event.preventDefault();
+      if (!showPrompt) return;
 
-    setDeferredPrompt(event);
-  };
+      deferredPrompt = event;
+    },
+    [showPrompt]
+  );
 
   // TODO: 왜 '/'에서만 beforeinstallprompt가 이벤트 추가가 되나?  prompt가 나오고 나머지는 나오지 않는가?
   useEffect(() => {
@@ -56,9 +50,9 @@ const useInstallApp = () => {
     return () => {
       window.removeEventListener('beforeinstallprompt', beforeInstallPromptHandler);
     };
-  }, []);
+  }, [beforeInstallPromptHandler]);
 
-  return { showPrompt: deferredPrompt && isLoggedIn, installApp, ignoreInstallApp, closePrompt };
+  return { showPrompt: showPrompt && isLoggedIn, installApp, ignoreInstallApp, closePrompt };
 };
 
 export default useInstallApp;

frontend/src/hooks/@common/usePushAlert.ts

@@ -1,5 +1,4 @@
 import useWebPush from 'hooks/queries/auth/useWebPush';
-import FCMMessaging from 'models/FCMMessaging';
 import PushStatus from 'models/PushStatus';
 import useAddToast from './useAddToast';
 
@@ -13,28 +12,16 @@ const usePushAlert = () => {
       return;
     }
 
-    // subscribe를 하지 않으려면 해당 토큰을 제거해야 한다.
-
     const permission = await Notification.requestPermission();
     PushStatus.setPermission(permission);
 
     if (permission !== 'granted') {
       addToast({ type: 'info', message: '알림이 허용되지 않았습니다', time: 3000 });
       return;
     }
-    // TODO: 사용자가 처음 알림 설정을 한 것인지 아니면 기존에
-    try {
-      let token = PushStatus.getCurrentToken();
-
-      // 이중 throw... 이게 괜찮은걸까?
-      if (token === null) {
-        // TODO: 여기서 시간이 좀 걸림;;
-        token = await FCMMessaging.getCurrentToken();
 
-        if (token === null) throw new Error();
-      }
-
-      subscribe(token);
+    try {
+      subscribe();
     } catch (error) {
       addToast({ type: 'error', message: '구독중에 에러가 발생했습니다', time: 3000 });
     }

frontend/src/hooks/firebase/useGetToken.ts

@@ -0,0 +1,13 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import FCMMessaging from 'models/FCMMessaging';
+
+const useGetToken = () =>
+  useSuspenseQuery({
+    queryKey: ['getFCMToken'],
+    queryFn: FCMMessaging.getCurrentToken,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+  });
+
+export default useGetToken;