- {friend.friendProfileUrl ? (
+ {friend.friendsProfileUrl ? (
) : (
@@ -43,7 +43,7 @@ const FriendInfoItem = ({ friend, setCurrentPage }: FriendInfoItemProps) => {
- {friend.friendNickName} + {friend.friendsNickName}
{friend.gender === 'MALE' ? '남자' : '여자'} diff --git a/src/components/home/FriendList/FriendListPage.tsx b/src/components/home/FriendList/FriendListPage.tsx index 593e9dd..78c38ba 100644 --- a/src/components/home/FriendList/FriendListPage.tsx +++ b/src/components/home/FriendList/FriendListPage.tsx @@ -23,18 +23,21 @@ const FriendListPage = ({ isOpen, setCurrentPage }: FriendListPageProps) => { return ( <>
{friendList.length > 0 ? (
- friendList.map((friend) => {
- return (
- 친구를 추가해보세요!
)}
@@ -42,9 +45,8 @@ const FriendListPage = ({ isOpen, setCurrentPage }: FriendListPageProps) => {
{isFetchingNextPage && (
+
-
+
) : (
+
+ }
+ >
+ {
control: Control;
@@ -9,16 +12,22 @@ interface InviteMembersProps {
const InviteMembers = ({
control,
}: InviteMembersProps) => {
- const members: string[] = ['친구 1', '친구 2', '친구 3'];
+ const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useFriends();
+ const members = data.pages.flatMap((page) => page.response || []);
+ const { isIntersecting, ref } = useIntersectionObserver();
+
+ if (isIntersecting && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ }
// safeValue 친구 리스트에 선택된 값이 포함되어 있는지 검사하고 업데이트시키는 함수
const handleUpdateMembers = (
safeValue: string[],
- selectedMemnbers: string,
+ selectedMembers: string,
) => {
- const updatedMembers = safeValue.includes(selectedMemnbers)
- ? safeValue.filter((member) => member !== selectedMemnbers)
- : [...safeValue, selectedMemnbers];
+ const updatedMembers = safeValue.includes(selectedMembers)
+ ? safeValue.filter((member) => member !== selectedMembers)
+ : [...safeValue, selectedMembers];
return updatedMembers;
};
@@ -34,20 +43,32 @@ const InviteMembers = ({
);
diff --git a/src/components/home/chatLink/index.tsx b/src/components/home/chatLink/index.tsx
new file mode 100644
index 0000000..b08f2c1
--- /dev/null
+++ b/src/components/home/chatLink/index.tsx
@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+import ChatIcon from '@/assets/icon/chattingRoomIcon.svg?react';
+
+const ChatLinkButton = ({ chattingRoomId }: { chattingRoomId: string }) => {
+ return (
+
+ 현재 등록된 매칭이 없어요!
)}
@@ -49,9 +50,8 @@ const MatchingPage = ({
{isFetchingNextPage && (
(0);
const [roomStatus, setRoomStatus] = useState<'searching' | 'matching'>(
'searching',
);
- const [roomId, setRoomId] = useState(null);
useEffect(() => {
initializeSSE();
@@ -24,7 +25,7 @@ const MatchingInfoPage = () => {
useEffect(() => {
messages.forEach((eventMessage) => {
- switch (eventMessage.eventType) {
+ switch (eventMessage.message.topic) {
case 'match_member_joined':
setRoomCapacity((prev) => Math.max(prev + 1, 4));
break;
@@ -35,7 +36,7 @@ const MatchingInfoPage = () => {
case 'match_room_created':
setRoomCapacity((prev) => Math.max(prev + 1, 4));
- setRoomId(eventMessage.message.roomId);
+ setChattingRoomId(eventMessage.message.roomId.toString());
setRoomStatus('matching');
break;
@@ -43,7 +44,7 @@ const MatchingInfoPage = () => {
break;
}
});
- }, [messages, reset]);
+ }, [messages, reset, setChattingRoomId]);
return (
@@ -77,7 +78,7 @@ const MatchingInfoPage = () => {
{currentPage === 'FRIEND_LIST' ? '친구 목록' : '블랙리스트'}
diff --git a/src/components/home/Navbar.tsx b/src/components/home/Navbar.tsx index 74f2da9..83f1a8a 100644 --- a/src/components/home/Navbar.tsx +++ b/src/components/home/Navbar.tsx @@ -116,7 +116,7 @@ const Navbar = ({ modalContent }: NavbarProps) => {친구 초대
- {members.map((member) => (
- {
- const updatedMembers = handleUpdateMembers(
- safeValue,
- selectedMemnbers,
- );
- onChange(updatedMembers);
- }}
- />
- ))}
+ {members.length > 0 ? (
+ <>
+ {members.map((member) => (
+ {
+ const updatedMembers = handleUpdateMembers(
+ safeValue,
+ selectedMembers,
+ );
+ onChange(updatedMembers);
+ }}
+ />
+ ))}
+
+
+ ) : (
+
+ 친구를 추가해보세요!
+
+ )}
+ 진행중인 매칭 채팅방 들어가기 +
+ + ); +}; + +export default ChatLinkButton; diff --git a/src/components/home/manualMatching/MatchingPage.tsx b/src/components/home/manualMatching/MatchingPage.tsx index fc6c50b..943521c 100644 --- a/src/components/home/manualMatching/MatchingPage.tsx +++ b/src/components/home/manualMatching/MatchingPage.tsx @@ -32,16 +32,17 @@ const MatchingPage = ({ className={`flex flex-col gap-4 ${isOpen ? '' : 'pb-[calc(100dvh-430px)]'} h-[calc(100dvh-225px)] max-h-[calc(100dvh-225px)] overflow-y-scroll scroll-hidden`} > {manualMatchingList.length > 0 ? ( - manualMatchingList.map((manualInfo) => { - return ( + <> + {manualMatchingList.map((manualInfo) => (
+
매칭 내역이 없어요!
- )}
+ <>
+ {myMatchingList.length > 0 ? (
+ myMatchingList.map((myInfo) => {
+ return (
+ 매칭 내역이 없어요!
+ )}
+
+
{isFetchingNextPage && (
- {isExpand && currentPage! && (
+
+ {isExpand && (
)}
diff --git a/src/components/modal/AgreementModal.tsx b/src/components/modal/AgreementModal.tsx
index 13b1e83..1503c28 100644
--- a/src/components/modal/AgreementModal.tsx
+++ b/src/components/modal/AgreementModal.tsx
@@ -14,6 +14,7 @@ import requestAgreement from '@/libs/apis/auth/requestAgreement';
import { useToast } from '@/contexts/ToastContext';
import handleAxiosError from '@/libs/apis/axiosError.api';
import useRequestStatus from '@/hooks/useRequestStatus';
+import ERROR_MESSAGE from '@/constants/errorMessage.constant';
const AgreementModal = () => {
const navigate = useNavigate();
@@ -60,7 +61,8 @@ const AgreementModal = () => {
} catch (error: unknown) {
setError();
const errorMessage = handleAxiosError(error);
- openToast(errorMessage, 'error');
+ console.error(errorMessage);
+ openToast(ERROR_MESSAGE, 'error');
} finally {
closeModal();
}
diff --git a/src/components/modal/FriendDeleteOrBlack.tsx b/src/components/modal/FriendDeleteOrBlack.tsx
index 75a53ec..2e92904 100644
--- a/src/components/modal/FriendDeleteOrBlack.tsx
+++ b/src/components/modal/FriendDeleteOrBlack.tsx
@@ -1,5 +1,6 @@
import Button from '@/components/commons/Button';
import Modal from '@/components/modal';
+import ERROR_MESSAGE from '@/constants/errorMessage.constant';
import { useModal } from '@/contexts/ModalContext';
import { useToast } from '@/contexts/ToastContext';
import useDeleteFriend from '@/hooks/mutations/useDeleteFriend';
@@ -24,8 +25,8 @@ const FriendDeleteOrBlack = ({
closeModal();
setCurrentPage('BLACK_LIST');
},
- onError: (error) => {
- openToast(error.message, 'error');
+ onError: () => {
+ openToast(ERROR_MESSAGE, 'error');
},
});
};
@@ -37,8 +38,8 @@ const FriendDeleteOrBlack = ({
closeModal();
setCurrentPage('FRIEND_LIST');
},
- onError: (error) => {
- openToast(error.message, 'error');
+ onError: () => {
+ openToast(ERROR_MESSAGE, 'error');
},
});
};
diff --git a/src/components/notification/FriendRequestNotification.tsx b/src/components/notification/FriendRequestNotification.tsx
index d5bfa85..1dd5768 100644
--- a/src/components/notification/FriendRequestNotification.tsx
+++ b/src/components/notification/FriendRequestNotification.tsx
@@ -1,8 +1,9 @@
import Button from '@/components/commons/Button';
+import ERROR_MESSAGE from '@/constants/errorMessage.constant';
import { useToast } from '@/contexts/ToastContext';
-import useAcceptFriend from '@/hooks/mutations/useAcceptFriend';
-import useDeleteFriend from '@/hooks/mutations/useDeleteFriend';
import useDeleteNotification from '@/hooks/mutations/useDeleteNotification';
+import useFriendReply from '@/hooks/mutations/useFriendReply';
+import useInviteReply from '@/hooks/mutations/useInviteReply';
import { NotificationResponse } from '@gachTaxi-types';
import { InfiniteData, useQueryClient } from '@tanstack/react-query';
import { motion } from 'framer-motion';
@@ -10,18 +11,22 @@ import { motion } from 'framer-motion';
interface FriendRequestNotificationProps {
senderId: number;
content: string;
+ matchingRoomId: number;
notificationId: string;
+ type: 'FRIEND_REQUEST' | 'MATCH_INVITE';
}
const FriendRequestNotification = ({
senderId,
content,
+ matchingRoomId,
notificationId,
+ type,
}: FriendRequestNotificationProps) => {
const { openToast } = useToast();
const { mutate: deleteNotification } = useDeleteNotification();
- const { mutate: acceptFriend } = useAcceptFriend();
- const { mutate: rejectFriend } = useDeleteFriend();
+ const { mutate: replyFriend } = useFriendReply();
+ const { mutate: replyInite } = useInviteReply();
const queryClient = useQueryClient();
// 낙관적 업데이트용 함수
@@ -43,12 +48,17 @@ const FriendRequestNotification = ({
const acceptFriendRequest = () => {
handleQueryData();
- acceptFriend(senderId, {
+ const data = {
+ memberId: senderId,
+ notificationId,
+ status: 'ACCEPTED' as const,
+ };
+ replyFriend(data, {
onSuccess: (response) => {
openToast(response.message, 'success');
},
- onError: (error) => {
- openToast(error.message, 'error');
+ onError: () => {
+ openToast(ERROR_MESSAGE, 'error');
},
});
};
@@ -60,8 +70,36 @@ const FriendRequestNotification = ({
onSuccess: (response) => {
openToast(response.message, 'success');
},
- onError: (error) => {
- openToast(error.message, 'error');
+ onError: () => {
+ openToast(ERROR_MESSAGE, 'error');
+ },
+ });
+ };
+
+ const handleAcceptInvite = () => {
+ handleQueryData();
+
+ const data = { matchingRoomId, notificationId, status: 'ACCEPT' as const };
+ replyInite(data, {
+ onSuccess: (response) => {
+ openToast(response.message, 'success');
+ },
+ onError: () => {
+ openToast(ERROR_MESSAGE, 'error');
+ },
+ });
+ };
+
+ const handleRejectInvite = () => {
+ handleQueryData();
+
+ const data = { matchingRoomId, notificationId, status: 'REJECT' as const };
+ replyInite(data, {
+ onSuccess: (response) => {
+ openToast(response.message, 'success');
+ },
+ onError: () => {
+ openToast(ERROR_MESSAGE, 'error');
},
});
};
@@ -69,12 +107,17 @@ const FriendRequestNotification = ({
const rejectFriendRequest = () => {
handleQueryData();
- rejectFriend(senderId, {
+ const data = {
+ memberId: senderId,
+ notificationId,
+ status: 'REJECTED' as const,
+ };
+ replyFriend(data, {
onSuccess: (response) => {
openToast(response.message, 'success');
},
- onError: (error) => {
- openToast(error.message, 'error');
+ onError: () => {
+ openToast(ERROR_MESSAGE, 'error');
},
});
};
@@ -103,13 +146,20 @@ const FriendRequestNotification = ({
>
>({
@@ -31,7 +33,7 @@ const ManualMatchingRegister = () => {
time: formatTimeToSelect(new Date(new Date().setHours(1, 0, 0, 0))),
members: [],
criteria: [],
- content: '',
+ description: '',
expectedTotalCharge: 4800,
},
});
@@ -90,7 +92,15 @@ const ManualMatchingRegister = () => {
+
+ }
+ >
+ 참여중인 매칭 리스트를 확인할 수 있어요!
- {myMatchingList.length > 0 ? ( - myMatchingList.map((myInfo) => { - return
- {manualInfo.departureTime}
+ {formatToKoreanTime(manualInfo.departureTime)}
{manualInfo.currentMembers}/4
@@ -88,16 +95,29 @@ const MatchingInfoItem = ({
)}
- + - 등록된 태그가 없어요! +
+ )}{content}
-
}>
diff --git a/src/store/useChattingRoomId.ts b/src/store/useChattingRoomId.ts
new file mode 100644
index 0000000..490d27d
--- /dev/null
+++ b/src/store/useChattingRoomId.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface ChattingRoomIdState {
+ chattingRoomId: string;
+ setChattingRoomId: (roomId: string) => void;
+}
+
+const useChattingRoomIdStore = create((set) => ({
+ chattingRoomId: '',
+ setChattingRoomId: (roomId: string) => set({ chattingRoomId: roomId }),
+}));
+
+export default useChattingRoomIdStore;
diff --git a/src/types/friend.d.ts b/src/types/friend.d.ts
index ba5e4b4..1fb630b 100644
--- a/src/types/friend.d.ts
+++ b/src/types/friend.d.ts
@@ -15,9 +15,9 @@ declare module 'gachTaxi-types' {
// FriendListResponse 종속
interface Friend {
- friendId: number;
- friendNickName: string;
- friendProfileUrl: string;
+ friendsId: number;
+ friendsNickName: string;
+ friendsProfileUrl: string;
gender: 'MALE' | 'FEMALE';
}
diff --git a/src/types/match.d.ts b/src/types/match.d.ts
index a775bf3..7dc01d3 100644
--- a/src/types/match.d.ts
+++ b/src/types/match.d.ts
@@ -23,7 +23,7 @@ declare module 'gachTaxi-types' {
members: string[];
expectedTotalCharge: number;
time: string;
- content?: string;
+ description?: string;
}
type MatchingSchema = AutoMatchingTypes | ManualMatchingTypes;
diff --git a/src/types/notification.d.ts b/src/types/notification.d.ts
index 3aafe62..3d75c72 100644
--- a/src/types/notification.d.ts
+++ b/src/types/notification.d.ts
@@ -9,6 +9,11 @@ declare module '@gachTaxi-types' {
senderId: number;
}
+ interface MatchingRequestPayload {
+ senderNickname: string;
+ matchingRoomId: number;
+ }
+
type Notification =
| {
notificationId: string;
@@ -25,6 +30,14 @@ declare module '@gachTaxi-types' {
content: string;
payload: FriendRequestPayload;
createdAt: string;
+ }
+ | {
+ notificationId: string;
+ receiverId: number;
+ type: 'MATCH_INVITE';
+ content: string;
+ payload: MatchingRequestPayload;
+ createdAt: string;
};
interface Pageable {