Fix: React Querry Refetch() 에러 수정. (#59)

Upjuyanolja · Jan 25, 2024 · 4c6a959 · 4c6a959
1 parent c53b9f1
commit 4c6a959
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 13 deletions.
diff --git a/src/components/common/modal/Coupon/CouponModal.tsx b/src/components/common/modal/Coupon/CouponModal.tsx
@@ -68,8 +68,11 @@ const CouponModal = ({ isVisible, setIsVisible, id }: modalPropI) => {
             <div className="coupon-modal-wrap__body">
               <p className="text-subtitle4">이 숙소 적용 가능 쿠폰</p>
               {data &&
-                data.map((room, index) => (
-                  <div key={index} className="coupon-modal-wrap__layout">
+                data.map(room => (
+                  <div
+                    key={`room-${room.id}`}
+                    className="coupon-modal-wrap__layout"
+                  >
                     {room.coupons.map(coupon => (
                       <div className="coupon-modal-wrap__body__coupon-wrap">
                         <div key={coupon.id}>

diff --git a/src/pages/accommodation/Accommodation.tsx b/src/pages/accommodation/Accommodation.tsx
@@ -26,11 +26,14 @@ const Accommodation = () => {
   const params = new URLSearchParams(window.location.search);
   const id = params.get("id");
 
+  const getAccommodationDetailData = async () => {
+    const result = await getAccommodationDetailApi(id, startDate, endDate);
+    return result;
+  };
+
   const { data, isLoading, refetch, isError } = useQuery({
     queryKey: [id, "postDetail"],
-    queryFn: () => getAccommodationDetailApi(id, startDate, endDate),
-    staleTime: 500000,
-    cacheTime: 5000000,
+    queryFn: getAccommodationDetailData,
   });
 
   if (isLoading) {

diff --git a/src/pages/accommodation/roomSelect/RoomSelect.tsx b/src/pages/accommodation/roomSelect/RoomSelect.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import _debounce from "lodash/debounce";
 import "./roomSelect.scss";
 import RoomInfo from "./roomInfo/RoomInfo";
@@ -23,8 +23,11 @@ const RoomSelect = ({
 }: RoomSelectProps) => {
   const [isClicked, setIsClicked] = useState(true);
   const [filterData, setFilterData] = useRecoilState(filterState);
+  useEffect(() => {
+    refetch();
+  }, [isClicked]);
 
-  const handleClick = _debounce(() => {
+  const handleClick = _debounce(async () => {
     // 검색 클릭 여부 판단용 -> 각 room에서 예약 가능 여부 useEffect의 의존성 배열로 사용
     setIsClicked(!isClicked);
 
@@ -40,8 +43,7 @@ const RoomSelect = ({
         },
       };
     });
-    refetch();
-  }, 500);
+  }, 0);
 
   return (
     <div className="accommodation__select-room">

diff --git a/src/pages/accommodation/roomSelect/roomInfo/RoomInfo.tsx b/src/pages/accommodation/roomSelect/roomInfo/RoomInfo.tsx
@@ -128,9 +128,6 @@ const RoomInfo = ({ room, accommodationName, isClicked }: RoomInfoProps) => {
         options: roomOption,
       },
     ]);
-
-    await navigate("/order?cart=false");
-    window.scrollTo(0, 0);
   };
 
   let text = "";
@@ -187,7 +184,7 @@ const RoomInfo = ({ room, accommodationName, isClicked }: RoomInfoProps) => {
 
       <div>
         <div className="room__buttons-container">
-          {soldOut || !isPossible ? (
+          {count === 0 || soldOut || !isPossible ? (
             <Button
               text={text}
               buttonSize="large"