From 82b585506b0b17162e3fb5ddb7de4f1230396b84 Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Thu, 16 Nov 2023 19:28:34 +0900
Subject: [PATCH] =?UTF-8?q?Style:=20=EC=A3=BC=EB=AC=B8=20=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=20&=20=EC=83=81=EC=84=B8=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/views/StateBox/StateBox.css | 29 ++++++++++++-----
 src/components/views/StateBox/StateBox.jsx |  4 ++-
 src/pages/OrderDetail/OrderDetail.css      |  9 +++--
 src/pages/OrderDetail/OrderDetail.jsx      | 38 ++++++++++++++++++++++
 src/pages/OrderStatus/OrderStatus.css      |  4 ++-
 5 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/src/components/views/StateBox/StateBox.css b/src/components/views/StateBox/StateBox.css
index a02beb8..db1d5a3 100644
--- a/src/components/views/StateBox/StateBox.css
+++ b/src/components/views/StateBox/StateBox.css
@@ -1,18 +1,21 @@
 
 .order-box.selected{
     width: 100%;
-    height: 15%;
+    /* height: 15%; */
+    /* height: 8.75rem; */
+    height: 7.5rem;
     background-color: #FFE2ED;
     padding: 3% 0;
-    border-top: 0.3vh solid #D82356;
+    border-top: 0.125rem solid #D82356;
 }
 
 .order-box{
     width: 100%;
-    height: 15%;
+    /* height: 15%; */
+    height: 7.5rem;
     background-color: #fff;
     padding: 3% 0;
-    border-top: 0.3vh solid #DADADA;
+    border-top: 0.125rem solid #DADADA;
 }
 
 .status-bar{
@@ -20,7 +23,7 @@
     flex-direction: row;
 
     /* width: calc(100% - 3rem); */
-    width: 94%;
+    /* min-width: 94%; */
     height: 2rem;
     margin: 0 auto;
     
@@ -30,6 +33,7 @@
 .status-date{
     font-size: 12px;
     color: #838383;
+    white-space: nowrap;
 }
 
 .status-box.selected{
@@ -40,7 +44,8 @@
     height: 50%;
     text-align: center;
     border-radius: 10px;
-    background-color: #fff;;
+    background-color: #fff;
+    white-space: nowrap;
 }
 
 .status-box{
@@ -51,7 +56,8 @@
     height: 50%;
     text-align: center;
     border-radius: 10px;
-    background-color: #fff;;
+    background-color: #fff;
+    white-space: nowrap;
 }
 
 .order-content{
@@ -71,10 +77,15 @@
     background-color: #666;
 }
 
+.cafe-img-box{
+    margin-right: 0.0625rem;
+}
+
 .cafe-box{
     width: 70%;
     height: 100%;
     margin: 0 auto;
+    /* padding: 0 0 0 0.625rem; */
 }
 
 .cafe-name{
@@ -87,6 +98,7 @@
     /* padding: 0.4375em 0; */
     height: 40%;
     align-items: center;
+    white-space: nowrap;
 }
 
 .menu-name{
@@ -94,5 +106,6 @@
     color: #838383;
     font-size: 12px;
     font-family: "Medium";
-    text-decoration: none
+    text-decoration: none;
+    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src/components/views/StateBox/StateBox.jsx b/src/components/views/StateBox/StateBox.jsx
index db0cb78..329f28e 100644
--- a/src/components/views/StateBox/StateBox.jsx
+++ b/src/components/views/StateBox/StateBox.jsx
@@ -15,7 +15,9 @@ const StateBox = ( {id, date, name, menu, state} ) => {
                 </div>
             </div>
             <div className="order-content">
-                <img src={cafe} alt={cafe}/>
+                <div className="cafe-img-box">
+                    <img src={cafe} alt={cafe}/>
+                </div>
                 <div className="cafe-box">
                     <div className="cafe-name">{name}</div>
                     <div className="menu-name">{menu}</div>
diff --git a/src/pages/OrderDetail/OrderDetail.css b/src/pages/OrderDetail/OrderDetail.css
index 9c7c707..3513214 100644
--- a/src/pages/OrderDetail/OrderDetail.css
+++ b/src/pages/OrderDetail/OrderDetail.css
@@ -10,21 +10,20 @@
     justify-content: flex-end;
 
     width: 100%;
-    margin-top: 0.625rem;
-    /* height: 100%; */
+    margin-top: 1.5625rem;
 }
 
 .detail-content{
     width: 95%;
-    height: 85%;
+    height: 100%;
     margin: 0 auto;
-    /* background-color: #d9d9d9; */
     box-shadow: 0 1px 12px rgba(0,0,0,0.25);
     border-radius: 1.875rem 1.875rem 0 0;
     padding: 1.9375rem 0;
-    /* overflow-y: auto; */
 }
 
+.detail-scroll-content{}
+
 .detail-content::-webkit-scrollbar {
     display: none;
 }
diff --git a/src/pages/OrderDetail/OrderDetail.jsx b/src/pages/OrderDetail/OrderDetail.jsx
index 9495dad..720259c 100644
--- a/src/pages/OrderDetail/OrderDetail.jsx
+++ b/src/pages/OrderDetail/OrderDetail.jsx
@@ -65,6 +65,44 @@ const OrderDetail = () => {
                                 <span>3,500원</span>
                             </div>
                         </div>
+
+                        <div className="detail-order__box">
+                            <div className="detail-order-left__box">
+                                <div className="detail-menu-img__wrapper"><img src={americano} alt="americano"/></div>
+                                <div className="detail-order-menu__wrapper">
+                                    <span className="detail-order-menu__title">아메리카노</span>
+                                    <span className="detail-order-menu-option">ICE / LARGE / 1</span>
+                                </div>
+                            </div>
+                            <div className="detail-order-right__box">
+                                <span>3,500원</span>
+                            </div>
+                        </div>
+
+                        <div className="detail-order__box">
+                            <div className="detail-order-left__box">
+                                <div className="detail-menu-img__wrapper"><img src={americano} alt="americano"/></div>
+                                <div className="detail-order-menu__wrapper">
+                                    <span className="detail-order-menu__title">아메리카노</span>
+                                    <span className="detail-order-menu-option">ICE / LARGE / 1</span>
+                                </div>
+                            </div>
+                            <div className="detail-order-right__box">
+                                <span>3,500원</span>
+                            </div>
+                        </div>
+                        <div className="detail-order__box">
+                            <div className="detail-order-left__box">
+                                <div className="detail-menu-img__wrapper"><img src={americano} alt="americano"/></div>
+                                <div className="detail-order-menu__wrapper">
+                                    <span className="detail-order-menu__title">아메리카노</span>
+                                    <span className="detail-order-menu-option">ICE / LARGE / 1</span>
+                                </div>
+                            </div>
+                            <div className="detail-order-right__box">
+                                <span>3,500원</span>
+                            </div>
+                        </div>
                     </div>
                     <div className="detail-line"></div>
                     <div className="detail-bottom__wrapper">
diff --git a/src/pages/OrderStatus/OrderStatus.css b/src/pages/OrderStatus/OrderStatus.css
index b2c6ea0..8713a22 100644
--- a/src/pages/OrderStatus/OrderStatus.css
+++ b/src/pages/OrderStatus/OrderStatus.css
@@ -23,7 +23,7 @@
     position: absolute;
     top: 2.125rem;
     right: calc(5% + 6.3125rem * 0.16);
-    /* width: 6.3125rem; */
+    width: 6.3125rem;
     height: 1.5rem;
 }
 
@@ -206,6 +206,7 @@
     font-size: 0.8125rem;
     font-family: "bold";
     width: 27%;
+    white-space: nowrap;
 }
 
 .status-content{
@@ -216,6 +217,7 @@
     font-size: 0.9375rem;
     font-family: "bold";
     width: 63%;
+    white-space: nowrap;
 }
 
 .status-detail{