Feat: 대기 디바운싱 및 10초 재실행

src/components/views/CartItemCount/CartItemCount.jsx

@@ -13,7 +13,14 @@ const CartItemCount = () => {
         });
         setCount(response.data.count);
       } catch (error) {
-        console.error(error);
+        if (axios.isAxiosError(error)) {
+          const err = error.response?.data.status;
+          if (err === 404) {
+            setCount(0);
+          } else {
+            console.error(error);
+          }
+        }
       }
     };
 

src/components/views/PageComponent/OrderProgress.css

@@ -1,7 +1,4 @@
 .order_progress {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100vh;
   overflow-y: auto;
@@ -36,6 +33,18 @@
   height: 1.86356rem;
   margin-top: 2.48rem;
 }
+@keyframes rotateAnimation {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(-720deg);
+  }
+}
+.rotate-on-click {
+  /* 여기도 0.5초 */
+  animation: rotateAnimation 0.5s linear;
+}
 
 .order_progress__pick_up_time img {
   width: 0.9375rem;

src/components/views/PageComponent/OrderProgress.jsx

@@ -21,7 +21,8 @@ const OrderProgress = () => {
   );
   const cancelOrder = useCancelOrder();
   const point = 175;
-
+  const [rotate, setRotate] = useState(false); //새로고침 클릭시 회전용
+  const [debounceTimeout, setDebounceTimeout] = useState(null); // 디바운싱 상태
   const progressList = useMemo(
     () => ({
       CANCEL: 0, // 주문 취소
@@ -39,9 +40,24 @@ const OrderProgress = () => {
     }
   }, [progress, progressList]);
 
+  useEffect(() => {
+    const intervalId = setInterval(refreshOrderStatus, 10000); // 10초
+    return () => clearInterval(intervalId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debounceTimeout]);
+
   // 주문 상태 새로고침 함수
   const refreshOrderStatus = () => {
-    setRefreshKey((prevKey) => prevKey + 1);
+    // 기존에 설정된 타이머가 있다면 취소
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout);
+    }
+    // 새로운 디바운스 타이머 설정
+    const timeout = setTimeout(() => {
+      setRefreshKey((prevKey) => prevKey + 1);
+    }, 500); // 0.5s 디바운싱 시간
+    setRotate(!rotate);
+    setDebounceTimeout(timeout);
   };
 
   const handleCancel = async () => {
@@ -78,7 +94,9 @@ const OrderProgress = () => {
             <img
               src={IMAGES.progressRefresh}
               alt="refresh"
-              className="order_progress__refresh"
+              className={`order_progress__refresh ${
+                rotate ? "rotate-on-click" : ""
+              }`}
               onClick={refreshOrderStatus}
             />
           </div>

src/components/views/PointStateBox/PointStateBox.jsx

@@ -1,13 +1,13 @@
 import { IMAGES } from "../../../constants/images";
 import "./PointStateBox.css";
-const PointStateBox = ({ status, point, store, date }) => {
-  const stateText = status ? "적립" : "사용";
+const PointStateBox = ({ point, store, date }) => {
+  const stateText = point > 0 ? "적립" : "사용";
   return (
     <div className="membership-box-container">
       <div className="membership-box">
         <div
           className={`membership-box-img ${
-            status
+            point > 0
               ? "membership-box-img-accumulate-color"
               : "membership-box-img-use-color"
           }`}

src/pages/MembershipPage/MembershipPage.jsx

@@ -50,15 +50,14 @@ function MembershipPage() {
             <span>멤버십 내역</span>
           </div>
           {pointHistory?.length ? (
-            pointHistory?.map((e, i) => (
+            pointHistory.reverse()?.map((e, i) => (
               // {/* 매핑될 요소 */}
               <div
                 className="membershippage-use-point-box-content"
                 style={{ textDecoration: "none" }}
                 key={i}
               >
                 <PointStateBox
-                  status={e.status}
                   point={e.point}
                   store={e.store}
                   date={e.date}