Merge pull request #34 from marina-yhm/test

Feat: 소리재생기능 추가
readyvery · Nov 27, 2023 · fccbec2 · fccbec2
2 parents 9c7e616 + 00edbc5
commit fccbec2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 32 deletions.
diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -13,13 +13,8 @@ const Header = () => {
   const Store = useRecoilValue(storeState);
   const [Sound, setSound] = useRecoilState(soundState);
 
-  const ClickTrue = () => {
-    setSound(true);
-    console.log(Sound);
-  };
-
-  const ClickFalse = () => {
-    setSound(false);
+  const onClickHandler = () => {
+    setSound((prev) => !prev);
     console.log(Sound);
   };
 
@@ -66,9 +61,9 @@ const Header = () => {
             </div>
           )}
           {Sound ? (
-            <img src={SoundOn} onClick={ClickFalse} alt="SoundOn" />
+            <img src={SoundOn} onClick={onClickHandler} alt="SoundOn" />
           ) : (
-            <img src={SoundOff} onClick={ClickTrue} alt="SoundOff" />
+            <img src={SoundOff} onClick={onClickHandler} alt="SoundOff" />
           )}
         </Col>
       </Row>

diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx
@@ -1,43 +1,49 @@
-import React, { useState } from "react";
-// import { soundState } from "../../../Atom/status";
-import downArrow from "../../../assets/icons/icon_downArrow_black.svg";
-// import AudioPlayer from "../../../components/views/Audio/AudioPlayer";
-import { useSetRecoilState } from "recoil";
+import React, { useEffect, useState } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import { selectOrder, selectStatus } from "../../../Atom/order";
+import { soundState } from "../../../Atom/status";
+// import VeryMp3 from "../../../assets/Very.mp3";
+import downArrow from "../../../assets/icons/icon_downArrow_black.svg";
+import AudioPlayer from "../../../components/views/Audio/AudioPlayer";
 import OrderBox from "../../../components/views/Order/OrderBox";
 import "./DetailHome.css";
 
-const Wait = ({orderInfo}) => {
+const Wait = ({ orderInfo }) => {
   // const [orderCount, setOrderCount] = useRecoilState(ordercnt); // Recoil 상태 가져오기
   const setOrderSelect = useSetRecoilState(selectOrder);
   const setStatusSelect = useSetRecoilState(selectStatus);
+  const playSound = useRecoilState(soundState);
 
   const [selectedOrderId, setSelectedOrderId] = useState(null);
   const [isRecentFirst, setIsRecentFirst] = useState(false);
 
   const sortedOrders = isRecentFirst
     ? [...(orderInfo?.orders || [])].sort((prev, cur) => {
-      if (prev?.price > cur?.price) return -1;
-      if (prev?.price < cur?.price) return 1;
-      return 0;
-    })
+        if (prev?.price > cur?.price) return -1;
+        if (prev?.price < cur?.price) return 1;
+        return 0;
+      })
     : orderInfo?.orders;
 
   const onClickHandler = (selectedOrder) => {
     setOrderSelect(selectedOrder);
     setSelectedOrderId(selectedOrder?.idx && selectedOrder?.idx);
 
-    if(selectedOrder === null){
+    if (selectedOrder === null) {
       setStatusSelect("null");
     } else {
       setStatusSelect("pending");
     }
   };
 
-  // useEffect(() => {
-  //   // OrderBox가 생성될 때마다 개수 증가
-  //   setOrderCount((prev) => ({ ...prev, pending: orderInfo?.orders?.length }));
-  // }, [orderInfo]);
+  useEffect(() => {
+    // OrderBox가 생성될 때마다 개수 증가
+    // setOrderCount((prev) => ({ ...prev, pending: orderInfo.orders.length }));
+
+    if (playSound && orderInfo.orders.length !== 0) {
+      AudioPlayer(); // 소리 재생
+    }
+  }, [orderInfo, playSound]);
 
   return (
     <div className="Order-wrapper">
@@ -65,15 +71,17 @@ const Wait = ({orderInfo}) => {
         )}
       </div>
       <div className="Order-content__wrapper">
-        {sortedOrders?.length && sortedOrders?.map((order) => (
-          <OrderBox
-            key={order.id}
-            onSelect={onClickHandler}
-            order={order}
-            selectedOrderId={selectedOrderId}
-          />
-        ))}
+        {sortedOrders?.length &&
+          sortedOrders?.map((order) => (
+            <OrderBox
+              key={order.id}
+              onSelect={onClickHandler}
+              order={order}
+              selectedOrderId={selectedOrderId}
+            />
+          ))}
       </div>
+      {/* <button onClick={Player}>Play Audio</button> */}
     </div>
   );
 };