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

* refactor: 불필요한 주석 제거 및 푸터 컴포넌트 내 onSuccess 제거 * refactor: 불필요한 props 제거 * feat: 임시로 광고 숨김 * fix: invalidated queries to refetch fresh data * fix: 멤버 삭제 기능 수정 * fix: 파라미터 수정 * refactor: 에러 메시지 출력되도록 수정 * fix: 개설자 프로필 이미지 뜨도록 수정 * fix: 개설자 이미지 뜨도록 이름 수정 * fix: roomId 가져오는 방식 수정 * chore: 안 쓰는 import 주석 처리 * refactor: 주석 삭제 * refactor: 화살표 함수로 복구 * refactor: useQueryData로 변경
SWEET-DEVELOPERS · Feb 16, 2024 · 66e6c90 · 66e6c90
1 parent 2c77e4d
commit 66e6c90
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 94 deletions.
diff --git a/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx b/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>
   );
 };

diff --git a/src/components/GiftAdd/AddGiftLink/common/GiftAddNextBtn/GiftAddNextBtn.tsx b/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 (

diff --git a/src/components/GiftAdd/GiftAddPageBottomSection/GiftAddPageBottom.tsx b/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);

diff --git a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx b/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={'내가 등록한 선물'} />

diff --git a/src/hooks/queries/etc/usePostMyPresignedUrl.tsx b/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);

diff --git a/src/hooks/queries/gift/useDeleteMyGift.tsx b/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('선물 삭제 성공');

diff --git a/src/hooks/queries/gift/usePostGift.tsx b/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);
     },
   });
 

diff --git a/src/hooks/queries/room/useDeleteRoomMember.tsx b/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 };

diff --git a/src/pages/MyPage/EditRoom/CardGuest/CardGuest.tsx b/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 });

diff --git a/src/pages/MyPage/EditRoom/EditRoom.tsx b/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}
         />
 

diff --git a/src/types/member/index.d.ts b/src/types/member/index.d.ts
@@ -40,7 +40,7 @@ export type RoomMemberType = {
 
 export type OwnerListType = {
   ownerId: number;
-  profileImgUrl: string;
+  profileImageUrl: string;
   name: string;
 };