🎨 styles: add cart drawer layer

:%s

src/components/common/CartDrawer/CartDrawer.module.scss

@@ -4,6 +4,6 @@
 .cartDrawer {
     @apply flex flex-col h-full;
     .body {
-        @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll;
+        @apply flex flex-col overflow-y-auto overflow-x-hidden h-full custom-scroll;
     }
 }

src/components/common/DrawerCommon/DrawerCommon.module.scss

@@ -1,21 +1,36 @@
 @import "../../../styles/utilities";
 
 .drawerCommon {
-    @apply fixed flex justify-end transition-all duration-200;
+    @apply fixed flex justify-end transition-all duration-500;
     overflow: hidden;
     top: 0;
     right: 0;
     height: 100vh;
-    width: 90%;
+    width: 100%;
-    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
     z-index: 20000;
+    transform: translateX(110%);
 
+    &.show {
+        .innerWrap {
+            background: rgba(0, 0, 0, 0.2);
+            animation: animateBackground 0.8s;
+        }
+        transform: none;
+    }
+
+    .innerWrap {
+        @apply w-full;
+        background: none;
+    }
     .inner {
         @apply flex flex-col bg-white;
         width: fit-content;
         height: 100vh;
         width: 100%;
-        margin-right: 0;
+        margin-left: auto;
+        box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
+        // transform: none;
+
         @screen md {
             max-width: 52rem;
         }
@@ -39,14 +54,21 @@
         overflow-y: auto;
         height: 100%;
     }
-    &.hide {
-        transform: translateX(110%);
-    }
 
     @screen md {
-        width: unset;
         .inner {
             min-width: 48rem;
         }
     }
 }
+
+@keyframes animateBackground {
+    0%,
+    50% {
+        background: none;
+    }
+
+    100% {
+        background: rgba(0, 0, 0, 0.2);
+    }
+}

src/components/common/DrawerCommon/DrawerCommon.tsx

@@ -11,22 +11,32 @@ interface Props {
 }
 
 const DrawerCommon = ({ title, visible, children, onClose }: Props) => {
+const refInner = useRef<HTMLDivElement>(null)
+
+const handleClickOut = (e: any) => {
+  if (e.target.contains(refInner.current)) {
+    onClose()
+  }
+}
+
   return (
     <div className={classNames({
       [s.drawerCommon]: true,
-      [s.hide]: !visible
+      [s.show]: visible
     })}>
-      <div className={s.inner}>
+      <div className={s.innerWrap} onClick={handleClickOut}>
-        <div className={s.top}>
+        <div className={s.inner} ref={refInner}>
-          <h4 className={s.heading}>
+          <div className={s.top}>
-            {title}
+            <h4 className={s.heading}>
-          </h4>
+              {title}
-          <div className={s.iconClose} onClick={onClose}>
+            </h4>
-            <IconClose />
+            <div className={s.iconClose} onClick={onClose}>
+              <IconClose />
+            </div>
+          </div>
+          <div className={s.content}>
+            {children}
           </div>
-        </div>
-        <div className={s.content}>
-          {children}
         </div>
       </div>
     </div>