feat : 라우팅 경로 수정 및 알림이 없을 때 보여줄 컴포넌트 생성 (#381)

prgrms-web-devcourse-final-project · Dec 9, 2024 · 1b7394d · 1b7394d
1 parent bbbeb02
commit 1b7394d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/src/components/HomePage/HomeBottleLetter.tsx b/src/components/HomePage/HomeBottleLetter.tsx
@@ -14,16 +14,12 @@ export const HomeBottleLetter = ({
     labelUrl,
     letterId
 }: HomeBottleLetterProps) => {
-    console.log(letterId);
     const navigate = useNavigate();
 
     const handleClickBottle = () => {
         navigate(`letter/keyword/${letterType}/received/${letterId}`);
     };
 
-    console.log('letterId - ', letterType);
-    console.log('letterId - ', letterId);
-
     // 키워드 편지 경로
     // /letter/keyword/LETTER/received/49
 

diff --git a/src/components/NotificationPage/NotificationItem.tsx b/src/components/NotificationPage/NotificationItem.tsx
@@ -1,6 +1,7 @@
 import { match } from 'ts-pattern';
 import { Margin } from '../Common/Margin/Margin';
 import { NotificationItemItemProps } from '@/types/notification';
+import { useNavigate } from 'react-router-dom';
 
 export const NotificationItem = ({
     type,
@@ -9,6 +10,11 @@ export const NotificationItem = ({
     isRead,
     label
 }: NotificationItemItemProps) => {
+    const navigate = useNavigate();
+
+    const handleClickNotification = () => {
+        navigate(letterLink);
+    };
     // 메인 메시지
     const notificatioMessage = match(type)
         .with('NEW_LETTER', () => '새로운 익명의 편지가 도착했어요')
@@ -25,6 +31,14 @@ export const NotificationItem = ({
         .with('BAN', () => '정지')
         .otherwise(() => '나에게 온 편지');
 
+    const letterLink = match(type)
+        .with('NEW_LETTER', () => `/letter/keyword/LETTER/received/${letterId}`)
+        .with(
+            'KEYWORD_REPLY',
+            () => `/letter/keyword/REPLY_LETTER/received/${letterId}`
+        )
+        .otherwise(() => '');
+
     /** 알람 받고 얼마나 지났는지 */
     const timeSinceAlert = (dateString: string): string => {
         const eventDate = new Date(dateString);
@@ -43,17 +57,13 @@ export const NotificationItem = ({
         }
     };
 
-    // 아직 사용하지 않아서 콘솔처리, 추후에 수정하겠습니다.
-    const letterLink = `/detail/${letterId}`;
-    console.log(letterLink);
-
     // 읽음 여부에 따라 스타일 : 투명도 조절
     const isReadStyle = `flex gap-3 items-center ${
         isRead ? 'opacity-30' : 'opacity-100'
     }`;
 
     return (
-        <div className={isReadStyle}>
+        <div onClick={handleClickNotification} className={isReadStyle}>
             {type !== 'WARNING' && type !== 'BAN' ? (
                 <img
                     className="size-[44px] bg-slate-400 rounded-full"

diff --git a/src/components/NotificationPage/ZeroNotification.tsx b/src/components/NotificationPage/ZeroNotification.tsx
@@ -0,0 +1,3 @@
+export const ZeroNotification = () => {
+    return <div className="">알림이 없습니다.</div>;
+};
diff --git a/src/pages/Notification/NotificationPage.tsx b/src/pages/Notification/NotificationPage.tsx
@@ -1,6 +1,7 @@
 import { Margin } from '@/components/Common/Margin/Margin';
 import { TitleClosedTopBar } from '@/components/Common/TitleClosedTopBar/TitleClosedTopBar';
 import { NotificationContainer } from '@/components/NotificationPage/NotificationContainer';
+import { ZeroNotification } from '@/components/NotificationPage/ZeroNotification';
 import { useGetNotifications } from '@/hooks/useGetNotifications';
 import { useUpdateNotificationStatus } from '@/hooks/useUpdateNotifications';
 import { NotificationType } from '@/types/notification';
@@ -46,13 +47,23 @@ export const NotificationPage = () => {
             <div>
                 <h3 className="text-[14px] text-[#22B8EF]">새로운 소식</h3>
                 <Margin top={8} />
-                <NotificationContainer notifications={unReadNotifications} />
+                {unReadNotifications.length > 0 ? (
+                    <NotificationContainer
+                        notifications={unReadNotifications}
+                    />
+                ) : (
+                    <ZeroNotification />
+                )}
             </div>
             <Margin top={20} />
             <div>
                 <h3 className="text-[14px] text-[#22B8EF]">이전 알림</h3>
                 <Margin top={8} />
-                <NotificationContainer notifications={readNotifications} />
+                {unReadNotifications.length > 0 ? (
+                    <NotificationContainer notifications={readNotifications} />
+                ) : (
+                    <ZeroNotification />
+                )}
             </div>
         </>
     );