Refactor: api 응답 형식 수정

Author: gustn99

src/apis/chatting/dto.ts

@@ -10,7 +10,7 @@ export interface ChatRoomData {
 export interface OtherUserDto {
 	id: number;
 	nickname: string;
-	profilePictureUrl: string;
+	profileUrl: string;
 }
 
 export interface LatestMessageDto {

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

@@ -46,7 +46,7 @@ const ChatBox: React.FC = () => {
 			const sendMessageRequest = {
 				chatRoomId: Number(chatRoomId),
 				toUserId: opponentInfo?.id,
-				message: newMessage,
+				content: newMessage,
 				fromUserId: userId,
 				createdAt: new Date().toISOString(),
 			};

src/pages/Chats/ChatRoom/createExtendedMessages.ts

@@ -56,7 +56,7 @@ export const createExtendedMessages = (
 			// 받은 메시지일 경우 rcvdMessage 속성 추가
 			const rcvdMessage: RcvdMessageProps = {
 				fromUserNickname: opponentInfo?.nickname || '알수없음',
-				profilePictureUrl: opponentInfo?.profilePictureUrl || defaultProfile,
+				profilePictureUrl: opponentInfo?.profileUrl || defaultProfile,
 				content: message.content,
 				isProfileImageVisible,
 				isSenderChanged,

src/pages/Chats/ChatRoom/index.tsx

@@ -130,12 +130,12 @@ const ChatRoom: React.FC = () => {
 
 		// 컴포넌트 언마운트 시 실행
 		return () => {
-			if (socket.connected) {
-				socket.removeListener('chatRoomMessages');
-				socket.removeListener('newMessage');
+			if (socket) {
+				socket.off('chatRoomMessages');
+				socket.off('newMessage');
 			}
 		};
-	}, [chatRoomId]);
+	}, [chatRoomId, socket]);
 
 	// 메시지 렌더링에 필요한 정보 추가
 	useEffect(() => {

src/pages/Chats/ChatRoomItem/index.tsx

@@ -40,7 +40,7 @@ const ChatRoomItem: React.FC<ChatRoomData> = ({ chatRoomId, otherUser, latestMes
 
 	return (
 		<ChatRoomItemLayout onClick={onClickChatRoom}>
-			<UserImage src={otherUser?.profilePictureUrl || defaultProfile} alt="user" />
+			<UserImage src={otherUser?.profileUrl || defaultProfile} alt="user" />
 			<LeftBox>
 				<StyledText $textTheme={{ style: 'body2-medium' }} color="#1D1D1D">
 					{otherUser?.nickname || '알수없음'}

src/pages/Chats/Request/Cards/Card/index.tsx

@@ -55,7 +55,7 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 					setOpponentInfo({
 						id: requester.requesterId,
 						nickname: requester.nickname,
-						profilePictureUrl: requester.profilePictureUrl,
+						profileUrl: requester.profilePictureUrl,
 					});
 					nav(`/chats/${response.data.chatRoomId}`);
 				}

src/pages/Chats/Request/Cards/Card/styles.tsx

@@ -87,6 +87,7 @@ export const OOTDImgBox = styled.div`
 	.childSwiper .swiper-slide {
 		display: flex;
 		justify-content: center;
+		transform: scale(1);
 	}
 
 	.childSwiper .swiper-pagination {

src/pages/Chats/Request/Cards/styles.tsx

@@ -6,19 +6,20 @@ export const CardsContainer = styled.div`
 
 	.parentSwiper {
 		width: 100%;
+		z-index: 10;
 	}
 
-	.parentSwiper.swiper-slide {
+	.parentSwiper .swiper-slide {
 		transition: transform 0.3s;
 		transform: scale(0.95);
 	}
 
-	.parentSwiper.swiper-slide-active {
+	.parentSwiper .swiper-slide-active {
 		transform: scale(1);
 	}
 
-	.parentSwiper.swiper-slide-next,
-	.parentSwiper.swiper-slide-prev {
+	.parentSwiper .swiper-slide-next,
+	.parentSwiper .swiper-slide-prev {
 		transform: scale(0.95);
 	}
 

src/pages/Chats/TabBar/index.tsx

@@ -117,6 +117,7 @@ const TabBar: React.FC = () => {
 						<RecentChat matchingCount={matchingCount} swiperRef={swiperRef} />
 					</SwiperSlide>
 				</Swiper>
+				{/* <div className="margin"></div> */}
 			</Tabs>
 		</TabBarLayout>
 	);

src/pages/Home/OOTD/Feed/index.tsx

@@ -236,13 +236,13 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 					className="ootdSwiper"
 				>
 					{feed.postImages.map((postImage) => (
-						<>
-							<SwiperSlide key={postImage.url}>
+						<div key={postImage.url}>
+							<SwiperSlide>
 								<img src={postImage.url} alt={`${feed.user.nickname}의 피드 이미지`} className="ootd-image-small" />
 								<div className="blur"></div>
 								<FeedImgBackground $src={postImage.url} />
 							</SwiperSlide>
-						</>
+						</div>
 					))}
 				</Swiper>
 				<ReactionWrapper>