diff --git a/project/frontend/src/hooks/useSocket.ts b/project/frontend/src/hooks/useSocket.ts index 11f3a4eb..c249fb01 100644 --- a/project/frontend/src/hooks/useSocket.ts +++ b/project/frontend/src/hooks/useSocket.ts @@ -1,34 +1,11 @@ +import { useEffect } from 'react'; +import { useRouter } from 'next/router'; import useToast from '@/components/common/useToast'; import { messageType } from '@/components/dm/message/MessageContent'; import { getSocket } from '@/lib/Socket'; -import { useRouter } from 'next/navigation'; -import { useEffect } from 'react'; - -const handleDirectMessage = ( - socket: any, - setMessages: any, - channelId: string, -) => { - socket.on(`directMessage`, (res: any) => { - if (res.data.channelId === channelId) - setMessages((messages: any) => [...messages, res]); - }); -}; - -const handleChannelMessage = ( - socket: any, - setMessages: any, - channelId: string | undefined, -) => { - socket.on(`channelMessage`, (res: any) => { - if (res.data.channelId === channelId) { - setMessages((messages: any) => [...messages, res]); - } - }); -}; export const useSocket = ( - type: any, + type: messageType, setMessages: any, channelId: string, targetName: string | undefined, @@ -36,67 +13,90 @@ export const useSocket = ( const router = useRouter(); const { openMessage } = useToast(); + useEffect(() => { + const socket = getSocket(); + const localMe = localStorage.getItem('me'); + const me = localMe ? JSON.parse(localMe) : null; -const handleLeave = ( - socket: any, - setMessages: any, - meId: string | undefined, - router: any, -) => { - socket.on('leave', (res: any) => { - if (res.data.member.id === meId) { - openMessage('채널에서 나갔습니다!'); - router.replace('/channel'); - } else { - setMessages((messages: any) => [...messages, res]); - } - }); -}; - const handleJoin = (socket: any, setMessages: any) => { - socket.on('join', (res: any) => { - setMessages((messages: any) => [...messages, res]); - }); - }; + const handleDirectMessage = ( + socket: any, + setMessages: any, + channelId: string, + ) => { + socket.on(`directMessage`, (res: any) => { + if (res.data.channelId === channelId) + setMessages((messages: any) => [...messages, res]); + }); + }; - const handleKickBanPromote = ( - socket: any, - meId: string | undefined, - channelId: string | undefined, - router: any, - ) => { - socket.on('kickBanPromote', (res: any) => { - const targetUserId = res.data.targetUser.id; + const handleChannelMessage = ( + socket: any, + setMessages: any, + channelId: string | undefined, + ) => { + socket.on(`channelMessage`, (res: any) => { + if (res.data.channelId === channelId) { + setMessages((messages: any) => [...messages, res]); + } + }); + }; - if (res.data.actionType === 'KICK' || res.data.actionType === 'BANNED') { - if (targetUserId === meId && channelId === res.data.channelId) { - if (res.data.actionType === 'KICK') { - openMessage('방장이 나가라고 합니다!'); - } else { - openMessage('방장이 채널에서 차단했습니다!'); - } + const handleLeave = ( + socket: any, + setMessages: any, + meId: string | undefined, + router: any, + ) => { + socket.on('leave', (res: any) => { + if (res.data.member.id === meId) { + openMessage('채널에서 나갔습니다!'); router.replace('/channel'); + } else { + setMessages((messages: any) => [...messages, res]); } - } else if ( - res.data.actionType === 'PROMOTE' && - channelId === res.data.channelId && - targetUserId === meId - ) { - openMessage('관리자가 되었습니다!'); - } else if ( - res.data.actionType === 'MUTE' && - targetUserId === meId && - channelId === res.data.channelId - ) { - openMessage('방장이 1분간 조용히 하래요 ㅠ'); - } - }); - }; + }); + }; - useEffect(() => { - const socket = getSocket(); - const localMe = localStorage.getItem('me'); - const me = localMe ? JSON.parse(localMe) : null; + const handleJoin = (socket: any, setMessages: any) => { + socket.on('join', (res: any) => { + setMessages((messages: any) => [...messages, res]); + }); + }; + + const handleKickBanPromote = ( + socket: any, + meId: string | undefined, + channelId: string | undefined, + router: any, + ) => { + socket.on('kickBanPromote', (res: any) => { + const targetUserId = res.data.targetUser.id; + + if (res.data.actionType === 'KICK' || res.data.actionType === 'BANNED') { + if (targetUserId === meId && channelId === res.data.channelId) { + if (res.data.actionType === 'KICK') { + openMessage('방장이 나가라고 합니다!'); + } else { + openMessage('방장이 채널에서 차단했습니다!'); + } + router.replace('/channel'); + } + } else if ( + res.data.actionType === 'PROMOTE' && + channelId === res.data.channelId && + targetUserId === meId + ) { + openMessage('관리자가 되었습니다!'); + } else if ( + res.data.actionType === 'MUTE' && + targetUserId === meId && + channelId === res.data.channelId + ) { + openMessage('방장이 1분간 조용히 하래요 ㅠ'); + } + }); + }; if (type === messageType.DM) { handleDirectMessage(socket, setMessages, channelId); } else { @@ -105,16 +105,12 @@ const handleLeave = ( handleJoin(socket, setMessages); handleKickBanPromote(socket, me?.id, channelId, router); } - return () => { - if (type === messageType.DM) { - socket.off(`directMessage`); - } else { - socket.off(`channelMessage`); - socket.off('leave'); - socket.off('join'); - socket.off('kickBanPromote'); - } + socket.off('directMessage'); + socket.off('channelMessage'); + socket.off('leave'); + socket.off('join'); + socket.off('kickBanPromote'); }; - }, [type, setMessages, channelId, targetName, router]); + }, [type, setMessages, channelId, router, openMessage, targetName]); };