Merge pull request #26 from marina-yhm/test

Feat: Home완성 및 Audio 구현
readyvery · Nov 24, 2023 · d622a4c · d622a4c
2 parents a079771 + ca11d40
commit d622a4c
Show file tree

Hide file tree

Showing 28 changed files with 1,034 additions and 515 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>ReadyVery</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
-import axios from 'axios';
-import React, { Suspense } from 'react';
+import axios from "axios";
+import React, { Suspense } from "react";
 import { useCookies } from "react-cookie";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { RecoilRoot } from "recoil";
@@ -8,7 +8,7 @@ import Mypage from "../src/pages/Mypage/Mypage";
 import SalesPage from "../src/pages/Sales/Sales";
 import "./App.css";
 import Auth from "./hoc/auth.jsx";
-import useInterval from './hooks/useInterval.jsx';
+import useInterval from "./hooks/useInterval.jsx";
 import HomePage from "./pages/Home/Home";
 import MainPage from "./pages/Main/MainPage.jsx";
 
@@ -22,41 +22,42 @@ function App() {
   const NewInventoryPage = Auth(InventoryPage, true);
   const NewSalesPage = Auth(SalesPage, true);
   const NewMyPage = Auth(Mypage, true);
-  
+
   const expiredTime = 1000 * 60 * 60 * 24;
   useInterval(() => {
-    if(
-      cookies.refreshToken !== 'undefined' &&
-      cookies.refreshToken !== undefined && 
-      cookies.refreshToken 
-    ){
+    if (
+      cookies.refreshToken !== "undefined" &&
+      cookies.refreshToken !== undefined &&
+      cookies.refreshToken
+    ) {
       const config = {
         withCredentials: true,
-      }
-      axios.get(`${apiUrl}/api/v1/refresh/token`, config)
+      };
+      axios
+        .get(`${apiUrl}/api/v1/refresh/token`, config)
         .then((response) => {
           console.log(response);
           if (!response.data) {
-              removeCookies();
-              navigate('/');
+            removeCookies();
+            navigate("/");
           }
         })
         .catch((err) => {
           navigate("/");
-        })
+        });
     }
   }, expiredTime - 60000);
   return (
     <div className="App">
       <RecoilRoot>
         <Suspense fallback={<div>Loading...</div>}>
-        <Routes>
-          <Route path="/" element={<NewLoginPage />} />
-          <Route path="/home" element={<NewHomePage />} />
-          <Route path="/Inventory" element={<NewInventoryPage />} />
-          <Route path="/Sales" element={<NewSalesPage />} />
-          <Route path="/Mypage" element={<NewMyPage />} />
-        </Routes>
+          <Routes>
+            <Route path="/" element={<NewLoginPage />} />
+            <Route path="/home" element={<NewHomePage />} />
+            <Route path="/Inventory" element={<NewInventoryPage />} />
+            <Route path="/Sales" element={<NewSalesPage />} />
+            <Route path="/Mypage" element={<NewMyPage />} />
+          </Routes>
         </Suspense>
       </RecoilRoot>
     </div>

diff --git a/src/Atom/order.jsx b/src/Atom/order.jsx
@@ -1,23 +1,20 @@
 import { atom } from "recoil";
 
-export const orders = atom(
-  {
-    key: "orders", // 전역적으로 고유한 값
-    default: {
-      id: 0, //db 인덱스
-      orderNum: 0, // 그날의 그가게의 주문번호
-      pickUp: "",
-      foodies: [
-        {
-          name: "",
-          count: 0,
-          options: [""],
-        },
-      ],
-      phone: "", // 고객의 전화번호
-      time: "", // 주문시간
-      payment: "",
-      price: 0,
-    },
-  } // 초깃값
-);
+export const ordercnt = atom({
+  key: "ordercnt",
+  default: {
+    pending: 0,
+    progress: 0,
+    complete: 0,
+  },
+});
+
+export const selectStatus = atom({
+  key: "selectStatus",
+  default: "null",
+});
+
+export const selectOrder = atom({
+  key: "selectOrder",
+  default: null,
+});
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -6,66 +6,62 @@ export const storeState = atom({
   default: false, // 초깃값
 });
 
-export const orderState = atom({
-  key: "orderState",
-  default: {
-    wait: 1,
-    progress: 0,
-    complete: 0,
-  },
+export const soundState = atom({
+  key: "soundState",
+  default: true,
 });
 
 export const isAuthenticatedState = atom({
-  key: 'isAuthenticatedState',
+  key: "isAuthenticatedState",
   default: false,
 });
 
 export const getAuthenticatedSelector = selector({
-  key: 'auth/get',
-  get: async ({get}) => {
+  key: "auth/get",
+  get: async ({ get }) => {
     return get(isAuthenticatedState);
   },
 
-  set: ({set}) => {
+  set: ({ set }) => {
     set(isAuthenticatedState, (currentValue) => !currentValue);
-  }
-})
+  },
+});
 
 export const loginState = atom({
-  key: 'loginState',
+  key: "loginState",
   default: {
     accessToken: null,
-    expiredTime: null
+    expiredTime: null,
   },
 });
 
 export const userState = atom({
-  key: 'userState',
+  key: "userState",
   dafault: null,
-})
+});
 
 export const getUserSelector = selector({
-  key: 'user/get',
-  get: async ({get, set}) => {
-    try{
+  key: "user/get",
+  get: async ({ get, set }) => {
+    try {
       const apiUrl = process.env.REACT_APP_API_ROOT;
       const config = {
-        withCredentials: true
+        withCredentials: true,
       };
-      const response = await axios.get(`${apiUrl}/api/v1/auth`, config)
+      const response = await axios.get(`${apiUrl}/api/v1/auth`, config);
       const userData = response.data;
       // if (JSON.stringify(userState) !== JSON.stringify(userData)) {
       //   // 다르면 userInfo 업데이트
       //   // set(userState, userData);
       // }
       return userData;
-    } catch (err){
-        // 에러처리
-        return "404";
+    } catch (err) {
+      // 에러처리
+      return "404";
     }
   },
 
-  set: ({set}, newValue) => {
-    set(userState, newValue)
-  }
-})
+  set: ({ set }, newValue) => {
+    set(userState, newValue);
+  },
+});
diff --git a/src/assets/Very.mp3 b/src/assets/Very.mp3
diff --git a/src/assets/icons/icon_downArrow_black.svg b/src/assets/icons/icon_downArrow_black.svg
diff --git a/src/components/views/Audio/AudioPlayer.jsx b/src/components/views/Audio/AudioPlayer.jsx
@@ -0,0 +1,11 @@
+import VeryMp3 from "../../../assets/Very.mp3";
+
+const AudioPlayer = () => {
+  const audio = new Audio(VeryMp3);
+  audio.play().catch((error) => {
+    // Autoplay was prevented, handle it here
+    console.error("Autoplay prevented:", error);
+  });
+};
+
+export default AudioPlayer;
diff --git a/src/components/views/Button/pendingButton.jsx b/src/components/views/Button/pendingButton.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Button, Col, Row } from "react-bootstrap";
+
+const pendingButton = ({ handleRefuseModal, handleReceiveModal }) => {
+  return (
+    <Row>
+      <Col>
+        <div className="receipt-btn__wrapper">
+          <Button
+            name="Reject"
+            onClick={handleRefuseModal}
+            style={{
+              width: "8.75rem",
+              height: "2.8125rem",
+              border: "2px solid",
+              borderRadius: "1.5625rem",
+              bordercolor: "#DADADA",
+              backgroundColor: "#F5F5F5",
+              fontFamily: "SemiBold",
+              fontSize: "1.375rem",
+              color: "#838383",
+              justifyContent: "center",
+            }}
+          >
+            거부
+          </Button>
+        </div>
+      </Col>
+      <Col>
+        <div className="receipt-btn__wrapper">
+          <Button
+            name="Accept"
+            onClick={handleReceiveModal}
+            style={{
+              width: "8.75rem",
+              height: "2.8125rem",
+              border: "2px solid",
+              borderRadius: "1.5625rem",
+              backgroundColor: "#D82356",
+              fontFamily: "SemiBold",
+              fontSize: "1.375rem",
+              color: "#FFFFFF",
+            }}
+          >
+            접수
+          </Button>
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default pendingButton;
diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -1,12 +1,12 @@
 .header {
   /* width: 100%; */
-  min-width: 73.75rem;
+  min-width: 64rem;
   /* min-width: 64rem; */
   height: 5.5rem;
   background-color: #2e2d2d;
 }
 
-.header2{
+.header2 {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -19,18 +19,18 @@
   z-index: 101;
 }
 
-.header2-wrapper{
+.header2-wrapper {
   display: flex;
   justify-content: space-between;
 }
 
-.head-container2{
+.head-container2 {
   width: 23.6rem;
   display: flex;
   justify-content: space-evenly;
 }
 
-.header-img-wrapper{
+.header-img-wrapper {
   display: flex;
 }
 
@@ -49,7 +49,7 @@
   align-items: center;
 }
 
-.store-img__wrapper{
+.store-img__wrapper {
   margin: 0 0.5625rem;
 }
 

diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import { Col, Row } from "react-bootstrap";
-import { useRecoilValue } from "recoil";
-import { storeState } from "../../../Atom/status";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { soundState, storeState } from "../../../Atom/status";
 import StoreOff from "../../../assets/icons/Header/CloseLight.svg"; //영업종료
 import LOGO from "../../../assets/icons/Header/LOGO.svg"; //로고
 import StoreOn from "../../../assets/icons/Header/OpenLight.svg"; //영업중
@@ -11,10 +11,16 @@ import "./Header.css";
 
 const Header = () => {
   const Store = useRecoilValue(storeState);
-  const [Sound, setSound] = useState(1);
+  const [Sound, setSound] = useRecoilState(soundState);
 
-  const onClickHandler = (e) => {
-    setSound(!Sound);
+  const ClickTrue = () => {
+    setSound(true);
+    console.log(Sound);
+  };
+
+  const ClickFalse = () => {
+    setSound(false);
+    console.log(Sound);
   };
 
   return (
@@ -27,19 +33,23 @@ const Header = () => {
         <Col className="head-container">
           {!Store ? (
             <div className="store-group">
-              <div className="store-img__wrapper"><img src={StoreOn} alt="Open" /></div>
+              <div className="store-img__wrapper">
+                <img src={StoreOn} alt="Open" />
+              </div>
               <div className="header-font">영업중</div>
             </div>
           ) : (
             <div className="store-group">
-              <div className="store-img__wrapper"><img src={StoreOff} alt="Close" /></div>
+              <div className="store-img__wrapper">
+                <img src={StoreOff} alt="Close" />
+              </div>
               <div className="header-font">영업종료 </div>
             </div>
           )}
           {Sound ? (
-            <img src={SoundOn} onClick={onClickHandler} alt="SoundOn" />
+            <img src={SoundOn} onClick={ClickFalse} alt="SoundOn" />
           ) : (
-            <img src={SoundOff} onClick={onClickHandler} alt="SoundOff" />
+            <img src={SoundOff} onClick={ClickTrue} alt="SoundOff" />
           )}
         </Col>
       </Row>