From 3f93fefedbae53ea5ca46cf7615797bfacca065d Mon Sep 17 00:00:00 2001 From: imi21123 Date: Thu, 25 Jan 2024 15:22:33 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20modal=20=EC=A0=9C=EC=9E=91=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C,=20Header480=EC=97=90=20=EC=98=81=EC=97=85?= =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EB=B3=80=EA=B2=BD=20modal=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/Header/Header480/Header480.jsx | 26 +++++- .../views/Header/HeaderMain/HeaderMain.jsx | 1 + src/components/views/Modal/Modal.css | 89 +++++++++++++++++++ src/components/views/Modal/Modal.jsx | 22 +++++ 4 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 src/components/views/Modal/Modal.css create mode 100644 src/components/views/Modal/Modal.jsx diff --git a/src/components/views/Header/Header480/Header480.jsx b/src/components/views/Header/Header480/Header480.jsx index a0afba1..4502c89 100644 --- a/src/components/views/Header/Header480/Header480.jsx +++ b/src/components/views/Header/Header480/Header480.jsx @@ -4,13 +4,28 @@ import logo from "../../../../assets/icons/Header/LOGO.svg"; import SideMenu from "../../SideMenu/SideMenu"; import "./Header480.css"; import { useState } from "react"; +import Modal from "../../Modal/Modal"; export default function Header480() { const [isOperation, setIsOperation] = useState(false); const [isSideMenuOpen, setIsSideMenuOpen] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); // 모달 표시 여부 상태 추가 + const [modalTitle, setModalTitle] = useState(""); const handleOperation = () => { - setIsOperation((prev) => !prev); + setIsModalOpen(true); // 영업 상태 변경 버튼 클릭 시 모달을 표시 + setModalTitle( + isOperation ? "영업을 시작하시겠습니까?" : "영업을 종료하시겠습니까?" + ); + }; + + const handleCancle = () => { + setIsModalOpen(false); // 모달 닫기 (영업 상태 변경 없음) + }; + + const handleCheck = () => { + setIsOperation(!isOperation); + setIsModalOpen(false); // 모달 닫기 }; const handleSidebar = () => { @@ -24,7 +39,6 @@ export default function Header480() { return ( <> -
+ + {isModalOpen && ( + + )} ); } diff --git a/src/components/views/Header/HeaderMain/HeaderMain.jsx b/src/components/views/Header/HeaderMain/HeaderMain.jsx index 8d4bdec..a72dac7 100644 --- a/src/components/views/Header/HeaderMain/HeaderMain.jsx +++ b/src/components/views/Header/HeaderMain/HeaderMain.jsx @@ -3,6 +3,7 @@ import logo_txt from "../../../../assets/icons/Big_LOGO.svg"; import logo_cherry from "../../../../assets/icons/small_cherry.svg"; import "./HeaderMain.css"; import { useState } from "react"; + const HeaderMain = () => { const navigate = useNavigate(); // const location = useLocation(); diff --git a/src/components/views/Modal/Modal.css b/src/components/views/Modal/Modal.css new file mode 100644 index 0000000..6abfb60 --- /dev/null +++ b/src/components/views/Modal/Modal.css @@ -0,0 +1,89 @@ +.modal__wrapper { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + + z-index: 100; + background: rgba(0, 0, 0, 0.5); +} + +.modal__box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + top: calc(50% - 8.5rem); + left: calc(50% - 10.15625rem); + width: 31.5rem; + height: 24.3125rem; + border-radius: 2.5rem; + background: #fff; +} + +.modal__close { + width: 1.5rem; + height: 1.5rem; + margin-left: auto; + margin-right: 2.19rem; +} + +.modal__berry { + width: 4.498rem; + height: 4.498rem; + transform: rotate(0.028deg); + flex-shrink: 0; +} + +.modal__title { + color: #000; + text-align: center; + font-family: "Pretendard"; + font-size: 1.5rem; + font-style: normal; + font-weight: 600; + line-height: 130%; /* 1.95rem */ + margin-top: 2.0625rem; + margin-bottom: 5rem; +} + +.modal__check { + width: 11.4375rem; + height: 1.875rem; + flex-shrink: 0; + border-radius: 0.625rem; + background: #d82356; + color: #fff; + text-align: center; + font-family: "Pretendard"; + font-size: 1.125rem; + font-style: normal; + font-weight: 700; + line-height: 130%; /* 1.4625rem */ + letter-spacing: -0.01125rem; +} + +@media (max-width: 480px) { + .modal__box { + width: 20.3125rem; + height: 17.5rem; + border-radius: 0.625rem; + } + + .modal__close { + width: 1.25rem; + height: 1.25rem; + } + + .modal__berry { + width: 2.499rem; + height: 2.499rem; + } + + .modal__title { + font-size: 1.25rem; + letter-spacing: -0.0125rem; + } +} diff --git a/src/components/views/Modal/Modal.jsx b/src/components/views/Modal/Modal.jsx new file mode 100644 index 0000000..887808b --- /dev/null +++ b/src/components/views/Modal/Modal.jsx @@ -0,0 +1,22 @@ +import cherry from "../../../assets/icons/small_cherry.svg"; +import X from "../../../assets/icons/X.svg"; +import "./Modal.css"; + +const Modal = ({ handleCancle, handleCheck, title }) => { + return ( +
+
+ X +
+ berry +
+
{title}
+
+ 확인 +
+
+
+ ); +}; + +export default Modal; From d8fe1b402f8b9782f84e181f5c47d384a55fe344 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Thu, 25 Jan 2024 15:27:33 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20=EC=B6=A9=EB=8F=8C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/Header/HeaderMain/HeaderMain.jsx | 146 ++++++++---------- 1 file changed, 65 insertions(+), 81 deletions(-) diff --git a/src/components/views/Header/HeaderMain/HeaderMain.jsx b/src/components/views/Header/HeaderMain/HeaderMain.jsx index 79ee9cc..f0fc9a9 100644 --- a/src/components/views/Header/HeaderMain/HeaderMain.jsx +++ b/src/components/views/Header/HeaderMain/HeaderMain.jsx @@ -1,99 +1,83 @@ import { useNavigate } from "react-router-dom"; import logo_txt from "../../../../assets/icons/Big_LOGO.svg"; -import logo_cherry from "../../../../assets/icons/small_cherry.svg" +import logo_cherry from "../../../../assets/icons/small_cherry.svg"; import "./HeaderMain.css"; import { useState } from "react"; -<<<<<<< HEAD - const HeaderMain = () => { const navigate = useNavigate(); - // const location = useLocation(); const [isOperation, setIsOperation] = useState(false); //가게 영업 상태를 받아와야합니다. - //로그인 상태를 바꿔주는 핸들러 + //영업중/영업종료를 바꿔주는 핸들러 //해당 로직 필요함 const handleOperation = () => { setIsOperation((prev) => !prev); }; const isOperationBackground = isOperation -======= -const HeaderMain = () =>{ - const navigate = useNavigate(); - const [isOperation, setIsOperation] = useState(false);//가게 영업 상태를 받아와야합니다. - //영업중/영업종료를 바꿔주는 핸들러 - //해당 로직 필요함 - const handleOperation = () => { - setIsOperation((prev) => !prev); - }; - const isOperationBackground = isOperation ->>>>>>> 30742229bd340319681715b1153273cadcfa944a ? "rgba(216, 35, 86, 1)" : "rgba(131, 131, 131, 1)"; - const OperationButton = () => { - return ( -
- {isOperation ? "영업 중" : "영업 종료"} -
handleOperation()} - style={{ backgroundColor: isOperationBackground }} - > - {isOperation ? ( -
- ) : ( -
- )} -
-
- ); - }; - + const OperationButton = () => { + return ( +
+ {isOperation ? "영업 중" : "영업 종료"} +
handleOperation()} + style={{ backgroundColor: isOperationBackground }} + > + {isOperation ? ( +
+ ) : ( +
+ )} +
+
+ ); + }; - return( -
-
-
navigate("/")}> - logo_cherry - logoicon -
+ return ( +
+
+
navigate("/")} + > + logo_cherry + logoicon +
-
-
    -
  • navigate("/")}> - 공지사항 -
    • -
  • navigate("/")}> - 고객센터 -
    • -
  • navigate("/mypage")}> - 마이페이지 -
    • -
-
-
-
-
-
    - {/*경로 입력해주세요! */} -
  • navigate("/")}> - 매출관리 -
    • -
  • navigate("/")}> - 매장관리 -
    • -
  • navigate("/mypage")}> - 재고관리 -
    • - {/* 클릭안되게. */} -
  • - {/*
  • navigate("/")}> */} - 고객관리(준비중) -
    • -
-
- -
-
- ) -} +
+
    +
  • navigate("/")}>공지사항
    • +
  • navigate("/")}>고객센터
    • +
  • navigate("/mypage")}>마이페이지
    • +
+
+
+
+
+
    + {/*경로 입력해주세요! */} +
  • navigate("/")}>매출관리
    • +
  • navigate("/")}>매장관리
    • +
  • navigate("/mypage")}>재고관리
    • + {/* 클릭안되게. */} +
  • + {/*
  • navigate("/")}> */} + 고객관리(준비중) +
    • +
+
+ +
+
+ ); +}; export default HeaderMain;