🚨 Fix: 알림 생성 전달 오류 해결

prgrms-fe-devcourse · Sep 26, 2023 · 53638ce · 53638ce
2 parents c437738 + 5360d6d
commit 53638ce
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 20 deletions.
diff --git a/src/pages/notice/Notice.tsx b/src/pages/notice/Notice.tsx
@@ -46,6 +46,7 @@ const Notice = () => {
           }}
         />
       </Header>
+      {list.length < 1 && <div>알림이 없습니다.</div>}
       <NoticeList list={list} />
     </NoticePage>
   );

diff --git a/src/pages/notice/components/NoticeItem/NoticeItem.style.ts b/src/pages/notice/components/NoticeItem/NoticeItem.style.ts
@@ -2,10 +2,9 @@ import styled from '@emotion/styled';
 
 const NoticeItemContainer = styled.div`
   display: flex;
-  justify-content: flex-start;
-  padding: 10px;
+  padding: 14px;
   border-bottom: 0.5px solid ${({ theme }) => theme.color['greyLight']};
-  margin-bottom: 10px;
+  line-height: 1.5;
 `;
 
 const ProfileImage = styled.div`
@@ -16,19 +15,17 @@ const ProfileImage = styled.div`
 `;
 
 const NoticeContent = styled.div`
-  flex-direction: column;
-  justify-content: flex-start;
   align-self: center;
 `;
 
 const Message = styled.div`
   font-weight: 700;
-  font-size: 0.8rem;
+  font-size: 13px;
   color: ${({ theme }) => theme.color['black']};
 `;
 
 const MessagePreview = styled.div`
-  font-size: 0.6rem;
+  font-size: 11px;
   color: ${({ theme }) => theme.color['greyLight']};
 `;
 

diff --git a/src/pages/notice/components/NoticeItem/NoticeItem.tsx b/src/pages/notice/components/NoticeItem/NoticeItem.tsx
@@ -65,10 +65,7 @@ const NoticeItem = ({
         />
       </ProfileImage>
       <NoticeContent>
-        <Message>
-          <span>{authorName}</span>
-          {typeToMessage(type)}
-        </Message>
+        <Message>{typeToMessage(type)}</Message>
         {type === NOTICE_TYPE.COMMENT && (
           <MessagePreview>
             {comment && comment.comment.length > 25

diff --git a/src/pages/notice/components/NoticeList/NoticeList.style.ts b/src/pages/notice/components/NoticeList/NoticeList.style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 const NoticeListContainer = styled.div`
-  height: calc(100% - 1.5rem);
+  height: calc(100% - 30px);
   overflow-y: scroll;
 `;
 

diff --git a/src/pages/postDetail/PostDetail.tsx b/src/pages/postDetail/PostDetail.tsx
@@ -39,6 +39,7 @@ const PostDetail = () => {
         createdAt={formatDate(data?.createdAt)}
       />
       <PostCommentInput
+        userId={data?.author._id}
         postId={postId}
         token={'Bearer ' + token}
         avatarSrc={image}
@@ -48,6 +49,7 @@ const PostDetail = () => {
         }}
       />
       <PostComments
+        userId={data?.author._id}
         postId={postId}
         currentUserId={_id}
         token={'Bearer ' + token}

diff --git a/src/pages/postDetail/components/PostCommentHeader.tsx b/src/pages/postDetail/components/PostCommentHeader.tsx
@@ -17,6 +17,7 @@ interface PostCommentHeaderProps {
   refetch: () => void;
   myLike: Like;
   postCommentCount: number;
+  userId?: string;
 }
 
 const PostCommentHeader = ({
@@ -25,6 +26,7 @@ const PostCommentHeader = ({
   refetch,
   myLike,
   likeCounts,
+  userId,
   postCommentCount = 0
 }: PostCommentHeaderProps) => {
   const [possibleMutateLike, setPossibleMutateLike] = useState(true);
@@ -34,12 +36,13 @@ const PostCommentHeader = ({
     },
     {
       onSuccess: (res) => {
-        postNotifications(token, {
-          notificationType: 'LIKE',
-          notificationTypeId: res._id,
-          userId: res.user,
-          postId: res.post
-        });
+        !myLike &&
+          postNotifications(token, {
+            notificationType: 'LIKE',
+            notificationTypeId: res._id,
+            userId: userId,
+            postId: res.post
+          });
       }
     }
   );

diff --git a/src/pages/postDetail/components/PostCommentInput.tsx b/src/pages/postDetail/components/PostCommentInput.tsx
@@ -19,6 +19,7 @@ interface PostCommentInputProps {
   token: string;
   avatarSrc: string;
   userName: string;
+  userId?: string;
   refetch: () => void;
 }
 
@@ -27,6 +28,7 @@ const PostCommentInput = ({
   userName,
   token,
   postId,
+  userId,
   refetch
 }: PostCommentInputProps) => {
   const COMMENT_PLACEHOLDER = '댓글을 달아보세요.';
@@ -38,7 +40,7 @@ const PostCommentInput = ({
       postNotifications(token, {
         notificationType: 'COMMENT',
         notificationTypeId: res._id,
-        userId: res.author._id,
+        userId: userId,
         postId: res.post
       });
     }

diff --git a/src/pages/postDetail/components/PostComments.tsx b/src/pages/postDetail/components/PostComments.tsx
@@ -11,6 +11,7 @@ interface PostCommentsProps {
   refetch: () => void;
   myLike: Like;
   likeCounts: number;
+  userId?: string;
 }
 
 const PostComments = ({
@@ -20,11 +21,13 @@ const PostComments = ({
   refetch,
   comments,
   myLike,
-  likeCounts
+  likeCounts,
+  userId
 }: PostCommentsProps) => {
   return (
     <PostCommentsSection>
       <PostCommentHeader
+        userId={userId}
         postId={postId}
         token={token}
         refetch={refetch}