Merge pull request #115 from oodd-team/feat/OD-152

[OD-152] matching & chatting 도메인 api 응답 수정

Author: gustn99

src/apis/chatting/dto.ts

@@ -2,15 +2,15 @@
 // base response 형태를 따르지 않으므로 data 접미사를 사용했습니다.
 // response
 export interface ChatRoomData {
-	chatRoomId: number;
+	id: number;
 	otherUser: OtherUserDto;
 	latestMessage: LatestMessageDto;
 }
 
 export interface OtherUserDto {
 	id: number;
 	nickname: string;
-	profileUrl: string;
+	profilePictureUrl: string;
 }
 
 export interface LatestMessageDto {

src/apis/matching/dto.ts

@@ -1,4 +1,4 @@
-import { BaseSuccessResponse } from '../core/dto';
+import type { BaseSuccessResponse } from '@apis/core/dto';
 
 // 매칭 요청
 // request
@@ -12,36 +12,37 @@ export interface CreateMatchingRequest {
 export type CreateMatchingResponse = BaseSuccessResponse<CreateMatchingData>;
 
 export interface CreateMatchingData {
+	id: number; // matchingId
 	chatRoomId: number;
-	fromUserId: number;
-	toUserId: number;
+	requesterId: number;
+	targetId: number;
 }
 
 // 매칭 리스트 조회
 // response
 export type GetMatchingListResponse = BaseSuccessResponse<GetMatchingListData>;
 
 export interface GetMatchingListData {
-	isMatching: boolean; // 매칭 요청 존재 여부
-	matchingsCount: number; // 매칭 요청 개수
+	hasMatching: boolean;
+	matchingsCount: number;
 	matching: MatchingDto[];
 }
 
 export interface MatchingDto {
-	matchingId: number;
+	id: number; // matchingId
 	requester: RequesterDto;
-	requesterPost: RequesterPostDto;
 }
 
 export interface RequesterDto {
-	requesterId: number;
+	id: number; // requesterId
 	nickname: string;
 	profilePictureUrl: string;
+	representativePost: RepresentativePost;
 }
 
-export interface RequesterPostDto {
-	postImages: PostImageDto[]; // 대표 게시글 이미지
-	styleTags: string[]; // 게시글 스타일 태그
+export interface RepresentativePost {
+	postImages: PostImageDto[];
+	styleTags: string[];
 }
 
 export interface PostImageDto {
@@ -59,7 +60,7 @@ export interface ModifyMatchingStatusRequest {
 export type ModifyMatchingStatusResponse = BaseSuccessResponse<ModifyMatchingStatusData>;
 
 export interface ModifyMatchingStatusData {
-	matchingId: number;
+	id: number; // matchingId
 	requesterId: number;
 	targetId: number;
 	requestStatus: string;

src/apis/matching/index.ts

@@ -1,5 +1,5 @@
-import { newRequest } from '../core';
-import {
+import { newRequest } from '@apis/core';
+import type {
 	CreateMatchingRequest,
 	CreateMatchingResponse,
 	GetMatchingListResponse,

src/components/CommentBottomSheet/Comment/index.tsx

@@ -2,7 +2,7 @@ import { StyledText } from '@components/Text/StyledText';
 import { CommentLayout, SendContainer, CommentTextarea, SendButton } from './styles';
 import send from '@assets/default/send-comment.svg';
 import React, { useEffect, useRef, useState } from 'react';
-import { CommentProps } from './dto';
+import type { CommentProps } from './dto';
 
 const Comment: React.FC<CommentProps> = ({ content, sendComment, isModal = false }) => {
 	const [comment, setComment] = useState('');

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?.profileUrl || 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';
@@ -11,14 +11,14 @@ import type { ChatRoomData } from '@apis/chatting/dto';
 import defaultProfile from '@assets/default/defaultProfile.svg';
 dayjs.extend(relativeTime);
 
-const ChatRoomItem: React.FC<ChatRoomData> = ({ chatRoomId, otherUser, latestMessage }) => {
+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);
-		nav(`/chats/${chatRoomId}`);
+		setOtherUser(otherUser);
+		nav(`/chats/${id}`);
 	};
 
 	useEffect(() => {
@@ -40,7 +40,7 @@ const ChatRoomItem: React.FC<ChatRoomData> = ({ chatRoomId, otherUser, latestMes
 
 	return (
 		<ChatRoomItemLayout onClick={handleChatRoomClick}>
-			<UserImage src={otherUser?.profileUrl || defaultProfile} alt="user" />
+			<UserImage src={otherUser?.profilePictureUrl || defaultProfile} alt="user" />
 			<LeftBox>
 				<StyledText $textTheme={{ style: 'body2-medium' }} color="#1D1D1D">
 					{otherUser?.nickname || '알수없음'}

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

@@ -26,18 +26,18 @@ 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;
 
 	const handleUserClick = () => {
-		nav(`/users/${matching.requester.requesterId}`);
+		nav(`/users/${requester.id}`);
 	};
 
 	const handleRejectButtonClick = () => {
@@ -52,16 +52,16 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 	const modifyMatchingStatus = async (status: 'accept' | 'reject') => {
 		try {
 			console.log(matching);
-			const response = await modifyMatchingStatusApi(matching.matchingId, { requestStatus: status });
+			const response = await modifyMatchingStatusApi(matching.id, { requestStatus: status });
 
 			if (response.isSuccess) {
 				removeRejectedMatching(); // 매칭 리스트에서 해당 매칭을 제거
 
 				if (status === 'accept') {
-					setOpponentInfo({
-						id: requester.requesterId,
+					setOtherUser({
+						id: requester.id,
 						nickname: requester.nickname,
-						profileUrl: requester.profilePictureUrl,
+						profilePictureUrl: requester.profilePictureUrl,
 					});
 					nav(`/chats/${response.data.chatRoomId}`);
 				}
@@ -91,12 +91,12 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 						{requester.nickname || '알수없음'}
 					</StyledText>
 					<div className="row-flex">
-						{matching.requesterPost.styleTags.map((tag, index) => (
+						{requester.representativePost.styleTags.map((tag, index) => (
 							<div className="row-flex" key={tag}>
 								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray1}>
 									{tag}
 								</StyledText>
-								{index < matching.requesterPost.styleTags.length - 1 && (
+								{index < requester.representativePost.styleTags.length - 1 && (
 									<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray1}>
 										,&nbsp;
 									</StyledText>
@@ -105,7 +105,7 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 						))}
 					</div>
 				</ProfileInfo>
-				<SeeMore onClick={() => nav(`/users/${requester.requesterId}`)}>
+				<SeeMore onClick={() => nav(`/users/${requester.id}`)}>
 					<StyledText $textTheme={{ style: 'caption2-regular' }} color="#8e8e93">
 						OOTD 더 보기
 					</StyledText>
@@ -123,7 +123,7 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 					modules={[Pagination]}
 					className="childSwiper"
 				>
-					{matching.requesterPost.postImages.map((postImage) => (
+					{requester.representativePost.postImages.map((postImage) => (
 						<SwiperSlide key={postImage.url}>
 							<img src={postImage.url} alt="OOTD" className="slide-image-small" />
 							<div className="blur"></div>

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

@@ -47,7 +47,7 @@ const Cards: React.FC<CardsProps> = ({ decreaseMatchingCount }) => {
 				className="parentSwiper"
 			>
 				{matchings.map((matching, index) => (
-					<SwiperSlide key={matching.matchingId}>
+					<SwiperSlide key={matching.id}>
 						<Card
 							matching={matching} // 데이터를 Card 컴포넌트에 전달
 							removeRejectedMatching={() => removeRejectedMatching(index)}