From b515989272b9d6c52966e189679834d63909a3fc Mon Sep 17 00:00:00 2001 From: Joonhyung Choi Date: Mon, 1 May 2023 04:08:48 +0900 Subject: [PATCH] =?UTF-8?q?[#15]=20orderReview=EC=99=80=20ordeDetail=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EB=8A=94=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=86=B5=ED=95=A9=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit orderReview와 ordeDetail 페이지에서 사용하는 모달 컴포넌트 통합을 위한 코드 수정 --- pages/orderDetail.tsx | 35 +++++--- .../orderDetailPage/DetailContents.tsx | 56 ++++++++---- .../orderDetailPage/Detailbottom.tsx | 25 ++++-- src/components/orderDetailPage/ErrorModal.tsx | 86 ------------------- 4 files changed, 83 insertions(+), 119 deletions(-) delete mode 100644 src/components/orderDetailPage/ErrorModal.tsx diff --git a/pages/orderDetail.tsx b/pages/orderDetail.tsx index 3b08448..cc19431 100644 --- 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(); - 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 ( - + - + ); diff --git a/src/components/orderDetailPage/DetailContents.tsx b/src/components/orderDetailPage/DetailContents.tsx index 39683ab..a6a54b1 100644 --- 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 index 06d071f..a1e3cc7 100644 --- 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 deleted file mode 100644 index f610578..0000000 --- a/src/components/orderDetailPage/ErrorModal.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import styled from "styled-components"; -import { customColor } from "../customColor"; -import Image from "next/image"; -import cross from "./../../../public/img/modal/cross.png"; -import { useRouter } from "next/router"; -import { pathName } from "./../../config/pathName"; - -type propTypes = { - errorModalState: { state: boolean; text: string }; - getErrorModalState: (modalState: { state: boolean; text: string }) => void; -}; - -export const ErrorModal = ({ - errorModalState, - getErrorModalState, -}: propTypes) => { - const router = useRouter(); - - const onClickXbutton = () => { - getErrorModalState({ state: false, text: "" }); - }; - - const onClickGoToLoginButton = () => { - router.push(pathName.LOGIN); - }; - return ( - - - - x - - - {errorModalState.text} - - - ); -}; - -const ModalWrapper = styled.div<{ modalState: boolean }>` - display: ${(props) => (props.modalState === true ? "flex" : "none")}; - position: fixed; - margin-top: 250px; - width: 320px; - height: 180px; - flex-direction: column; - box-shadow: 1px 2px 4px 2px ${customColor.black + "33"}; - background: ${customColor.white}; - z-index: 10; -`; - -const ModalHeaderDiv = styled.div` - display: flex; - justify-content: right; - width: 100%; - height: 30px; -`; - -const XButton = styled.button` - width: 30px; - height: 30px; -`; - -const ModalContentDiv = styled.div` - text-align: center; - display: flex; - align-items: center; - justify-content: space-around; - padding: 0 35px; - width: 100%; - height: 100px; -`; - -const ModalFooterDiv = styled.div` - display: flex; - width: 100%; - height: 30px; - justify-content: center; -`; - -const GoToLoginButton = styled.button` - background-color: black; - color: white; - width: 100px; - height: 30px; - margin-bottom: 20px; -`;