fix: 매칭 거절/수락 UI 및 로직 수정

Author: gustn99

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

@@ -1,14 +1,34 @@
+import { useSocket } from '@context/SocketProvider';
+
 import { ResponseButton, ResponseContainer } from './styles';
 
 export interface ResponseMessageProps {
+	matchingId: number;
 	requestStatus: 'accepted' | 'rejected' | 'pending';
 }
 
-const ResponseMessage: React.FC<ResponseMessageProps> = ({ requestStatus }) => {
+const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, requestStatus }) => {
+	const socket = useSocket('matching');
+	const isPending = requestStatus === 'pending';
+
+	const handlebuttonClick = (status: 'accept' | 'reject') => {
+		if (socket) {
+			socket.emit('patchMatching', { id: matchingId, requestStatus: status });
+		}
+	};
+
 	return (
 		<ResponseContainer>
-			{(requestStatus === 'pending' || 'accepted') && <ResponseButton>거절</ResponseButton>}
-			{(requestStatus === 'pending' || 'rejected') && <ResponseButton>수락</ResponseButton>}
+			{(requestStatus === 'pending' || requestStatus === 'rejected') && (
+				<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('reject')}>
+					거절
+				</ResponseButton>
+			)}
+			{(requestStatus === 'pending' || requestStatus === 'accepted') && (
+				<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('accept')}>
+					수락
+				</ResponseButton>
+			)}
 		</ResponseContainer>
 	);
 };

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

@@ -6,7 +6,8 @@ export const ResponseContainer = styled.div`
 	justify-content: flex-end;
 `;
 
-export const ResponseButton = styled.button`
+export const ResponseButton = styled.button<{ $isPending: boolean }>`
+	cursor: ${({ $isPending }) => `${$isPending ? 'pointer' : 'default'}`};
 	padding: 0.4rem 0.8rem;
 	margin: 0.5rem 0;
 	background-color: #f2f2f2;

src/pages/Chats/MatchingRoom/index.tsx

@@ -62,7 +62,8 @@ const MatchingRoom: React.FC = () => {
 		};
 
 		const getNewMatching = (data: MatchingData) => {
-			console.log(data);
+			if (JSON.stringify(data) === '{}') return;
+			setAllMatchings([...allMatchings, data]);
 		};
 
 		if (socket) {
@@ -98,7 +99,7 @@ const MatchingRoom: React.FC = () => {
 						return (
 							<div key={matching.id}>
 								<MatchingMessage {...matching} />
-								<ResponseMessage requestStatus={matching.requestStatus} />
+								<ResponseMessage matchingId={matching.id} requestStatus={matching.requestStatus} />
 							</div>
 						);
 					})