[선물 등록, 선물방 편집] 리액트 쿼리 관련 데이터 실시간 업데이트 문제 해결

src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx

@@ -1,11 +1,7 @@
-// import { useNavigate } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom';
-// import { IcLeft } from '../../../assets/svg';
 import usePostGift from '../../../hooks/queries/gift/usePostGift';
 import GiftAddNextBtn from '../AddGiftLink/common/GiftAddNextBtn/GiftAddNextBtn';
 import * as S from './AddGiftFooter.styled';
 import { OpenGraphResponseType } from '../../../types/etc';
-
 interface ItemInfoType {
   roomId: number;
 }
@@ -41,68 +37,37 @@ const AddGiftFooter = ({
   // fetchPresignedUrl,
   // setImageUrl,
 }: AddGiftFooterProps) => {
-  // const updatedItemInfo = {
-  //   roomId: itemInfo.roomId,
-  //   name: name,
-  //   cost: cost,
-  //   imageUrl: imageUrl,
-  //   url: link,
-  // };
-  const navigate = useNavigate();
-  const { mutation } = usePostGift(itemInfo.roomId, targetDate);
+  const { mutation } = usePostGift(itemInfo.roomId, targetDate, setStep);
 
-  const onClick = async () => {
-    console.log(fileName);
+  function onClickBtn() {
     // const { presignedUrl } = await fetchPresignedUrl(fileName);
     // await saveImageUrl(presignedUrl);
     // setImageUrl(presignedUrl);
     if (isActivated) {
       console.log('값', imageUrl);
       if (openGraph.image) {
-        mutation.mutate(
-          {
-            roomId: itemInfo.roomId,
-            name: name,
-            cost: cost,
-            imageUrl: imageUrl,
-            url: link,
-          },
-          {
-            onSuccess: () => {
-              // console.log('PUT 서버통신 후 presignedUrl', presignedUrl);
-              navigate(`/add-gift/${itemInfo.roomId}/${targetDate}`);
-              setStep(0);
-            },
-          },
-        );
+        mutation.mutate({
+          roomId: itemInfo.roomId,
+          name: name,
+          cost: cost,
+          imageUrl: imageUrl,
+          url: link,
+        });
       } else {
-        mutation.mutate(
-          {
-            roomId: itemInfo.roomId,
-            name: name,
-            cost: cost,
-            imageUrl: '',
-            url: link,
-          },
-          {
-            onSuccess: () => {
-              // console.log('PUT 서버통신 후 presignedUrl', presignedUrl);
-              navigate(`/add-gift/${itemInfo.roomId}/${targetDate}`);
-              setStep(0);
-            },
-          },
-        );
+        mutation.mutate({
+          roomId: itemInfo.roomId,
+          name: name,
+          cost: cost,
+          imageUrl: '',
+          url: link,
+        });
       }
     }
-  };
-
-  // const handlePrevBtnClick = () => {
-  //   setStep(1);
-  // };
+  }
 
   return (
     <S.AddGiftFooterWrapper>
-      <GiftAddNextBtn isActivated={isActivated} onClick={onClick} children='완료' />
+      <GiftAddNextBtn isActivated={isActivated} onClick={onClickBtn} children='완료' />
     </S.AddGiftFooterWrapper>
   );
 };

src/components/GiftAdd/AddGiftLink/common/GiftAddNextBtn/GiftAddNextBtn.tsx

@@ -4,7 +4,7 @@ import * as S from './GiftAddNextBtn.styled';
 interface GiftAddNextBtnProps {
   children: React.ReactNode;
   isActivated: boolean;
-  onClick: () => void;
+  onClick: VoidFunction;
 }
 const GiftAddNextBtn = ({ children, isActivated, onClick }: GiftAddNextBtnProps) => {
   return (

src/components/GiftAdd/GiftAddPageBottomSection/GiftAddPageBottom.tsx

@@ -11,7 +11,7 @@ interface GiftAddPageBottomProps {
 }
 
 const GiftAddPageBottom = ({ adPrice, myGiftData }: GiftAddPageBottomProps) => {
-  const [isAdVisible, setIsAdVisible] = useState(myGiftData.length <= 1);
+  const [isAdVisible, setIsAdVisible] = useState(false);
 
   const handleIcCancelClick = () => {
     setIsAdVisible(false);

src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx

@@ -6,7 +6,6 @@ import GiftAddPageLayoutHeader from './GiftAddPageLayoutHeader';
 import useGetMyGift from '../../../hooks/queries/gift/useGetMyGift';
 import EmptyGiftAddButtonsWrapper from '../GiftAddButtons/EmptyGiftAddButtonsWrapper';
 import useDeleteMyGift from '../../../hooks/queries/gift/useDeleteMyGift';
-// import { useEffect } from 'react';
 
 interface GiftAddPageLayoutProps {
   roomId: string;
@@ -19,14 +18,13 @@ interface GiftAddPageLayoutProps {
 
 const GiftAddPageLayout = ({
   targetDate,
-  // step,
   roomId,
   setStep,
   // itemNum,
   setItemNum,
 }: GiftAddPageLayoutProps) => {
   const roomIdNumber = parseInt(roomId);
-  const { data } = useGetMyGift({ roomId: roomIdNumber });
+  const { data } = useGetMyGift({ roomId: roomIdNumber});
   setItemNum(data.data.myGiftDtoList.length);
   const parsedRoomId = parseInt(roomId);
   const { mutation } = useDeleteMyGift(parsedRoomId);
@@ -42,10 +40,6 @@ const GiftAddPageLayout = ({
     mutation.mutate(giftId);
   };
 
-  // useEffect(()=> {
-
-  // }, [])
-
   return (
     <S.GiftAddPageWrapper>
       <GiftAddPageLayoutHeader title={'내가 등록한 선물'} />

src/hooks/queries/etc/usePostMyPresignedUrl.tsx

@@ -30,12 +30,10 @@ const usePostMyPresignedUrl = (roomId: number) => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationKey: [MY_GIFT_QUERY_KEY[0]],
     mutationFn: postPresignedUrl,
     onSuccess: (data) => {
       console.log('usePostPresignedUrl onSuccess 내꺼로 포스트 성공~', data);
-      queryClient.invalidateQueries({ queryKey: [MY_GIFT_QUERY_KEY[0], roomId] });
-
+      queryClient.setQueryData([MY_GIFT_QUERY_KEY[0], roomId], data);
     },
     onError: (error) => {
       console.log('내 선물 POST 중 에러가 발생했습니다.', error.message);

src/hooks/queries/gift/useDeleteMyGift.tsx

@@ -2,15 +2,14 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { del } from '../../../apis/client';
 import { MY_GIFT_QUERY_KEY } from './useGetMyGift';
 
-export const deleteMyGift = async (giftId: number) => {
+export async function deleteMyGift(giftId: number) {
   await del(`/gift/my/${giftId}`);
-};
+}
 
 export const useDeleteMyGift = (roomId: number) => {
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
-    mutationKey: [MY_GIFT_QUERY_KEY[0]],
     mutationFn: deleteMyGift,
     onSuccess() {
       console.log('선물 삭제 성공');

src/hooks/queries/gift/usePostGift.tsx

@@ -1,24 +1,32 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { post } from '../../../apis/client';
 import { GiftPostRequestType } from '../../../types/gift';
 import { useNavigate } from 'react-router-dom';
+import { MY_GIFT_QUERY_KEY } from './useGetMyGift';
 
-export const postNewGift = async (body: GiftPostRequestType) => {
-  post(`/gift`, body);
-};
+export async function postNewGift(body: GiftPostRequestType) {
+  await post(`/gift`, body);
+}
 
-export const usePostGift = (roomId: number, targetDate: string) => {
+export const usePostGift = (
+  roomId: number,
+  targetDate: string,
+  setStep: React.Dispatch<React.SetStateAction<number>>,
+) => {
   const navigate = useNavigate();
 
+  const queryClient = useQueryClient();
+
   const mutation = useMutation({
     mutationFn: postNewGift,
-    onSuccess: () => {
-      console.log('roomId, targetDate', roomId, targetDate);
+    onSuccess: (data) => {
+      console.log('선물 등록 성공!!');
+      queryClient.setQueryData([MY_GIFT_QUERY_KEY[0], roomId], data);
       navigate(`/add-gift/${roomId}/${targetDate}`);
+      setStep(0);
     },
-
-    onError: () => {
-      console.log('선물 등록 에러!!');
+    onError: (error) => {
+      console.log('선물 등록 에러!!', error.message);
     },
   });
 

src/hooks/queries/room/useDeleteRoomMember.tsx

@@ -11,18 +11,16 @@ export const deleteRoomMember = async ({ roomId, memberId }: DeleteRoomMember) =
   await del(`/room/${roomId}/members/${memberId}`);
 };
 
-const useDeleteRoomMember = ({ roomId, memberId }: DeleteRoomMember) => {
+const useDeleteRoomMember = ({ roomId }: DeleteRoomMember) => {
   const queryClient = useQueryClient();
-
   const mutation = useMutation({
-    mutationKey: [ROOM_MEMBER_QUERY_KEY[0]],
     mutationFn: deleteRoomMember,
     onSuccess() {
       console.log('삭제 성공');
-      queryClient.invalidateQueries({ queryKey: [ROOM_MEMBER_QUERY_KEY[0], roomId, memberId] });
+      queryClient.invalidateQueries({ queryKey: [...ROOM_MEMBER_QUERY_KEY, roomId] });
     },
-    onError: () => {
-      console.log('선물 삭제 중 에러가 발생했습니다.');
+    onError: (error) => {
+      console.log('선물 삭제 중 에러가 발생했습니다.', error.message);
     },
   });
   return { mutation };

src/pages/MyPage/EditRoom/CardGuest/CardGuest.tsx

@@ -3,7 +3,8 @@ import Type1Tag from '../../../../components/IcTag/Type1/Type1';
 import ProfileImage from '../../ProfileImage/ProfileImage';
 import * as S from './CardGuest.style';
 import useDeleteRoomMember from '../../../../hooks/queries/room/useDeleteRoomMember';
-import { useLocation } from 'react-router';
+// import { useLocation } from 'react-router';
+import { useParams } from 'react-router-dom';
 
 interface CardGuestProps {
   user: string;
@@ -13,9 +14,9 @@ interface CardGuestProps {
 }
 
 const CardGuest = ({ user, makerState, profileImageUrl, memberId }: CardGuestProps) => {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const roomIdString = searchParams.get('roomId');
+  const params = useParams();
+  const roomIdString = params.roomId;
+
   const roomId = parseInt(roomIdString || '');
   console.log('추출된 초대 코드', roomId);
   const { mutation } = useDeleteRoomMember({ roomId, memberId });

src/pages/MyPage/EditRoom/EditRoom.tsx

@@ -16,14 +16,14 @@ const EditRoom = () => {
   console.log('추출된 초대 코드', roomId);
   const roomWholeMemberData = useGetRoomMember(roomId).data;
   const roomWholeOwnerData = useGetRoomOwner(roomId).data;
-  console.log(roomWholeMemberData);
-  console.log(roomWholeOwnerData);
 
   const roomOwnerData = roomWholeOwnerData?.owner;
   const roomGifteeData = roomWholeOwnerData.room;
-  const roomMemberData = roomWholeMemberData.members;
+  const roomMemberData = roomWholeMemberData;
 
-  console.log(roomOwnerData);
+  console.log('개설자 정보', roomOwnerData);
+  console.log('선물방', roomGifteeData);
+  console.log('선물 준비 멤버 정보', roomMemberData);
 
   return (
     <S.EditRoomWrapper>
@@ -36,7 +36,7 @@ const EditRoom = () => {
         <CardGuest
           user={roomOwnerData.name}
           makerState={true}
-          profileImageUrl={roomOwnerData?.profileImgUrl}
+          profileImageUrl={roomOwnerData?.profileImageUrl}
           memberId={roomOwnerData.ownerId}
         />
 

src/types/member/index.d.ts

@@ -40,7 +40,7 @@ export type RoomMemberType = {
 
 export type OwnerListType = {
   ownerId: number;
-  profileImgUrl: string;
+  profileImageUrl: string;
   name: string;
 };