🎨 styles: checkout page

:%s

src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss

@@ -2,6 +2,7 @@
     padding: 2.4rem 0;
     @apply border-b border-solid border-line;
     .note {
+        @apply cursor-pointer;
         font-size: 1.2rem;
         line-height: 2rem;
         letter-spacing: 0.01em;
@@ -9,7 +10,7 @@
         padding: 0 5.6rem;
     }
     .header {
-        @apply flex justify-between;
+        @apply flex justify-between cursor-pointer;
         .left {
             @apply flex items-center;
             .number {
@@ -30,7 +31,7 @@
             }
             .title {
                 padding-left: 2.4rem;
-                @apply font-bold select-none cursor-pointer;
+                @apply font-bold select-none;
                 color: var(--text-active);
             }
         }

src/components/common/CheckoutCollapse/CheckoutCollapse.tsx

@@ -27,11 +27,11 @@ const CheckoutCollapse = ({
   onEditClick,
   disableEdit,
 }: CheckoutCollapseProps) => {
-	const handleTitleClick = () => {
+  const handleToggle = () => {
     if (visible) {
       onClose && onClose(id)
     } else if (!disableEdit) {
-      onOpen && onOpen(id)
+      isEdit && onEditClick && onEditClick(id)
     }
   }
   const handleEdit = () => {
@@ -39,18 +39,18 @@ const CheckoutCollapse = ({
   }
   return (
     <div className={s.warpper}>
-      <div className={s.header}>
+      <div className={s.header} onClick={handleToggle}>
         <div className={s.left}>
           <div className={classNames(s.number, { [s.visible]: visible, [s.done]: isEdit })}>
             {isEdit ? <IconDoneCheckout /> : id}
           </div>
-          <div className={s.title} onClick={handleTitleClick}>
+          <div className={s.title}>
             {title}
           </div>
         </div>
         {!disableEdit && isEdit && <div className={s.edit} onClick={handleEdit}>{'Edit'}</div>}
       </div>
-      {(!visible && isEdit) && (<div className={s.note}>{note}</div>) }
+      {(!visible && isEdit) && (<div className={s.note} onClick={handleToggle}>{note}</div>)}
       <div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
     </div>
   )

src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss

@@ -8,11 +8,10 @@
         }
     }
     .bottom{
+        @apply flex flex-col items-start;
         margin-top: 2.4rem;
-        @apply flex justify-between items-center;
-        @screen sm-only {
-            @apply flex-col items-start;
-        }
-
+        button {
+            margin-left: auto;
+        }
     }
 }

src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss

@@ -6,17 +6,10 @@
         padding: 0 5.6rem;
     }
     .bottom {
+        @apply flex flex-col items-start;
         margin-top: 2.4rem;
-        @apply flex justify-between items-center;
-        .note{
-            font-size: 1.2rem;
-            line-height: 2rem;
-        }
-        @screen sm-only {
-            @apply flex-col items-start;
-            .button {
-                padding-top: 2rem;
-            }
+        button {
+            margin-left: auto;
         }
     }
     .line {
@@ -24,5 +17,4 @@
             width: 50%;
         }
     }
-
 }

src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx

@@ -176,7 +176,7 @@ const ShippingInfoForm = ({ onConfirm, id, activeStep }: ShippingInfoFormProps)
                 <div className={s.bottom}>
                   <ChekoutNotePolicy />
                   <ButtonCommon HTMLType='submit' loading={loading} size="large">
-                    Continue to Payment
+                    Continue to Shipping method
                   </ButtonCommon>
                 </div>
               </div>