Merge pull request #393 from woowacourse-teams/feat/#381

알림 센터에서 알림 클릭 시, 해당 정보와 관련된 페이지로 이동

frontend/.storybook/main.ts

@@ -44,9 +44,9 @@ const config: StorybookConfig = {
         '@_pages': path.resolve(__dirname, '../src/pages'),
         '@_types': path.resolve(__dirname, '../src/types'),
         '@_utils': path.resolve(__dirname, '../src/utils'),
-        '@_routes': path.resolve(__dirname, 'src/routes'),
-        '@_mocks': path.resolve(__dirname, 'src/mocks'),
-        '@_service': path.resolve(__dirname, 'src/service'),
+        '@_routes': path.resolve(__dirname, '../src/routes'),
+        '@_mocks': path.resolve(__dirname, '../src/mocks'),
+        '@_service': path.resolve(__dirname, '../src/service'),
       };
     }
 

frontend/src/components/NotificationCard/NotificationCard.style.ts

@@ -1,11 +1,15 @@
 import { theme } from '@_common/theme/theme.style';
 import { css, Theme } from '@emotion/react';
 
-export const CardBox = css`
+export const CardBox = (props: { theme: Theme }) => css`
   display: flex;
   gap: 1rem;
   align-items: center;
   width: 100%;
+  border-radius: 1rem;
+  &:active {
+    background-color: ${props.theme.colorPalette.grey[100]};
+  }
 `;
 
 export const TextInfoBox = css`

frontend/src/components/NotificationCard/NotificationCard.tsx

@@ -2,7 +2,8 @@ import { Notification } from '@_types/index';
 import * as S from '@_components/NotificationCard/NotificationCard.style';
 import { useTheme } from '@emotion/react';
 import { notificationTypeColors } from './NotificationCard.const';
-interface NotificationCardProps {
+import { HTMLProps } from 'react';
+interface NotificationCardProps extends HTMLProps<HTMLDivElement> {
   notification: Notification;
 }
 
@@ -11,7 +12,7 @@ export default function NotificationCard(props: NotificationCardProps) {
   const theme = useTheme();
   const typeColor = notificationTypeColors(theme)[notification.type];
   return (
-    <div css={S.CardBox}>
+    <div css={S.CardBox({ theme })}>
       <div css={S.colorDot({ theme, typeColor })}>{'·'}</div>
       <div css={S.TextInfoBox}>
         <div css={S.Title({ theme })}>{notification.message}</div>

frontend/src/components/NotificationList/NotificationList.stories.tsx

@@ -17,16 +17,19 @@ export const Default: Story = {
         type: 'MOIM_CREATED',
         createdAt: '1시간전',
         message: '테스트',
+        redirectUrl: '',
       },
       {
         type: 'MOIMING_REOPENED',
         createdAt: '1시간전',
         message: '테스트',
+        redirectUrl: '',
       },
       {
         type: 'MOIM_MODIFIED',
         createdAt: '1시간전',
         message: '테스트',
+        redirectUrl: '',
       },
     ],
   },

frontend/src/components/NotificationList/NotificationList.tsx

@@ -1,19 +1,28 @@
 import NotificationCard from '@_components/NotificationCard/NotificationCard';
 import { Notification } from '@_types/index';
 import * as S from '@_components/NotificationList/NotificationList.style';
+import { useNavigate } from 'react-router-dom';
+import { removeBaseUrl } from '@_utils/formatters';
 
 interface NotificationListProps {
   notifications: Notification[];
 }
 export default function NotificationList(props: NotificationListProps) {
   const { notifications } = props;
+  const navigate = useNavigate();
+  const handleClickNotificationCard = (url: string) => {
+    navigate(removeBaseUrl(url));
+  };
   return (
     <div css={S.cardListSection}>
       {notifications.map((notification, index) => {
         return (
           <NotificationCard
             key={notification.type + index}
             notification={notification}
+            onClick={() =>
+              handleClickNotificationCard(notification.redirectUrl)
+            }
           ></NotificationCard>
         );
       })}

frontend/src/types/index.d.ts

@@ -95,6 +95,7 @@ export interface Notification {
   type: NotificationType;
   message: string;
   createdAt: string;
+  redirectUrl: string;
 }
 
 export interface Darakbang {

frontend/src/utils/formatters.ts

@@ -61,3 +61,7 @@ export const formatHhmmToKoreanWithPrefix = (
 
   return `오전 ${hour}:${minute.toString().padStart(2, '00')}`;
 };
+
+export const removeBaseUrl = (redirectUrl: string) => {
+  return redirectUrl.replace(`${process.env.BASE_URL}/`, '');
+};