[GGFE-56] noti error 수정 및 newNoti 이름 변경

components/Layout/Header.tsx

@@ -9,7 +9,7 @@ import { BsMegaphone } from 'react-icons/bs';
 import { VscBell, VscBellDot } from 'react-icons/vsc';
 import styles from 'styles/Layout/Header.module.scss';
 
-import NewNotiBar from './NewNoti/NewNotiBar';
+import NotiBar from './NotiBar/NotiBar';
 
 import { HeaderContextState, HeaderContext } from './HeaderContext';
 import { useContext } from 'react';
@@ -80,7 +80,7 @@ export default function Header() {
         </div>
       </div>
       {HeaderState?.openMenuBarState && <MenuBar />}
-      {HeaderState?.openNotiBarState && <NewNotiBar />}
+      {HeaderState?.openNotiBarState && <NotiBar />}
     </div>
   );
 }

components/Layout/NewNoti/NewNotiBar.tsx → components/Layout/NotiBar/NotiBar.tsx

@@ -1,22 +1,22 @@
 import { useContext } from 'react';
 import styles from 'styles/Layout/NotiBar.module.scss';
 import { HeaderContextState, HeaderContext } from '../HeaderContext';
-import NewNotiStateContext from './NewNotiProvider';
+import NotiStateContext from './NotiContext';
 
-export default function NewNotiBar() {
+export default function NotiBar() {
   const HeaderState = useContext<HeaderContextState | null>(HeaderContext);
 
   return (
-    <NewNotiStateContext>
+    <NotiStateContext>
       <div
         className={styles.backdrop}
         onClick={() => HeaderState?.resetOpenNotiBarState()}
       >
         <div className={styles.container} onClick={(e) => e.stopPropagation()}>
-          <NewNotiStateContext.NotiCloseButton />
-          <NewNotiStateContext.NotiMain />
+          <NotiStateContext.NotiCloseButton />
+          <NotiStateContext.NotiMain />
         </div>
       </div>
-    </NewNotiStateContext>
+    </NotiStateContext>
   );
 }

components/Layout/NewNoti/NewNotiProvider.tsx → components/Layout/NotiBar/NotiContext.tsx

@@ -3,22 +3,22 @@ import { useState, useEffect } from 'react';
 import { Noti } from 'types/notiTypes';
 import useReloadHandler from 'hooks/useReloadHandler';
 import useAxiosGet from 'hooks/useAxiosGet';
-import { NotiCloseButton, NotiMain } from './NewNotiElements';
+import { NotiCloseButton, NotiMain } from './NotiElements';
 
-export interface NewNotiContextState {
+export interface NotiContextState {
   noti: Noti[];
   spinReloadButton: boolean;
   clickReloadNoti: boolean;
   setClickReloadNoti: Dispatch<SetStateAction<boolean>>;
 }
 
-export const NewNotiContext = createContext<NewNotiContextState | null>(null);
+export const NotiProvider = createContext<NotiContextState | null>(null);
 
-interface NewNotiStateContextProps {
+interface NotiStateContextProps {
   children: React.ReactNode;
 }
 
-const NewNotiStateContext = (props: NewNotiStateContextProps) => {
+const NotiStateContext = (props: NotiStateContextProps) => {
   const [noti, setNoti] = useState<Noti[]>([]);
   const [clickReloadNoti, setClickReloadNoti] = useState(false);
   const [spinReloadButton, setSpinReloadButton] = useState(false);
@@ -49,21 +49,21 @@ const NewNotiStateContext = (props: NewNotiStateContextProps) => {
     }
   }, [clickReloadNoti]);
 
-  const NewNotiState: NewNotiContextState = {
+  const NotiState: NotiContextState = {
     noti: noti,
     spinReloadButton: spinReloadButton,
     clickReloadNoti: clickReloadNoti,
     setClickReloadNoti: setClickReloadNoti,
   };
 
   return (
-    <NewNotiContext.Provider value={NewNotiState}>
+    <NotiProvider.Provider value={NotiState}>
       {props.children}
-    </NewNotiContext.Provider>
+    </NotiProvider.Provider>
   );
 };
 
-NewNotiStateContext.NotiCloseButton = NotiCloseButton;
-NewNotiStateContext.NotiMain = NotiMain;
+NotiStateContext.NotiCloseButton = NotiCloseButton;
+NotiStateContext.NotiMain = NotiMain;
 
-export default NewNotiStateContext;
+export default NotiStateContext;

components/Layout/NewNoti/NewNotiElements.tsx → components/Layout/NotiBar/NotiElements.tsx

@@ -4,7 +4,7 @@ import { useSetRecoilState } from 'recoil';
 import { errorState } from 'utils/recoil/error';
 import styles from 'styles/Layout/NotiBar.module.scss';
 import { instance } from 'utils/axios';
-import { NewNotiContext, NewNotiContextState } from './NewNotiProvider';
+import { NotiProvider, NotiContextState } from './NotiContext';
 import { Noti } from 'types/notiTypes';
 import NotiItem from './NotiItem';
 
@@ -19,7 +19,7 @@ export const NotiCloseButton = () => {
 };
 
 export const NotiExist = () => {
-  const NotiContext = useContext<NewNotiContextState | null>(NewNotiContext);
+  const NotiContext = useContext<NotiContextState | null>(NotiProvider);
 
   return (
     <>
@@ -40,7 +40,7 @@ export const NotiExist = () => {
 };
 
 export const NotiEmpty = () => {
-  const NotiContext = useContext<NewNotiContextState | null>(NewNotiContext);
+  const NotiContext = useContext<NotiContextState | null>(NotiProvider);
 
   return (
     <div className={styles.emptyContent}>
@@ -55,7 +55,7 @@ export const NotiEmpty = () => {
 };
 
 export const NotiMain = () => {
-  const NotiContext = useContext<NewNotiContextState | null>(NewNotiContext);
+  const NotiContext = useContext<NotiContextState | null>(NotiProvider);
 
   if (NotiContext?.noti.length) {
     return <NotiExist />;

components/Layout/NewNoti/NotiItem.tsx → components/Layout/NotiBar/NotiItem.tsx

@@ -11,48 +11,54 @@ interface NotiItemProps {
 
 export default function NotiItem({ data }: NotiItemProps) {
   const date = data.createdAt.slice(5).replace('T', ' ');
+  const { type, message, isChecked } = data;
 
   const parseEnemyIdMessage = (
-    type: string,
     message: string
-  ): [string[], string] => {
-    let enemyId: string[] = [];
-    let enemyMessage = '';
-    if (type === 'IMMINENT') {
-      const regList = /<intraId::(.+?)>/;
-      const regId = /^[a-zA-Z0-9]*$/;
-      const parseList = message.split(regList).filter((str) => str !== '');
-      enemyId = parseList.filter((id) => regId.test(id) !== false);
-      enemyMessage = parseList.filter((id) => regId.test(id) === false)[0];
-    }
-    return [enemyId, enemyMessage];
+  ): {
+    enemyId: string[];
+    enemyMessage: string;
+  } => {
+    const regList = /<intraId::(.+?)>/;
+    const regId = /^[a-zA-Z0-9]*$/;
+    const parseList = [] || message.split(regList).filter((str) => str !== '');
+    const enemyId = [] || parseList.filter((id) => regId.test(id) !== false);
+    const enemyMessage =
+      '' || parseList.filter((id) => regId.test(id) === false)[0];
+    return { enemyId, enemyMessage };
   };
 
-  const enemyIdMessage = parseEnemyIdMessage(data.type, data.message);
+  let enemyId: string[] = [];
+  let enemyMessage = '';
+
+  if (type === 'IMMINENT') {
+    enemyId = parseEnemyIdMessage(message).enemyId;
+    enemyMessage = parseEnemyIdMessage(message).enemyMessage;
+  }
 
   const noti: {
     [key: string]: { [key: string]: string | JSX.Element | undefined };
   } = {
     IMMINENT: {
       title: '경기 준비',
-      content: MakeImminentContent(enemyIdMessage[0], enemyIdMessage[1]),
+      content: MakeImminentContent(enemyId, enemyMessage),
     },
     ANNOUNCE: {
       title: '공 지',
-      content: MakeAnnounceContent(data.message),
+      content: MakeAnnounceContent(message),
     },
     MATCHED: {
       title: '매칭 성사',
-      content: data.message,
+      content: message,
     },
   };
 
   return (
-    <div
-      className={data.isChecked ? `${styles.readWrap}` : `${styles.unreadWrap}`}
-    >
-      <span className={styles.title}>{noti[data.type].title}</span>
-      <div className={styles.content}>{noti[data.type].content}</div>
+    <div className={isChecked ? `${styles.readWrap}` : `${styles.unreadWrap}`}>
+      <span className={styles.title}>{noti[type].title}</span>
+      <div className={styles.content}>
+        {message ? noti[type].content : '알림을 불러올 수 없습니다.'}
+      </div>
       <div className={styles.date}>{date}</div>
     </div>
   );