Design: 모바일 버전 스타일 수정

package.json

@@ -12,6 +12,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.11.5",
+    "aos": "^2.3.4",
     "apexcharts": "^3.44.0",
     "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
@@ -30,7 +31,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
-    "react-thermal-printer": "0.18.1",
+    "react-thermal-printer": "^0.18.1",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
     "redux": "^4.2.1",

src/components/views/Header/HeaderOrder/Header.css

@@ -1,7 +1,7 @@
 .header {
   width: 100vw;
   min-width: 64rem;
-  height: 5.5rem;
+  height: 6.5rem;
   background-color: #2e2d2d;
 }
 
@@ -15,11 +15,18 @@
   width: 100vw;
   /* width: 64rem; */
   /* max-width: 64rem; */
-  height: 5.5rem;
+  height: 6.5rem;
   background-color: #2e2d2d;
   z-index: 101;
 }
 
+@media screen and (max-width: 480px) {
+  .header2{
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+  }
+}
+
 .header2-wrapper {
   display: flex;
   justify-content: space-between;
@@ -33,6 +40,13 @@
   justify-content: space-evenly;
 }
 
+
+@media screen and (max-width: 480px) {
+  .head-container2{
+    width: auto;
+  }
+}
+
 .header-img-wrapper {
   display: flex;
   align-items: center;
@@ -52,8 +66,10 @@
 }
 
 .LOGO {
-  width: 19.1875rem;
-  height: 4rem;
+  /* width: 19.1875rem; */
+  width: 13rem;
+  /* height: 4rem; */
+  height: 2.5rem;
 }
 
 .store-group {
@@ -66,11 +82,33 @@
 
 .store-img__wrapper {
   margin: 0 0.5625rem;
+  display: flex;
+  /* align-items: end; */
+}
+
+.store_img{
+  width: 2rem;
+  height: 2rem;
+}
+
+.store_close_circle.close{
+  background-color: #34C759;;
+}
+
+@media screen and (max-width: 480px) {
+  .header-img-wrapper{
+    display: none;
+  }
+}
+
+.store_font_wrapper{
+  display: flex;
+  align-items: center;
 }
 
 .header-font {
   color: #fff;
-  font-size: 1.875rem;
+  font-size: 1.25rem;
   font-family: "Pretendard";
   font-weight: 600;
 }
@@ -81,3 +119,9 @@
   flex-wrap: wrap;
   justify-content: space-evenly;
 }
+
+@media screen and (max-width: 480px) {
+  .head-container{
+    justify-content: space-between;
+  }
+}

src/components/views/Header/HeaderOrder/Header2.jsx

@@ -3,9 +3,9 @@ import { useNavigate } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { soundState } from "../../../../Atom/status";
 import StoreOff from "../../../../assets/icons/Header/CloseLight.svg"; //영업종료
-import LOGO from "../../../../assets/icons/Header/LOGO.svg"; //로고
 import SoundOff from "../../../../assets/icons/Header/SoundOff.svg"; //소리끔
 import SoundOn from "../../../../assets/icons/Header/SoundOn.svg"; //소리켬
+import LOGO from "../../../../assets/icons/Header/header_logo.png"; //로고
 import "./Header.css";
 
 const Header = () => {
@@ -59,9 +59,11 @@ const Header = () => {
           ) : ( */}
             <div className="store-group">
               <div className="store-img__wrapper">
-                <img src={StoreOff} alt="Close" />
+                <img src={StoreOff} alt="Close" className="store_img"/>
+              </div>
+              <div className="store_font_wrapper">
+                <div className="header-font">영업종료</div>
               </div>
-              <div className="header-font">영업종료 </div>
             </div>
           {/* )} */}
           {sound ? (

src/components/views/Home/OrderBox.jsx

@@ -6,8 +6,8 @@ export default function OrderBox ({ id, category, menu, clicked }) {
     return(
         <OrderBoxContainer clicked={clicked}>
             <OrderBoxSpan width={"15%"} size="big" align="right">{id}</OrderBoxSpan>
-            <OrderBoxSpan width={"15%"} size="big" align="center">{category}</OrderBoxSpan>
-            <OrderBoxSpan width={"70%"} size="small" align="left">
+            <OrderBoxSpan width={"20%"} size="big" align="center">{category}</OrderBoxSpan>
+            <OrderBoxSpan width={"65%"} size="small" align="left">
                 {menuLen > 1 ? `${menu[0].name} 외 ${menuLen - 1}건` : menu[0].name}
             </OrderBoxSpan>
         </OrderBoxContainer>
@@ -16,11 +16,12 @@ export default function OrderBox ({ id, category, menu, clicked }) {
 
 const OrderBoxContainer = styled.div`
     width: 100%;
-    height: 50px;
+    height: 3.75rem;
     line-height: 50px;
     // border-top: 0.5px solid ${theme.colors.text};
     border-bottom: 1px solid ${theme.colors.text};
     display: flex;
+    align-items: center;
     background-color: ${(props) => props.clicked && theme.colors.clickColor};
 `;
 
@@ -29,11 +30,11 @@ const OrderBoxSpan = styled.span`
     color: ${theme.colors.title};
     width: ${(props) => props.width};
     ${(props) => props.size === "big" ? css`
-        font-size: 1rem;
+        font-size: 1.1rem;
         font-family: "Pretendard";
         font-weight: 800;
     ` : css`
-        font-size: 0.8rem;
+        font-size: 0.9rem;
         font-family: "Pretendard";
         font-weight: 600;
     `}

src/components/views/Home/OrderContainer.jsx

@@ -1,15 +1,21 @@
 import React, { useContext } from "react";
 import styled from "styled-components";
-// import useFetchWaitInfo from "../../../hooks/useFetchWaitInfo";
+import useFetchCompleteInfo from "../../../hooks/useFetchCompleteInfo";
+import useFetchMakeInfo from "../../../hooks/useFetchMakeInfo";
+import useFetchWaitInfo from "../../../hooks/useFetchWaitInfo";
 import { HomeContext } from "../../../pages/OrderManage/Home";
 import theme from "../../../style/theme/theme";
 import OrderBox from "./OrderBox";
 
 export default function OrderContainer () {
     const context = useContext(HomeContext);
 
-    // const waitInfo = useFetchWaitInfo();
-    // console.log(waitInfo);
+    const waitInfo = useFetchWaitInfo();
+    const makeInfo = useFetchMakeInfo();
+    const completeInfo = useFetchCompleteInfo();
+    console.log(waitInfo);
+    console.log(makeInfo);
+    console.log(completeInfo);
 
     const waitDummyInfo =
         {
@@ -224,38 +230,41 @@ export default function OrderContainer () {
         <Container>
             {context.status === 1 ? (
                 <>
-                <OrderTitleBox>신규 {waitDummyInfo.orders.length}건</OrderTitleBox>
-                {
-                    waitDummyInfo.orders.map((item) => (
-                        <span onClick={() => handleWaitOrderMenu(item.idx)}>
-                            <OrderBox 
-                                id={item.idx}
-                                category={item.pickUp}
-                                menu={item.foodies}
-                                clicked={item.idx === context.selectedIdx}
-                            />
-                        </span>
-                    ))
-                }
-
-                <OrderTitleBox>진행 {makeDummyInfo.orders.length}건</OrderTitleBox>
-                {
-                    makeDummyInfo.orders.map((item) => (
-                        <span onClick={() => handleMakeOrderMenu(item.idx)}>
-                            <OrderBox 
-                                id={item.idx}
-                                category={item.pickUp}
-                                menu={item.foodies}
-                                clicked={item.idx === context.selectedIdx}
-                            />
-                        </span>
-                    ))
-                }
+                <OrderBoxContainer>
+                    <OrderTitleBox>신규 {waitDummyInfo?.orders?.length}건</OrderTitleBox>
+                    {
+                        waitDummyInfo?.orders?.map((item) => (
+                            <span onClick={() => handleWaitOrderMenu(item.idx)}>
+                                <OrderBox 
+                                    id={item.idx}
+                                    category={item.pickUp}
+                                    menu={item.foodies}
+                                    clicked={item.idx === context.selectedIdx}
+                                />
+                            </span>
+                        ))
+                    }
+                </OrderBoxContainer>
+                <OrderBoxContainer>
+                    <OrderTitleBox>진행 {makeDummyInfo?.orders?.length}건</OrderTitleBox>
+                    {
+                        makeDummyInfo?.orders?.map((item) => (
+                            <span onClick={() => handleMakeOrderMenu(item.idx)}>
+                                <OrderBox 
+                                    id={item.idx}
+                                    category={item.pickUp}
+                                    menu={item.foodies}
+                                    clicked={item.idx === context.selectedIdx}
+                                />
+                            </span>
+                        ))
+                    }
+                </OrderBoxContainer>
                 </>
             ) : (
                 <>
                     {
-                        completeDummyInfo.orders.map((item) => (
+                        completeDummyInfo?.orders?.map((item) => (
                             <span onClick={() => handleCompleteOrderMenu(item.idx)}>
                                 <OrderBox 
                                     id={item.idx}
@@ -274,10 +283,15 @@ export default function OrderContainer () {
 
 const Container = styled.div`
     width: 100%;
-    // height: 100%;
+    height: calc(100% - 60px);
     overflow-y: auto;
 `;
 
+const OrderBoxContainer = styled.div`
+    width: 100%;
+    height: 50%;
+`;
+
 const OrderTitleBox = styled.div`
     width: 100%;
     height: 50px;