Skip to content

Commit

Permalink
Feat: modal 제작 완료, Header480에 영업 상태 변경 modal 연결
Browse files Browse the repository at this point in the history
  • Loading branch information
@imi21123
imi21123 committed Jan 25, 2024
2 parents 3f93fef + 3074222 commit 077bc4d
Show file tree
Hide file tree
Showing 14 changed files with 653 additions and 472 deletions.
2 changes: 1 addition & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
// import Auth from "./hoc/auth.jsx";
import Auth from "./utils/Auth.jsx";
import MainPage from "./pages/Main/MainPage.jsx";
import InventoryPage from "./pages/Inventory/Inventory.jsx";
import InventoryPage from "./pages/Inventory/Inventory/InventoryPage.jsx";
import MyPage from "./pages/Mypage/Mypage.jsx";
import OrderManagePage from "./pages/OrderManage/Order.jsx";
import SalesPage from "./pages/Sales/Sales.jsx";
Expand Down
3 changes: 3 additions & 0 deletions src/assets/icons/icon_parkOutline.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
157 changes: 104 additions & 53 deletions src/components/views/Header/HeaderMain/HeaderMain.css
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,44 @@
.header-css {
.header-css{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: space-between;
/* position: fixed;
left: 0;
right: 0;
z-index: 999; */
z-index: 900;
border-bottom: 0.01rem solid rgba(217, 217, 217, 1);

ul {
display: flex;
flex-direction: row;
list-style: none;
margin: 0; /* 기본 마진 제거 */
padding: 0; /* 기본 패딩 제거 */
}
white-space:nowrap
}
.header-css ul{
display: flex;
flex-direction: row;
list-style: none;
margin: 0; /* 기본 마진 제거 */
padding: 0; /* 기본 패딩 제거 */
}

.headerTop-css {
.headerTop-css{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding: 1.5rem 20%;
border-bottom: 0.01rem solid rgba(217, 217, 217, 1);
}
.headerTop-logo-wrapper-css {
.headerTop-logo-wrapper-css{
display: flex;
flex-direction: row;
align-items: center;
height: 10%;
/* height: 10%; */
}

.headerTop-logo-cherry-css {
width: 100%;
height: 100%;
max-height: 2.79rem;
max-width: 2.79rem;
}
.headerTop-logo-txt-css {
.headerTop-logo-txt-css{
width: 12.5625rem;
height: 3.125rem;
padding-left: 0.1rem;
width: 100%;
height: 100%;
max-height: 3.125rem;
}
.headerTop-logo-cherry-css{
width: 2.7871rem;
height: 2.7871rem;
}

.headerTop-nav-css {
Expand All @@ -58,54 +52,47 @@
font-size: 1rem;
font-weight: 500;

li {
margin-right: 0.7rem;
}
}
.headerTop-nav-css li{
margin-right: 1.5rem;
}

.headerBottom-css {
.headerBottom-css{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 3.25rem;
padding: 0 20%;
}
.headerBottom-nav-css {
.headerBottom-nav-css{
display: flex;
/* justify-content: space-between; */
align-items: center;
/* height: 100%; */
/* margin-bottom: 0.2rem; */
li {
margin-right: 1rem;
}
}
.headerBottom-nav-left-css {
color: #2e2d2d;
color: #2E2D2D;
text-align: center;
justify-content: center;
font-family: "Pretendard";
}
.headerBottom-nav-css li{
margin-right: 1vw;
}
.headerBottom-nav-left-css{
justify-content: center;
font-size: 1.125rem;
font-weight: 600;
}

.loginControl-wrapper-css {
.loginControl-wrapper-css{
display: flex;
align-items: center;
color: #2e2d2d;
font-family: "Pretendard";
font-size: 0.75rem;
font-weight: 700;
/* flex-direction: row; */
/* height: 100%; */
}
.loginControl-button-wrapper-css {
display: flex;
position: relative;
border-radius: 2rem;
width: 3rem;
height: 1.5rem;
min-width: 3rem;
min-height: 1.5rem;
margin-left: 0.5rem;
}

Expand All @@ -120,15 +107,79 @@
width: 1.3rem;
height: 1.3rem;
transition: transform 0.3s ease;
top: 6%;
top:6%;
}

.loginControl-button-isopen-css {
left: 0%;
transform: translateX(10%);
right: 0%;
transform: translateX(-10%);
}

.loginControl-button-isclose-css {
right: 0%;
transform: translateX(-10%);
left: 0%;
transform: translateX(10%);
}
/* w:1024일때 */
@media screen and (max-width: 768px){
.headerTop-logo-txt-css{
width: 12.5625rem;
height: 3.125rem;
}
.headerTop-logo-cherry-css{
width: 2.7871rem;
height: 2.7871rem;
}
.headerTop-logo-txt-css{
width: 12.5625rem;
height: 3.125rem;
}
.headerTop-logo-cherry-css{
width: 2.7871rem;
height: 2.7871rem;
}
}
/* w:768, h:1024일 때 */
@media screen and (min-width: 625px) and (max-width: 780px) {
.headerTop-logo-txt-css{
width: 9.4375rem;
height: 2.3125rem;
}
.headerTop-logo-cherry-css{
width: 2.09rem;
height: 2.09rem;
}
.headerTop-nav-css {
font-size: 0.75rem;
}
.headerTop-nav-css li{
margin-right: 1rem;
}
/* .headerBottom-nav-css li{
margin-right: 1.2rem;
} */
.headerBottom-nav-left-css{
font-size: 0.875rem;
}
}
@media screen and (min-width:480px) and (max-width: 625px){
.headerTop-logo-txt-css{
width: 6.4375rem;
height: 2.3125rem;
}
.headerTop-logo-cherry-css{
width: 1.09rem;
height: 1.09rem;
}
.headerTop-nav-css {
font-size: 0.75rem;
}
.headerTop-nav-css li{
margin-right: 0.6rem;
}
/* .headerBottom-nav-css li{
margin-right: 0.5rem;
} */
.headerBottom-nav-left-css{
font-size: 0.75rem;
}
}
138 changes: 78 additions & 60 deletions src/components/views/Header/HeaderMain/HeaderMain.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
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();
Expand All @@ -14,68 +15,85 @@ const HeaderMain = () => {
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 (
<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 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;
Loading

0 comments on commit 077bc4d

Please sign in to comment.