Fix: api 응답 수정에 따라 opponentInfo -> otherUser로 수정

Author: gustn99

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

@@ -2,7 +2,7 @@ import { ChatBoxContainer, Textarea, SendButton } from './styles';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useParams } from 'react-router-dom';
-import { OpponentInfoAtom } from '@recoil/util/OpponentInfo';
+import { OtherUserAtom } from '@recoil/util/OtherUser';
 import { useSocket } from '@context/SocketProvider';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
@@ -13,8 +13,8 @@ const ChatBox: React.FC = () => {
 
 	const { chatRoomId } = useParams();
 	const currentUserId = getCurrentUserId();
-	const opponentInfo = useRecoilValue(OpponentInfoAtom);
-	const isOpponentValid = !!(opponentInfo && opponentInfo.id);
+	const otherUser = useRecoilValue(OtherUserAtom);
+	const isOpponentValid = !!(otherUser && otherUser.id);
 
 	useEffect(() => {
 		if (textareaRef.current && !isOpponentValid) {
@@ -51,7 +51,7 @@ const ChatBox: React.FC = () => {
 		if (socket) {
 			const sendMessageRequest = {
 				chatRoomId: Number(chatRoomId),
-				toUserId: opponentInfo?.id,
+				toUserId: otherUser?.id,
 				content: newMessage,
 				fromUserId: currentUserId,
 				createdAt: new Date().toISOString(),

src/pages/Chats/ChatRoom/createExtendedMessages.ts

@@ -8,7 +8,7 @@ import { chatRoomMessagesData } from '@apis/chatting/dto';
 export const createExtendedMessages = (
 	allMessages: chatRoomMessagesData[],
 	userId: number,
-	opponentInfo: OtherUserDto | null,
+	otherUser: OtherUserDto | null,
 ) => {
 	// DateBar 표시 여부를 결정하는 함수
 	const isNewDay = (curDate: string, lastDate: string) => {
@@ -57,8 +57,8 @@ export const createExtendedMessages = (
 		} else {
 			// 받은 메시지일 경우 rcvdMessage 속성 추가
 			const rcvdMessage: RcvdMessageProps = {
-				fromUserNickname: opponentInfo?.nickname || '알수없음',
-				profilePictureUrl: opponentInfo?.profilePictureUrl || defaultProfile,
+				fromUserNickname: otherUser?.nickname || '알수없음',
+				profilePictureUrl: otherUser?.profilePictureUrl || defaultProfile,
 				content: message.content,
 				isProfileImageVisible,
 				isSenderChanged,

src/pages/Chats/ChatRoom/index.tsx

@@ -18,7 +18,7 @@ import type { BottomSheetMenuProps } from '@components/BottomSheetMenu/dto';
 import type { ModalProps } from '@components/Modal/dto';
 import { createExtendedMessages } from './createExtendedMessages';
 import { AllMesagesAtom } from '@recoil/Chats/AllMessages';
-import { OpponentInfoAtom } from '@recoil/util/OpponentInfo';
+import { OtherUserAtom } from '@recoil/util/OtherUser';
 import { useSocket } from '@context/SocketProvider';
 import Back from '@assets/arrow/left.svg';
 import KebabMenu from '@assets/default/more.svg';
@@ -52,7 +52,7 @@ const ChatRoom: React.FC = () => {
 
 	const { chatRoomId } = useParams();
 	const currentUserId = getCurrentUserId();
-	const opponentInfo = useRecoilValue(OpponentInfoAtom);
+	const otherUser = useRecoilValue(OtherUserAtom);
 
 	// 메시지 수신 시 아래로 스크롤 (스크롤 아래 고정)
 	const scrollToBottom = (ref: React.RefObject<HTMLDivElement>) => {
@@ -61,21 +61,21 @@ const ChatRoom: React.FC = () => {
 
 	// 프로필 사진 클릭 시 프로필 페이지로 이동
 	const handleUserClick = useCallback(() => {
-		const opponentId = opponentInfo?.id ? opponentInfo.id : -1;
+		const opponentId = otherUser?.id ? otherUser.id : -1;
 		if (opponentId === -1) {
 			setModalContent('유저 정보를 찾을 수 없습니다.');
 			setIsStatusModalOpen(true);
 		} else {
 			nav(`/users/${opponentId}`);
 		}
-	}, [opponentInfo, nav]);
+	}, [otherUser, nav]);
 
 	// 유저 차단 api
 	const postUserBlock = async () => {
 		try {
 			const data: PostUserBlockRequest = {
 				requesterId: currentUserId,
-				targetId: opponentInfo?.id || -1,
+				targetId: otherUser?.id || -1,
 				action: 'block',
 			};
 			const response = await postUserBlockApi(data);
@@ -133,7 +133,7 @@ const ChatRoom: React.FC = () => {
 	// 메시지 수신 시
 	useEffect(() => {
 		// 렌더링에 필요한 정보 추가
-		const temp = createExtendedMessages(allMessages, currentUserId, opponentInfo);
+		const temp = createExtendedMessages(allMessages, currentUserId, otherUser);
 		setExtendedMessages(temp);
 
 		// 스크롤 아래로 이동
@@ -230,7 +230,7 @@ const ChatRoom: React.FC = () => {
 	return (
 		<OODDFrame>
 			<TopBar
-				text={opponentInfo?.nickname || '알수없음'}
+				text={otherUser?.nickname || '알수없음'}
 				LeftButtonSrc={Back}
 				RightButtonSrc={KebabMenu}
 				onClickLeftButton={() => {

src/pages/Chats/ChatRoomItem/index.tsx

@@ -2,7 +2,7 @@ import { StyledText } from '@components/Text/StyledText';
 import { UserImage, ChatRoomItemLayout, LeftBox, RightBox, LatestMessage } from './styles';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import { OpponentInfoAtom } from '@recoil/util/OpponentInfo';
+import { OtherUserAtom } from '@recoil/util/OtherUser';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import 'dayjs/locale/ko';
@@ -13,11 +13,11 @@ dayjs.extend(relativeTime);
 
 const ChatRoomItem: React.FC<ChatRoomData> = ({ id, otherUser, latestMessage }) => {
 	const [timeAgo, setTimeAgo] = useState<string | null>(null);
-	const [, setOpponentInfo] = useRecoilState(OpponentInfoAtom);
+	const [, setOtherUser] = useRecoilState(OtherUserAtom);
 	const nav = useNavigate();
 
 	const handleChatRoomClick = () => {
-		setOpponentInfo(otherUser);
+		setOtherUser(otherUser);
 		nav(`/chats/${id}`);
 	};
 

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

@@ -26,13 +26,13 @@ import { handleError } from '@apis/util/handleError';
 import type { ModalProps } from '@components/Modal/dto';
 import Modal from '@components/Modal';
 import { useRecoilState } from 'recoil';
-import { OpponentInfoAtom } from '@recoil/util/OpponentInfo';
+import { OtherUserAtom } from '@recoil/util/OtherUser';
 import type { CardProps } from './dto';
 
 const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 	const [isStatusModalOpen, setIsStatusModalOpen] = useState(false);
 	const [modalContent, setModalContent] = useState('알 수 없는 오류가 발생했습니다.\n관리자에게 문의해 주세요.');
-	const [, setOpponentInfo] = useRecoilState(OpponentInfoAtom);
+	const [, setOtherUser] = useRecoilState(OtherUserAtom);
 	const nav = useNavigate();
 	const requester = matching.requester;
 
@@ -58,7 +58,7 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 				removeRejectedMatching(); // 매칭 리스트에서 해당 매칭을 제거
 
 				if (status === 'accept') {
-					setOpponentInfo({
+					setOtherUser({
 						id: requester.id,
 						nickname: requester.nickname,
 						profilePictureUrl: requester.profilePictureUrl,

src/recoil/util/OpponentInfo.ts src/recoil/util/OtherUser.tssrc/recoil/util/OpponentInfo.ts renamed to src/recoil/util/OtherUser.ts

@@ -4,8 +4,8 @@ import type { OtherUserDto } from '@apis/chatting/dto';
 
 const { persistAtom } = recoilPersist();
 
-export const OpponentInfoAtom = atom<OtherUserDto | null>({
-	key: 'OpponentInfoAtom',
+export const OtherUserAtom = atom<OtherUserDto | null>({
+	key: 'OtherUserAtom',
 	default: null,
 	effects_UNSTABLE: [persistAtom],
 });