fix: 채팅방이 없을 때 UI 제거 & 오딩이 프로필 이미지 기본 프로필로 설정

Author: gustn99

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

@@ -2,6 +2,8 @@ import dayjs from 'dayjs';
 
 import RcvdMessage from '@pages/Chats/RcvdMessage';
 
+import defaultProfile from '@assets/default/defaultProfile.svg';
+
 import type { MatchingData } from '@apis/matching/dto';
 import type { RcvdMessageProps } from '@pages/Chats/RcvdMessage/dto';
 
@@ -14,7 +16,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
 
 	const firstMessageProps: RcvdMessageProps = {
 		fromUserNickname: '오딩이',
-		profilePictureUrl: '',
+		profilePictureUrl: defaultProfile,
 		content: '얘가 너 소개받고 싶대',
 		isSenderChanged: false,
 		isProfileImageVisible: true,
@@ -24,7 +26,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
 
 	const matchingMessageProps: RcvdMessageProps = {
 		fromUserNickname: '오딩이',
-		profilePictureUrl: '',
+		profilePictureUrl: defaultProfile,
 		content: message,
 		isSenderChanged: false,
 		isProfileImageVisible: false,

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

@@ -2,14 +2,16 @@ import dayjs from 'dayjs';
 
 import RcvdMessage from '@pages/Chats/RcvdMessage';
 
+import defaultProfile from '@assets/default/defaultProfile.svg';
+
 import type { RcvdMessageProps } from '@pages/Chats/RcvdMessage/dto';
 
 const NoMatchingMessage: React.FC = () => {
 	const formattedTime = dayjs(new Date()).format('HH:mm');
 
 	const messageProps: RcvdMessageProps = {
 		fromUserNickname: '오딩이',
-		profilePictureUrl: '',
+		profilePictureUrl: defaultProfile,
 		content: '매칭이 들어오면 오딩이가 알려줄게!',
 		isSenderChanged: true,
 		isProfileImageVisible: true,

src/pages/Chats/MatchingRoom/index.tsx

@@ -94,23 +94,19 @@ const MatchingRoom: React.FC = () => {
 				$withBorder={true}
 			/>
 			<MessagesContainer $isLoading={isLoading}>
-				{allMatchings.length === 0 ? (
-					<NoMatchingMessage />
-				) : (
-					allMatchings.map((matching: MatchingData) => {
-						console.log(matching);
-						return (
-							<div key={matching.id}>
-								<MatchingMessage {...matching} />
-								<ResponseMessage
-									matchingId={matching.id}
-									chatRoomId={matching.chatRoomId}
-									requestStatus={matching.requestStatus}
-								/>
-							</div>
-						);
-					})
-				)}
+				{allMatchings.map((matching: MatchingData) => {
+					console.log(matching);
+					return (
+						<div key={matching.id}>
+							<MatchingMessage {...matching} />
+							<ResponseMessage
+								matchingId={matching.id}
+								chatRoomId={matching.chatRoomId}
+								requestStatus={matching.requestStatus}
+							/>
+						</div>
+					);
+				})}
 				{!hasNewMatching && <NoMatchingMessage />}
 				<div ref={chatWindowRef} />
 			</MessagesContainer>

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

@@ -8,6 +8,8 @@ import theme from '@styles/theme';
 
 import { LatestMatchingData } from '@apis/matching/dto';
 
+import defaultProfile from '@assets/default/defaultProfile.svg';
+
 import { StyledText } from '@components/Text/StyledText';
 
 import { UserImage, MatchingRoomLayout, LeftBox, RightBox, LatestMessage } from './styles';
@@ -40,7 +42,7 @@ const MatchingRoomItem: React.FC<Partial<LatestMatchingData>> = ({ requestStatus
 
 	return (
 		<MatchingRoomLayout onClick={handleMatchingRoomClick}>
-			<UserImage src={'오딩이 프로필 이미지'} alt="user" />
+			<UserImage src={defaultProfile} alt="user" />
 			<LeftBox>
 				<StyledText $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.primary}>
 					오딩이

src/pages/Chats/RecentChat/index.tsx

@@ -7,14 +7,13 @@ import { useSocket } from '@context/SocketProvider';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
 import Loading from '@components/Loading';
-import { StyledText } from '@components/Text/StyledText';
 
 import type { ChatRoomData } from '@apis/chatting/dto';
 
 import ChatRoomItem from './ChatRoomItem/index';
 import MatchingRoomItem from './MatchingRoomItem/index';
 
-import { ChatRoomList, NoChatRoomWrapper, RecentChatInfo } from './styles';
+import { ChatRoomList, RecentChatInfo } from './styles';
 
 const RecentChat: React.FC = () => {
 	const [chatRoomList, setChatRoomList] = useState<ChatRoomData[]>([]);
@@ -72,7 +71,7 @@ const RecentChat: React.FC = () => {
 		<>
 			{isLoading ? (
 				<Loading />
-			) : chatRoomList.length !== 0 ? (
+			) : (
 				<>
 					<RecentChatInfo $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 						최근 채팅방
@@ -84,12 +83,6 @@ const RecentChat: React.FC = () => {
 						))}
 					</ChatRoomList>
 				</>
-			) : (
-				<NoChatRoomWrapper>
-					<StyledText $textTheme={{ style: 'headline1-medium' }} color={theme.colors.text.tertiary}>
-						개설된 채팅방이 없어요.
-					</StyledText>
-				</NoChatRoomWrapper>
 			)}
 		</>
 	);

src/pages/Chats/RecentChat/styles.tsx

@@ -13,11 +13,3 @@ export const ChatRoomList = styled.ul`
 	gap: 1rem;
 	padding: 0.62rem 1.25rem;
 `;
-
-export const NoChatRoomWrapper = styled.div`
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;