첫 커밋

src/entities/home/ui/home-bottom-banner.tsx

@@ -0,0 +1,61 @@
+import moment from 'moment';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { StorageKeys } from '@/shared/constants/local-storage';
+import { setLocalStorage } from '@/shared/lib/web-view-bridge';
+import { HomeBottomBannerProps } from '../model/types';
+import { motion } from 'framer-motion';
+
+export const HomeBottomBanner = ({
+  setBottomBannerOn,
+  bottomBannerOn
+}: HomeBottomBannerProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToClose = () => {
+    // close
+    setBottomBannerOn(false);
+  };
+  const onClickToCloseDay = () => {
+    // 오늘 날짜 기록
+    const today = moment().format('YYYYMMDD');
+    setLocalStorage(StorageKeys.BottomBannerClose, today);
+    onClickToClose();
+  };
+
+  const variants = {
+    hidden: { y: '100%' },
+    visible: { y: '0%' },
+  };
+
+  return (
+    <>
+      {bottomBannerOn &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet banner"
+        initial="hidden"
+        animate={ (bottomBannerOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.5 }}
+      >
+        <div className="bottomsheet-content">
+          <img 
+            src={ IMAGE_ROOT + '/sample_banner.png' }
+            alt="배너"
+          />
+          <div className="banner-page">
+            <span className="current">1</span>
+            /
+            <span className="total">3</span>
+          </div>
+        </div>
+        <div className="bottom-btn">
+          <span onClick={ () => onClickToCloseDay() }>오늘 하루 보지 않기</span>
+          <span onClick={ () => onClickToClose() }>닫기</span>
+        </div>
+      </motion.div>
+    </>
+  );
+};