diff --git a/src/apis/chatting/dto.ts b/src/apis/chatting/dto.ts index 5734abc2..ee2dc1e8 100644 --- a/src/apis/chatting/dto.ts +++ b/src/apis/chatting/dto.ts @@ -2,7 +2,7 @@ // base response 형태를 따르지 않으므로 data 접미사를 사용했습니다. // response export interface ChatRoomData { - chatRoomId: number; + id: number; otherUser: OtherUserDto; latestMessage: LatestMessageDto; } @@ -10,7 +10,7 @@ export interface ChatRoomData { export interface OtherUserDto { id: number; nickname: string; - profileUrl: string; + profilePictureUrl: string; } export interface LatestMessageDto { diff --git a/src/apis/matching/dto.ts b/src/apis/matching/dto.ts index 3a79b40b..ccae2fc6 100644 --- a/src/apis/matching/dto.ts +++ b/src/apis/matching/dto.ts @@ -1,4 +1,4 @@ -import { BaseSuccessResponse } from '../core/dto'; +import type { BaseSuccessResponse } from '@apis/core/dto'; // 매칭 요청 // request @@ -12,9 +12,10 @@ export interface CreateMatchingRequest { export type CreateMatchingResponse = BaseSuccessResponse; export interface CreateMatchingData { + id: number; // matchingId chatRoomId: number; - fromUserId: number; - toUserId: number; + requesterId: number; + targetId: number; } // 매칭 리스트 조회 @@ -22,26 +23,26 @@ export interface CreateMatchingData { export type GetMatchingListResponse = BaseSuccessResponse; 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; export interface ModifyMatchingStatusData { - matchingId: number; + id: number; // matchingId requesterId: number; targetId: number; requestStatus: string; diff --git a/src/apis/matching/index.ts b/src/apis/matching/index.ts index 62e2b595..39194b3b 100644 --- a/src/apis/matching/index.ts +++ b/src/apis/matching/index.ts @@ -1,5 +1,5 @@ -import { newRequest } from '../core'; -import { +import { newRequest } from '@apis/core'; +import type { CreateMatchingRequest, CreateMatchingResponse, GetMatchingListResponse, diff --git a/src/components/CommentBottomSheet/Comment/index.tsx b/src/components/CommentBottomSheet/Comment/index.tsx index 49a6db72..1f7bc370 100644 --- a/src/components/CommentBottomSheet/Comment/index.tsx +++ b/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 = ({ content, sendComment, isModal = false }) => { const [comment, setComment] = useState(''); diff --git a/src/pages/Chats/ChatRoom/ChatBox/index.tsx b/src/pages/Chats/ChatRoom/ChatBox/index.tsx index 90144f9b..7b1890b1 100644 --- a/src/pages/Chats/ChatRoom/ChatBox/index.tsx +++ b/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(), diff --git a/src/pages/Chats/ChatRoom/createExtendedMessages.ts b/src/pages/Chats/ChatRoom/createExtendedMessages.ts index 744c51dd..cae8e8f2 100644 --- a/src/pages/Chats/ChatRoom/createExtendedMessages.ts +++ b/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, diff --git a/src/pages/Chats/ChatRoom/index.tsx b/src/pages/Chats/ChatRoom/index.tsx index 6a01fccb..2e7a8dcd 100644 --- a/src/pages/Chats/ChatRoom/index.tsx +++ b/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) => { @@ -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 ( { diff --git a/src/pages/Chats/ChatRoomItem/index.tsx b/src/pages/Chats/ChatRoomItem/index.tsx index 81b6858e..f3198566 100644 --- a/src/pages/Chats/ChatRoomItem/index.tsx +++ b/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 = ({ chatRoomId, otherUser, latestMessage }) => { +const ChatRoomItem: React.FC = ({ id, otherUser, latestMessage }) => { const [timeAgo, setTimeAgo] = useState(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 = ({ chatRoomId, otherUser, latestMes return ( - + {otherUser?.nickname || '알수없음'} diff --git a/src/pages/Chats/Matching/Cards/Card/index.tsx b/src/pages/Chats/Matching/Cards/Card/index.tsx index 9a317ecf..62a074b8 100644 --- a/src/pages/Chats/Matching/Cards/Card/index.tsx +++ b/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 = ({ 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 = ({ 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 = ({ removeRejectedMatching, matching }) => { {requester.nickname || '알수없음'}
- {matching.requesterPost.styleTags.map((tag, index) => ( + {requester.representativePost.styleTags.map((tag, index) => (
{tag} - {index < matching.requesterPost.styleTags.length - 1 && ( + {index < requester.representativePost.styleTags.length - 1 && ( @@ -105,7 +105,7 @@ const Card: React.FC = ({ removeRejectedMatching, matching }) => { ))}
- nav(`/users/${requester.requesterId}`)}> + nav(`/users/${requester.id}`)}> OOTD 더 보기 @@ -123,7 +123,7 @@ const Card: React.FC = ({ removeRejectedMatching, matching }) => { modules={[Pagination]} className="childSwiper" > - {matching.requesterPost.postImages.map((postImage) => ( + {requester.representativePost.postImages.map((postImage) => ( OOTD
diff --git a/src/pages/Chats/Matching/Cards/index.tsx b/src/pages/Chats/Matching/Cards/index.tsx index 28424a25..a0279740 100644 --- a/src/pages/Chats/Matching/Cards/index.tsx +++ b/src/pages/Chats/Matching/Cards/index.tsx @@ -47,7 +47,7 @@ const Cards: React.FC = ({ decreaseMatchingCount }) => { className="parentSwiper" > {matchings.map((matching, index) => ( - + removeRejectedMatching(index)} diff --git a/src/pages/Chats/RecentChat/index.tsx b/src/pages/Chats/RecentChat/index.tsx index 8c2a97b1..07535891 100644 --- a/src/pages/Chats/RecentChat/index.tsx +++ b/src/pages/Chats/RecentChat/index.tsx @@ -50,8 +50,8 @@ const RecentChat: React.FC = () => { 최근 채팅방 - {chatRoomList.map((room) => ( - + {chatRoomList.map((chatRoom) => ( + ))} diff --git a/src/pages/Chats/TabBar/index.tsx b/src/pages/Chats/TabBar/index.tsx index 992a9f37..c2b98205 100644 --- a/src/pages/Chats/TabBar/index.tsx +++ b/src/pages/Chats/TabBar/index.tsx @@ -63,7 +63,7 @@ const TabBar: React.FC = () => { if (response.isSuccess) { setMatchingCount(response.data.matchingsCount); - setHasMatchingRequest(response.data.isMatching); + setHasMatchingRequest(response.data.hasMatching); } }; @@ -117,7 +117,6 @@ const TabBar: React.FC = () => { - {/*
*/} ); diff --git a/src/recoil/util/OpponentInfo.ts b/src/recoil/util/OtherUser.ts similarity index 72% rename from src/recoil/util/OpponentInfo.ts rename to src/recoil/util/OtherUser.ts index e432e240..b96bb3e5 100644 --- a/src/recoil/util/OpponentInfo.ts +++ b/src/recoil/util/OtherUser.ts @@ -4,8 +4,8 @@ import type { OtherUserDto } from '@apis/chatting/dto'; const { persistAtom } = recoilPersist(); -export const OpponentInfoAtom = atom({ - key: 'OpponentInfoAtom', +export const OtherUserAtom = atom({ + key: 'OtherUserAtom', default: null, effects_UNSTABLE: [persistAtom], });