결제 관리 API 연결

src/entities/payment/ui/credit-card-list-bottom-sheet.tsx

@@ -1,11 +1,33 @@
+import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 
-export const CreditCardListBottomSheet = () => {
+export interface CreditCardListBottomSheetProps {
+  creditCardListBottomSheetOn: boolean;
+  setCreditCardListBottomSheetOn: (creditCardListBottomSheetOn: boolean) => void;
+};
+
+export const CreditCardListBottomSheet = ({
+  creditCardListBottomSheetOn,
+  setCreditCardListBottomSheetOn
+}: CreditCardListBottomSheetProps) => {
+
+  const onClickToClose = () => {
+    setCreditCardListBottomSheetOn(false);
+  };
 
   return (
     <>
+      { creditCardListBottomSheetOn &&
       <div className="bg-dim"></div>
-      <div className="bottomsheet">
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (creditCardListBottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
             <h2>카드사</h2>
@@ -16,6 +38,7 @@ export const CreditCardListBottomSheet = () => {
               <img 
                 src={ IMAGE_ROOT + '/ico_close.svg' }
                 alt="닫기"
+                onClick={ () => onClickToClose() }
               />
             </button>
           </div>
@@ -59,7 +82,7 @@ export const CreditCardListBottomSheet = () => {
             type="button"
           >확인</button>
         </div>
-      </div>
+      </motion.div>
     </>
   );
 };