[Feature/Notifications] 알림 기능 구현

toronto/src/App.js

@@ -6,6 +6,7 @@ import {
   NotFoundPage,
   Login,
   SignUp,
+  NotificationsPage,
   PostPage,
   UserProfilePage,
   EditProfilePage,
@@ -29,6 +30,7 @@ function App() {
             <Route path='/create-post' element={<PostPage />} />
             <Route path='/users/:userId' element={<UserProfilePage />} />
             <Route path='/users/:userId/edit' element={<EditProfilePage />} />
+            <Route path='/notifications' element={<NotificationsPage />} />
             <Route path='/login' element={<Login />} />
             <Route path='/sign-up' element={<SignUp />} />
             <Route

toronto/src/api/Api.js

@@ -265,6 +265,53 @@ export const postLikeApi = async (postId) => {
   });
   return res;
 };
+export const getNotifications = async () => {
+  const token = getToken();
+  const res = await serverless({
+    method: 'GET',
+    url: '/notifications',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return res;
+};
+
+export const putNotificationsSeen = async () => {
+  const token = getToken();
+  const res = await serverless({
+    method: 'PUT',
+    url: '/notifications/seen',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return res;
+};
+
+export const postNotificationsCreate = async (
+  notificationType,
+  notificationTypeId,
+  userId,
+  postId,
+) => {
+  if (!notificationType || !notificationTypeId || !userId || !postId) return;
+  const token = getToken();
+  const res = await serverless({
+    method: 'POST',
+    url: '/notifications/create',
+    body: {
+      notificationType,
+      notificationTypeId,
+      userId,
+      postId,
+    },
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return res;
+};
 
 export const serverless = async (options) => {
   try {

toronto/src/components/atoms/Badge/index.js

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+
+const BadgeContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const Super = styled.sup`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  font-size: 12px;
+  border-radius: 20px;
+  color: white;
+  border-radius: 20px;
+  background-color: #f44;
+  transform: translate(50%, -50%);
+
+  &.dot {
+    padding: 0;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+  }
+`;
+
+const Badge = ({
+  children,
+  count,
+  maxCount,
+  showZero,
+  dot = false,
+  backgroundColor,
+  textColor,
+  ...props
+}) => {
+  const colorStyle = {
+    backgroundColor,
+    color: textColor,
+  };
+  let badge = null;
+  if (count) {
+    badge = (
+      <Super style={colorStyle}>
+        {maxCount && count > maxCount ? `${maxCount}+ ` : count}
+      </Super>
+    );
+  } else {
+    if (count !== undefined) {
+      badge = showZero ? <Super style={colorStyle}>0</Super> : null;
+    } else if (dot) {
+      badge = <Super className='dot' style={colorStyle} />;
+    }
+  }
+  return (
+    <BadgeContainer {...props}>
+      {children}
+      {badge}
+    </BadgeContainer>
+  );
+};
+
+export default Badge;

toronto/src/components/atoms/Skeleton/Notification.jsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import Circle from './Circle';
+import Paragraph from './Paragraph';
+
+const Notification = () => {
+  return (
+    <Wrapper>
+      <Circle size={60}></Circle>
+      <Paragraph line={3} style={{ width: '300px' }}></Paragraph>
+    </Wrapper>
+  );
+};
+
+export default Notification;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+  margin: 0.5em 0 0.5em 0;
+`;

toronto/src/components/atoms/Skeleton/index.js

@@ -1,11 +1,12 @@
 import Box from './Box';
 import Circle from './Circle';
 import Paragraph from './Paragraph';
-
+import Notification from './Notification';
 const Skeleton = {
   Box,
   Circle,
   Paragraph,
+  Notification,
 };
 
 export default Skeleton;

toronto/src/components/atoms/index.js

@@ -12,3 +12,4 @@ export { default as Skeleton } from './Skeleton';
 export { default as Spacer } from './Spacer';
 export { default as StyledLink } from './StyledLink';
 export { default as Text } from './Text';
+export { default as Badge } from './Badge';

toronto/src/components/molecules/Notification/index.js

@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+import { StyledLink, Avatar, Text } from '@/components/atoms';
+import { putNotificationsSeen } from '@/api/Api.js';
+
+const Notification = ({ notification, posts }) => {
+  const notificationPost = posts.filter(
+    (post) => post._id === notification.post,
+  )[0];
+  const title = JSON.parse(notificationPost.title).postTitle;
+  const handleClick = async () => {
+    await putNotificationsSeen();
+  };
+
+  if (notification.seen === false) {
+    return (
+      <Wrapper onClick={handleClick}>
+        <StyledLink to={`/controversy/result/${notification.post}`}>
+          <NotificationWrapper>
+            <AvatarWrapper>
+              <Avatar src={notification.author.image} size={60} />
+            </AvatarWrapper>
+            <ColWrapper>
+              <TextWrapper>
+                <Text color='#000'>
+                  {notification.comment
+                    ? notification.author.username +
+                      ' 님이 ' +
+                      title +
+                      '에 댓글을 남겼습니다!'
+                    : ''}
+                  {notification.like
+                    ? notification.author.username +
+                      ' 님이 ' +
+                      title +
+                      '에 좋아요를 눌렀습니다!'
+                    : ''}
+                </Text>
+              </TextWrapper>
+              <TextWrapper>
+                <Text color='#000' strong>
+                  {notification.comment
+                    ? JSON.parse(notification.comment.comment).content
+                    : ''}
+                </Text>
+              </TextWrapper>
+              <TextWrapper>
+                <Text color='#2f66d2'>
+                  {notification.updatedAt.split('T')[0]}일
+                  {' ' +
+                    new Date(Date.parse(notification.updatedAt) + 3240 * 10000)
+                      .toISOString()
+                      .split('T')[1]
+                      .slice(0, 5)}
+                  분에 업데이트 되었습니다.
+                </Text>
+              </TextWrapper>
+            </ColWrapper>
+          </NotificationWrapper>
+        </StyledLink>
+      </Wrapper>
+    );
+  }
+};
+
+export default Notification;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  border-radius: 4px;
+  &:hover {
+    background-color: #eee;
+  }
+`;
+
+const NotificationWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const AvatarWrapper = styled.div`
+  display: flex;
+`;
+
+const ColWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: 1rem;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  word-break: keep-all;
+  line-height: 1.5em;
+`;

toronto/src/components/molecules/index.js

@@ -10,3 +10,4 @@ export { default as Upload } from './Upload';
 export { default as DraggableArea } from './Upload/UploadArea';
 export { default as UserItem } from './UserItem';
 export { default as Vote } from './Vote';
+export { default as Notification } from './Notification';

toronto/src/components/organisms/NavigationBar/index.js

@@ -1,7 +1,14 @@
-/* eslint-disable no-unused-vars */
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Icon, StyledLink, Image, Header, Text } from '@/components/atoms';
+import {
+  Icon,
+  StyledLink,
+  Image,
+  Header,
+  Text,
+  Badge,
+} from '@/components/atoms';
+
 import { Tooltip } from '@/components/molecules';
 import logoImg from '@/assets/images/toronto.png';
 const NavigationBar = ({ user, handleLogout }) => {
@@ -29,6 +36,30 @@ const NavigationBar = ({ user, handleLogout }) => {
                 <Text>로그아웃</Text>
               </NavigateLink>
             </Tooltip>
+            <Tooltip text='알림'>
+              <StyledLink
+                to='/notifications'
+                style={{
+                  color: 'inherit',
+                }}
+              >
+                {user.notifications.length === 0 ? (
+                  <Icon
+                    size={20}
+                    iconName='bell'
+                    style={{ verticalAlign: 'bottom' }}
+                  />
+                ) : (
+                  <Badge dot>
+                    <Icon
+                      size={20}
+                      iconName='bell'
+                      style={{ verticalAlign: 'bottom' }}
+                    />
+                  </Badge>
+                )}
+              </StyledLink>
+            </Tooltip>
             <Tooltip text='내 정보 보기'>
               <NavigateLink to={`/users/${user._id}`}>
                 <Icon

toronto/src/pages/ControversyResult.jsx

@@ -13,6 +13,7 @@ import {
   deleteLikeApi,
   postCommentApi,
   postLikeApi,
+  postNotificationsCreate,
 } from '@/api/Api';
 
 const ResultPage = () => {
@@ -155,6 +156,16 @@ const ResultPage = () => {
         }),
         postId: postId,
       });
+
+      const commentId = res.data._id;
+      const commentUserId = data.author._id;
+      const commentPostId = res.data.post;
+      await postNotificationsCreate(
+        'COMMENT',
+        commentId,
+        commentUserId,
+        commentPostId,
+      );
       setLoading({
         ...loading,
         comment: false,
@@ -196,6 +207,13 @@ const ResultPage = () => {
         ...likeData,
         isLiked: true,
       });
+
+      const likeId = res.data._id;
+      const likePostId = res.data.post;
+      const likeUserId = data.author._id;
+
+      await postNotificationsCreate('LIKE', likeId, likeUserId, likePostId);
+
       setLoading({
         ...loading,
         like: false,