Merge branch 'test' of https://github.com/marina-yhm/readyBusinessFront…

… into test

src/components/views/Header/Header.css

@@ -1,9 +1,39 @@
 .header {
-  width: 100%;
+  /* width: 100%; */
+  min-width: 73.75rem;
+  /* min-width: 64rem; */
   height: 5.5rem;
   background-color: #2e2d2d;
 }
 
+.header2{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-width: 73.75rem;
+  /* min-width: 64rem; */
+  height: 5.5rem;
+  background-color: #2e2d2d;
+  z-index: 101;
+}
+
+.header2-wrapper{
+  display: flex;
+  justify-content: space-between;
+}
+
+.head-container2{
+  width: 23.6rem;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.header-img-wrapper{
+  display: flex;
+}
+
 .LOGO {
   width: 19.1875rem;
   height: 4rem;
@@ -19,13 +49,14 @@
   align-items: center;
 }
 
+.store-img__wrapper{
+  margin: 0 0.5625rem;
+}
+
 .header-font {
   color: #fff;
-  font-family: Pretendard;
   font-size: 1.875rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 100%; /* 1.875rem */
+  font-family: "SemiBold";
 }
 
 .head-container {

src/components/views/Header/Header.jsx

@@ -27,13 +27,13 @@ const Header = () => {
         <Col className="head-container">
           {!Store ? (
             <div className="store-group">
-              <img src={StoreOn} alt="Open" />
-              <span className="header-font">영업중</span>
+              <div className="store-img__wrapper"><img src={StoreOn} alt="Open" /></div>
+              <div className="header-font">영업중</div>
             </div>
           ) : (
             <div className="store-group">
-              <img src={StoreOff} alt="Close" />
-              <span className="header-font">영업종료 </span>
+              <div className="store-img__wrapper"><img src={StoreOff} alt="Close" /></div>
+              <div className="header-font">영업종료 </div>
             </div>
           )}
           {Sound ? (

src/components/views/Header/Header2.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { useRecoilValue } from "recoil";
+import { storeState } from "../../../Atom/status";
+import StoreOff from "../../../assets/icons/Header/CloseLight.svg"; //영업종료
+import LOGO from "../../../assets/icons/Header/LOGO.svg"; //로고
+import StoreOn from "../../../assets/icons/Header/OpenLight.svg"; //영업중
+import SoundOff from "../../../assets/icons/Header/SoundOff.svg"; //소리끔
+import SoundOn from "../../../assets/icons/Header/SoundOn.svg"; //소리켬
+import "./Header.css";
+
+const Header = () => {
+  const Store = useRecoilValue(storeState);
+  const [Sound, setSound] = useState(1);
+
+  const onClickHandler = (e) => {
+    setSound(!Sound);
+  };
+
+  return (
+    <div className="header2">
+      <div className="header2-wrapper">
+        <div>
+          <img src={LOGO} className="LOGO" alt="LOGO" />
+        </div>
+        <div className="head-container2">
+          {!Store ? (
+            <div className="store-group">
+              <div className="store-img__wrapper"><img src={StoreOn} alt="Open" /></div>
+              <div className="header-font">영업중</div>
+            </div>
+          ) : (
+            <div className="store-group">
+              <div className="store-img__wrapper"><img src={StoreOff} alt="Close" /></div>
+              <div className="header-font">영업종료 </div>
+            </div>
+          )}
+          {Sound ? (
+            <div className="header-img-wrapper">
+                <img src={SoundOn} onClick={onClickHandler} alt="SoundOn" />
+            </div>
+          ) : (
+            <div className="header-img-wrapper">
+                <img src={SoundOff} onClick={onClickHandler} alt="SoundOff" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/views/Inven/InvenBox.jsx

@@ -0,0 +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"></div>
+            )}
+          </span>
+          <span className="mainInven-category-content__span2">{category}</span>
+          <span className="mainInven-category-content__span3">{name}</span>
+        </div>
+        </>
+    );
+}
+
+export default InvenBox;

src/components/views/NavBar/NavBar.css

@@ -1,6 +1,7 @@
 .navbar {
   width: 8.875rem;
   height: 46.25rem;
+  /* height: 42.5rem; */
   background-color: #2e2d2d;
 
   display: flex;

src/pages/Home/DetailHome.css

@@ -0,0 +1,44 @@
+.orderWait {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  width: 100%;
+  /* height: 100%; */
+  overflow-y: auto;
+}
+
+.listTable {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  width: 100%;
+
+  margin: auto;
+}
+
+.indexTable {
+  color: #4f4f4f;
+  font-family: "Light";
+  font-size: 1.375rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 100%; /* 1.375rem */
+}
+
+.Wait-Row {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+
+  width: 100%;
+  height: 3.125rem;
+  margin: auto;
+  color: #4f4f4f;
+  font-family: "Light";
+  font-size: 1.375rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 100%; /* 1.375rem */
+}

src/pages/Home/Receipt.css

@@ -0,0 +1,75 @@
+.rounded-rectangle {
+  width: 100%; /* 너비 설정 */
+  height: 97%; /* 높이 설정 */
+  background-color: #F5F5F5; /* 배경색 설정 */
+  border-radius: 1.875rem; /* 모서리를 둥글게 만드는 값 */
+  color: #000; /* 텍스트 색상 설정 */
+  box-shadow: 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.25);
+}
+
+.Box {
+  width: 100%; /* 너비 설정 */
+  height: 100%; /* 높이 설정 */
+  /* height: 42.5rem; */
+  /* padding-top: 5%; */
+  /* padding-left: 0; */
+}
+
+.receiptHeader {
+  padding-top: 10%;
+  padding-left: 10%;
+  display: flex;
+}
+
+.receipt-header {
+  color: #000;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  font-family: "Bold";
+  font-size: 1.75rem;
+  font-weight: 800;
+  line-height: 130%; /* 2.275rem */
+  letter-spacing: -0.0175rem;
+}
+
+.receipt-btn__wrapper{
+  /* width: 80%;
+  margin: 0 auto; */
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.receiptButton {
+  display: flex;
+  height: 5.5rem;
+}
+
+.receiptTextBox {
+  display: flex;
+  justify-content: space-between;
+
+  padding: 3% 7% 1% 7%;
+}
+
+
+.receipt-text {
+  color: #4f4f4f;
+  font-family: "Light";
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 130%; /* 1.625rem */
+  font-size: 1.25rem;
+  font-family: "SemiBold";
+  letter-spacing: -0.0125rem;
+}
+
+.receipt-divider {
+  width: 19.4375rem;
+  height: 0rem;
+
+  border-top: 1px solid #838383; /* 색상과 굵기를 조절할 수 있습니다. */
+  margin: 20px 0; /* 위아래 여백을 조절할 수 있습니다. */
+
+  transform: translate(10%, -50%);
+}

src/pages/Home/Receipt/Receipt.jsx

@@ -44,6 +44,7 @@ const Receipt = () => {
           </div>
           <Row className="receiptButton">
             <Col>
+            <div className="receipt-btn__wrapper">
               <Button
                 name="Reject"
                 onClick={handleRefuseModal}
@@ -57,12 +58,15 @@ const Receipt = () => {
                   fontFamily: "SemiBold",
                   fontSize: "1.375rem",
                   color: "#838383",
+                  justifyContent: "center"
                 }}
               >
                 거부
               </Button>
+              </div>
             </Col>
             <Col>
+            <div className="receipt-btn__wrapper">
               <Button
                 name="Accept"
                 onClick={handleReceiveModal}
@@ -79,6 +83,7 @@ const Receipt = () => {
               >
                 접수
               </Button>
+            </div>
             </Col>
           </Row>
           <div className="receiptTextBox">

src/pages/Inventory/Inventory.css

@@ -0,0 +1,15 @@
+.inven-wrapper{
+    display: flex;
+
+}
+
+nav{
+    width: 8.875rem;
+    height: 46.25rem;
+    /* height: 42.5rem; */
+    z-index: 1;
+}
+
+main{
+    width: calc(100vw - 8.875rem);
+}

src/pages/Inventory/Inventory.jsx

@@ -1,19 +1,19 @@
 import React from "react";
-import { Col, Row } from "react-bootstrap";
+import Header from "../../components/views/Header/Header2";
 import NavBar from "../../components/views/NavBar/NavBar";
+import "./Inventory.css";
 import MainInven from "./MainInven";
 
 const Inventory = () => {
   return (
-    <div>
-      <Row>
-        <Col>
+    <div className="inven-wrapper">
+      <Header />
+        <nav>
           <NavBar />
-        </Col>
-        <Col>
+        </nav>
+        <main>
           <MainInven />
-        </Col>
-      </Row>
+        </main>
     </div>
   );
 };