스타일 설정

src/entities/payment/ui/info-wrap.tsx

@@ -1,6 +1,13 @@
-import { IMAGE_ROOT } from "@/shared/constants/common";
-import { InfoItem } from "./info-item";
-import { InfoItemProps, PaymentCardResponse, PaymentInfoItemType, PaymentInstallmentResponse, PaymentNonCardResponse } from "../model/types";
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { InfoItem } from './info-item';
+import { 
+  PaymentCardResponse, 
+  PaymentInfoItemType, 
+  PaymentInstallmentResponse, 
+  PaymentNonCardResponse 
+} from '../model/types';
+import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
+import { useState } from 'react';
 
 export interface InfoWrapProp {
   paymentCard?: PaymentCardResponse,
@@ -13,6 +20,7 @@ export const InfoWrap = ({
   paymentInstallment
 }: InfoWrapProp) => {
   
+  const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
 
   const list1 = [
     {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
@@ -70,6 +78,7 @@ export const InfoWrap = ({
             payName={ list2[i]?.payName }
             payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
             infoLink={ list2[i]?.infoLink }
+            setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
           ></InfoItem>
         );
       }
@@ -81,7 +90,7 @@ export const InfoWrap = ({
 
   return (
     <>
-      <div className="ing-list">
+      <div className="ing-list pb-70">
         <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
         <ul className="ing-card-list">
           { getList(PaymentInfoItemType.Comission) }
@@ -92,7 +101,10 @@ export const InfoWrap = ({
           { getList(PaymentInfoItemType.NoInterest) }
         </ul>
       </div>
-    
+      <NoInterestInfoBottomSheet
+        noInterestInfoBottomSheetOn={ noInterestInfoBottomSheetOn }
+        setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn }
+      ></NoInterestInfoBottomSheet>
     </>
   );
 };