Merge pull request #89 from oodd-team/feat/OD-135

[OD-135] Chats 페이지 정비

Author: gustn99

.github/workflows/dev_cicd.yml

@@ -39,6 +39,7 @@ jobs:
       - run: yarn build-dev
 
       - name: deploy to s3
+        if: github.event_name == 'push'
         uses: jakejarvis/s3-sync-action@master
         with:
           args: --delete

.github/workflows/prod_cicd.yml

@@ -4,9 +4,6 @@ on:
   push:
     branches:
       - main
-  pull_request:
-    branches:
-      - main
 
 jobs:
   cicd:
@@ -39,6 +36,7 @@ jobs:
       - run: yarn build
 
       - name: deploy to s3
+        if: github.event_name == 'push'
         uses: jakejarvis/s3-sync-action@master
         with:
           args: --delete

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);
 	}