🎨 styles: cart drawer animation

:%s

src/components/common/Banner/Banner.tsx

@@ -8,6 +8,7 @@ interface Props {
 
 const option = {
     slidesPerView: 1,
+    mode: 'free',
 }
 const Banner = memo(({ data }: Props) => {
     if (data.length === 1) {

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

@@ -8,19 +8,23 @@
     height: 100vh;
     width: 100%;
     z-index: 20000;
-    transform: translateX(110%);
+    transform: none;
 
+    &.hide {
+        .innerWrap {
+            background: none;
+        }
+        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;

src/components/common/DrawerCommon/DrawerCommon.tsx

@@ -22,7 +22,8 @@ const handleClickOut = (e: any) => {
   return (
     <div className={classNames({
       [s.drawerCommon]: true,
-      [s.show]: visible
+      [s.hide]: !visible,
+      [s.show]: visible,
     })}>
       <div className={s.innerWrap} onClick={handleClickOut}>
         <div className={s.inner} ref={refInner}>