Merge pull request #319 from Together-3team/refactor/my페이지성능개선

[서인] 주문내역 상세 페이지 / 성능 개선
Together-3team · Aug 2, 2024 · 693bf96 · 693bf96
2 parents f53b3a9 + 089d990
commit 693bf96
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 24 deletions.
diff --git a/src/components/cart/TotalPay.module.scss b/src/components/cart/TotalPay.module.scss
@@ -36,4 +36,4 @@
   display: flex;
   justify-content: space-between;
   @include font-headline2;
-}
+}
diff --git a/src/components/common/Button/BackButton/index.tsx b/src/components/common/Button/BackButton/index.tsx
@@ -26,8 +26,8 @@ export default function BackButton({ href, hasPrevPath = true }: BackButton) {
   }
 
   return (
-    <button className={styles.backButton} onClick={handleClick}>
-      <LeftArrow width={24} height={24} alt="뒤로 가기 버튼" />
+    <button className={styles.backButton} onClick={handleClick} aria-label="뒤로 가기 버튼">
+      <LeftArrow width={24} height={24} />
     </button>
   );
 }

diff --git a/src/components/common/Card/index.tsx b/src/components/common/Card/index.tsx
@@ -82,6 +82,7 @@ export default function Card({
           fill
           blurDataURL={'@/assets/svgs/rectangle.svg'}
           placeholder="blur"
+          quality={75}
           sizes={
             size === 'extraLarge'
               ? '(max-width: 156px) 100vw, 150px'

diff --git a/src/pages/my/order/Order.module.scss b/src/pages/my/order/Order.module.scss
@@ -1,6 +1,7 @@
 @layer overrides {
   .orderLayout {
     display: flex;
+    position: relative;
     width: 100%;
     padding: 2rem 1.6rem;
     flex-direction: column;
@@ -67,10 +68,6 @@
     gap: 1.2rem;
   }
 
-  .orderPriceArea {
-    width: 100%;
-  }
-
   .orderDetailLayout {
     display: flex;
     padding: 2rem 1.6rem;
@@ -89,6 +86,7 @@
     @include font-headline3;
 
     width: 100%;
+    height: 2rem;
     text-align: left;
   }
 
@@ -101,7 +99,11 @@
   }
 
   .orderDetailBottom {
+    display: flex;
+    flex-direction: column;
     width: 100%;
+    height: 22.2rem;
+    overflow: hidden;
   }
 
   .orderDetailHeader {
@@ -120,6 +122,7 @@
 
   .deliveryArea {
     display: flex;
+    height: 14.6rem;
     padding-top: 1.2rem;
     flex-direction: column;
     align-items: center;
@@ -149,6 +152,7 @@
 
   .deliveryMessageArea {
     display: flex;
+    height: 7rem;
     padding: 1.2rem var(--selectpayment, 0);
     flex-direction: column;
     justify-content: center;
@@ -165,12 +169,16 @@
 
   .orderListArea {
     width: 100%;
+    min-height: 17.7rem;
+    max-height: 31rem;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
     padding-top: 1.2rem;
     padding-bottom: 1.2rem;
     gap: 1.2rem;
   }
+
   .rectangle {
     width: 100%;
     height: 0.8rem;

diff --git a/src/pages/my/order/[purchaseId].tsx b/src/pages/my/order/[purchaseId].tsx
@@ -105,23 +105,13 @@ export default function OrderDetail() {
       </div>
       <div className={styles.orderDetailBottom}>
         <div className={styles.rectangle} />
-        <div className={styles.orderPriceArea}>
-          <TotalPay
-            title="결제 금액"
-            totalPrice={totalPrice}
-            totalOriginalPrice={totalOriginalPrice}
-            productCount={orderCount}
-            inOrder
-          />
-        </div>
-        {/* <div className={styles.paymentMethod}>
-          <div className={styles.rectangle} />
-          <div className={styles.paymentMethodTitle}>
-            <h3>결제 수단</h3>
-            <hr className={styles.updownBorder} />
-          </div>
-          <span>토스페이</span>
-        </div> */}
+        <TotalPay
+          title="결제 금액"
+          totalPrice={totalPrice}
+          totalOriginalPrice={totalOriginalPrice}
+          productCount={orderCount}
+          inOrder
+        />
       </div>
     </div>
   );