[#15] orderReview와 ordeDetail 페이지에서 사용하는 모달 컴포넌트 통합을 위한 코드 수정

orderReview와 ordeDetail 페이지에서 사용하는 모달 컴포넌트 통합을 위한 코드 수정
potato-club · Apr 30, 2023 · b515989 · b515989
1 parent 372de03
commit b515989
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 119 deletions.
diff --git a/pages/orderDetail.tsx b/pages/orderDetail.tsx
@@ -5,19 +5,26 @@ import { DetailBottm } from "../src/components/orderDetailPage/Detailbottom";
 import { useRouter } from "next/router";
 import axios from "axios";
 import { useEffect, useState } from "react";
-import { ErrorModal } from "../src/components/orderDetailPage/ErrorModal";
+import { ReviewModal } from "../src/components/modal/ReviewModal";
 
 export default function OrderDetail() {
   const router = useRouter();
   const id = router.query.id;
   const [detailDataState, setDetailDataState] = useState<any>();
-  const [errorModalState, setErrorModalState] = useState<{
+  const [modalState, setModalState] = useState<{
+    modalRole: string;
     state: boolean;
     text: string;
-  }>({ state: false, text: "" });
+    onClickConfirmButton: () => void;
+  }>({ modalRole: "", state: false, text: "", onClickConfirmButton: () => {} });
 
-  function getErrorModalState(modalState: { state: boolean; text: string }) {
-    setErrorModalState(modalState);
+  function getModalState(modalState: {
+    modalRole: string;
+    state: boolean;
+    text: string;
+    onClickConfirmButton: () => void;
+  }) {
+    setModalState(modalState);
   }
 
   const getDetailData = async () => {
@@ -44,18 +51,22 @@ export default function OrderDetail() {
 
   return (
     <Wrapper>
-      <ErrorModal
-        errorModalState={errorModalState}
-        getErrorModalState={getErrorModalState}
-      ></ErrorModal>
+      <ReviewModal
+        modalState={modalState}
+        getModalState={getModalState}
+      ></ReviewModal>
       <DetailTop />
-      <DetailContnets detailData={detailDataState && detailDataState} />
+      <DetailContnets
+        detailData={detailDataState && detailDataState}
+        modalState={modalState}
+        getModalState={getModalState}
+      />
       <DetailBottm
         id={detailDataState && detailDataState.id}
         like={detailDataState && detailDataState.like}
         progress={detailDataState && detailDataState.state}
-        errorModalState={errorModalState}
-        getErrorModalState={getErrorModalState}
+        modalState={modalState}
+        getModalState={getModalState}
       />
     </Wrapper>
   );

diff --git a/src/components/orderDetailPage/DetailContents.tsx b/src/components/orderDetailPage/DetailContents.tsx
@@ -22,28 +22,52 @@ type contentsTypes = {
   db: any;
   starRating: any;
 };
+
+type propTypes = {
+  detailData: contentsTypes;
+  modalState: {
+    modalRole: string;
+    state: boolean;
+    text: string;
+    onClickConfirmButton: () => void;
+  };
+  getModalState: (modalState: {
+    modalRole: string;
+    state: boolean;
+    text: string;
+    onClickConfirmButton: () => void;
+  }) => void;
+};
+
 export const DetailContnets = ({
   detailData,
-}: {
-  detailData: contentsTypes;
-}) => {
+  modalState,
+  getModalState,
+}: propTypes) => {
   const router = useRouter();
 
   const onClickOrderCancelButton = async () => {
-    try {
-      const response = await axios.delete(
-        `http://localhost:8080/orders/${detailData.id}`,
-        {
-          headers: {
-            Authorization: `${localStorage.getItem("token")}`,
-          },
+    getModalState({
+      modalRole: "confirm",
+      state: true,
+      text: "정말로 발주를 취소하시겠습니까?",
+      onClickConfirmButton: async () => {
+        try {
+          const response = await axios.delete(
+            `http://localhost:8080/orders/${detailData.id}`,
+            {
+              headers: {
+                Authorization: `${localStorage.getItem("token")}`,
+              },
+            }
+          );
+          console.log(response);
+        } catch (err) {
+          console.log(err);
         }
-      );
-      console.log(response);
-    } catch (err) {
-      console.log(err);
-    }
-    router.back();
+        router.back();
+      },
+    });
   };
 
   //이거는 발주 상태 변경 테스트용

diff --git a/src/components/orderDetailPage/Detailbottom.tsx b/src/components/orderDetailPage/Detailbottom.tsx
@@ -9,16 +9,26 @@ type propTypes = {
   id: number;
   like: number;
   progress: string;
-  errorModalState: { state: boolean; text: string };
-  getErrorModalState: (modalState: { state: boolean; text: string }) => void;
+  modalState: {
+    modalRole: string;
+    state: boolean;
+    text: string;
+    onClickConfirmButton: () => void;
+  };
+  getModalState: (modalState: {
+    modalRole: string;
+    state: boolean;
+    text: string;
+    onClickConfirmButton: () => void;
+  }) => void;
 };
 
 export const DetailBottm = ({
   id,
   like,
   progress,
-  errorModalState,
-  getErrorModalState,
+  modalState,
+  getModalState,
 }: propTypes) => {
   //
   const router = useRouter();
@@ -37,7 +47,12 @@ export const DetailBottm = ({
       );
       console.log(response);
     } catch (err: any) {
-      getErrorModalState({ state: true, text: err.response.data.error });
+      getModalState({
+        modalRole: "likeMyOrder",
+        state: true,
+        text: err.response.data.error,
+        onClickConfirmButton: () => {},
+      });
       console.log(err.response.data.error);
     }
   };

diff --git a/src/components/orderDetailPage/ErrorModal.tsx b/src/components/orderDetailPage/ErrorModal.tsx