Merge pull request #35 from hhbb0081/test

Fix: setDegree 쓰이지 않는 에러 해결
readyvery · Nov 11, 2023 · 3eae5ff · 3eae5ff
2 parents c2258af + 406115a
commit 3eae5ff
Show file tree

Hide file tree

Showing 22 changed files with 963 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

diff --git a/src/App.css b/src/App.css
@@ -29,11 +29,41 @@
     left: calc(50% - 207px); /* Center the navbar */
     right: calc(50% - 207px); /* Center the navbar */
   }
+  .top_header2 {
+    left: 0;
+    right: 0;
+  }
+}
+
+@media only screen and (min-width: 400px) and (max-width: 800px) {
+  .App {
+    /* max-width: 430px; */
+    height: 94vh;
+    background-color: white;
+    padding-top: 2.75rem;
+  }
+  .bottom_navbar {
+    left: calc(50% - 207px); /* Center the navbar */
+    right: calc(50% - 207px); /* Center the navbar */
+  }
+  .bottom_navbar2 {
+    left: calc(50% - 207px); /* Center the navbar */
+    right: calc(50% - 207px); /* Center the navbar */
+  }
+
+  .top_header {
+    left: calc(50% - 207px); /* Center the navbar */
+    right: calc(50% - 207px); /* Center the navbar */
+  }
+  .top_header2 {
+    left: 0;
+    right: 0;
+  }
 }
 
 @media (min-width: 800px) {
   .App {
-    width: 600px;
+    /* width: 600px; */
     height: 94vh;
     background-color: white;
     padding-top: 2.75rem;
@@ -52,6 +82,11 @@
     left: calc(50% - 300px); /* Center the navbar */
     right: calc(50% - 300px); /* Center the navbar */
   }
+
+  .top_header2 {
+    left: 0;
+    right: 0;
+  }
 }
 
 @font-face {
@@ -88,3 +123,8 @@
   font-family: "SemiBold";
   src: url("./assets/font/Pretendard-SemiBold.otf");
 }
+
+@font-face {
+  font-family: "KBold";
+  src: url("./assets/font/Kotrahope-Bold.otf");
+}
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,14 @@
 import { Navigate, Route, Routes } from "react-router-dom";
+
 import HomePage from "../src/pages/HomePage/Homepage";
 import MyPage from "../src/pages/MyPage/MyPage";
 import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage";
 import TestPage from "../src/pages/TestPage/TestPage";
 import "./App.css";
-import PackagingStatusPage from "./pages/PackagingStatusPage/PackagingStatusPage";
 import OrderProcessPage from "./pages/OrderProcessPage/OrderProcessPage";
+import OrderStatus from "./pages/OrderStatus/OrderStatus";
+import OrderStorage from "./pages/OrderStorage/OrderStorage";
+import PackagingStatusPage from "./pages/PackagingStatusPage/PackagingStatusPage";
 
 function App() {
   return (
@@ -17,8 +20,10 @@ function App() {
         <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
         {/* 테스트 페이지 - 카페검색*/}
         <Route path="/search" element={<TestPage />} />
-        {/* 테스트 페이지 - 주문내역*/}
-        <Route path="/status" element={<TestPage />} />
+        {/* 주문내역 페이지*/}
+        <Route path="/storage" element={<OrderStorage />} />
+        {/* 주문상태 페이지 - 추후 병합 예정*/}
+        <Route path="/status" element={<OrderStatus />} />
         {/* 테스트 페이지 - 바로주문*/}
         <Route path="/ready" element={<TestPage />} />
         {/* 테스트 페이지 - 마이페이지*/}

diff --git a/src/assets/font/Kotrahope-Bold.otf b/src/assets/font/Kotrahope-Bold.otf
diff --git a/src/assets/images/cafe_logo.png b/src/assets/images/cafe_logo.png
diff --git a/src/assets/images/icon_arrow.svg b/src/assets/images/icon_arrow.svg
diff --git a/src/assets/images/icon_clock.svg b/src/assets/images/icon_clock.svg
diff --git a/src/assets/images/icon_close.svg b/src/assets/images/icon_close.svg
diff --git a/src/assets/images/icon_refresh.svg b/src/assets/images/icon_refresh.svg
diff --git a/src/assets/images/storage_empty.svg b/src/assets/images/storage_empty.svg
diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -10,6 +10,36 @@
   align-items: center;
 }
 
+.top_header2 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2.6875rem;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+}
+
 .header-link {
   margin-left: 1.5rem;
 }
+
+.header-main__warpper{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  width: 94%;
+  margin: 0 auto;
+}
+
+.header-main__warpper span{
+  color: #000;
+  font-size: 1.25rem;
+  font-family: "Bold";
+}
+
+.header-main__warpper div{
+  width: 1.5rem;
+}
diff --git a/src/components/views/Header/Header2.jsx b/src/components/views/Header/Header2.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import arrow from "../../../assets/images/icon_arrow.svg";
+import close from "../../../assets/images/icon_close.svg";
+import "./Header.css";
+
+const Header = ({pageName, isClose}) => {
+  return (
+    <header className="top_header2">
+      <div className="header-main__warpper">
+        {!isClose ? (<div><img src={arrow} alt="arrow"/></div>) : (<div></div>)}
+        <span>{pageName}</span>
+        {isClose ? (<div><img src={close} alt="close"/></div>) : (<div></div>)}
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/views/NavBar/NavBar.jsx b/src/components/views/NavBar/NavBar.jsx
@@ -37,7 +37,7 @@ const NavBar = () => {
       </Link>
 
       <Link
-        to="/status"
+        to="/storage"
         className="nav-link"
         onClick={() => {
           setActiveNav(2);

diff --git a/src/components/views/ProgressBar/ProgressBar.css b/src/components/views/ProgressBar/ProgressBar.css
@@ -0,0 +1,66 @@
+
+.status-progressbar-wrapper{
+    margin: 12% 0 18% 0;
+}
+
+.progressbar-wrapper{
+    position: relative;
+}
+
+.status-progressbar{
+    display: flex;
+    flex-direction: row;
+    gap: calc((100% - 4.8rem) / 3);
+
+    width: 95%;
+    height: 1.2rem;
+    background-color: #FFE2ED;
+    border-radius: 0.8rem;
+    margin: 0 auto;
+
+}
+
+.status-progressbar-degree-wrapper{
+    width: 100%;
+    margin: 0 auto;
+
+    position: absolute;
+    top: 0;
+    left: calc((100% - 95%) / 2);
+    z-index: 1;
+}
+
+.status-progressbar-degree{
+    /* width: calc(100% * 0.1); */
+    height: 1.2rem;
+    background-color: #D82356;
+    border-radius: 0.8rem;
+    z-index: 101;
+}
+
+.status-progressbar-circle{
+    width: 1.2rem;
+    height: 1.2rem;
+    background-color: rgba(216, 35, 86, 0.2);
+    border-radius: 8.33rem;
+}
+
+.status-explain-wrapper{
+    display: flex;
+    flex-direction: row;
+    gap: calc((100% - 12.965rem) / 3);
+}
+
+.status-explain{
+    font-size: 0.9375rem;
+    color: #FFE2ED;
+    font-family: "bold";
+    flex-shrink: 0;
+}
+
+.status-explain.selected{
+    font-size: 0.9375rem;
+    color: #D82356;
+    font-family: "bold";
+    flex-shrink: 0;
+}
diff --git a/src/components/views/ProgressBar/ProgressBar.jsx b/src/components/views/ProgressBar/ProgressBar.jsx
@@ -0,0 +1,31 @@
+import "./ProgressBar.css";
+
+const Progressbar = ({degree}) => {
+    const percent = [0.1, 0.37, 0.685, 1];
+    const statusList = ["주문요청", "주문확인", "제조완료", "픽업완료"];
+
+    return(
+        <div className="status-progressbar-wrapper">
+            <div className="progressbar-wrapper">
+                <div className="status-progressbar">
+                    <span className="status-progressbar-circle"></span>
+                    <span className="status-progressbar-circle"></span>
+                    <span className="status-progressbar-circle"></span>
+                    <span className="status-progressbar-circle"></span>
+                </div>
+                <div className="status-progressbar-degree-wrapper">
+                    <div className="status-progressbar-degree" style={{ width: `calc(95% * ${percent[degree]})`}}></div>
+                </div>
+            </div>
+            <div className="status-explain-wrapper">
+            {statusList.map((e, i) => (
+                <div key={i} className={`status-explain ${i <= degree ? 'selected' : ''}`}>
+                    {e}
+                </div>
+            ))}
+            </div>
+        </div>
+    )
+}
+
+export default Progressbar;
diff --git a/src/components/views/StateBox/StateBox.css b/src/components/views/StateBox/StateBox.css
@@ -0,0 +1,95 @@
+
+.order-box.selected{
+    width: 100%;
+    height: 15%;
+    background-color: #FFE2ED;
+    padding: 3% 0;
+    border-top: 0.3vh solid #D82356;
+}
+
+.order-box{
+    width: 100%;
+    height: 15%;
+    background-color: #fff;
+    padding: 3% 0;
+    border-top: 0.3vh solid #DADADA;
+}
+
+.status-bar{
+    display: flex;
+    flex-direction: row;
+
+    /* width: calc(100% - 3rem); */
+    width: 94%;
+    height: 2rem;
+    margin: 0 auto;
+
+    justify-content: space-between;
+}
+
+.status-date{
+    font-size: 12px;
+    color: #838383;
+}
+
+.status-box.selected{
+    color: #D82356;
+    border: 1px solid #D82356;
+    font-size: 0.7rem;
+    width: 3.5rem;
+    height: 50%;
+    text-align: center;
+    border-radius: 10px;
+    background-color: #fff;;
+}
+
+.status-box{
+    color: #838383;
+    border: 1px solid #838383;
+    font-size: 0.7rem;
+    width: 3.5rem;
+    height: 50%;
+    text-align: center;
+    border-radius: 10px;
+    background-color: #fff;;
+}
+
+.order-content{
+    display: flex;
+    flex-direction: row;
+
+    /* width: calc(100% - 3rem); */
+    width: 94%;
+    height: 70%;
+    margin: 0 auto;
+}
+
+.cafe-img{
+    width: 28%;
+    height: 100%;
+    border-radius: 10px;
+    background-color: #666;
+}
+
+.cafe-box{
+    width: 70%;
+    height: 100%;
+    margin: 0 auto;
+    /* padding: 5% 0; */
+}
+
+.cafe-name{
+    color: #000;
+    font-size: 18px;
+    font-family: "SemiBold";
+    text-decoration: none;
+    height: 32%;
+}
+
+.menu-name{
+    height: 68%;
+    color: #838383;
+    font-size: 12px;
+    font-family: "Medium";
+    text-decoration: none
+}