fix: 새 매칭이 없을 때 렌더링 로직 수정

Author: gustn99

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

@@ -3,6 +3,7 @@ import { styled } from 'styled-components';
 export const CardLayout = styled.div`
 	border-radius: 0.5rem;
 	position: relative;
+	height: fit-content;
 `;
 
 export const ProfileContainer = styled.div`

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

@@ -28,7 +28,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
 		content: message,
 		isSenderChanged: false,
 		isProfileImageVisible: false,
-		isTimeVisible: true,
+		isTimeVisible: false,
 		formattedTime,
 	};
 
@@ -41,9 +41,11 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
 	return (
 		<>
 			<RcvdMessage {...firstMessageProps} />
-			<RcvdMessage {...matchingMessageProps}>
-				<Card {...cardProps} />
-			</RcvdMessage>
+			<div style={{ maxWidth: '90%' }}>
+				<RcvdMessage {...matchingMessageProps}>
+					<Card {...cardProps} />
+				</RcvdMessage>
+			</div>
 		</>
 	);
 };

src/pages/Chats/MatchingRoom/index.tsx

@@ -19,6 +19,7 @@ import { MessagesContainer } from './styles';
 
 const MatchingRoom: React.FC = () => {
 	const [allMatchings, setAllMatchings] = useState<MatchingData[]>([]);
+	const [hasNewMatching, setHasNewMatching] = useState(true);
 
 	const [isLoading, setIsLoading] = useState(true);
 	const [isScroll, setIsScroll] = useState(false);
@@ -55,15 +56,17 @@ const MatchingRoom: React.FC = () => {
 	useEffect(() => {
 		// 전체 매칭 불러오기 socket api
 		const getAllMatchings = ({ matching }: { matching: MatchingData[] }) => {
-			console.log(allMatchings);
 			setAllMatchings(matching);
 			setIsScroll(true);
 			setIsLoading(false);
 		};
 
 		const getNewMatching = (data: MatchingData) => {
-			if (JSON.stringify(data) === '{}') return;
-			setAllMatchings([...allMatchings, data]);
+			if (JSON.stringify(data) === '{}') {
+				setHasNewMatching(false);
+			} else {
+				setAllMatchings([...allMatchings, data]);
+			}
 		};
 
 		if (socket) {
@@ -95,7 +98,6 @@ const MatchingRoom: React.FC = () => {
 					<NoMatchingMessage />
 				) : (
 					allMatchings.map((matching: MatchingData) => {
-						// TODO: 매칭 상태에 따라 응답 버튼 렌더링
 						return (
 							<div key={matching.id}>
 								<MatchingMessage {...matching} />
@@ -104,6 +106,7 @@ const MatchingRoom: React.FC = () => {
 						);
 					})
 				)}
+				{!hasNewMatching && <NoMatchingMessage />}
 				<div ref={chatWindowRef} />
 			</MessagesContainer>
 			<ChatBox disabled={true} />

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

@@ -38,8 +38,6 @@ const MatchingRoomItem: React.FC<Partial<LatestMatchingData>> = ({ requestStatus
 		}
 	}, []);
 
-	console.log(requestStatus);
-
 	return (
 		<MatchingRoomLayout onClick={handleMatchingRoomClick}>
 			<UserImage src={'오딩이 프로필 이미지'} alt="user" />

src/pages/Chats/RecentChat/index.tsx

@@ -35,12 +35,12 @@ const RecentChat: React.FC = () => {
 		// 최근 매칭 조회
 		const getLatestMatching = (data: LatestMatchingData) => {
 			setLatestMatching(data);
-			console.log('getLatestMatching');
 		};
 
-		const matchingNotFound = (data: LatestMatchingData) => {
-			console.log(data);
-			console.log('matchingNotFound');
+		const matchingNotFound = (data: { joinedAt: Date }) => {
+			setLatestMatching({
+				createdAt: data.joinedAt,
+			});
 		};
 
 		if (socket) {