Merge pull request #6 from marina-yhm/test

Feat: Home화면 구현
readyvery · Nov 13, 2023 · b54708c · b54708c
2 parents c66abad + bc44cb6
commit b54708c
Show file tree

Hide file tree

Showing 18 changed files with 210 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "redux": "^4.2.1",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.4.2",

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,4 @@
 import { Route, Routes } from "react-router-dom";
-import Footer from "../src/components/views/Footer/Footer";
 import Header from "../src/components/views/Header/Header";
 import Inventory from "../src/pages/Inventory/Inventory";
 import Mypage from "../src/pages/Mypage/Mypage";
@@ -18,7 +17,7 @@ function App() {
         <Route path="/Mypage" element={<Mypage />} />
       </Routes>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -0,0 +1,8 @@
+import { atom } from "recoil";
+
+const storeStatus = atom({
+  key: "storeStatus", // 전역적으로 고유한 값
+  default: false, // 초깃값
+});
+
+export default storeStatus;
diff --git a/src/assets/Designer.png b/src/assets/Designer.png
diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -1,5 +1,5 @@
 .header {
-  width: 73.75rem;
+  width: 100%;
   height: 5.5rem;
   background-color: #2e2d2d;
 }

diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -1,11 +1,17 @@
 import React from "react";
+import { Col, Row } from "react-bootstrap";
 import LOGO from "../../../assets/icons/Header/LOGO.svg"; //로고
 import "./Header.css";
 
 const Header = () => {
   return (
     <div className="header">
-      <img src={LOGO} className="LOGO" alt="LOGO" />
+      <Row>
+        <Col>
+          <img src={LOGO} className="LOGO" alt="LOGO" />
+        </Col>
+        <Col></Col>
+      </Row>
     </div>
   );
 };

diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css
@@ -16,9 +16,6 @@
   flex-direction: column;
 }
 
-.navbarStore {
-}
-
 .icon-group {
   display: flex;
   flex-direction: column;

diff --git a/src/components/views/NavBar/NavBar.jsx b/src/components/views/NavBar/NavBar.jsx
@@ -12,6 +12,11 @@ const NavBar = () => {
   const currentPath = window.location.pathname; // 현재 경로 가져오기
 
   const [Store, setStore] = useState(1); // 영업여부
+  const onClickHandler = (e) => {
+    setStore((prevStore) => {
+      setStore(!prevStore);
+    });
+  };
 
   return (
     <div className="navbar">
@@ -73,12 +78,12 @@ const NavBar = () => {
         </Nav.Link>
       </div>
 
-      <Nav.Link className="navbarStore">
+      <Nav.Link>
         {Store ? (
           <div className="icon-group">
             <img
               className="icon"
-              onClick={setStore(0)}
+              onClick={onClickHandler}
               src={StoreOn}
               alt="Open"
             />
@@ -88,7 +93,7 @@ const NavBar = () => {
           <div className="icon-off">
             <img
               className="icon"
-              onClick={setStore(1)}
+              onClick={onClickHandler}
               src={StoreOn}
               alt="Close"
             />

diff --git a/src/pages/Home/Complete.jsx b/src/pages/Home/Complete.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Complete = () => {
+  return <div>Complete</div>;
+};
+
+export default Complete;
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -2,17 +2,27 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import NavBar from "../../components/views/NavBar/NavBar";
 import MainHome from "./MainHome";
+import Receipt from "./Receipt";
 
 const Home = () => {
   return (
     <div>
       <Row>
-        <Col xs={1}>
+        <Col
+          xs={1}
+          style={{ width: "8.875rem", height: "46.25rem", padding: "0" }}
+        >
           <NavBar />
         </Col>
-        <Col>
+        <Col style={{ padding: "0" }}>
           <MainHome />
         </Col>
+        <Col
+          xs={1}
+          style={{ width: "23.75rem", height: "44.875rem", padding: "0" }}
+        >
+          <Receipt />
+        </Col>
       </Row>
     </div>
   );

diff --git a/src/pages/Home/MainHome.css b/src/pages/Home/MainHome.css
@@ -0,0 +1,10 @@
+.Box {
+  width: 100%; /* 너비 설정 */
+  height: 95%; /* 높이 설정 */
+  padding-top: 5%;
+}
+
+.status-header {
+  padding-left: 1%;
+  border-bottom: 8px solid #d82356;
+}
diff --git a/src/pages/Home/MainHome.jsx b/src/pages/Home/MainHome.jsx
@@ -1,5 +1,9 @@
 import React, { useState } from "react";
 import { Button, Col, Container, Row } from "react-bootstrap";
+import Complete from "./Complete";
+import "./MainHome.css";
+import Progress from "./Progress";
+import Wait from "./Wait";
 
 const MainHome = () => {
   const [status, setStatus] = useState({
@@ -9,12 +13,9 @@ const MainHome = () => {
   });
 
   const onClickHandler = (e) => {
-    console.log(status);
     const { name } = e.target;
-
     // 현재 선택된 상태
     const currentStatus = status[name];
-
     if (!currentStatus) {
       setStatus((prevStatus) => {
         const updatedStatus = { ...prevStatus };
@@ -26,34 +27,78 @@ const MainHome = () => {
             updatedStatus[key] = false;
           }
         }
-
         return updatedStatus;
       });
     }
   };
 
   return (
-    <Container>
-      <Row>
+    <Container className="Box">
+      <Row className="status-header">
         <Col>
-          <Button name="Wait" onClick={onClickHandler}>
-            대기중
+          <Button
+            name="Wait"
+            onClick={onClickHandler}
+            style={{
+              width: "100%",
+              borderRadius: "0.875rem",
+              backgroundColor: status.Wait ? "#d82356" : "#FFFFFF",
+              fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
+              fontSize: "1.5625rem",
+              color: status.Wait ? "#FFFFFF" : "#838383",
+              border: "none",
+            }}
+          >
+            대기 4
           </Button>
         </Col>
         <Col>
-          <Button name="Progress" onClick={onClickHandler}>
-            진행중
+          <Button
+            name="Progress"
+            onClick={onClickHandler}
+            style={{
+              width: "100%",
+              borderRadius: "0.875rem",
+              backgroundColor: status.Progress ? "#d82356" : "#FFFFFF",
+              fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
+              fontSize: "1.5625rem",
+              color: status.Progress ? "#FFFFFF" : "#838383",
+              border: "none",
+            }}
+          >
+            제조중 2
           </Button>
         </Col>
         <Col>
-          <Button name="Complete" onClick={onClickHandler}>
-            완료
+          <Button
+            name="Complete"
+            onClick={onClickHandler}
+            style={{
+              width: "100%",
+              borderRadius: "0.875rem",
+              backgroundColor: status.Complete ? "#d82356" : "#FFFFFF",
+              fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
+              fontSize: "1.5625rem",
+              color: status.Complete ? "#FFFFFF" : "#838383",
+              border: "none",
+            }}
+          >
+            제조•픽업완료 3
           </Button>
         </Col>
       </Row>
       <Row>
-        <Col>1 of 1</Col>
-        <Col>2 of 2</Col>
+        <Col>
+          {status.Wait ? (
+            <Wait />
+          ) : status.Progress ? (
+            <Progress />
+          ) : status.Complete ? (
+            <Complete />
+          ) : (
+            <div>ERROR</div>
+          )}
+        </Col>
       </Row>
     </Container>
   );

diff --git a/src/pages/Home/Progress.jsx b/src/pages/Home/Progress.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Progress = () => {
+  return <div>Progress</div>;
+};
+
+export default Progress;
diff --git a/src/pages/Home/Receipt.css b/src/pages/Home/Receipt.css
@@ -0,0 +1,28 @@
+.rounded-rectangle {
+  width: 100%; /* 너비 설정 */
+  height: 97%; /* 높이 설정 */
+  background-color: #f5f5f5; /* 배경색 설정 */
+  border-radius: 20px; /* 모서리를 둥글게 만드는 값 */
+  text-align: center; /* 가운데 정렬 */
+  color: #000; /* 텍스트 색상 설정 */
+  font-size: 18px; /* 폰트 크기 설정 */
+  line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+}
+
+.Box {
+  width: 100%; /* 너비 설정 */
+  height: 100%; /* 높이 설정 */
+  padding-top: 5%;
+  padding-left: 0;
+}
+
+.top-font {
+  color: #000;
+  font-family: Pretendard;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 130%; /* 1.625rem */
+  letter-spacing: -0.0125rem;
+}
diff --git a/src/pages/Home/Receipt.jsx b/src/pages/Home/Receipt.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Container } from "react-bootstrap";
+import "./Receipt.css";
+
+const Receipt = () => {
+  return (
+    <Container className="Box">
+      <div className="rounded-rectangle">
+        <div className="top-font">주문번호 531</div>
+      </div>
+    </Container>
+  );
+};
+
+export default Receipt;
diff --git a/src/pages/Home/Wait.jsx b/src/pages/Home/Wait.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Wait = () => {
+  return <div>Wait</div>;
+};
+
+export default Wait;