Merge pull request #50 from marina-yhm/test

Design: 모달 위치 수정

Author: hhbb0081

src/components/views/Audio/AudioPlayer.jsx

@@ -2,9 +2,12 @@ import VeryMp3 from "../../../assets/Very.mp3";
 
 const AudioPlayer = () => {
   const audio = new Audio(VeryMp3);
-  audio.play().catch((error) => {
-    console.error("Autoplay prevented:", error);
-  });
+  audio.play();
+  // 1초 후에 소리 멈춤
+  setTimeout(() => {
+    // setplaySound(false);
+    console.log("소리 멈춤");
+  }, 100);
 };
 
 export default AudioPlayer;

src/pages/Home/StatusHome/Complete.jsx

@@ -52,7 +52,7 @@ const Complete = ({ orderInfo }) => {
       setOrderSelect(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isRecentFirst]);
 
   return (
     <div className="Order-wrapper">

src/pages/Home/StatusHome/Progress.jsx

@@ -28,6 +28,43 @@ const Progress = ({ orderInfo }) => {
     ? [...(orderInfo?.orders || [])].reverse()
     : orderInfo?.orders;
 
+  const onClickHandler = (selectedOrder) => {
+    setOrderSelect(selectedOrder);
+    setSelectedOrderId(selectedOrder?.idx && selectedOrder?.idx);
+
+    if (selectedOrder === null) {
+      setStatusSelect("null");
+    } else {
+      setStatusSelect("progress");
+    }
+  };
+
+  // const defaultOrder = () => {
+  //   console.log("defaultOrder");
+  //   const sortedOrdersArray = isRecentFirst
+  //     ? orderInfo?.orders
+  //     : [...(orderInfo?.orders || [])].reverse();
+
+  //   const firstOrder =
+  //     sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null;
+
+  //   if (firstOrder !== null) {
+  //     console.log("firstOrder defaultOrder");
+  //     setStatusSelect("pregress");
+  //     setOrderSelect(firstOrder);
+  //     setSelectedOrderId(firstOrder.idx);
+  //   } else {
+  //     setStatusSelect("null");
+  //     setOrderSelect(null);
+  //     setSelectedOrderId(null);
+  //   }
+  // };
+
+  // const onClickSorter = () => {
+  //   setIsRecentFirst(!isRecentFirst);
+  //   defaultOrder();
+  // };
+
   useEffect(() => {
     const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
     setOrderSelect(firstOrder);
@@ -40,23 +77,7 @@ const Progress = ({ orderInfo }) => {
       setOrderSelect(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onClickHandler = (selectedOrder) => {
-    setOrderSelect(selectedOrder);
-    setSelectedOrderId(selectedOrder?.idx && selectedOrder?.idx);
-
-    if (selectedOrder === null) {
-      setStatusSelect("null");
-    } else {
-      setStatusSelect("progress");
-    }
-  };
-
-  // useEffect(() => {
-  //   // OrderBox가 생성될 때마다 개수 증가
-  //   setOrderCount((prev) => ({ ...prev, progress: orderInfo?.orders?.length }));
-  // }, [orderInfo, setOrderCount]);
+  }, [isRecentFirst]);
 
   return (
     <div className="Order-wrapper">

src/pages/Home/StatusHome/Wait.jsx

@@ -9,6 +9,7 @@ import OrderBox from "../../../components/views/Order/OrderBox";
 import "./DetailHome.css";
 
 const Wait = ({ orderInfo }) => {
+  console.log("페이지 로딩");
   const setOrderSelect = useSetRecoilState(selectOrder);
   const setStatusSelect = useSetRecoilState(selectStatus);
   const [orderTotal, setorderTotal] = useRecoilState(selectTotal);
@@ -53,27 +54,13 @@ const Wait = ({ orderInfo }) => {
     }
   };
 
-  // useEffect(() => {
-  //   const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
+  const defaultOrder = () => {
+    const sortedOrdersArray = isRecentFirst
+      ? orderInfo?.orders
+      : [...(orderInfo?.orders || [])].reverse();
 
-  //   if (firstOrder !== null) {
-  //     setStatusSelect("pending");
-  //     setOrderSelect(firstOrder);
-  //     setSelectedOrderId(firstOrder.idx);
-  //   } else {
-  //     setStatusSelect("null");
-  //     setOrderSelect(null);
-  //     setSelectedOrderId(null);
-  //   }
-
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [sortedOrders]);
-
-  useEffect(() => {
-    const sortedOrders = isRecentFirst
-      ? [...(orderInfo?.orders || [])].reverse()
-      : orderInfo?.orders;
-    const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
+    const firstOrder =
+      sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null;
 
     if (firstOrder !== null) {
       setStatusSelect("pending");
@@ -84,7 +71,24 @@ const Wait = ({ orderInfo }) => {
       setOrderSelect(null);
       setSelectedOrderId(null);
     }
+  };
 
+  const onClickSorter = () => {
+    setIsRecentFirst(!isRecentFirst);
+    defaultOrder();
+  };
+
+  useEffect(() => {
+    const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
+    setOrderSelect(firstOrder);
+    setSelectedOrderId(firstOrder?.idx && firstOrder?.idx);
+
+    if (firstOrder !== null) {
+      setStatusSelect("pending");
+    } else {
+      setStatusSelect("null");
+      setOrderSelect(null);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -96,18 +100,12 @@ const Wait = ({ orderInfo }) => {
         <span className="Order-title__span">픽업유무</span>
         <span className="Order-title__span">주문금액</span>
         {isRecentFirst ? (
-          <span
-            className="Order-title__span"
-            onClick={() => setIsRecentFirst(!isRecentFirst)}
-          >
+          <span className="Order-title__span" onClick={onClickSorter}>
             최신순
             <img alt="new" className="Arrowicon" src={downArrow} />
           </span>
         ) : (
-          <span
-            className="Order-title__span"
-            onClick={() => setIsRecentFirst(!isRecentFirst)}
-          >
+          <span className="Order-title__span" onClick={onClickSorter}>
             과거순
             <img alt="new" className="Arrowicon" src={downArrow} />
           </span>