스타일 설정

src/entities/payment/ui/no-interest-info-bottom-sheet.tsx

@@ -1,11 +1,32 @@
+import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionVaiants, BottomSheetMotionDuration } from '@/entities/common/model/constant';
 
-export const NoInterestInfoBottomSheet = () => {
+export interface NoInterestInfoBottomSheetProps {
+  noInterestInfoBottomSheetOn: boolean;
+  setNoInterestInfoBottomSheetOn: (noInterestInfoBottomSheetOn: boolean) => void;
+};
 
-  return (
+export const NoInterestInfoBottomSheet = ({
+  noInterestInfoBottomSheetOn,
+  setNoInterestInfoBottomSheetOn
+}: NoInterestInfoBottomSheetProps) => {
+  const onClickToClose = () => {
+    // close
+    setNoInterestInfoBottomSheetOn(false);
+  };
+   return (
     <>
-      <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      { noInterestInfoBottomSheetOn &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (noInterestInfoBottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>무이자 정보</h2>
@@ -16,6 +37,7 @@ export const NoInterestInfoBottomSheet = () => {
               <img 
                 src={ IMAGE_ROOT + '/ico_close.svg' }
                 alt="닫기"
+                onClick={ () => onClickToClose() }
               />
             </button>
           </div>
@@ -38,15 +60,7 @@ export const NoInterestInfoBottomSheet = () => {
           <div className="desc dot">적용기간 : 2025.06.01 ~ 9999.12.31</div>
           <div className="desc dot">적용금액 : 50,000</div>
         </div>
-        {/*
-        <div className="bottomsheet-footer">
-          <button 
-            className="btn-50 btn-blue flex-1" 
-            type="button"
-          >확인</button>
-        </div>
-        */}
-      </div>
+      </motion.div>
     </>
   )
 };