fix: 기존 매칭 신청 로직을 소켓으로 변경

Author: gustn99

src/apis/matching/dto.ts

@@ -1,5 +1,3 @@
-import type { BaseSuccessResponse } from '@apis/core/dto';
-
 type RequestStatusEnum = 'accepted' | 'rejected' | 'pending';
 
 // 매칭 요청
@@ -10,16 +8,6 @@ export interface CreateMatchingRequest {
 	message: string;
 }
 
-// response
-export type CreateMatchingResponse = BaseSuccessResponse<CreateMatchingData>;
-
-export interface CreateMatchingData {
-	id: number; // matchingId
-	chatRoomId: number;
-	requesterId: number;
-	targetId: number;
-}
-
 // 최근 매칭 조회 (채팅방 리스트에서)
 export interface LatestMatchingData {
 	id?: number;
@@ -56,20 +44,3 @@ export interface PostImageDto {
 	url: string;
 	orderNum: number;
 }
-
-// 매칭 요청 수락 및 거절
-// request
-export interface ModifyMatchingStatusRequest {
-	requestStatus: 'accept' | 'reject';
-}
-
-// response
-export type ModifyMatchingStatusResponse = BaseSuccessResponse<ModifyMatchingStatusData>;
-
-export interface ModifyMatchingStatusData {
-	id: number; // matchingId
-	requesterId: number;
-	targetId: number;
-	requestStatus: string;
-	chatRoomId: number;
-}

src/apis/matching/index.ts

@@ -65,6 +65,7 @@ const MatchingRoom: React.FC = () => {
 			if (JSON.stringify(data) === '{}') {
 				setHasNewMatching(false);
 			} else {
+				setHasNewMatching(true);
 				setAllMatchings([...allMatchings, data]);
 			}
 		};

src/pages/Chats/MatchingRoom/index.tsx

@@ -152,12 +152,13 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 
 		socket.on('error', (data) => {
 			setModalContent(data);
-			setIsMatchingCommentBottomSheetOpen(false);
 			setIsStatusModalOpen(true);
 
 			// 리스너가 중복 등록되지 않도록 바로 정리
 			socket.off('error');
 		});
+
+		setIsMatchingCommentBottomSheetOpen(false);
 	};
 
 	// 게시글 옵션(더보기) 바텀시트

src/pages/Home/OOTD/Feed/index.tsx

@@ -5,9 +5,9 @@ import { useRecoilValue } from 'recoil';
 
 import theme from '@styles/theme';
 
-import { createMatchingApi } from '@apis/matching';
 import { getUserPostListApi } from '@apis/post';
 import { getUserInfoApi } from '@apis/user';
+import { useSocket } from '@context/SocketProvider';
 import { OtherUserAtom } from '@recoil/util/OtherUser';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
@@ -56,6 +56,7 @@ const Profile: React.FC = () => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [modalContent, setModalContent] = useState('');
 	const navigate = useNavigate();
+	const socket = useSocket('matching');
 
 	const { userId } = useParams<{ userId: string }>();
 	const profileUserId = Number(userId);
@@ -81,26 +82,22 @@ const Profile: React.FC = () => {
 		fetchData();
 	}, [profileUserId]);
 
-	const createMatching = async (message: string) => {
-		const matchingRequestData = {
+	const createMatching = (comment: string) => {
+		socket.emit('requestMatching', {
 			requesterId: currentUserId,
 			targetId: otherUser?.id || profileUserId,
-			message: message,
-		};
+			message: comment,
+		});
 
-		try {
-			await createMatchingApi(matchingRequestData);
-			handleModalOpen(`${userInfo?.nickname}님에게 대표 OOTD와 \n한 줄 메세지를 보냈어요!`);
-		} catch (error) {
-			console.error('매칭 신청 오류:', error);
-			handleModalOpen('매칭 신청에 실패했습니다.');
-		}
-	};
+		socket.on('error', (data) => {
+			setModalContent(data);
+			setIsModalOpen(true);
+
+			// 리스너가 중복 등록되지 않도록 바로 정리
+			socket.off('error');
+		});
 
-	const handleModalOpen = (message: string) => {
 		setIsBottomSheetOpen(false);
-		setModalContent(message);
-		setIsModalOpen(true);
 	};
 
 	if (isLoading) return <Loading />;