스타일 설정

src/entities/common/model/constant.ts

@@ -17,4 +17,12 @@ export const FilterMotionDuration = {
 export const FilterMotionStyle = {
   width: '100%',
   height: '100%'
+};
+
+export const BottomSheetMotionVaiants = {
+  hidden: { y: '100%' },
+  visible: { y: '0%' },
+};
+export const BottomSheetMotionDuration = {
+  duration: 0.3
 };

src/entities/payment/model/types.ts

@@ -16,13 +16,6 @@ export enum DataNotificationNotifyContentKey {
   MobilePayment = 'MobilePayment',
   EscrowPayment = 'EscrowPayment',
 };
-export interface InfoItemProps {
-  type?: PaymentInfoItemType;
-  payName?: string;
-  payImage?: string;
-  infoLink?: string;
-};
-
 export interface PaymentCommonParams {
   mid: string;
 };

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

@@ -1,13 +1,22 @@
-import { InfoItemProps } from '../model/types';
+import { PaymentInfoItemType } from '../model/types';
+
+export interface InfoItemProps {
+  type?: PaymentInfoItemType;
+  payName?: string;
+  payImage?: string;
+  infoLink?: string;
+  setNoInterestInfoBottomSheetOn?: (noInterestInfoBottomSheetOn: boolean) => void;
+};
 
 export const InfoItem = ({
   type,
   payName,
   payImage,
-  infoLink 
+  infoLink,
+  setNoInterestInfoBottomSheetOn
 }: InfoItemProps) => {
 
-  const onClickToShow = () => {
+  const onClickToOpenBottomSheet = () => {
     if(!!infoLink){
       
     }
@@ -27,7 +36,7 @@ export const InfoItem = ({
         <button 
           className="ing-card-link" 
           type="button"
-          onClick={ () => onClickToShow() }
+          onClick={ () => onClickToOpenBottomSheet() }
         >수수료 및 정산주기 &gt;</button>
       </li>
     </>

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

@@ -1,6 +1,13 @@
-import { IMAGE_ROOT } from "@/shared/constants/common";
+import { IMAGE_ROOT } from '@/shared/constants/common';
-import { InfoItem } from "./info-item";
+import { InfoItem } from './info-item';
-import { InfoItemProps, PaymentCardResponse, PaymentInfoItemType, PaymentInstallmentResponse, PaymentNonCardResponse } from "../model/types";
+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>
     </>
   );
 };

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>
+      { noInterestInfoBottomSheetOn &&
-      <div className="bottomsheet">
+        <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>
-        {/*
+      </motion.div>
-        <div className="bottomsheet-footer">
-          <button 
-            className="btn-50 btn-blue flex-1" 
-            type="button"
-          >확인</button>
-        </div>
-        */}
-      </div>
     </>
   )
 };

src/pages/payment/info/info-page.tsx

@@ -79,7 +79,7 @@ export const InfoPage = () => {
   return (
     <>
       <main>
-        <div className="tab-content">
+        <div className="tab-content pb-70">
           <div className="tab-pane pt-46 active">
             <PaymentTab activeTab={ activeTab }></PaymentTab>
             <InfoWrap

src/shared/ui/assets/css/style-fix.css

@@ -22,6 +22,7 @@ main {
 .ic20.rot-180{
   transform: rotate(180deg);
 }
+.pb-70 {padding-bottom: 70px !important;}
 
 /* calendar */
 .react-calendar{