From ad10ab502926ea00a49aae49cc4867094da019ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Wed, 31 May 2023 15:48:42 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[Feat]=20[GGFE-56]=20noti=20newnoti=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD,=20noti=20context=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/Header.tsx | 4 ++-- .../NewNotiBar.tsx => NotiBar/NotiBar.tsx} | 12 +++++----- .../NotiContext.tsx} | 22 +++++++++---------- .../NotiElements.tsx} | 8 +++---- .../Layout/{NewNoti => NotiBar}/NotiItem.tsx | 0 5 files changed, 23 insertions(+), 23 deletions(-) rename components/Layout/{NewNoti/NewNotiBar.tsx => NotiBar/NotiBar.tsx} (66%) rename components/Layout/{NewNoti/NewNotiProvider.tsx => NotiBar/NotiContext.tsx} (70%) rename components/Layout/{NewNoti/NewNotiElements.tsx => NotiBar/NotiElements.tsx} (89%) rename components/Layout/{NewNoti => NotiBar}/NotiItem.tsx (100%) diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx index bddbf2cc7..9739cfe5d 100644 --- a/components/Layout/Header.tsx +++ b/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() { {HeaderState?.openMenuBarState && } - {HeaderState?.openNotiBarState && } + {HeaderState?.openNotiBarState && } ); } diff --git a/components/Layout/NewNoti/NewNotiBar.tsx b/components/Layout/NotiBar/NotiBar.tsx similarity index 66% rename from components/Layout/NewNoti/NewNotiBar.tsx rename to components/Layout/NotiBar/NotiBar.tsx index bf9ee1bfb..be36499d3 100644 --- a/components/Layout/NewNoti/NewNotiBar.tsx +++ b/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(HeaderContext); return ( - +
HeaderState?.resetOpenNotiBarState()} >
e.stopPropagation()}> - - + +
- + ); } diff --git a/components/Layout/NewNoti/NewNotiProvider.tsx b/components/Layout/NotiBar/NotiContext.tsx similarity index 70% rename from components/Layout/NewNoti/NewNotiProvider.tsx rename to components/Layout/NotiBar/NotiContext.tsx index 0dc169299..55fcb4fe0 100644 --- a/components/Layout/NewNoti/NewNotiProvider.tsx +++ b/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>; } -export const NewNotiContext = createContext(null); +export const NotiProvider = createContext(null); -interface NewNotiStateContextProps { +interface NotiStateContextProps { children: React.ReactNode; } -const NewNotiStateContext = (props: NewNotiStateContextProps) => { +const NotiStateContext = (props: NotiStateContextProps) => { const [noti, setNoti] = useState([]); const [clickReloadNoti, setClickReloadNoti] = useState(false); const [spinReloadButton, setSpinReloadButton] = useState(false); @@ -49,7 +49,7 @@ const NewNotiStateContext = (props: NewNotiStateContextProps) => { } }, [clickReloadNoti]); - const NewNotiState: NewNotiContextState = { + const NotiState: NotiContextState = { noti: noti, spinReloadButton: spinReloadButton, clickReloadNoti: clickReloadNoti, @@ -57,13 +57,13 @@ const NewNotiStateContext = (props: NewNotiStateContextProps) => { }; return ( - + {props.children} - + ); }; -NewNotiStateContext.NotiCloseButton = NotiCloseButton; -NewNotiStateContext.NotiMain = NotiMain; +NotiStateContext.NotiCloseButton = NotiCloseButton; +NotiStateContext.NotiMain = NotiMain; -export default NewNotiStateContext; +export default NotiStateContext; diff --git a/components/Layout/NewNoti/NewNotiElements.tsx b/components/Layout/NotiBar/NotiElements.tsx similarity index 89% rename from components/Layout/NewNoti/NewNotiElements.tsx rename to components/Layout/NotiBar/NotiElements.tsx index 8ebd9ebd1..3c6d99e14 100644 --- a/components/Layout/NewNoti/NewNotiElements.tsx +++ b/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(NewNotiContext); + const NotiContext = useContext(NotiProvider); return ( <> @@ -40,7 +40,7 @@ export const NotiExist = () => { }; export const NotiEmpty = () => { - const NotiContext = useContext(NewNotiContext); + const NotiContext = useContext(NotiProvider); return (
@@ -55,7 +55,7 @@ export const NotiEmpty = () => { }; export const NotiMain = () => { - const NotiContext = useContext(NewNotiContext); + const NotiContext = useContext(NotiProvider); if (NotiContext?.noti.length) { return ; diff --git a/components/Layout/NewNoti/NotiItem.tsx b/components/Layout/NotiBar/NotiItem.tsx similarity index 100% rename from components/Layout/NewNoti/NotiItem.tsx rename to components/Layout/NotiBar/NotiItem.tsx From 47cb03bcdfef54aca08121a031bd9ef7bc041e43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Wed, 31 May 2023 16:02:21 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[Feat]=20[GGFE-56]=20noti=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EA=B0=80=20null=EC=9D=B8=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20enemy=20=ED=8C=8C=EC=8B=B1=EB=B6=80=EB=B6=84?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=97=90=EB=9F=AC=EB=82=98=EB=8D=98=20?= =?UTF-8?q?=EA=B2=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/NotiBar/NotiItem.tsx | 32 +++++++++++++++----------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/components/Layout/NotiBar/NotiItem.tsx b/components/Layout/NotiBar/NotiItem.tsx index c0394d344..9f733664d 100644 --- a/components/Layout/NotiBar/NotiItem.tsx +++ b/components/Layout/NotiBar/NotiItem.tsx @@ -13,29 +13,33 @@ export default function NotiItem({ data }: NotiItemProps) { const date = data.createdAt.slice(5).replace('T', ' '); const parseEnemyIdMessage = ( - type: string, message: string - ): [string[], string] => { - let enemyId: string[] = []; - let enemyMessage = ''; - if (type === 'IMMINENT') { - const regList = //; - 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 = //; + 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 (data.type === 'IMMINENT') { + enemyId = parseEnemyIdMessage(data.message).enemyId; + enemyMessage = parseEnemyIdMessage(data.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: '공 지', From bcd04f4e46554c07ea239b6867f87c30445da6d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Thu, 1 Jun 2023 13:53:04 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[Feat]=20[GGFE-56]=20split=20null=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/NotiBar/NotiItem.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/Layout/NotiBar/NotiItem.tsx b/components/Layout/NotiBar/NotiItem.tsx index 9f733664d..8ae8ef17a 100644 --- a/components/Layout/NotiBar/NotiItem.tsx +++ b/components/Layout/NotiBar/NotiItem.tsx @@ -20,9 +20,10 @@ export default function NotiItem({ data }: NotiItemProps) { } => { const regList = //; 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]; + 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 }; }; From ffa24bcf52a2aa7c09ea8269021484960d7e351b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Thu, 1 Jun 2023 14:10:32 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[Feat]=20[GGFE-56]=20=EB=A9=94=EC=84=B8?= =?UTF-8?q?=EC=A7=80=20null=20=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20=EB=A9=94?= =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/NotiBar/NotiItem.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/components/Layout/NotiBar/NotiItem.tsx b/components/Layout/NotiBar/NotiItem.tsx index 8ae8ef17a..b1af39f37 100644 --- a/components/Layout/NotiBar/NotiItem.tsx +++ b/components/Layout/NotiBar/NotiItem.tsx @@ -11,6 +11,7 @@ interface NotiItemProps { export default function NotiItem({ data }: NotiItemProps) { const date = data.createdAt.slice(5).replace('T', ' '); + const { type, message, isChecked } = data; const parseEnemyIdMessage = ( message: string @@ -30,9 +31,9 @@ export default function NotiItem({ data }: NotiItemProps) { let enemyId: string[] = []; let enemyMessage = ''; - if (data.type === 'IMMINENT') { - enemyId = parseEnemyIdMessage(data.message).enemyId; - enemyMessage = parseEnemyIdMessage(data.message).enemyMessage; + if (type === 'IMMINENT') { + enemyId = parseEnemyIdMessage(message).enemyId; + enemyMessage = parseEnemyIdMessage(message).enemyMessage; } const noti: { @@ -44,20 +45,20 @@ export default function NotiItem({ data }: NotiItemProps) { }, ANNOUNCE: { title: '공 지', - content: MakeAnnounceContent(data.message), + content: MakeAnnounceContent(message), }, MATCHED: { title: '매칭 성사', - content: data.message, + content: message, }, }; return ( -
- {noti[data.type].title} -
{noti[data.type].content}
+
+ {noti[type].title} +
+ {message ? noti[type].content : '알림을 불러올 수 없습니다.'} +
{date}
);