Skip to content

Commit

Permalink
Merge pull request #107 from imi21123/test
Browse files Browse the repository at this point in the history 
Feat: modal 제작 완료, Header480에 영업 상태 변경 modal 연결
  • Loading branch information
@imi21123
imi21123 authored Jan 25, 2024
2 parents 3074222 + d8fe1b4 commit dce0e11
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 77 deletions.
26 changes: 24 additions & 2 deletions src/components/views/Header/Header480/Header480.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -24,7 +39,6 @@ export default function Header480() {
return (
<>
<SideMenu isOpen={isSideMenuOpen} toggleSidebar={handleSidebar} />

<header className="header480">
<img
src={menu}
Expand All @@ -51,6 +65,14 @@ export default function Header480() {
)}
</div>
</header>

{isModalOpen && (
<Modal
handleCancle={handleCancle}
handleCheck={handleCheck}
title={modalTitle}
/>
)}
</>
);
}
148 changes: 73 additions & 75 deletions src/components/views/Header/HeaderMain/HeaderMain.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,85 +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";
const HeaderMain = () =>{
const navigate = useNavigate();
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
? "rgba(216, 35, 86, 1)"
: "rgba(131, 131, 131, 1)";

const OperationButton = () => {
return (
<div className="loginControl-wrapper-css">
<span>{isOperation ? "영업 중" : "영업 종료"}</span>
<div
className="loginControl-button-wrapper-css"
onClick={() => handleOperation()}
style={{ backgroundColor: isOperationBackground }}
>
{isOperation ? (
<div className="loginControl-button-isopen-css"></div>
) : (
<div className="loginControl-button-isclose-css"></div>
)}
</div>
</div>
);
};

const OperationButton = () => {
return (
<div className="loginControl-wrapper-css">
<span>{isOperation ? "영업 중" : "영업 종료"}</span>
<div
className="loginControl-button-wrapper-css"
onClick={() => handleOperation()}
style={{ backgroundColor: isOperationBackground }}
>
{isOperation ? (
<div className="loginControl-button-isopen-css"></div>
) : (
<div className="loginControl-button-isclose-css"></div>
)}
</div>
</div>
);
};

return(
<header className="header-css">
<div className="headerTop-css">
<div className="headerTop-logo-wrapper-css" onClick={() => navigate("/")}>
<img src={logo_cherry} alt="logo_cherry" className="headerTop-logo-cherry-css"/>
<img src={logo_txt} alt="logoicon" className="headerTop-logo-txt-css"/>
</div>
return (
<header className="header-css">
<div className="headerTop-css">
<div
className="headerTop-logo-wrapper-css"
onClick={() => navigate("/")}
>
<img
src={logo_cherry}
alt="logo_cherry"
className="headerTop-logo-cherry-css"
/>
<img
src={logo_txt}
alt="logoicon"
className="headerTop-logo-txt-css"
/>
</div>

<div className="headerTop-nav-css">
<ul className="headerTop-nav-right-css" >
<li onClick={() => navigate("/")}>
공지사항
</li>
<li onClick={() => navigate("/")}>
고객센터
</li>
<li onClick={() => navigate("/mypage")}>
마이페이지
</li>
</ul>
</div>
</div>
<div className="headerBottom-css">
<div className="headerBottom-nav-css">
<ul className="headerBottom-nav-left-css" >
{/*경로 입력해주세요! */}
<li onClick={() => navigate("/")}>
매출관리
</li>
<li onClick={() => navigate("/")}>
매장관리
</li>
<li onClick={() => navigate("/mypage")}>
재고관리
</li>
{/* 클릭안되게. */}
<li >
{/* <li onClick={() => navigate("/")}> */}
고객관리(준비중)
</li>
</ul>
</div>
<OperationButton/>
</div>
</header>
)
}
<div className="headerTop-nav-css">
<ul className="headerTop-nav-right-css">
<li onClick={() => navigate("/")}>공지사항</li>
<li onClick={() => navigate("/")}>고객센터</li>
<li onClick={() => navigate("/mypage")}>마이페이지</li>
</ul>
</div>
</div>
<div className="headerBottom-css">
<div className="headerBottom-nav-css">
<ul className="headerBottom-nav-left-css">
{/*경로 입력해주세요! */}
<li onClick={() => navigate("/")}>매출관리</li>
<li onClick={() => navigate("/")}>매장관리</li>
<li onClick={() => navigate("/mypage")}>재고관리</li>
{/* 클릭안되게. */}
<li>
{/* <li onClick={() => navigate("/")}> */}
고객관리(준비중)
</li>
</ul>
</div>
<OperationButton />
</div>
</header>
);
};
export default HeaderMain;
89 changes: 89 additions & 0 deletions src/components/views/Modal/Modal.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
22 changes: 22 additions & 0 deletions src/components/views/Modal/Modal.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="modal__wrapper">
<div className="modal__box">
<img src={X} alt="X" className="modal__close" onClick={handleCancle} />
<div>
<img src={cherry} alt="berry" className="modal__berry" />
</div>
<div className="modal__title">{title}</div>
<div className="modal__check" onClick={handleCheck}>
확인
</div>
</div>
</div>
);
};

export default Modal;

0 comments on commit dce0e11

Please sign in to comment.