fix: 서로 다른 엔드포인트에 대한 useSocket 훅 기능 구현

gustn99 · gustn99 · commit 647d3ea78119 · 2025-02-25T20:30:22.000+09:00
diff --git a/src/context/SocketProvider.tsx b/src/context/SocketProvider.tsx
@@ -2,47 +2,55 @@ import { createContext, useContext, useEffect, useState } from 'react';
 
 import { io, Socket } from 'socket.io-client';
 
-const SocketContext = createContext<Socket | null>(null);
+type SocketMap = { [endpoint: string]: Socket };
+
+const SocketContext = createContext<SocketMap | null>(null);
 
 export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-	const [socket, setSocket] = useState<Socket | null>(null);
+	const [socketMap, setSocketMap] = useState<SocketMap>({});
 
 	useEffect(() => {
-		const newSocket = io(`${import.meta.env.VITE_NEW_API_URL}/socket/chatting`, {
-			transports: ['websocket'],
-		});
-		setSocket(newSocket);
-
-		newSocket.on('connect', () => {
-			console.log('connection is open');
+		const endpoints = ['chatting', 'matching']; // 필요한 엔드포인트 추가
+		const newSockets: SocketMap = {};
+
+		endpoints.forEach((endpoint) => {
+			const socket = io(`${import.meta.env.VITE_NEW_API_URL}/socket/${endpoint}`, {
+				transports: ['websocket'],
+			});
+			newSockets[endpoint] = socket;
+
+			socket.on('connect', () => {
+				console.log(`${endpoint} connection is open`);
+			});
+
+			socket.on('disconnect', (reason) => {
+				console.log(`${endpoint} Disconnected from server:`, reason);
+			});
+
+			socket.on('connect_error', (err) => {
+				console.log(`${endpoint} connect error:`, err.message);
+			});
 		});
 
-		newSocket.on('disconnect', (reason) => {
-			console.log('Disconnected from server:', reason);
-		});
-
-		newSocket.on('connect_error', (err) => {
-			console.log(err.message);
-		});
+		setSocketMap(newSockets);
 
 		return () => {
-			newSocket.disconnect();
+			Object.values(newSockets).forEach((socket) => socket.disconnect());
 		};
 	}, []);
 
-	// 소켓 설정이 완료되지 않은 경우 렌더링 방지
-	// 채팅방에서 새로고침했을 때 오류 방지
-	if (!socket) {
+	if (!Object.keys(socketMap).length) {
 		return null;
 	}
 
-	return <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>;
+	return <SocketContext.Provider value={socketMap}>{children}</SocketContext.Provider>;
 };
 
-export const useSocket = () => {
-	const context = useContext(SocketContext);
-	if (context === null) {
-		throw new Error('useSocket must be used within a SocketProvider');
+// 엔드포인트를 인자로 받아 해당 소켓을 반환하는 훅
+export const useSocket = (endpoint = 'chatting') => {
+	const socketMap = useContext(SocketContext);
+	if (!socketMap || !socketMap[endpoint]) {
+		throw new Error(`useSocket must be used within a SocketProvider with a valid endpoint (${endpoint})`);
 	}
-	return context;
+	return socketMap[endpoint];
 };
diff --git a/src/pages/Chats/MatchingRoom/index.tsx b/src/pages/Chats/MatchingRoom/index.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { MatchingData } from '@apis/matching/dto';
 import { useSocket } from '@context/SocketProvider';
+import { getCurrentUserId } from '@utils/getCurrentUserId';
 
 import Back from '@assets/arrow/left.svg';
 
@@ -20,21 +21,15 @@ const MatchingRoom: React.FC = () => {
 	const [isScroll, setIsScroll] = useState(false);
 	const chatWindowRef = useRef<HTMLDivElement>(null);
 
+	const currentUserId = getCurrentUserId();
 	const nav = useNavigate();
-	const socket = useSocket();
+	const socket = useSocket('matching');
 
 	// 메시지 수신 시 아래로 스크롤 (스크롤 아래 고정)
 	const scrollToBottom = (ref: React.RefObject<HTMLDivElement>) => {
 		if (ref.current) ref.current.scrollIntoView();
 	};
 
-	// 전체 매칭 불러오기 socket api
-	const getAllMatchings = (data: MatchingData[]) => {
-		setAllMatchings(data);
-		setIsScroll(true);
-		setIsLoading(false);
-	};
-
 	// 채팅방 입장 시 스크롤 아래로 이동
 	useEffect(() => {
 		const messagesContainer = chatWindowRef.current?.parentElement;
@@ -55,8 +50,23 @@ const MatchingRoom: React.FC = () => {
 	}, [allMatchings]);
 
 	useEffect(() => {
+		// 전체 매칭 불러오기 socket api
+		const getAllMatchings = ({ matching }: { matching: MatchingData[] }) => {
+			console.log(allMatchings);
+			setAllMatchings(matching);
+			setIsScroll(true);
+			setIsLoading(false);
+		};
+
+		const getNewMatching = (data: MatchingData) => {
+			console.log(data);
+		};
+
 		if (socket) {
-			socket.emit('getAllMatchings', getAllMatchings);
+			socket.emit('getAllMatchings', { userId: currentUserId });
+			socket.emit('getMatching', { userId: currentUserId });
+			socket.on('matchings', getAllMatchings);
+			socket.on('nextMatching', getNewMatching);
 		}
 
 		return () => {
@@ -82,7 +92,7 @@ const MatchingRoom: React.FC = () => {
 				) : (
 					allMatchings.map((matching: MatchingData) => {
 						// TODO: 매칭 상태에 따라 응답 버튼 렌더링
-						return <MatchingMessage {...matching} />;
+						return <MatchingMessage key={matching.id} {...matching} />;
 					})
 				)}
 				<div ref={chatWindowRef} />
diff --git a/src/pages/Chats/RcvdMessage/styles.tsx b/src/pages/Chats/RcvdMessage/styles.tsx
@@ -30,7 +30,7 @@ export const MessageBox = styled.div`
 	display: flex;
 	flex-direction: column;
 	gap: 0.2rem;
-	max-width: 75%;
+	/* max-width: 75%; */
 	margin-right: 0.5rem;
 `;
 
diff --git a/src/pages/Chats/RecentChat/MatchingRoomItem/index.tsx b/src/pages/Chats/RecentChat/MatchingRoomItem/index.tsx
@@ -38,6 +38,8 @@ const MatchingRoomItem: React.FC<Partial<LatestMatchingData>> = ({ requestStatus
 		}
 	}, []);
 
+	console.log(requestStatus);
+
 	return (
 		<MatchingRoomLayout onClick={handleMatchingRoomClick}>
 			<UserImage src={'오딩이 프로필 이미지'} alt="user" />
@@ -46,13 +48,7 @@ const MatchingRoomItem: React.FC<Partial<LatestMatchingData>> = ({ requestStatus
 					오딩이
 				</StyledText>
 				<LatestMessage $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.primary}>
-					{!requestStatus
-						? '매칭이 들어오면 오딩이가 알려줄게!'
-						: requestStatus === 'pending'
-							? '얘가 너 소개해 달래'
-							: requestStatus === 'rejected'
-								? 'ㅠㅠ 담에 더 좋은 애 소개해 줄게'
-								: '한번 연락해 봐봐'}
+					{requestStatus === 'pending' ? '얘가 너 소개받고 싶대' : '매칭이 들어오면 오딩이가 알려줄게!'}
 				</LatestMessage>
 			</LeftBox>
 			<RightBox>
diff --git a/src/pages/Chats/RecentChat/index.tsx b/src/pages/Chats/RecentChat/index.tsx
@@ -20,9 +20,11 @@ const RecentChat: React.FC = () => {
 	const [chatRoomList, setChatRoomList] = useState<ChatRoomData[]>([]);
 	const [latestMatching, setLatestMatching] = useState<LatestMatchingData | null>();
 	const [isLoading, setIsLoading] = useState(true);
-	const socket = useSocket();
 	const currentUserId = getCurrentUserId();
 
+	const socket = useSocket();
+	const matchingSocket = useSocket('matching');
+
 	useEffect(() => {
 		// 채팅방 리스트 조회
 		const getChatRooms = (data: ChatRoomData[]) => {
@@ -43,20 +45,28 @@ const RecentChat: React.FC = () => {
 
 		if (socket) {
 			socket.emit('getChatRooms', { userId: currentUserId });
-			socket.emit('getLatestMatching', { userId: currentUserId }, getLatestMatching);
-			socket.on('getLatestMatching', getLatestMatching);
-			socket.on('matchingNotFound', matchingNotFound);
 			socket.on('chatRoomList', getChatRooms);
 		}
 
+		if (matchingSocket) {
+			matchingSocket.emit('getLatestMatching', { userId: currentUserId });
+			matchingSocket.on('getLatestMatching', getLatestMatching);
+			matchingSocket.on('matchingNotFound', matchingNotFound);
+		}
+
 		// 이벤트 리스너 정리
 		// 컴포넌트가 언마운트되면 더 이상 이벤트를 수신하지 않음
 		return () => {
 			if (socket) {
 				socket.off('getChatRooms', getChatRooms);
 			}
+
+			if (matchingSocket) {
+				matchingSocket.off('getLatestMatching', getLatestMatching);
+				matchingSocket.off('matchingNotFound', matchingNotFound);
+			}
 		};
-	}, [socket]);
+	}, [socket, matchingSocket]);
 
 	return (
 		<>
