readyvery · 1223v · Jan 22, 2024 · Jan 22, 2024 · Jan 22, 2024 · Jan 22, 2024
diff --git a/src/App.js b/src/App.js
@@ -115,4 +115,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/src/components/views/Header/HeaderMain/HeaderMain.css b/src/components/views/Header/HeaderMain/HeaderMain.css
@@ -0,0 +1,137 @@
+.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;
+    border-bottom: 0.01rem solid rgba(217, 217, 217, 1);
+
+    ul {
+        display: flex;
+        flex-direction: row;
+        list-style: none;
+        margin: 0; /* 기본 마진 제거 */
+        padding: 0; /* 기본 패딩 제거 */
+    }
+}
+
+.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{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 10%;
+}
+
+.headerTop-logo-cherry-css{
+    width: 100%;
+    height: 100%;
+    max-height: 2.79rem;
+    max-width: 2.79rem;
+}
+.headerTop-logo-txt-css{
+    padding-left: 0.1rem;
+    width: 100%;
+    height: 100%;
+    max-height: 3.125rem;
+}
+
+.headerTop-nav-css {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    color: #838383;
+    font-family: "Pretendard";
+    font-size: 1rem;
+    font-weight: 500;
+
+    li {
+        margin-right: 0.7rem;
+    }
+}
+
+.headerBottom-css{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 3.25rem;
+    padding: 0 20%;
+}
+.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;
+    text-align: center;
+    justify-content: center;
+    font-family: "Pretendard";
+    font-size: 1.125rem;
+    font-weight: 600;
+}
+
+.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;
+    margin-left: 0.5rem;
+}
+
+.loginControl-button-isopen-css,
+.loginControl-button-isclose-css {
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 50%;
+    width: 1.3rem;
+    height: 1.3rem;
+    transition: transform 0.3s ease;
+    top:6%;
+}
+
+.loginControl-button-isopen-css {
+    left: 0%;
+    transform: translateX(10%); 
+}
+
+.loginControl-button-isclose-css {
+    right: 0%;
+    transform: translateX(-10%);
+}
+
+
+
diff --git a/src/components/views/Header/HeaderMain/HeaderMain.jsx b/src/components/views/Header/HeaderMain/HeaderMain.jsx
@@ -0,0 +1,85 @@
+import { useLocation, useNavigate } from "react-router-dom";
+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();
+    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>
+        );
+      };
+
+
+    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>
+    )
+}
+export default HeaderMain;
+
diff --git a/src/components/views/Inven/InvenBox.jsx b/src/components/views/Inven/InvenBox.jsx
@@ -1,19 +1,19 @@
 const InvenBox = ({handleModal, invenProps: {category, name, soldOut}}) => {
-    return(
-        <>
-        <div className={`mainInven-category-content__box ${soldOut ? 'selected' : ''}`}>
-          <span className="mainInven-category-content__span1">
-            {!soldOut ? (
-                <div className="mainInven-category-checkbox" onClick={handleModal}></div>
-            ) : (
-                <div className="mainInven-category-checkbox selected" onClick={handleModal}></div>
-            )}
-          </span>
-          <span className="mainInven-category-content__span2">{category}</span>
-          <span className="mainInven-category-content__span3">{name}</span>
-        </div>
-        </>
-    );
+  return(
+      <>
+      <div className={`mainInven-category-content__box ${soldOut ? 'selected' : ''}`}>
+        <span className="mainInven-category-content__span1">
+          {!soldOut ? (
+              <div className="mainInven-category-checkbox" onClick={handleModal}></div>
+          ) : (
+              <div className="mainInven-category-checkbox selected" onClick={handleModal}></div>
+          )}
+        </span>
+        <span className="mainInven-category-content__span2">{category}</span>
+        <span className="mainInven-category-content__span3">{name}</span>
+      </div>
+      </>
+  );
 }
 
 export default InvenBox;
diff --git a/src/pages/Inventory/Inventory/InventoryModal.jsx b/src/pages/Inventory/Inventory/InventoryModal.jsx
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isModalOpenState = atom({
+  key: 'isModalOpenState',
+  default: false,
+});
diff --git a/src/pages/Inventory/Inventory/InventoryPage.css b/src/pages/Inventory/Inventory/InventoryPage.css
@@ -0,0 +1,29 @@
+.inven-wrapper-background{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .inven-wrapper {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* nav {
+
+  } */
+
+  /* main {
+    width: calc(100vw);
+    height: calc(48rem);
+  } */
+
diff --git a/src/pages/Inventory/Inventory/InventoryPage.jsx b/src/pages/Inventory/Inventory/InventoryPage.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import "./InventoryPage.css";
+import MainInven from "./MainInven";
+import { useRecoilState } from "recoil";
+import { isModalOpenState } from "./InventoryModal";
+import HeaderMain from "../../../components/views/Header/HeaderMain/HeaderMain";
+
+const InventoryPage = () => {
+  const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState);
+    // 모달창 열렸을 때 배경
+    const isModalOpenBackground = isModalOpen
+    ? "rgba(0, 0, 0, 0.1)"
+    : '';
+
+    const handleIsModalOpen = () =>{
+      if(isModalOpen){
+        setIsModalOpen(false);
+      }
+    }
+  return (
+    <div className="inven-wrapper-background" style={{ backgroundColor: isModalOpenBackground }} onClick={()=>handleIsModalOpen()}>
+      <HeaderMain/>
+        <div className="inven-wrapper">
+            <MainInven />
+        </div>
+    </div>
+  );
+};
+
+export default InventoryPage;
-Original file line number
+Diff line change
@@ Expand Up / @@ -115,4 +115,4 @@ function App() { @@
       );
     }
-    export default App;
+    export default App;