feat: 채팅 UX의 매칭 렌더링 구현

Author: gustn99

src/App.tsx

@@ -24,6 +24,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';
 
@@ -55,6 +56,7 @@ const protectedRoutes = [
 	// 메시지/채팅
 	{ path: '/chats', element: <Chats /> },
 	{ path: '/chats/:chatRoomId', element: <ChatRoom /> },
+	{ path: '/matching', element: <MatchingRoom /> },
 ];
 
 // 인증이 필요 없는 페이지 배열

src/apis/matching/dto.ts

@@ -22,10 +22,10 @@ export interface CreateMatchingData {
 
 // 최근 매칭 조회 (채팅방 리스트에서)
 export interface LatestMatchingData {
-	id: number;
-	requesterId: number;
-	targetId: number;
-	requestStatus: RequestStatusEnum;
+	id?: number;
+	requesterId?: number;
+	targetId?: number;
+	requestStatus?: RequestStatusEnum;
 	createdAt: Date;
 }
 

src/pages/Chats/MatchingRoom/Card/dto.ts

@@ -0,0 +1,8 @@
+import type { MatchingData } from '@apis/matching/dto';
+
+// export interface CardProps {
+// 	removeRejectedMatching: () => void;
+// 	matching: MatchingData;
+// }
+
+export type CardProps = Pick<MatchingData, 'id' | 'chatRoomId' | 'requester'>;

…/Chats/MatchingRoom/Cards/Card/index.tsx …/pages/Chats/MatchingRoom/Card/index.tsxsrc/pages/Chats/MatchingRoom/Cards/Card/index.tsx renamed to src/pages/Chats/MatchingRoom/Card/index.tsx src/pages/Chats/MatchingRoom/Cards/Card/index.tsx renamed to src/pages/Chats/MatchingRoom/Card/index.tsx

@@ -37,12 +37,11 @@ import {
 	SeeMore,
 } from './styles';
 
-const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
+const Card: React.FC<CardProps> = ({ id, chatRoomId, requester }) => {
 	const [isStatusModalOpen, setIsStatusModalOpen] = useState(false);
 	const [modalContent, setModalContent] = useState('알 수 없는 오류가 발생했습니다.\n관리자에게 문의해 주세요.');
 	const [, setOtherUser] = useRecoilState(OtherUserAtom);
 	const nav = useNavigate();
-	const requester = matching.requester;
 
 	const handleUserClick = () => {
 		nav(`/profile/${requester.id}`);
@@ -59,19 +58,16 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 	// 매칭 거절 및 수락 api
 	const modifyMatchingStatus = async (status: 'accept' | 'reject') => {
 		try {
-			console.log(matching);
-			const response = await modifyMatchingStatusApi(matching.id, { requestStatus: status });
+			const response = await modifyMatchingStatusApi(id, { requestStatus: status });
 
 			if (response.isSuccess) {
-				removeRejectedMatching(); // 매칭 리스트에서 해당 매칭을 제거
-
 				if (status === 'accept') {
 					setOtherUser({
 						id: requester.id,
 						nickname: requester.nickname,
 						profilePictureUrl: requester.profilePictureUrl,
 					});
-					nav(`/chats/${response.data.chatRoomId}`);
+					nav(`/chats/${chatRoomId}`);
 				}
 			}
 		} catch (error) {

…Chats/MatchingRoom/Cards/Card/styles.tsx …pages/Chats/MatchingRoom/Card/styles.tsxsrc/pages/Chats/MatchingRoom/Cards/Card/styles.tsx renamed to src/pages/Chats/MatchingRoom/Card/styles.tsx src/pages/Chats/MatchingRoom/Cards/Card/styles.tsx renamed to src/pages/Chats/MatchingRoom/Card/styles.tsx

@@ -0,0 +1,51 @@
+import dayjs from 'dayjs';
+
+import RcvdMessage from '@pages/Chats/RcvdMessage';
+
+import type { MatchingData } from '@apis/matching/dto';
+import type { RcvdMessageProps } from '@pages/Chats/RcvdMessage/dto';
+
+import type { CardProps } from '../Card/dto';
+
+import Card from '../Card';
+
+const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatRoomId, requester }: MatchingData) => {
+	const formattedTime = dayjs(createdAt).format('HH:mm');
+
+	const firstMessageProps: RcvdMessageProps = {
+		fromUserNickname: '오딩이',
+		profilePictureUrl: '',
+		content: '얘가 너 소개받고 싶대',
+		isSenderChanged: true,
+		isProfileImageVisible: true,
+		isTimeVisible: false,
+		formattedTime,
+	};
+
+	const matchingMessageProps: RcvdMessageProps = {
+		fromUserNickname: '오딩이',
+		profilePictureUrl: '',
+		content: message,
+		isSenderChanged: false,
+		isProfileImageVisible: false,
+		isTimeVisible: true,
+		formattedTime,
+	};
+
+	const cardProps: CardProps = {
+		id,
+		chatRoomId,
+		requester,
+	};
+
+	return (
+		<>
+			<RcvdMessage {...firstMessageProps} />
+			<RcvdMessage {...matchingMessageProps}>
+				<Card {...cardProps} />
+			</RcvdMessage>
+		</>
+	);
+};
+
+export default MatchingMessage;