feat: 매칭 수락 시 채팅방으로 이동하는 기능 추가

Author: gustn99

src/pages/Chats/MatchingRoom/ResponseMessage/index.tsx

@@ -1,19 +1,27 @@
+import { useNavigate } from 'react-router-dom';
+
 import { useSocket } from '@context/SocketProvider';
 
 import { ResponseButton, ResponseContainer } from './styles';
 
 export interface ResponseMessageProps {
 	matchingId: number;
+	chatRoomId: number;
 	requestStatus: 'accepted' | 'rejected' | 'pending';
 }
 
-const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, requestStatus }) => {
+const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomId, requestStatus }) => {
 	const socket = useSocket('matching');
 	const isPending = requestStatus === 'pending';
+	const nav = useNavigate();
 
 	const handlebuttonClick = (status: 'accept' | 'reject') => {
+		if (requestStatus !== 'pending') return;
 		if (socket) {
 			socket.emit('patchMatching', { id: matchingId, requestStatus: status });
+			if (status === 'accept') {
+				nav(`/chats/${chatRoomId}`);
+			}
 		}
 	};
 

src/pages/Chats/MatchingRoom/index.tsx

@@ -98,10 +98,15 @@ const MatchingRoom: React.FC = () => {
 					<NoMatchingMessage />
 				) : (
 					allMatchings.map((matching: MatchingData) => {
+						console.log(matching);
 						return (
 							<div key={matching.id}>
 								<MatchingMessage {...matching} />
-								<ResponseMessage matchingId={matching.id} requestStatus={matching.requestStatus} />
+								<ResponseMessage
+									matchingId={matching.id}
+									chatRoomId={matching.chatRoomId}
+									requestStatus={matching.requestStatus}
+								/>
 							</div>
 						);
 					})