Merge pull request #192 from hhbb0081/test

Feat: 영업중 & 영업종료 api 연동
readyvery · Mar 24, 2024 · 6463a9e · 6463a9e
2 parents 4fb4468 + 289b0d7
commit 6463a9e
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 31 deletions.
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -202,3 +202,11 @@ export const getPhoneNumber = atom({
     phoneNumber: "",
   },
 });
+
+// 영업 상태
+export const storeContextState = atom({
+  key: "storeContextState",
+  default: {
+    storeStatus: false
+  }
+})
diff --git a/src/components/views/Header/HeaderOrder/Header2.jsx b/src/components/views/Header/HeaderOrder/Header2.jsx
@@ -1,5 +1,7 @@
 import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { storeContextState } from "../../../../Atom/status";
 import BackIcon from "../../../../assets/icons/Header/backIcon.png";
 import LOGO from "../../../../assets/icons/Header/header_logo.png"; //로고
 import { IMAGES } from "../../../../constants/images";
@@ -10,6 +12,7 @@ import "./Header.css";
 const Header = () => {
   const navigate = useNavigate();
   const context = useContext(HomeContext);
+  const storeStatus = useRecoilValue(storeContextState);
 
   const onBackHandler = () => {
     context.setSelectedMenu({});
@@ -37,14 +40,14 @@ const Header = () => {
           />
         </div>
         <div className="head-container2">
-          {/* {storeValue ? (
+          {storeStatus ? (
             <div className="store-group">
               <div className="store-img__wrapper">
-                <img src={StoreOn} alt="Open" className="store_img"/>
+                <img src={IMAGES.store_on} alt="Open" className="store_img"/>
               </div>
               <div className="header-font">영업중</div>
             </div>
-          ) : ( */}
+          ) : (
             <div className="store-group">
               <div className="store-img__wrapper">
                 <img src={IMAGES.store_off} alt="Close" className="store_img"/>
@@ -53,6 +56,7 @@ const Header = () => {
                 <div className="header-font">영업종료</div>
               </div>
             </div>
+          )}
           <SoundComponent />
         </div>
       </div>

diff --git a/src/components/views/Header/OperationButton/OperationButton.jsx b/src/components/views/Header/OperationButton/OperationButton.jsx
@@ -1,40 +1,48 @@
 import { useState } from "react";
-import { useRecoilState } from "recoil";
-import { storeState } from "../../../../Atom/status";
+import { useRecoilValue } from "recoil";
+import { storeContextState } from "../../../../Atom/status";
+import useFetchStoreStatus from "../../../../hooks/Main/useFetchStoreStatus";
+import useStoreStatusChange from "../../../../hooks/Main/useStoreStatusChange";
 import Modal from "../../Modal/Modal";
 import "./OperationButton.css";
 
 const OperationButton = () => {
-  const [isOperation, setIsOperation] = useRecoilState(storeState); //영업상태
+  // const [isOperation, setIsOperation] = useRecoilState(storeState); //영업상태
+  const storeStatus = useRecoilValue(storeContextState);
   const [isModalOpen, setIsModalOpen] = useState(false); // 모달 표시 여부
   const [modalTitle, setModalTitle] = useState("");
+
+  const storeStatusChange = useStoreStatusChange(); // 영업 상태 변경
+  useFetchStoreStatus(); // 영업 상태 fetching
+
   const handleOperation = () => {
     setIsModalOpen(true); // 영업 상태 변경 버튼 클릭 시 모달을 표시
     setModalTitle(
-      isOperation ? "영업을 시작하시겠습니까?" : "영업을 종료하시겠습니까?"
+      !storeStatus ? "영업을 시작하시겠습니까?" : "영업을 종료하시겠습니까?"
     );
   };
 
   const handleCancle = () => {
     setIsModalOpen(false); // 모달 닫기 (영업 상태 변경 없음)
   };
 
-  const handleCheck = () => {
-    setIsOperation((prev) => !prev);
+  const handleCheck = async () => {
+    await storeStatusChange(!storeStatus);
     setIsModalOpen(false); // 모달 닫기
   };
+
   return (
     <div className="loginControl-wrapper-css">
       <span className="business-status">
-        {isOperation ? "영업종료" : "영업중"}
+        {!storeStatus ? "영업종료" : "영업중"}
       </span>
       <div
         className={`loginControl-button-wrapper-css ${
-          isOperation ? "open" : ""
+          !storeStatus ? "open" : ""
         }`}
         onClick={() => handleOperation()}
       >
-        {isOperation ? (
+        {!storeStatus ? (
           <div className="loginControl-button-isopen-css"></div>
         ) : (
           <div className="loginControl-button-isclose-css"></div>

diff --git a/src/hooks/Main/useFetchStoreName.jsx b/src/hooks/Main/useFetchStoreName.jsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import commonApis from "../../util/commonApis";
+
+const apiUrl = `/user/name`;
+
+const useFetchStoreName = () => {
+  const [info, setInfo] = useState("");
+  const token = localStorage.getItem("accessToken");
+  const config = {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+  useEffect(() => {
+    const fetchData = async () => {
+      commonApis
+        .get(`${apiUrl}`, config)
+        .then((res) => {
+          if (res.status === 200) {
+            setInfo(res.data.name);
+          }
+        })
+        .catch((err) => console.log(err));
+    };
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return info;
+};
+
+export default useFetchStoreName;
diff --git a/src/hooks/Main/useFetchStoreStatus.jsx b/src/hooks/Main/useFetchStoreStatus.jsx
@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useSetRecoilState } from "recoil";
+import { storeContextState } from "../../Atom/status";
+import commonApis from "../../util/commonApis";
+
+const apiUrl = `/store/sales`;
+
+const useFetchStoreStatus = () => {
+  const setStoreStatus = useSetRecoilState(storeContextState);
+  const token = localStorage.getItem("accessToken");
+  const config = {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+  const fetchData = async () => {
+    commonApis
+      .get(apiUrl, config)
+      .then((res) => {
+        if (res.status === 200) {
+          setStoreStatus(res.data.status);
+          return res.data.status;
+        }
+      })
+      .catch((err) => console.log(err));
+  };
+  useEffect(() => {
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return;
+};
+
+export default useFetchStoreStatus;
diff --git a/src/hooks/Main/useStoreStatusChange.jsx b/src/hooks/Main/useStoreStatusChange.jsx
@@ -0,0 +1,40 @@
+import { message } from "antd";
+import { useSetRecoilState } from "recoil";
+import { storeContextState } from "../../Atom/status";
+import commonApis from "../../util/commonApis";
+
+const apiUrl = `/store/sales`;
+
+const useStoreStatusChange = () => {
+  const token = localStorage.getItem("accessToken");
+  const setStoreStatus = useSetRecoilState(storeContextState);
+
+  const storeStatusChange = async (status) => {
+    console.log('status: ', status);
+    const body ={
+      status: status
+    };
+    const config = {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    };
+    try {
+      const response = await commonApis.post(
+        apiUrl, body, config
+      );
+      if(response.status === 200){
+        message.success("영업 상태 변경 완료되었습니다.");
+        setStoreStatus(response.data.status);
+      } else {
+        message.error("영업 상태 변경 실패하였습니다.");
+      }
+    } catch (error) {
+      console.log(error);
+      message.error("영업 상태 변경 중 오류가 발생하였습니다.");
+    }
+  }
+  return storeStatusChange;
+};
+
+export default useStoreStatusChange;
diff --git a/src/hooks/useRejectEntry.jsx b/src/hooks/useRejectEntry.jsx
@@ -0,0 +1,26 @@
+import { message } from "antd";
+import commonApis from "../util/commonApis";
+
+const apiUrl = `/ceo/entry/reject`;
+
+const useRejectEntry = () => {
+  const token = localStorage.getItem("accessToken");
+  const config = {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+    const rejectEntry = () => {
+        commonApis
+        .get(`${apiUrl}`, config)
+        .then((res) => {
+            if (res.status === 200 && res.data.success) {
+                message.success(res.data.message);
+            }
+        })
+        .catch((err) => console.log(err));
+    };
+    return rejectEntry;
+};
+
+export default useRejectEntry;
diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx
@@ -77,7 +77,7 @@ function LoginPage() {
       if (success) {
         // 로그인 성공: Recoil에 AT와 만료시간 저장
         localStorage.setItem("accessToken", response.data.accessToken);
-        localStorage.setItem("expiredTime", moment().add(1, "minutes").format("yyyy-MM-DD HH:mm:ss")); // 만료시간 저장
+        localStorage.setItem("expiredTime", moment().add(1, "days").format("yyyy-MM-DD HH:mm:ss")); // 만료시간 저장
         console.log("로그인 성공:", response.data);
         message.success("로그인에 성공하셨습니다!");
 

diff --git a/src/pages/Main/MainPage.jsx b/src/pages/Main/MainPage.jsx
@@ -1,32 +1,38 @@
 import moment from "moment/moment";
+import { createContext, useEffect } from 'react';
 import { Link } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { storeContextState } from "../../Atom/status";
 import right from "../../assets/icons/icon_right-line.png";
 import MainButton from "../../components/views/Button/mainButton";
 import Footer from "../../components/views/Footer/Footer";
 import ResponsiveHeader from "../../components/views/Header/ResponsiveHeader";
 import { IMAGES } from "../../constants/images";
+import useFetchStoreName from "../../hooks/Main/useFetchStoreName";
 import useFatchWeekAndMonthOrderCount from "../../hooks/Sales/useFatchWeekAndMonthOrderCount";
 import useFetchWeekTotalSales from "../../hooks/Sales/useFetchWeekTotalSales";
 import "./MainPage.css";
 
+export const StatusContext = createContext();
+
 const MainPage = () => {
   const notices = [
-    // {
-    //   id: 1,
-    //   title: "2024년 4월 넷째 주(4/21~4/27) 입금 안내",
-    //   date: "24-04-21",
-    // },
-    // {
-    //   id: 2,
-    //   title: "2024년 4월 셋째 주(4/14~4/20) 입금 안내",
-    //   date: "24-04-14",
-    // },
-    // {
-    //   id: 3,
-    //   title: "2024년 4월 둘째 주(4/7~4/13) 입금 안내",
-    //   date: "24-04-07",
-    // },
-    // { id: 4, title: "2024년 4월 첫째 주(4/1~4/6) 입금 안내", date: "24-04-01" },
+    {
+      id: 1,
+      title: "2024년 4월 넷째 주(4/21~4/27) 입금 안내",
+      date: "24-04-21",
+    },
+    {
+      id: 2,
+      title: "2024년 4월 셋째 주(4/14~4/20) 입금 안내",
+      date: "24-04-14",
+    },
+    {
+      id: 3,
+      title: "2024년 4월 둘째 주(4/7~4/13) 입금 안내",
+      date: "24-04-07",
+    },
+    { id: 4, title: "2024년 4월 첫째 주(4/1~4/6) 입금 안내", date: "24-04-01" },
   ];
   // 현 날짜
   const currentDate = {
@@ -36,7 +42,12 @@ const MainPage = () => {
   const weekStart = currentDate.monday.format("YYYY-MM-DD");
   const weekTotalSales = useFetchWeekTotalSales(weekStart);
   const weekAndMonthOrderCount = useFatchWeekAndMonthOrderCount(weekStart);
+  const name = useFetchStoreName();
+  const storeStatus = useRecoilValue(storeContextState);
   //객체 구성{totalWeekOrder, totalMonthOrder}
+
+  useEffect(() => {}, [storeStatus]);
+
   return (
     <div className="main">
       <ResponsiveHeader />
@@ -56,7 +67,7 @@ const MainPage = () => {
         <span className="main__president">
           <span className="main__box2">
             <span className="main__president__ready">오늘도 준비된</span>
-            <span className="main__president__name">오르다커피 사장님</span>
+            <span className="main__president__name">{name} 사장님</span>
           </span>
 
           <span className="main__box3">

diff --git a/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.jsx b/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import Container from "../../../../components/login/Container/Container";
 import RedButton from "../../../../components/login/redButton/RedButton";
 import { IMAGES } from "../../../../constants/images";
+import useRejectEntry from "../../../../hooks/useRejectEntry";
 import "./JudgeResultsRejectPage.css";
 function JudgeResultsRejectPage() {
   const navigate = useNavigate();
@@ -23,6 +24,15 @@ function JudgeResultsRejectPage() {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
+
+  const rejectEntry = useRejectEntry();
+
+  const handleReject = () => {
+    // 심사 반려 -> 재신청
+    rejectEntry();
+    navigate("/signup/auth/results");
+  };
+
   return (
     <Container
       title="심사반려"
@@ -49,7 +59,7 @@ function JudgeResultsRejectPage() {
         </div>
 
         <div className="judge-results-reject-page-next-button">
-          <RedButton onClick={() => navigate("/signup/auth/results")}>
+          <RedButton onClick={handleReject}>
             재신청하기
           </RedButton>
         </div>

diff --git a/src/util/commonApis.jsx b/src/util/commonApis.jsx
@@ -1,4 +1,5 @@
 import axios from "axios";
+import moment from "moment";
 
 const commonApis = axios.create({
     baseURL: process.env.REACT_APP_API_ROOT + "/api/v1",
@@ -42,6 +43,7 @@ commonApis.interceptors.response.use(
                     console.log("access token 재설정!");
                     console.log(accessToken);
                     localStorage.setItem('accessToken', accessToken);
+                    localStorage.setItem("expiredTime", moment().add(1, "days").format("yyyy-MM-DD HH:mm:ss"))
                     axios.defaults.headers.common.Authorization = "Bearer " + accessToken;
                     config.headers.common["Authorization"] = "Bearer " + accessToken;
                 }