feat: Notification 타입별 알림 구분 및 API 연동

Here-You · Feb 18, 2024 · e5e381e · e5e381e
1 parent 6778af3
commit e5e381e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 26 deletions.
diff --git a/src/components/notification/NotificationPage.jsx b/src/components/notification/NotificationPage.jsx
@@ -1,39 +1,60 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import * as S from './NotificationPage.style';
 import Book from '/images/Book_light.svg';
 import Comment from '/images/comment_light.svg';
 import Heart from '/images/signature/ClickedHeart.svg';
 
-const NotificationPage = ({ notification }) => {
+const NotificationPage = ({ notifications }) => {
   const navigate = useNavigate();
+  console.log(notifications);
 
   return (
     <S.Container>
-      {notification?.map(list => (
-        <React.Fragment key={list.id}>
-          {list.type === 'LIKE' && (
+      {notifications?.map(notify =>
+        notify?.content?.type === 'SIGNATURE' ? (
+          notify?.content?.action === 'LIKE' ? (
             <S.NotificationContainer
-              onClick={() => navigate(`/signature/post/${list.itemId}`)}>
-              <S.Img src={Heart} alt="Heart Icon" />
-              <span>{list.content}</span>
+              onClick={() => navigate(`/signature/post/${notify?.itemId}`)}>
+              <S.Img src={Heart} />
+              <S.TextContainer>
+                <h3>
+                  {notify?.content?.actionUserNickname}님이 회원님의 시그니처
+                  <span>{notify?.itemDesc && `(${notify?.itemDesc})`}</span>에
+                  좋아요를 남겼습니다.
+                </h3>
+              </S.TextContainer>
             </S.NotificationContainer>
-          )}
-          {list.type === 'COMMENT' && (
-            <S.NotificationContainer>
-              <S.Img src={Comment} alt="Comment Icon" />
-              <span>{list.content}</span>
+          ) : (
+            <S.NotificationContainer
+              onClick={() => navigate(`/signature/post/${notify?.itemId}`)}>
+              <S.Img src={Comment} />
+              <S.TextContainer>
+                <h3>
+                  {notify?.content?.actionUserNickname}님이 회원님의 시그니처
+                  <span>{notify?.itemDesc && `(${notify?.itemDesc})`}</span>에
+                  댓글을 남겼습니다.
+                </h3>
+              </S.TextContainer>
             </S.NotificationContainer>
-          )}
-          {list.type === 'INVITE' && (
-            <S.NotificationContainer>
-              <S.Img src={Book} alt="Comment Icon" />
-              <span>{list.content}</span>
+          )
+        ) : (
+          notify?.content?.type === 'RULE' &&
+          notify?.content?.action === 'COMMENT' && (
+            <S.NotificationContainer
+              onClick={() => navigate(`/mate/rule-check/${notify?.itemId}`)}>
+              <S.Img src={Comment} />
+              <S.TextContainer>
+                <h3>
+                  {notify?.content?.actionUserNickname}님이 회원님의 규칙
+                  <span>{notify?.itemDesc && `(${notify?.itemDesc})`}</span>에
+                  댓글을 남겼습니다.
+                </h3>
+              </S.TextContainer>
             </S.NotificationContainer>
-          )}
-        </React.Fragment>
-      ))}
+          )
+        ),
+      )}
     </S.Container>
   );
 };

diff --git a/src/components/notification/NotificationPage.style.js b/src/components/notification/NotificationPage.style.js
@@ -15,7 +15,7 @@ const NotificationContainer = styled.div`
   flex-direction: row;
   align-items: center;
   width: 95%;
-  font-size: ${FONT_SIZE.LG};
+  font-size: ${FONT_SIZE.SM};
   margin-bottom: 30px;
   padding: 20px;
   border-radius: 10px;
@@ -29,11 +29,20 @@ const NotificationContainer = styled.div`
     font-size: ${FONT_SIZE.SM};
   }
 
+  h3 {
+    color: ${theme.COLOR.MAIN.GREEN};
+  }
+
   span {
     color: ${theme.COLOR.MAIN.GREEN};
+    font-size: ${FONT_SIZE.h3};
   }
 `;
 
+const TextContainer = styled.div`
+  width: 100%;
+`;
+
 const Img = styled.img`
   width: 8%;
   margin-right: 20px;
@@ -63,4 +72,12 @@ const Text = styled.div`
   font-size: 23px;
 `;
 
-export { Container, NotificationContainer, Img, BellContainer, Bell, Text };
+export {
+  Container,
+  NotificationContainer,
+  TextContainer,
+  Img,
+  BellContainer,
+  Bell,
+  Text,
+};
diff --git a/src/pages/notification/Notification.jsx b/src/pages/notification/Notification.jsx
@@ -5,14 +5,14 @@ import { useGetNotification } from '@/hooks/notification/useGetNotification';
 
 const Notification = () => {
   const { data, isPending, isError } = useGetNotification();
-  const notification = data?.data?.data;
-  console.log(notification);
+  const notifications = data?.data?.data;
+
   return (
     <S.Container>
       {isPending ? (
         <NotificationSkeleton />
       ) : (
-        <NotificationPage notification={notification} />
+        <NotificationPage notifications={notifications} />
       )}
     </S.Container>
   );