Feat/od 180

src/App.tsx

@@ -25,6 +25,7 @@ import PostInstaFeedSelect from '@pages/Post/PostInstaFeedSelect';
 
 import Chats from '@pages/Chats';
 import ChatRoom from '@pages/Chats/ChatRoom';
+import MatchingRoom from '@pages/Chats/MatchingRoom';
 
 import NotFound from '@pages/NotFound';
 
@@ -56,6 +57,7 @@ const protectedRoutes = [
 	// 메시지/채팅
 	{ path: '/chats', element: <Chats /> },
 	{ path: '/chats/:chatRoomId', element: <ChatRoom /> },
+	{ path: '/matching', element: <MatchingRoom /> },
 ];
 
 // 인증이 필요 없는 페이지 배열

src/apis/chatting/dto.ts

@@ -21,7 +21,7 @@ export interface LatestMessageDto {
 // 채팅방 전체 대화 내역 조회
 // 최근 메시지 수신
 // response
-export interface chatRoomMessagesData {
+export interface ChatRoomMessagesData {
 	id: number;
 	content: string;
 	fromUser: FromUserDto;

src/apis/matching/dto.ts

@@ -1,5 +1,7 @@
 import type { BaseSuccessResponse } from '@apis/core/dto';
 
+type RequestStatusEnum = 'accepted' | 'rejected' | 'pending';
+
 // 매칭 요청
 // request
 export interface CreateMatchingRequest {
@@ -18,29 +20,34 @@ export interface CreateMatchingData {
 	targetId: number;
 }
 
-// 매칭 리스트 조회
-// response
-export type GetMatchingListResponse = BaseSuccessResponse<GetMatchingListData>;
-
-export interface GetMatchingListData {
-	hasMatching: boolean;
-	matchingsCount: number;
-	matching: MatchingDto[];
+// 최근 매칭 조회 (채팅방 리스트에서)
+export interface LatestMatchingData {
+	id?: number;
+	requesterId?: number;
+	targetId?: number;
+	requestStatus?: RequestStatusEnum;
+	createdAt: Date;
 }
 
-export interface MatchingDto {
-	id: number; // matchingId
+// 전체 매칭 리스트 조회
+export interface MatchingData {
+	id: number;
+	message: string;
+	createdAt: string;
+	chatRoomId: number;
+	targetId: number;
 	requester: RequesterDto;
+	requestStatus: RequestStatusEnum;
 }
 
 export interface RequesterDto {
-	id: number; // requesterId
+	id: number;
 	nickname: string;
 	profilePictureUrl: string;
-	representativePost: RepresentativePost;
+	representativePost: RepresentativePostDto;
 }
 
-export interface RepresentativePost {
+export interface RepresentativePostDto {
 	postImages: PostImageDto[];
 	styleTags: string[];
 }

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];
 };

src/pages/Chats/ChatRoom/ChatBox/index.tsx → src/pages/Chats/ChatBox/index.tsx

@@ -11,7 +11,7 @@ import SendIcon from '@assets/default/send-message.svg';
 
 import { ChatBoxContainer, Textarea, SendButton } from './styles';
 
-const ChatBox: React.FC = () => {
+const ChatBox: React.FC<{ disabled?: boolean }> = ({ disabled = false }) => {
 	const [newMessage, setNewMessage] = useState('');
 	const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 	const socket = useSocket();
@@ -22,9 +22,9 @@ const ChatBox: React.FC = () => {
 	const isOtherUserValid = !!(otherUser && otherUser.id);
 
 	useEffect(() => {
-		if (textareaRef.current && !isOtherUserValid) {
+		if (textareaRef.current && (!isOtherUserValid || disabled)) {
 			textareaRef.current.disabled = true;
-			textareaRef.current.placeholder = '메시지를 보낼 수 없습니다.';
+			textareaRef.current.placeholder = '메시지를 보낼 수 없는 채팅방입니다.';
 		}
 	}, []);
 

src/pages/Chats/ChatRoom/createExtendedMessages.ts

@@ -3,12 +3,15 @@ import 'dayjs/locale/ko';
 
 import defaultProfile from '@assets/default/defaultProfile.svg';
 
-import type { OtherUserDto, chatRoomMessagesData } from '@apis/chatting/dto';
+import type { OtherUserDto, ChatRoomMessagesData } from '@apis/chatting/dto';
 
-import type { ExtendedMessageDto, RcvdMessageProps, SentMessageProps } from './dto';
+import { RcvdMessageProps } from '../RcvdMessage/dto';
+import { SentMessageProps } from '../SentMessage/dto';
+
+import type { ExtendedMessageDto } from './dto';
 
 export const createExtendedMessages = (
-	allMessages: chatRoomMessagesData[],
+	allMessages: ChatRoomMessagesData[],
 	userId: number,
 	otherUser: OtherUserDto | null,
 ) => {
@@ -21,7 +24,7 @@ export const createExtendedMessages = (
 	};
 
 	// 렌더링에 필요한 요소를 추가한 메시지 배열
-	const temp: ExtendedMessageDto[] = allMessages.map((message: chatRoomMessagesData, index) => {
+	const temp: ExtendedMessageDto[] = allMessages.map((message: ChatRoomMessagesData, index) => {
 		const prevMessage = index !== 0 ? allMessages[index - 1] : null;
 		const nextMessage = index !== allMessages.length - 1 ? allMessages[index + 1] : null;
 		const formattedTime = dayjs(message.createdAt).format('HH:mm');

src/pages/Chats/ChatRoom/dto.ts

@@ -1,24 +1,10 @@
-import type { chatRoomMessagesData } from '@apis/chatting/dto';
+import type { ChatRoomMessagesData } from '@apis/chatting/dto';
 
-export interface ExtendedMessageDto extends chatRoomMessagesData {
+import { RcvdMessageProps } from '../RcvdMessage/dto';
+import { SentMessageProps } from '../SentMessage/dto';
+
+export interface ExtendedMessageDto extends ChatRoomMessagesData {
 	isDateBarVisible: boolean;
 	sentMessage?: SentMessageProps;
 	rcvdMessage?: RcvdMessageProps;
 }
-
-export interface SentMessageProps {
-	content: string;
-	isSenderChanged: boolean; // 상단 마진 추가 여부
-	isTimeVisible: boolean; // 메시지 옆 시간 표시 여부
-	formattedTime: string; // 타임스탬프를 HH:MM 형태로 변환한 값
-}
-
-export interface RcvdMessageProps {
-	fromUserNickname: string;
-	profilePictureUrl: string;
-	content: string;
-	isSenderChanged: boolean; // 상단 마진 추가 여부
-	isProfileImageVisible: boolean; // 사용자 프로필 표시 여부
-	isTimeVisible: boolean; // 메시지 옆 시간 표시 여부
-	formattedTime: string; // 타임스탬프를 HH:MM 형태로 변환한 값
-}

src/pages/Chats/ChatRoom/index.tsx

@@ -24,18 +24,18 @@ import Loading from '@components/Loading';
 import Modal from '@components/Modal';
 import TopBar from '@components/TopBar';
 
-import type { chatRoomMessagesData } from '@apis/chatting/dto';
+import type { ChatRoomMessagesData } from '@apis/chatting/dto';
 import type { PostUserBlockRequest } from '@apis/user-block/dto';
 import type { BottomSheetMenuProps } from '@components/BottomSheet/BottomSheetMenu/dto';
 import type { BottomSheetProps } from '@components/BottomSheet/dto';
 import type { ModalProps } from '@components/Modal/dto';
 
 import type { ExtendedMessageDto } from './dto';
 
-import ChatBox from './ChatBox/index';
-import DateBar from './DateBar/index';
-import RcvdMessage from './RcvdMessage/index';
-import SentMessage from './SentMessage/index';
+import ChatBox from '../ChatBox/index';
+import DateBar from '../DateBar/index';
+import RcvdMessage from '../RcvdMessage/index';
+import SentMessage from '../SentMessage/index';
 
 import { createExtendedMessages } from './createExtendedMessages';
 import { MessagesContainer } from './styles';
@@ -114,7 +114,7 @@ const ChatRoom: React.FC = () => {
 	};
 
 	// 전체 메시지 조회 socket api
-	const getChatRoomMessages = (data: chatRoomMessagesData[]) => {
+	const getChatRoomMessages = (data: ChatRoomMessagesData[]) => {
 		setAllMessages(data);
 		if (data.length > messageLengthRef.current) {
 			setIsScroll((prev) => !prev);
@@ -123,7 +123,7 @@ const ChatRoom: React.FC = () => {
 	};
 
 	// 새 메시지 수신 socket api
-	const getNewMessage = (data: chatRoomMessagesData) => {
+	const getNewMessage = (data: ChatRoomMessagesData) => {
 		setAllMessages((prevMessages) => [...prevMessages, data]);
 		setIsScroll((prev) => !prev);
 	};