Merge pull request #15 from hhbb0081/test

Feat: 재고관리 & 마이페이지 추가

.env

@@ -4,4 +4,3 @@ WDS_SOCKET_PORT=0
 NODE_PATH=src/
 REACT_APP_API_ROOT=http://localhost:8080
 REACT_APP_HOME_URL=http://localhost:3000
-

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

@@ -4,7 +4,8 @@
   align-content: flex-start;
 
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
+  overflow-y: auto;
 }
 
 .listTable {

src/pages/Home/Receipt.css

@@ -1,20 +1,18 @@
 .rounded-rectangle {
   width: 100%; /* 너비 설정 */
   height: 97%; /* 높이 설정 */
-  background-color: #f5f5f5; /* 배경색 설정 */
-  border-radius: 20px; /* 모서리를 둥글게 만드는 값 */
-  text-align: center; /* 가운데 정렬 */
+  background-color: #F5F5F5; /* 배경색 설정 */
+  border-radius: 1.875rem; /* 모서리를 둥글게 만드는 값 */
   color: #000; /* 텍스트 색상 설정 */
-  font-size: 18px; /* 폰트 크기 설정 */
-  line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */
-  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.25);
 }
 
 .Box {
   width: 100%; /* 너비 설정 */
   height: 100%; /* 높이 설정 */
-  padding-top: 5%;
-  padding-left: 0;
+  /* height: 42.5rem; */
+  /* padding-top: 5%; */
+  /* padding-left: 0; */
 }
 
 .receiptHeader {
@@ -33,6 +31,15 @@
   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;
@@ -44,12 +51,16 @@
 
   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;
 }
 

src/pages/Home/Receipt.jsx

@@ -32,6 +32,7 @@ const Receipt = () => {
           </div>
           <Row className="receiptButton">
             <Col>
+            <div className="receipt-btn__wrapper">
               <Button
                 name="Reject"
                 style={{
@@ -44,12 +45,15 @@ const Receipt = () => {
                   fontFamily: "SemiBold",
                   fontSize: "1.375rem",
                   color: "#838383",
+                  justifyContent: "center"
                 }}
               >
                 거부
               </Button>
+              </div>
             </Col>
             <Col>
+            <div className="receipt-btn__wrapper">
               <Button
                 name="Accept"
                 style={{
@@ -65,6 +69,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>
   );
 };