Merge pull request #187 from imi21123/test

Feat: axios 훅 분리(CartPage 제외)
readyvery · Jan 10, 2024 · b5d7603 · b5d7603
2 parents 83e1938 + e398f88
commit b5d7603
Show file tree

Hide file tree

Showing 49 changed files with 1,505 additions and 1,004 deletions.
diff --git a/src/components/views/PageComponent/OrderStatus.css b/src/components/views/PageComponent/OrderStatus.css
@@ -1,6 +1,5 @@
 .status-container {
   width: 100%;
-  height: 94vh;
 }
 
 .status-nav-bar__wrapper {
@@ -221,22 +220,27 @@
   white-space: nowrap;
 }
 
-.status-detail__wrapper{
+.status-detail__wrapper {
   display: flex;
   justify-content: flex-end;
 }
 
 .status-detail {
-  display: inline-block;
-  font-size: 0.625rem;
-  font-family: "Pretendard Variable";
-  font-weight: 500;
+  display: flex;
+  width: 5.5625rem;
+  height: 1.5rem;
+  flex-shrink: 0;
   border-radius: 0.625rem;
-  border: 1px solid #838383;
-  /* height: 1.5em; */
-  line-height: 1.5em;
-  margin: calc((1.5em - 2px) / 2) 0;
-  padding: 1% 4%;
+  border: 1px solid #4f4f4f;
+  color: #4f4f4f;
+  font-family: "Pretendard Variable";
+  font-size: 0.6875rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 130%; /* 0.89375rem */
+  letter-spacing: -0.00688rem;
+  align-items: center;
+  justify-content: center;
 }
 
 /* 주문 취소 */

diff --git a/src/components/views/PageComponent/OrderStatus.jsx b/src/components/views/PageComponent/OrderStatus.jsx
@@ -1,87 +1,60 @@
-import axios from "axios";
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Link, useLocation } from "react-router-dom";
 import logo from "../../../assets/images/berry.png";
 import cancleLogo from "../../../assets/images/icon_cancleLogo.png";
-// import berry from "../../../assets/images/berry.svg";
 import clock from "../../../assets/images/icon_clock.svg";
 import close from "../../../assets/images/icon_close.svg";
 import refresh from "../../../assets/images/icon_refresh.svg";
 import Modal from "../../views/Modal/Modal";
 import "./OrderStatus.css";
-
-import { message } from "antd";
 import moment from "moment/moment";
 import Progressbar from "../ProgressBar/ProgressBar";
+import useFetchCurrentOrder from "../../../hooks/useFetchCurrentOrder";
+import useCancelOrder from "../../../hooks/useCancelOrder";
 
 function OrderStatus() {
-  const apiUrl = process.env.REACT_APP_API_ROOT;
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const orderId = params.get("orderId");
   const [degree, setDegree] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
-  const [statusList, setStatusList] = useState({});
-  // const navigate = useNavigate();
+  const [refreshKey, setRefreshKey] = useState(0);
+  const { cancels, estimatedTime, inout, name, orderName, orderNum, progress } =
+    useFetchCurrentOrder(orderId, refreshKey);
+  const cancelOrder = useCancelOrder();
 
-  const progressList = {
-    ORDER: 0,
-    MAKE: 1,
-    COMPLETE: 2,
-    PICKUP: 3,
-    CANCEL: 4,
-  };
+  const progressList = useMemo(
+    () => ({
+      ORDER: 0,
+      MAKE: 1,
+      COMPLETE: 2,
+      PICKUP: 3,
+      CANCEL: 4,
+    }),
+    []
+  );
 
   useEffect(() => {
-    fetchData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const fetchData = () => {
-    const config = {
-      withCredentials: true,
-    };
-
-    axios
-      .get(`${apiUrl}/api/v1/order/current?orderId=${orderId}`, config)
-      .then((res) => {
-        setStatusList(res.data);
-        const curPro = res.data.progress;
-        setDegree(progressList[curPro]);
-      })
-      .catch((err) => {});
-  };
+    if (progress) {
+      const currentProgress = progressList[progress];
+      setDegree(currentProgress);
+    }
+  }, [progress, progressList]);
 
-  const refreshDegree = () => {
-    fetchData();
+  // 주문 상태 새로고침 함수
+  const refreshOrderStatus = () => {
+    setRefreshKey((prevKey) => prevKey + 1);
   };
 
-  const handleCancle = async () => {
-    setIsOpen((prev) => !prev);
-    const config = {
-      withCredentials: true,
-    };
-    const body = {
-      orderId: orderId,
-    };
-
-    // navigate("/orderHistory");
-    setDegree(4);
-
-    const response = await axios.post(
-      `${apiUrl}/api/v1/order/toss/cancel`,
-      body,
-      config
-    );
-    if (response.status === 200) {
-      console.log(response);
-      if (response.data.message === "취소 성공") {
-        message.success("주문 취소되었습니다.");
-        fetchData();
-        setDegree(4);
-      }
-    } else {
-      message.error("주문 취소에 실패하였습니다.");
+  const handleCancel = async () => {
+    try {
+      await cancelOrder(orderId); // 주문 취소 요청
+      setDegree(progressList.CANCEL); // 취소 상태로 UI 업데이트
+    } catch (error) {
+      console.error("주문 취소 중 오류 발생:", error);
+      // 오류 처리 로직 (선택적)
+    } finally {
+      setIsOpen(false); // 성공, 실패, 예외에 관계없이 모달 닫기
     }
   };
 
@@ -104,7 +77,7 @@ function OrderStatus() {
               src={refresh}
               className="refresh-btn"
               alt={refresh}
-              onClick={refreshDegree}
+              onClick={refreshOrderStatus}
             />
           </div>
         )}
@@ -116,17 +89,17 @@ function OrderStatus() {
               </div>
               <span>
                 <span style={{ color: "#D82356" }}>
-                  {moment(statusList?.estimatedTime, "HH:mm:ss.SSS").diff(
+                  {moment(estimatedTime, "HH:mm:ss.SSS").diff(
                     moment(),
                     "minutes"
                   ) < 0
                     ? 0
-                    : moment(statusList?.estimatedTime, "HH:mm:ss.SSS").diff(
+                    : moment(estimatedTime, "HH:mm:ss.SSS").diff(
                         moment(),
                         "minutes"
                       )}
                   분 후
-                </span>{" "}
+                </span>
                 수령 가능!
               </span>
             </div>
@@ -165,7 +138,7 @@ function OrderStatus() {
               <div className="logo-img-wrapper center">
                 <img src={logo} className="logo-img" alt={logo} />
               </div>
-              <span className="status-number">{statusList?.orderNum}번</span>
+              <span className="status-number">{orderNum}번</span>
             </div>
             <div className="progressbar-wrapper">
               <Progressbar degree={degree} />
@@ -176,36 +149,38 @@ function OrderStatus() {
           <div className="status-content-container">
             <div className="status-content-wrapper">
               <span className="status-content-subtitle">주문매장</span>
-              <span className="status-content">{statusList?.name}</span>
+              <span className="status-content">{name}</span>
             </div>
             <div className="status-content-wrapper">
               <span className="status-content-subtitle">주문내역</span>
               <div className="status-content">
-                <span className="status-history">{statusList?.orderName}</span>
+                <span className="status-history">{orderName}</span>
               </div>
             </div>
             <div className="status-content-wrapper">
               <span className="status-content-subtitle">수령방식</span>
               <div className="status-content">
-                <span className="status-history">{statusList?.inout === 1 ? "매장" : "픽업"}</span>
+                <span className="status-history">
+                  {inout === 1 ? "매장" : "픽업"}
+                </span>
               </div>
             </div>
             {degree === 4 && (
               <div className="status-content-wrapper">
                 <span className="status-content-subtitle">취소사유</span>
-                <span className="status-content">{statusList?.cancels?.split(",")[1]?.split("=")[1]}</span>
+                <span className="status-content">
+                  {cancels?.split(",")[1]?.split("=")[1]}
+                </span>
               </div>
             )}
             <div className="status-detail__wrapper">
-              <div className="status-detail">
-                <Link
-                  to={`/orderDetail?orderId=${orderId}`}
-                  state={{ returnTo: `/status?orderId=${orderId}` }}
-                  style={{ textDecoration: "none", color: "#000" }}
-                >
-                  주문상세
-                </Link>
-              </div>
+              <Link
+                to={`/orderDetail?orderId=${orderId}`}
+                state={{ returnTo: `/status?orderId=${orderId}` }}
+                style={{ textDecoration: "none", color: "#000" }}
+              >
+                <div className="status-detail">주문상세</div>
+              </Link>
             </div>
           </div>
         )}
@@ -236,7 +211,7 @@ function OrderStatus() {
       {isOpen && (
         <Modal
           setIsOpen={setIsOpen}
-          handleCancle={handleCancle}
+          handleCancle={handleCancel}
           title={"주문을 취소하시겠습니까?"}
           subtitle={"확인 버튼을 누르시면, 주문이 취소됩니다."}
         />