From 07280dd887a765366bc475253e797f5679d6ffc6 Mon Sep 17 00:00:00 2001
From: KKangHHee <137751841+KKangHHee@users.noreply.github.com>
Date: Tue, 27 Feb 2024 17:35:45 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EA=B2=B0=EC=A0=9C=20=EB=8C=80=EA=B8=B0?=
 =?UTF-8?q?=20=EB=94=94=EB=B0=94=EC=9A=B4=EC=8B=B1=20=EB=B0=8F=2010?=
 =?UTF-8?q?=EC=B4=88=20=EC=9E=AC=EC=8B=A4=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/CartItemCount/CartItemCount.jsx     |  9 ++++++-
 .../views/PageComponent/OrderProgress.css     | 15 +++++++++---
 .../views/PageComponent/OrderProgress.jsx     | 24 ++++++++++++++++---
 .../views/PointStateBox/PointStateBox.jsx     |  6 ++---
 src/pages/MembershipPage/MembershipPage.jsx   |  3 +--
 5 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/views/CartItemCount/CartItemCount.jsx b/src/components/views/CartItemCount/CartItemCount.jsx
index ef06b13..1ee3af5 100644
--- a/src/components/views/CartItemCount/CartItemCount.jsx
+++ b/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);
+          }
+        }
       }
     };
 
diff --git a/src/components/views/PageComponent/OrderProgress.css b/src/components/views/PageComponent/OrderProgress.css
index ae0574e..815a433 100644
--- a/src/components/views/PageComponent/OrderProgress.css
+++ b/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;
diff --git a/src/components/views/PageComponent/OrderProgress.jsx b/src/components/views/PageComponent/OrderProgress.jsx
index 354dd71..5286b69 100644
--- a/src/components/views/PageComponent/OrderProgress.jsx
+++ b/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>
diff --git a/src/components/views/PointStateBox/PointStateBox.jsx b/src/components/views/PointStateBox/PointStateBox.jsx
index 1db8a1c..619b90e 100644
--- a/src/components/views/PointStateBox/PointStateBox.jsx
+++ b/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"
           }`}
diff --git a/src/pages/MembershipPage/MembershipPage.jsx b/src/pages/MembershipPage/MembershipPage.jsx
index 344261d..4376472 100644
--- a/src/pages/MembershipPage/MembershipPage.jsx
+++ b/src/pages/MembershipPage/MembershipPage.jsx
@@ -50,7 +50,7 @@ function MembershipPage() {
             <span>멤버십 내역</span>
           </div>
           {pointHistory?.length ? (
-            pointHistory?.map((e, i) => (
+            pointHistory.reverse()?.map((e, i) => (
               // {/* 매핑될 요소 */}
               <div
                 className="membershippage-use-point-box-content"
@@ -58,7 +58,6 @@ function MembershipPage() {
                 key={i}
               >
                 <PointStateBox
-                  status={e.status}
                   point={e.point}
                   store={e.store}
                   date={e.date}