[C-ALARM] 알람의 UI 디자인 개선 및 버그 수정

next.config.js

@@ -5,8 +5,8 @@ const withPWA = require('@ducanh2912/next-pwa').default({
   dest: 'public',
   register: true,
   skipWaiting: true,
-  disable: prod ? false : true, // 나중에 true로 바꿔야함
-  // disable: true,
+  // disable: prod ? false : true, // 나중에 true로 바꿔야함
+  disable: false,
   // runtimeCaching,
 })
 

src/app/panel/MainPage.tsx

@@ -24,7 +24,7 @@ import useAxiosWithAuth from '@/api/config'
 import { AxiosInstance } from 'axios'
 import { IPagination } from '@/types/IPagination'
 import PwaInstallBanner from './PwaInstallBanner'
-// import PushAlertBanner from './PushAlertBanner'
+import PushAlertBanner from './PushAlertBanner'
 import MainBanner from '@/app/panel/main-page/MainBanner'
 import Tutorial from '@/components/Tutorial'
 import { MainPageTutorial } from '@/components/tutorialContent/MainPageTutorial'
@@ -190,7 +190,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
 
   return (
     <>
-      {/* <PushAlertBanner /> */}
+      <PushAlertBanner />
       {/* mobile view */}
       <div className="mobile-layout">
         <Container sx={{ ...containerStyle, paddingBottom: '2rem' }}>

src/app/panel/PushAlertBanner.tsx

@@ -6,11 +6,16 @@ import { AxiosInstance } from 'axios'
 import { useEffect, useState } from 'react'
 import { initializeApp } from 'firebase/app'
 import { getMessaging, onMessage, getToken } from 'firebase/messaging'
+import { EDeviceType } from '@/types/DeviceTypes'
+import useToast from '@/states/useToast'
+import useMedia from '@/hook/useMedia'
 
 const PushAlertBanner = () => {
+  const { isPc } = useMedia()
   const axiosInstance: AxiosInstance = useAxiosWithAuth()
   const [isShowPush, setIsShowPush] = useState<boolean>(false)
-  const [isScroll, setIsScroll] = useState<number>(1)
+  const [userAgent, setUserAgent] = useState<EDeviceType>(EDeviceType.OTHER)
+  const { openToast } = useToast()
 
   const handlePushFCM = () => {
     const firebaseConfig = initializeApp({
@@ -31,16 +36,23 @@ const PushAlertBanner = () => {
       .then((currentToken: any) => {
         if (currentToken) {
           axiosInstance
-            .post(
-              `${process.env.NEXT_PUBLIC_NEXT_PUBLIC_CSR_API}:8082/alarm/send-push`,
+            .put(
+              `${process.env.NEXT_PUBLIC_NEXT_PUBLIC_CSR_API}/api/v1/noti-pwa/spring/subscription`,
               {
-                token: currentToken,
-                title: '푸시 알림 테스트',
-                message: '푸시 알림 테스트 메시지입니다.',
+                firebaseToken: currentToken,
+                deviceInfo: userAgent,
               },
             )
             .then(() => {
               console.log('푸시 알림 전송 성공')
+              // 배너 아예 안보이기
+              setIsShowPush(false)
+              localStorage.setItem('isShowPush', 'false')
+            })
+            .catch(() => {
+              console.log('푸시 알림 전송 실패')
+              // 배너 일시적으로 가리기
+              setIsShowPush(false)
             })
         } else {
           console.log(
@@ -49,11 +61,17 @@ const PushAlertBanner = () => {
         }
       })
       .catch(() => {
-        console.log('An error occurred while retrieving token. ')
+        console.log('An error occurred while retrieving token.')
+        // 배너 일시적으로 가리기
+        setIsShowPush(false)
+        openToast({
+          message: '푸시 알림을 사용할 수 없습니다. 잠시후 다시 시도해주세요.',
+          severity: 'error',
+        })
       })
 
     onMessage(messaging, () => {
-      console.log('Message received. ')
+      console.log('Message received.')
     })
   }
 
@@ -63,52 +81,65 @@ const PushAlertBanner = () => {
         if (permission === 'granted') {
           console.log('Notification permission granted.')
           handlePushFCM()
-          setIsShowPush(false)
-          localStorage.setItem('isShowPush', 'false')
         } else {
           console.log('Unable to get permission to notify.')
         }
       })
     }
   }
 
-  const handleScroll = () => {
-    setIsScroll(window.scrollY)
-  }
+  // 유저의 기기 정보를 가져오는 부분: 알림 부분 참고
+  useEffect(() => {
+    if (navigator.userAgent.match(/(iPhone|iPod)/)) {
+      setUserAgent(EDeviceType.IPHONE)
+    } else if (navigator.userAgent.match(/android|Android/)) {
+      setUserAgent(EDeviceType.ANDROID)
+    } else if (navigator.userAgent.match(/mac|Mac/)) {
+      setUserAgent(EDeviceType.MACOS)
+    } else if (navigator.userAgent.match(/windows|Windows/)) {
+      setUserAgent(EDeviceType.WINDOWS)
+    } else {
+      setUserAgent(EDeviceType.OTHER)
+    }
+  }, [])
 
+  // PWA 알림 배너 노출 여부를 지정
   useEffect(() => {
     if (localStorage && localStorage.getItem('isShowPush') === 'false') {
       setIsShowPush(false)
     } else {
       setIsShowPush(true)
     }
-
-    window.addEventListener('scroll', handleScroll)
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
   }, [setIsShowPush])
 
   return (
     <>
       {isShowPush && (
         <Box
           position={'sticky'}
-          top={isScroll ? 0 : 57}
+          top={56}
           width={'100%'}
           sx={{
             backgroundColor: 'primary.main',
             zIndex: 3000,
           }}
         >
-          <Stack margin={1}>
-            <Typography color={'white'} variant="Caption">
+          <Stack padding={'0.5rem'} spacing={'1rem'}>
+            <Typography color={'white'} variant="Body1">
               사용하시는 브라우저는 알림 기능을 사용할 수 있습니다.
               사용하시겠습니까?
             </Typography>
-            <Stack direction="row">
-              <Button onClick={handlePush}>
+            <Stack
+              direction="row"
+              alignItems={'center'}
+              display={'flex'}
+              flexDirection={isPc ? 'row' : 'row-reverse'}
+            >
+              <Button
+                onClick={handlePush}
+                variant={'contained'}
+                color="secondary"
+              >
                 <Typography color={'white'} variant="Caption">
                   네
                 </Typography>

src/app/panel/PwaInstallBanner.tsx

@@ -135,7 +135,7 @@ const PwaInstallBanner = () => {
           <Stack margin={1} padding={1} spacing={'1rem'}>
             <Typography color={'white'} variant="Body1">
               사용하시는 브라우저는 PWA 기능을 사용할 수 있습니다.{' '}
-              {isPc ? '데스크탑' : '모바일'}에 설치하시겠습니까?
+              설치하시겠습니까?
             </Typography>
             <Stack
               direction="row"

src/app/panel/layout-panel/AlertIcon.tsx

@@ -120,6 +120,7 @@ const AlertIcon = () => {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const accessToken = useAuthStore.getState().accessToken
 
   const { target, spinner } = useInfiniteScroll({
     setPage,
@@ -131,8 +132,10 @@ const AlertIcon = () => {
   })
 
   useEffect(() => {
-    isNewAlarm(isLogin)
-  }, [pathname, searchParams, isLogin, isNewAlarm])
+    if (accessToken) {
+      isNewAlarm(isLogin, accessToken)
+    }
+  }, [pathname, searchParams, isLogin, isNewAlarm, accessToken])
 
   useEffect(() => {
     if (isDrawerOpen) {
@@ -201,9 +204,7 @@ const AlertIcon = () => {
           />
         </Badge>
       </IconButton>
-      {/* <CuModal open={isOpen} onClose={closeModal} title="잠깐!">
-        <ForbiddenDolphin message="알림 기능은 조금만 기다려주세요!!" />
-      </CuModal> */}
+
       <Drawer
         PaperProps={{
           sx: {
@@ -226,7 +227,6 @@ const AlertIcon = () => {
             height: '100dvh',
             pt: 7,
             backgroundColor: 'background.primary',
-            // overflowY: 'auto',
           }}
         >
           <Stack direction={'row'} mb={'0.25rem'}>
@@ -290,7 +290,7 @@ const AlertIcon = () => {
               </Stack>
 
               <Box sx={{ overflowY: 'auto', height: '75svh' }}>
-                <Stack height={'fit-content'}>
+                <Stack height={'fit-content'} padding={'0.15rem'}>
                   {alarms.length === 0 ? (
                     <NoDataDolphin
                       backgroundColor="transparent"

src/app/panel/layout-panel/alert-panel/AlertCard.tsx

@@ -11,6 +11,7 @@ import {
 import { SystemIcon, TeamIcon, MessageIcon } from './Icons'
 import { CloseIcon } from '@/icons'
 import { useRouter } from 'next/navigation'
+import Image from 'next/image'
 
 interface IAlertCard {
   alert: IAlarm
@@ -23,24 +24,22 @@ const AlertCard = ({ alert, handleDelete }: IAlertCard) => {
     <Card
       sx={{
         m: 2,
-        height: '4rem',
+        height: '6.5rem',
         display: 'flex',
         alignItems: 'center',
       }}
       key={alert.notificationId + alert.type}
     >
       <CardActionArea
         sx={{
-          height: '4rem',
+          height: '6.3rem',
           display: 'flex',
           alignItems: 'center',
         }}
         onClick={() => router.push(alert.redirectUrl)}
       >
         <Stack p={'0.5rem'} flex={1}>
-          {alert.type === AlarmType.SYSTEM && <SystemIcon fontSize="large" />}
-          {alert.type === AlarmType.TEAM && <TeamIcon fontSize="large" />}
-          {alert.type === AlarmType.MESSAGE && <MessageIcon fontSize="large" />}
+          <Image src={alert.iconUrl} alt={alert.type} width={50} height={50} />
         </Stack>
         <Stack
           direction={'row'}
@@ -49,18 +48,31 @@ const AlertCard = ({ alert, handleDelete }: IAlertCard) => {
           alignItems={'center'}
           flex={8}
         >
-          <Typography
-            variant="Body2"
-            sx={{
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              display: '-webkit-box',
-              WebkitLineClamp: '2',
-              WebkitBoxOrient: 'vertical',
-            }}
-          >
-            {alert.body}
-          </Typography>
+          <Stack display={'flex'}>
+            <Stack>
+              {alert.type === AlarmType.SYSTEM && <SystemIcon />}
+              {alert.type === AlarmType.TEAM && <TeamIcon />}
+              {alert.type === AlarmType.MESSAGE && <MessageIcon />}
+            </Stack>
+            <Stack
+              minHeight={'4rem'}
+              justifyContent={'center'}
+              alignItems={'center'}
+            >
+              <Typography
+                variant="Body2"
+                sx={{
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  display: '-webkit-box',
+                  WebkitLineClamp: '3',
+                  WebkitBoxOrient: 'vertical',
+                }}
+              >
+                {alert.body}
+              </Typography>
+            </Stack>
+          </Stack>
         </Stack>
       </CardActionArea>
       <Stack flex={1}>