🎨 styles: checkout page

:%s

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

@@ -1,51 +1,52 @@
-.warpper{
+.warpper {
     padding: 2.4rem 0;
     @apply border-b border-solid border-line;
-    .note{
+    .note {
+        @apply cursor-pointer;
         font-size: 1.2rem;
         line-height: 2rem;
         letter-spacing: 0.01em;
         color: var(--text-label);
         padding: 0 5.6rem;
     }
-    .header{
+    .header {
-        @apply flex justify-between;
+        @apply flex justify-between cursor-pointer;
-        .left{
+        .left {
             @apply flex items-center;
-            .number{
+            .number {
                 width: 3.2rem;
                 height: 3.2rem;
                 border-radius: 100%;
                 border: 1px solid var(--text-active);
                 color: var(--text-active);
                 @apply flex justify-center items-center font-bold;
-                &.visible{
+                &.visible {
                     background-color: var(--text-active);
                     border: none;
                     color: var(--white);
                 }
-                &.done{
+                &.done {
                     @apply border-2 border-solid border-primary;
                 }
             }
-            .title{
+            .title {
                 padding-left: 2.4rem;
-                @apply font-bold select-none cursor-pointer;
+                @apply font-bold select-none;
                 color: var(--text-active);
             }
         }
-        .edit{
+        .edit {
             @apply font-bold cursor-pointer;
             text-decoration-line: underline;
             margin-right: 5.6rem;
         }
     }
-    .body{
+    .body {
         height: 0;
         @apply overflow-hidden;
-        &.show{
+        &.show {
             margin-top: 3.2rem;
             height: initial;
         }
     }
-}
+}

src/components/common/CheckoutCollapse/CheckoutCollapse.tsx

@@ -8,10 +8,10 @@ interface CheckoutCollapseProps {
   children: React.ReactNode
   title: string
   isEdit: boolean
-  onClose?: (id:number) => void
+  onClose?: (id: number) => void
-  onOpen?: (id:number) => void
+  onOpen?: (id: number) => void
-  onEditClick?:(id:number) => void
+  onEditClick?: (id: number) => void
-  note?:string
+  note?: string
   disableEdit?: boolean
 }
 
@@ -23,34 +23,34 @@ const CheckoutCollapse = ({
   visible,
   note,
   onOpen,
-	onClose,
+  onClose,
   onEditClick,
   disableEdit,
 }: CheckoutCollapseProps) => {
-	const handleTitleClick = () => {
+  const handleToggle = () => {
-		if(visible){
+    if (visible) {
-			onClose && onClose(id)
+      onClose && onClose(id)
     } else if (!disableEdit) {
-      onOpen && onOpen(id)
+      isEdit && onEditClick && onEditClick(id)
     }
-	}
+  }
   const handleEdit = () => {
-		onEditClick && onEditClick(id)
+    onEditClick && onEditClick(id)
-	}
+  }
   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 })}>
+          <div className={classNames(s.number, { [s.visible]: visible, [s.done]: isEdit })}>
-            {isEdit?<IconDoneCheckout/>:id}
+            {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;
+        button {
-        @screen sm-only {
+            margin-left: auto;
-            @apply flex-col items-start;
         }
-
     }
 }

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

@@ -1,28 +1,20 @@
 @import "../../../../../../styles/utilities";
 
-.warpper{
+.warpper {
     @apply u-form;
     @screen md {
         padding: 0 5.6rem;
     }
-    .bottom{
+    .bottom {
+        @apply flex flex-col items-start;
         margin-top: 2.4rem;
-        @apply flex justify-between items-center;
+        button {
-        .note{
+            margin-left: auto;
-            font-size: 1.2rem;
-            line-height: 2rem;
-        }
-        @screen sm-only {
-            @apply flex-col items-start;
-            .button {
-                padding-top: 2rem;
-            }
         }
     }
-    .line{
+    .line {
-        >div{
+        > div {
             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>