🚨Fix: 알림 생성, 알림창 수정

prgrms-fe-devcourse · Sep 25, 2023 · 9e16323 · 9e16323
2 parents 0d0c04a + 2542a0d
commit 9e16323
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 12 deletions.
diff --git a/src/pages/notice/Notice.style.ts b/src/pages/notice/Notice.style.ts
@@ -5,6 +5,8 @@ export const Header = styled.h1`
   font-weight: 500;
   font-size: 1.5rem;
   margin-bottom: 2rem;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 export const NoticePage = styled.div`

diff --git a/src/pages/notice/Notice.tsx b/src/pages/notice/Notice.tsx
@@ -6,6 +6,7 @@ import { User } from '@/types/User';
 import { Notification } from '@/types/Notification';
 import NoticeList from './components/NoticeList/NoticeList';
 import { NoticePage, Header } from './Notice.style';
+import { Button } from '@components/Button';
 
 const Notice = () => {
   const [list, setList] = useState([]);
@@ -22,7 +23,6 @@ const Notice = () => {
       (res) => res.filter((item: Notification) => !item.seen)
     );
     setList(res);
-    await putNotifications(`Bearer ${userSessionData.token}`);
     return res;
   };
 
@@ -34,7 +34,18 @@ const Notice = () => {
 
   return (
     <NoticePage>
-      <Header>알림창</Header>
+      <Header>
+        알림창
+        <Button
+          width={80}
+          height={30}
+          label='모두 읽음'
+          handleClick={() => {
+            putNotifications(`Bearer ${userSessionData.token}`);
+            fetchNotifications();
+          }}
+        />
+      </Header>
       <NoticeList list={list} />
     </NoticePage>
   );

diff --git a/src/pages/notice/components/NoticeItem/NoticeItem.style.ts b/src/pages/notice/components/NoticeItem/NoticeItem.style.ts
@@ -8,8 +8,7 @@ const NoticeItemContainer = styled.div`
   margin-bottom: 10px;
 `;
 
-const ProfileImage = styled.div<{ profileImage: string }>`
-  background-image: url(${({ profileImage }) => profileImage});
+const ProfileImage = styled.div`
   width: 39px;
   height: 39px;
   margin-right: 20px;

diff --git a/src/pages/notice/components/NoticeItem/NoticeItem.tsx b/src/pages/notice/components/NoticeItem/NoticeItem.tsx
@@ -4,6 +4,7 @@ import { Comment } from '@/types/Comment';
 import { NOTICE_TYPE } from '@pages/notice/constants';
 import typeToMessage from '@pages/notice/utils/typeToMessage';
 import typeToPath from '@pages/notice/utils/typeToNavigate';
+import { Avatar } from '@components/Avatar';
 
 import {
   NoticeItemContainer,
@@ -56,7 +57,13 @@ const NoticeItem = ({
   return (
     <NoticeItemContainer
       onClick={() => GoToNotificationOrigin({ type, id: typeId })}>
-      <ProfileImage profileImage={profileImage} />
+      <ProfileImage>
+        <Avatar
+          alt={authorName}
+          src={profileImage}
+          size={40}
+        />
+      </ProfileImage>
       <NoticeContent>
         <Message>
           <span>{authorName}</span>

diff --git a/src/pages/notice/constants/index.ts b/src/pages/notice/constants/index.ts
@@ -5,7 +5,7 @@ export const NOTICE_TYPE = {
 };
 
 export const MESSAGE_TYPE = {
-  COMMENT: ' 님이 회원님의 게시물에 댓글을 남겼습니다',
-  LIKE: ' 님이 회원님의 게시물을 좋아합니다',
-  FOLLOW: ' 님이 회원님을 팔로우합니다'
+  COMMENT: '회원님의 게시물에 댓글을 남겼습니다',
+  LIKE: '회원님의 게시물을 좋아합니다',
+  FOLLOW: '회원님을 팔로우합니다'
 };
diff --git a/src/pages/postDetail/components/PostCommentHeader.tsx b/src/pages/postDetail/components/PostCommentHeader.tsx
@@ -8,6 +8,7 @@ import {
   PostLikeContainer
 } from './PostCommentHeader.style';
 import { Like } from '@/types/Like';
+import { postNotifications } from '@apis/notice';
 
 interface PostCommentHeaderProps {
   postId: string;
@@ -27,9 +28,21 @@ const PostCommentHeader = ({
   postCommentCount = 0
 }: PostCommentHeaderProps) => {
   const [possibleMutateLike, setPossibleMutateLike] = useState(true);
-  const { mutate, isSuccess, isLoading } = useMutation(() => {
-    return myLike ? deleteLike(myLike._id, token) : postLike(postId, token);
-  });
+  const { mutate, isSuccess, isLoading } = useMutation(
+    () => {
+      return myLike ? deleteLike(myLike._id, token) : postLike(postId, token);
+    },
+    {
+      onSuccess: (res) => {
+        postNotifications(token, {
+          notificationType: 'LIKE',
+          notificationTypeId: res._id,
+          userId: res.user,
+          postId: res.post
+        });
+      }
+    }
+  );
 
   useEffect(() => {
     setPossibleMutateLike(true);

diff --git a/src/pages/postDetail/components/PostCommentInput.tsx b/src/pages/postDetail/components/PostCommentInput.tsx
@@ -11,6 +11,7 @@ import {
 } from './PostCommentInput.style';
 import { Avatar } from '@components/Avatar';
 import { postComment } from '@apis/comment';
+import { postNotifications } from '@apis/notice';
 
 interface PostCommentInputProps {
   postId: string;
@@ -30,7 +31,16 @@ const PostCommentInput = ({
   const COMMENT_PLACEHOLDER = '댓글을 달아보세요.';
   const commentRef = useRef(null);
 
-  const { mutate, isSuccess } = useMutation(postComment);
+  const { mutate, isSuccess } = useMutation(postComment, {
+    onSuccess: (res) => {
+      postNotifications(token, {
+        notificationType: 'COMMENT',
+        notificationTypeId: res._id,
+        userId: res.author._id,
+        postId: res.post
+      });
+    }
+  });
 
   if (isSuccess) refetch();