fix: 매칭룸 버그 해결

Author: gustn99

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

@@ -30,7 +30,7 @@ const Card: React.FC<CardProps> = ({ requester }) => {
 				</ProfileImgBox>
 				<ProfileInfo>
 					<StyledText
-						$textTheme={{ style: 'body1-medium' }}
+						$textTheme={{ style: 'body2-medium' }}
 						color={theme.colors.text.primary}
 						onClick={handleUserClick}
 					>
@@ -39,7 +39,7 @@ const Card: React.FC<CardProps> = ({ requester }) => {
 					<div className="row-flex">
 						{requester.representativePost.styleTags.map((tag, index) => (
 							<div className="row-flex" key={tag}>
-								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[200]}>
+								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[600]}>
 									{tag}
 								</StyledText>
 								{index < requester.representativePost.styleTags.length - 1 && (

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

@@ -1,25 +1,36 @@
 import { useNavigate } from 'react-router-dom';
 
+import { useRecoilState } from 'recoil';
+
+import theme from '@styles/theme';
+
+import { RequesterDto } from '@apis/matching/dto';
 import { useSocket } from '@context/SocketProvider';
+import { OtherUserAtom } from '@recoil/util/OtherUser';
+
+import { StyledText } from '@components/Text/StyledText';
 
 import { ResponseButton, ResponseContainer } from './styles';
 
 export interface ResponseMessageProps {
 	matchingId: number;
 	chatRoomId: number;
+	requester: Omit<RequesterDto, 'RepresentativePostDto'>;
 	requestStatus: 'accepted' | 'rejected' | 'pending';
 }
 
-const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomId, requestStatus }) => {
+const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomId, requester, requestStatus }) => {
 	const socket = useSocket('matching');
 	const isPending = requestStatus === 'pending';
 	const nav = useNavigate();
+	const [, setOtherUser] = useRecoilState(OtherUserAtom);
 
 	const handlebuttonClick = (status: 'accept' | 'reject') => {
 		if (requestStatus !== 'pending') return;
 		if (socket) {
 			socket.emit('patchMatching', { id: matchingId, requestStatus: status });
 			if (status === 'accept') {
+				setOtherUser(requester);
 				nav(`/chats/${chatRoomId}`);
 			}
 		}
@@ -29,12 +40,16 @@ const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomI
 		<ResponseContainer>
 			{(requestStatus === 'pending' || requestStatus === 'rejected') && (
 				<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('reject')}>
-					거절
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
+						거절
+					</StyledText>
 				</ResponseButton>
 			)}
 			{(requestStatus === 'pending' || requestStatus === 'accepted') && (
 				<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('accept')}>
-					수락
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
+						수락
+					</StyledText>
 				</ResponseButton>
 			)}
 		</ResponseContainer>

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

@@ -11,6 +11,6 @@ export const ResponseButton = styled.button<{ $isPending: boolean }>`
 	padding: 0.4rem 0.8rem;
 	margin: 0.5rem 0;
 	background-color: #f2f2f2;
-	border-radius: 0.5rem;
+	border-radius: 0.8rem;
 	overflow-wrap: break-word;
 `;

src/pages/Chats/MatchingRoom/index.tsx

@@ -56,6 +56,7 @@ const MatchingRoom: React.FC = () => {
 	useEffect(() => {
 		// 전체 매칭 불러오기 socket api
 		const getAllMatchings = ({ matching }: { matching: MatchingData[] }) => {
+			console.log(matching);
 			setAllMatchings(matching);
 			setIsScroll(true);
 			setIsLoading(false);
@@ -70,16 +71,23 @@ const MatchingRoom: React.FC = () => {
 			}
 		};
 
+		const handleError = (data: string) => {
+			alert(data);
+		};
+
 		if (socket) {
 			socket.emit('getAllMatchings', { userId: currentUserId });
 			socket.emit('getMatching', { userId: currentUserId });
 			socket.on('matchings', getAllMatchings);
 			socket.on('nextMatching', getNewMatching);
+			socket.on('error', handleError);
 		}
 
 		return () => {
 			if (socket) {
-				socket.off();
+				socket.off('matchings');
+				socket.off('nextMatching');
+				socket.off('error');
 			}
 		};
 	}, [socket]);
@@ -103,6 +111,7 @@ const MatchingRoom: React.FC = () => {
 							<ResponseMessage
 								matchingId={matching.id}
 								chatRoomId={matching.chatRoomId}
+								requester={matching.requester}
 								requestStatus={matching.requestStatus}
 							/>
 						</div>

src/pages/Chats/RcvdMessage/index.tsx

@@ -22,20 +22,22 @@ const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile?: () => void; ch
 			return (
 				<FirstMessageLayout $isSenderChanged={isSenderChanged}>
 					<UserImage onClick={onClickProfile} src={profilePictureUrl} alt="프로필 사진" />
-					<MessageBox>
+					<div>
 						<UsernameText
 							onClick={onClickProfile}
 							$textTheme={{ style: 'body2-regular' }}
 							color={theme.colors.text.primary}
 						>
 							{fromUserNickname}
 						</UsernameText>
-						<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
-							{children}
-							{content}
-						</Message>
-					</MessageBox>
-					{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
+						<MessageBox>
+							<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
+								{children}
+								{content}
+							</Message>
+							{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
+						</MessageBox>
+					</div>
 				</FirstMessageLayout>
 			);
 		} else {

src/pages/Chats/RcvdMessage/styles.tsx

@@ -24,13 +24,12 @@ export const UserImage = styled.img`
 
 export const UsernameText = styled(StyledText)`
 	cursor: pointer;
+	margin-bottom: 0.2rem;
 `;
 
 export const MessageBox = styled.div`
 	display: flex;
-	flex-direction: column;
 	gap: 0.2rem;
-	/* max-width: 75%; */
 	margin-right: 0.5rem;
 `;
 

src/pages/Chats/RecentChat/ChatRoomItem/index.tsx

@@ -52,7 +52,7 @@ const ChatRoomItem: React.FC<ChatRoomData> = ({ id, otherUser, latestMessage })
 				<StyledText $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.primary}>
 					{otherUser?.nickname || '알수없음'}
 				</StyledText>
-				<LatestMessage $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.primary}>
+				<LatestMessage $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.primary}>
 					{latestMessage.content}
 				</LatestMessage>
 			</LeftBox>

src/pages/Chats/RecentChat/MatchingRoomItem/index.tsx

@@ -47,7 +47,7 @@ const MatchingRoomItem: React.FC<Partial<LatestMatchingData>> = ({ requestStatus
 				<StyledText $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.primary}>
 					오딩이
 				</StyledText>
-				<LatestMessage $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.primary}>
+				<LatestMessage $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.primary}>
 					{requestStatus === 'pending' ? '얘가 너 소개받고 싶대' : '매칭이 들어오면 오딩이가 알려줄게!'}
 				</LatestMessage>
 			</LeftBox>