reponsive: checkout info

src/components/common/CardItemCheckout/CardItemCheckout.module.scss

@@ -1,8 +1,10 @@
 .warpper{
-    max-width: 49.9rem;
     max-height: 12rem;
     padding:1.6rem 0;
     @apply flex items-center;
+    @screen lg {
+        max-width: 49.9rem;
+    }
     .image{
         width: 13.3rem;
         height: 8.8rem;

src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss

@@ -1,11 +1,18 @@
 .warpper {
-  max-width: 56.3rem;
+  padding: 3.2rem;
-	padding: 3.2rem;
+  min-width: 100%;
-  @apply flex justify-between flex-col border-l-2 border-solid border-line;
+  @screen lg {
+    max-width: 56.3rem;
+    @apply flex justify-between flex-col border-l-2 border-solid border-line;
+  }
   .title {
+    display: none;
     font-weight: bold;
     font-size: 2rem;
     line-height: 2.8rem;
+    @screen md {
+      display: block;
+    }
   }
   .list {
     min-height: 52.8rem;

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

@@ -3,6 +3,15 @@
     padding: 3.2rem;
     .title{
         margin-bottom: 3.2rem;
-        @apply flex justify-start items-center
+        @apply flex justify-between items-center;
+        .viewCart{
+            margin-right: 5.6rem;
+            @apply text-primary font-bold;
+            display: block;
+            cursor: pointer;
+            @screen lg {
+                display: none;
+            }
+        }
     }
 }

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

@@ -7,9 +7,11 @@ import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
 import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
 import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
-interface CheckoutInfoProps {}
+interface CheckoutInfoProps {
+  onViewCart:()=>void
+}
 
-const CheckoutInfo = ({}: CheckoutInfoProps) => {
+const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
   const [active, setActive] = useState(1)
   const [done, setDone] = useState<number[]>([])
   const [info, setInfo] = useState<CheckOutForm>({})
@@ -69,6 +71,7 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
     <div className={s.warpper}>
       <div className={s.title}>
         <Logo />
+        <div className={s.viewCart} onClick={onViewCart}>View cart</div>
       </div>
       {formList.map((item) => {
         let note = getNote(item.id)

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

@@ -1,7 +1,9 @@
 @import "../../../../../../styles/utilities";
 .warpper{
     @apply u-form;
-    padding: 0 5.6rem;
+    @screen md {
+        padding: 0 5.6rem;
+    }
     .bottom{
         margin-top: 2.4rem;
         @apply flex justify-between items-center;

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

@@ -1,5 +1,7 @@
 .wrapper{
-    padding: 0 5.6rem;
+    @screen md {
+        padding: 0 5.6rem;
+    }
     .inner{
         padding: 4rem 0;
     }

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

@@ -2,7 +2,9 @@
 
 .warpper{
     @apply u-form;
-    padding: 0 5.6rem;
+    @screen md {
+        padding: 0 5.6rem;
+    }
     .bottom{
         margin-top: 2.4rem;
         @apply flex justify-between items-center;

src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss

@@ -1,10 +1,56 @@
+@import "../../../../styles/utilities";
 .warrper{
     @apply flex;
     .right{
-        min-width: 56.3rem;
+        display: none;
+        @screen lg {
+            display: block;
+            min-width: 45rem;
+        }
+        @screen xl {
+            min-width: 56.3rem;
+        }
     }
-    .left{
+    .left{  
         @apply w-full;
-
+    }
+    .mobile{
+        @apply hidden;
+        &.isShow{
+            @apply block;
+            @screen lg {
+                @apply hidden;
+            }
+        }
+        .modal{
+            background: rgba(0, 0, 0, 0.5);
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10000;
+            .content{
+                @apply spacing-horizontal;
+                margin-top: 3rem;
+                padding-top: 6.4rem ;
+                padding-bottom: 5rem;
+                background-color: white;
+                overflow: auto;
+                height: 100%;
+                border-radius: 2.4rem 2.4rem 0 0;
+                .head{
+                    @apply flex justify-between;
+                    h3{
+                        @apply heading-3 font-bold;
+                        color:var(--text-base);
+                    }
+                }
+                button{
+                    margin-top: 2rem;
+                    width: 100%;
+                }
+            }
+        }
     }
 }

src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx

@@ -1,16 +1,35 @@
-import React from 'react'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+import IconHide from 'src/components/icons/IconHide'
 import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
 import { CheckoutBill, CheckoutInfo } from '..'
 import s from "./CheckoutPage.module.scss"
 interface CheckoutPageProps {
-    
 }
 
 const CheckoutPage = ({}: CheckoutPageProps) => {
+    const [isShow, setIsShow] = useState(false)
+    const onClose = () => {
+        setIsShow(false)
+    }
+    const onViewCart =() => {
+        setIsShow(true)
+    }
     return (
         <div className={s.warrper}>
-            <div className={s.left}><CheckoutInfo/></div>
+            <div className={s.left}><CheckoutInfo onViewCart = {onViewCart}/></div>
             <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
+            <div className={classNames({ [s.mobile] :true,[s.isShow]: isShow})}>
+                <div className={s.modal}>
+                    <div className={s.content}>
+                        <div className={s.head}>
+                            <h3>Your Cart({CHECKOUT_BILL_DATA.length})</h3>
+                            <div onClick={onClose}><IconHide/></div>
+                        </div>
+                        <CheckoutBill data={CHECKOUT_BILL_DATA}/>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }