알림에 대한 권한을 미 설정시, 알림에 대한 설명을 모달로 표시

frontend/src/pages/KakaoOAuthLoginPage/KakaoOAuthLoginPage.tsx

@@ -1,15 +1,12 @@
 import ROUTES from '@_constants/routes';
 import { getInviteCode } from '@_common/inviteCodeManager';
 import { kakaoOAuth } from '@_apis/auth';
-import { requestPermission } from '@_service/notification';
 import { setToken } from '@_utils/tokenManager';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import useServeToken from '@_hooks/mutaions/useServeToken';
 
 export default function KakaoOAuthLoginPage() {
   const navigate = useNavigate();
-  const { mutate: serveToken } = useServeToken();
 
   useEffect(() => {
     const loginKakaoOAuth = async () => {
@@ -23,7 +20,7 @@ export default function KakaoOAuthLoginPage() {
 
       const response = await kakaoOAuth(code);
       setToken(response.data.accessToken);
-      requestPermission(serveToken);
+
       const inviteCode = getInviteCode();
       if (inviteCode) {
         navigate(`${ROUTES.darakbangInvitationRoute}?code=${inviteCode}`);
@@ -34,7 +31,7 @@ export default function KakaoOAuthLoginPage() {
     };
 
     loginKakaoOAuth();
-  }, [navigate, serveToken]);
+  }, [navigate]);
 
   return null;
 }

frontend/src/pages/MainPage/MainPage.style.ts

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 
 export const headerButton = css`
   background: none;
@@ -11,3 +11,8 @@ export const headerLeft = css`
   align-items: center;
   font-size: 100%;
 `;
+
+export const ModalContent = (props: { theme: Theme }) => css`
+  ${props.theme.typography.s1}
+  margin: 5rem;
+`;

frontend/src/pages/MainPage/MainPage.tsx

@@ -1,6 +1,6 @@
 import * as S from './MainPage.style';
 
-import { Fragment, useMemo, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import MoimTabBar, { MainPageTab } from '@_components/MoimTabBar/MoimTabBar';
 import OptionsPanel, {
   OptionsPanelOption,
@@ -28,10 +28,14 @@ import useMyRoleInDarakbang from '@_hooks/queries/useMyDarakbangRole';
 import { useNavigate } from 'react-router-dom';
 import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById';
 import useServeToken from '@_hooks/mutaions/useServeToken';
+import Modal from '@_components/Modal/Modal';
+import { useTheme } from '@emotion/react';
+import Button from '@_components/Button/Button';
 
 export default function MainPage() {
   const navigate = useNavigate();
   const { mutate } = useServeToken();
+  const theme = useTheme();
   const [currentTab, setCurrentTab] = useState<MainPageTab>('모임목록');
   const [isDarakbangMenuOpened, setIsDarakbangMenuOpened] = useState(false);
 
@@ -41,6 +45,16 @@ export default function MainPage() {
   const nowDarakbangId = getLastDarakbangId();
   const { myRoleInDarakbang: myRoleInNowDarakbang } = useMyRoleInDarakbang();
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  useEffect(() => {
+    if (window.Notification && window.Notification.permission === 'default') {
+      setIsModalOpen(true);
+    }
+  }, []);
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
   const handleTabClick = (tab: MainPageTab) => {
     setCurrentTab(tab);
   };
@@ -169,6 +183,17 @@ export default function MainPage() {
 
       <NavigationBarWrapper>
         <NavigationBar />
+        {isModalOpen && (
+          <Modal onClose={handleModalClose}>
+            <div css={S.ModalContent({ theme })}>
+              알림을 허용하시면 모임에 대한 알림을 받을 수 있습니다.
+              <br /> 우측 상단에 알림 버튼을 눌러주세요
+            </div>
+            <Button shape="bar" onClick={handleModalClose}>
+              닫기
+            </Button>
+          </Modal>
+        )}
       </NavigationBarWrapper>
     </Fragment>
   );

frontend/src/pages/NotificationPage/NotificationPage.style.ts

@@ -0,0 +1,6 @@
+import { css, Theme } from '@emotion/react';
+
+export const ModalContent = (props: { theme: Theme }) => css`
+  ${props.theme.typography.s1}
+  margin: 5rem;
+`;

frontend/src/pages/NotificationPage/NotificationPage.tsx

@@ -4,29 +4,60 @@ import InformationLayout from '@_layouts/InformationLayout/InformationLayout';
 import NotificationList from '@_components/NotificationList/NotificationList';
 import { useNavigate } from 'react-router-dom';
 import useNotification from '@_hooks/queries/useNotification';
+import { Fragment, useEffect, useState } from 'react';
+import Modal from '@_components/Modal/Modal';
+import Button from '@_components/Button/Button';
+import { useTheme } from '@emotion/react';
+import * as S from './NotificationPage.style';
 
 export default function NotificationPage() {
   const navigate = useNavigate();
+  const theme = useTheme();
   const { notifications, isLoading } = useNotification();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  useEffect(() => {
+    if (window.Notification && window.Notification.permission === 'denied') {
+      setIsModalOpen(true);
+    }
+  }, []);
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
   if (isLoading) {
     return <div>Loading...</div>;
   }
   if (!notifications) {
     return <div>Failed to load my information.</div>;
   }
   return (
-    <InformationLayout>
-      <InformationLayout.Header>
-        <InformationLayout.Header.Left>
-          <div onClick={() => navigate(GET_ROUTES.nowDarakbang.main())}>
-            <BackLogo />
+    <Fragment>
+      <InformationLayout>
+        <InformationLayout.Header>
+          <InformationLayout.Header.Left>
+            <div onClick={() => navigate(GET_ROUTES.nowDarakbang.main())}>
+              <BackLogo />
+            </div>
+          </InformationLayout.Header.Left>
+          <InformationLayout.Header.Center>
+            알림
+          </InformationLayout.Header.Center>
+        </InformationLayout.Header>
+        <InformationLayout.ContentContainer>
+          <NotificationList notifications={notifications} />
+        </InformationLayout.ContentContainer>
+      </InformationLayout>
+      {isModalOpen && (
+        <Modal onClose={handleModalClose}>
+          <div css={S.ModalContent({ theme })}>
+            알림을 허용해야 모임에 대한 알림을 받을 수 있습니다.
+            <br /> 브라우저 환경에서 알림을 허용해주세요!
           </div>
-        </InformationLayout.Header.Left>
-        <InformationLayout.Header.Center>알림</InformationLayout.Header.Center>
-      </InformationLayout.Header>
-      <InformationLayout.ContentContainer>
-        <NotificationList notifications={notifications} />
-      </InformationLayout.ContentContainer>
-    </InformationLayout>
+          <Button shape="bar" onClick={handleModalClose}>
+            닫기
+          </Button>
+        </Modal>
+      )}
+    </Fragment>
   );
 }