Feat: refactoring 진행 중

src/App.css

@@ -15,7 +15,6 @@
     max-width: 390px;
     /* height: 94vh; */
     background-color: white;
-    padding-top: 4rem;
   }
 
   .navbar {
@@ -39,7 +38,6 @@
     max-width: 430px;
     /* height: 94vh; */
     background-color: white;
-    padding-top: 4rem;
   }
 
   .navbar {
@@ -62,7 +60,6 @@
   .App {
     width: 600px;
     background-color: white;
-    padding-top: 4rem;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 36px;
   }
 

src/App.js

@@ -33,7 +33,6 @@ import ApplyCouponPage from "./pages/PaymentPage/ApplyCouponPage";
 import PaymentPage from "./pages/PaymentPage/PaymentPage";
 import PaymentFailPage from "./pages/PaymentPage/Redirect/PaymentFailPage";
 import PaymentSuccessPage from "./pages/PaymentPage/Redirect/PaymentSuccessPage";
-import ReadyPage from "./pages/ReadyPage/ReadyPage";
 import Splash from "./pages/Splash/Splash";
 
 function App() {
@@ -56,7 +55,6 @@ function App() {
   const NewHomePage = Auth(HomePage, true);
   const NewOrderHistory = Auth(OrderHistory, true);
   const NewOrderDetail = Auth(OrderDetail, true);
-  const NewReadyPage = Auth(ReadyPage, true);
   const NewMyprofilePage = Auth(MyprofilePage, true);
 
   const NewOrderProcessPage = Auth(OrderProcessPage, true);
@@ -144,8 +142,6 @@ function App() {
             <Route path="/status" element={<NewOrderHistory />} />
             {/* 주문상세 페이지 - 추후 병합 예정*/}
             <Route path="/orderDetail" element={<NewOrderDetail />} />
-            {/* 바로주문*/}
-            <Route path="/ready" element={<NewReadyPage />} />
             {/* 마이페이지-마이프로필 확인 페이지 */}
             <Route path="/myprofile" element={<NewMyprofilePage />} />
             {/* 포장 여부 선택 페이지 */}

src/components/views/Header/Header.css

@@ -62,6 +62,8 @@
 }
 
 .close-link {
+  width: 1.51144rem;
+  height: 1.54225rem;
   margin-top: auto;
   margin-bottom: auto;
   margin-right: auto;

src/components/views/Header/Header.jsx

@@ -64,12 +64,12 @@ const Header = ({ headerProps }) => {
           <span>{headerProps.pageName}</span>
           {/* isClosed가 true인 경우 */}
           {headerProps.isClose ? (
-            <div
-              onClick={() => navigate(headerProps.linkTo, { replace: true })}
+            <img
+              src={IMAGES.headerClose}
+              alt="close"
               className="close-link"
-            >
-              <img src={IMAGES.headerClose} alt="close" />
-            </div>
+              onClick={() => navigate(headerProps.linkTo, { replace: true })}
+            />
           ) : (
             <div className="homeAndCart">
               {/* 현재 페이지가 홈이 아니고 장바구니 페이지가 아닌 경우에만 장바구니 아이콘 표시 */}

src/components/views/PageComponent/OrderProgress.css

@@ -9,27 +9,28 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding-top: 1.36rem;
   padding-left: 1.64rem;
-  padding-right: 1.5rem;
+  padding-right: 1.51rem;
 }
 
 .order_progress__controls {
   display: flex;
   justify-content: space-between;
-  width: 100%; /* 전체 너비를 사용 */
+  width: 100%;
 }
 
 .order_progress__close {
   display: flex;
   width: 1.51144rem;
   height: 1.54225rem;
+  margin-top: 2.8rem;
 }
 
 .order_progress__refresh {
   display: flex;
   width: 1.63738rem;
   height: 1.86356rem;
+  margin-top: 2.48rem;
 }
 
 .order_progress__pick_up_time img {
@@ -89,14 +90,23 @@
   margin-left: auto;
   margin-right: auto;
 }
-.animatedIcon img{
+
+.animatedIcon img {
   animation: motion 0.5s linear 0s infinite alternate;
 }
 
 @keyframes motion {
-  0% { margin-top: 0px; margin-left: 1px; }
-  50% { margin-top: 3px; margin-left: 0px; }
-  100% { margin-top: 10px; }
+  0% {
+    margin-top: 0px;
+    margin-left: 1px;
+  }
+  50% {
+    margin-top: 3px;
+    margin-left: 0px;
+  }
+  100% {
+    margin-top: 10px;
+  }
 }
 
 .order_progress__status {

src/components/views/PageComponent/OrderProgress.jsx

@@ -131,29 +131,29 @@ const OrderProgress = () => {
         }
         className="order_progress__bar"
       />
-<div className="order_progress__img animatedIcon">
-      <img
-        src={
-          degree === 1
-            ? IMAGES.progress1
-            : degree === 2
-            ? IMAGES.progress2
-            : degree === 3
-            ? IMAGES.progress3
-            : IMAGES.berry
-        }
-        alt={
-          degree === 1
-            ? "접수 대기 중"
-            : degree === 2
-            ? "제조 중"
-            : degree === 3
-            ? "제조 완료"
-            : "진행 과정"
-        }
-        className="order_progress__img"
+      <div className="order_progress__img animatedIcon">
+        <img
+          src={
+            degree === 1
+              ? IMAGES.progress1
+              : degree === 2
+              ? IMAGES.progress2
+              : degree === 3
+              ? IMAGES.progress3
+              : IMAGES.berry
+          }
+          alt={
+            degree === 1
+              ? "접수 대기 중"
+              : degree === 2
+              ? "제조 중"
+              : degree === 3
+              ? "제조 완료"
+              : "진행 과정"
+          }
+          className="order_progress__img"
         />
-        </div>
+      </div>
 
       <div className="order_progress__status">
         {degree === 1