Merge pull request #7 from marina-yhm/test

Feat: Header 기능구현

src/App.css

@@ -39,35 +39,35 @@
 
 @font-face {
   font-family: "Bold";
-  src: url("./assets/font/Pretendard-Bold.otf");
+  src: url("/src/assets/font/Pretendard-Bold.woff2");
 }
 
 @font-face {
   font-family: "ExtraBold";
-  src: url("./assets/font/Pretendard-ExtraBold.otf");
+  src: url("/src/assets/font/Pretendard-ExtraBold.woff2");
 }
 
 @font-face {
   font-family: "ExtraLight";
-  src: url("./assets/font/Pretendard-ExtraLight.otf");
+  src: url("/src/assets/font/Pretendard-ExtraLight.woff2");
 }
 
 @font-face {
   font-family: "Light";
-  src: url("./assets/font/Pretendard-Light.otf");
+  src: url("/src/assets/font/Pretendard-Light.woff2");
 }
 
 @font-face {
   font-family: "Medium";
-  src: url("./assets/font/Pretendard-Medium.otf");
+  src: url("/src/assets/font/Pretendard-Medium.woff2");
 }
 
 @font-face {
   font-family: "Regular";
-  src: url("./assets/font/Pretendard-Regular.otf");
+  src: url("/src/assets/font/Pretendard-Regular.woff2");
 }
 
 @font-face {
   font-family: "SemiBold";
-  src: url("./assets/font/Pretendard-SemiBold.otf");
+  src: url("/src/assets/font/Pretendard-SemiBold.woff2");
 }

src/App.js

@@ -1,4 +1,5 @@
 import { Route, Routes } from "react-router-dom";
+import { RecoilRoot } from "recoil";
 import Header from "../src/components/views/Header/Header";
 import Inventory from "../src/pages/Inventory/Inventory";
 import Mypage from "../src/pages/Mypage/Mypage";
@@ -9,15 +10,18 @@ import Home from "./pages/Home/Home";
 function App() {
   return (
     <div className="App">
-      <Header />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/Inventory" element={<Inventory />} />
-        <Route path="/Sales" element={<Sales />} />
-        <Route path="/Mypage" element={<Mypage />} />
-      </Routes>
+      <RecoilRoot>
+        <Header />
 
-      {/* <Footer /> */}
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/Inventory" element={<Inventory />} />
+          <Route path="/Sales" element={<Sales />} />
+          <Route path="/Mypage" element={<Mypage />} />
+        </Routes>
+
+        {/* <Footer /> */}
+      </RecoilRoot>
     </div>
   );
 }

src/Atom/status.jsx

@@ -1,8 +1,6 @@
 import { atom } from "recoil";
 
-const storeStatus = atom({
-  key: "storeStatus", // 전역적으로 고유한 값
+export const storeState = atom({
+  key: "storeState", // 전역적으로 고유한 값
   default: false, // 초깃값
 });
-
-export default storeStatus;

src/components/views/Header/Header.css

@@ -11,3 +11,26 @@
   margin-top: 1.25rem;
   float: left;
 }
+
+.store-group {
+  display: flex;
+  flex-direction: row;
+  object-fit: contain;
+  align-items: center;
+}
+
+.font {
+  color: #fff;
+  font-family: Pretendard;
+  font-size: 1.875rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 100%; /* 1.875rem */
+}
+
+.head-container {
+  display: flex;
+  align-content: stretch;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}

src/components/views/Header/Header.jsx

@@ -1,16 +1,47 @@
-import React from "react";
+import React, { useState } from "react";
 import { Col, Row } from "react-bootstrap";
+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="header">
       <Row>
         <Col>
           <img src={LOGO} className="LOGO" alt="LOGO" />
         </Col>
-        <Col></Col>
+        <Col />
+        <Col className="head-container">
+          {!Store ? (
+            <div className="store-group">
+              <img src={StoreOn} alt="Open" />
+              <div className="font">영업중</div>
+            </div>
+          ) : (
+            <div className="store-group">
+              <img src={StoreOff} alt="Close" />
+              <div className="font">영업종료 </div>
+            </div>
+          )}
+          {Sound ? (
+            <img src={SoundOn} onClick={onClickHandler} alt="SoundOn" />
+          ) : (
+            <img src={SoundOff} onClick={onClickHandler} alt="SoundOff" />
+          )}
+        </Col>
       </Row>
     </div>
   );

src/components/views/NavBar/NavBar.jsx

@@ -1,6 +1,8 @@
 import "bootstrap/dist/css/bootstrap.min.css";
-import React, { useState } from "react";
+import React from "react";
 import { Nav } from "react-bootstrap";
+import { useRecoilCallback, useRecoilState } from "recoil";
+import { storeState } from "../../../Atom/status";
 import Home from "../../../assets/icons/Navbar/Home.svg"; //홈
 import Inven from "../../../assets/icons/Navbar/Inven.svg"; //재고관리
 import Mypage from "../../../assets/icons/Navbar/Mypage.svg"; //마이페이지
@@ -11,11 +13,12 @@ import "../NavBar/NavBar.css";
 const NavBar = () => {
   const currentPath = window.location.pathname; // 현재 경로 가져오기
 
-  const [Store, setStore] = useState(1); // 영업여부
+  const [Store] = useRecoilState(storeState); // 영업여부
+  const setStoreState = useRecoilCallback(({ set }) => async () => {
+    set(storeState, !Store);
+  });
   const onClickHandler = (e) => {
-    setStore((prevStore) => {
-      setStore(!prevStore);
-    });
+    setStoreState();
   };
 
   return (

src/pages/Mypage/MainMypage.jsx

@@ -3,7 +3,7 @@ import React from "react";
 const MainMypage = () => {
   return (
     <div>
-      <h1>MainMypage</h1>
+      <h1>Mypage</h1>
     </div>
   );
 };

src/pages/Sales/MainSales.jsx

@@ -3,7 +3,7 @@ import React from "react";
 const MainSales = () => {
   return (
     <div>
-      <h1>MainSales</h1>
+      <h1>Sales</h1>
     </div>
   );
 };