..

src/entities/additional-service/ui/fund-account/detail/result-detail.tsx

@@ -210,7 +210,7 @@ export const FundAccountResultDetail = ({
           ></DownloadBottomSheet>
         }
       </motion.div>
-      {
+      { depositReceiptSampleOn && 
         <DepositReceiptSample
           depositReceiptSampleOn={depositReceiptSampleOn}
           setDepositReceiptSampleOn={setDepositReceiptSampleOn}

src/entities/common/ui/cash-receipt-sample.tsx

@@ -68,33 +68,25 @@ export const CashReceiptSample = ({
     if(!!cashReceiptSampleOn){
       setTimeout(() => {
         downloadImage();
-      }, 500);
+      }, 300);
     }
   }, [cashReceiptSampleOn]);
 
 
   return (
     <>
-      <div 
-        id="image-section" 
-        className="mail-page"
-      >
+      <div className="mail-page">
+        <div id="image-section">
           <div className="wrap">
             <div className="header">
-            <div 
-              className="header-top"
-              style={{ boxSizing: 'unset' }}
-            >
+              <div className="header-top">
                 <img 
                   className="logo" 
                   src={ IMAGE_ROOT + '/mail_nicepay_logo.svg' }
                   alt="NICEPAY"
                 />
               </div>
-            <div 
-              className="divider"
-              style={{ marginTop: '0px'}}
-            ></div>
+              <div className="divider"></div>
               <div className="title-row">
                 <div className="title">현금영수증</div>
               </div>
@@ -248,6 +240,7 @@ export const CashReceiptSample = ({
             </div>
           </div>
         </div>
+      </div>
     </>
   );
 };

src/entities/common/ui/deposit-receipt-sample.tsx

@@ -1,6 +1,4 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { motion } from 'framer-motion';
-import { FilterMotionDuration, FilterMotionVariants } from '../model/constant';
 import { snackBar } from '@/shared/lib';
 import { toPng } from 'html-to-image';
 import { useTranslation } from 'react-i18next';
@@ -29,7 +27,7 @@ export const DepositReceiptSample = ({
 			link.download = 'downloadImage.png';
 			link.href = image;
 			link.click();
-            snackBar(t('common.imageRequested'), function () {
+			snackBar(t('common.imageRequested'), () => {
 				onClickToClose();
 			});
 		});
@@ -40,24 +38,31 @@ export const DepositReceiptSample = ({
 
 	useEffect(() => {
 		if(!!depositReceiptSampleOn){
+			setTimeout(() => {
         downloadImage();
+      }, 300);
 		}
 	}, [depositReceiptSampleOn]);
   
-
 	return (
 		<>
-            <motion.div
-                className="bottomsheet mail-page"
-                initial="hidden"
-                animate={(depositReceiptSampleOn) ? 'hidden' : 'hidden'}
-                variants={FilterMotionVariants}
-                transition={FilterMotionDuration}
-            >
+			<div className="mail-page">
+				<div id="image-section">
 					<div className="wrap">
-                    <div id="image-section" style={{ paddingLeft: '20px', paddingRight: '20px', backgroundColor: '#E4E4E4', paddingTop: '20px', paddingBottom: '20px' }}>
-                        <div style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px', color: '#2D3436' }}>입금확인증</div>
-                        <div className="section" style={{paddingLeft: '20px', paddingRight: '20px'}}>
+						<div className="header">
+							<div className="header-top">
+								<img 
+									className="logo" 
+									src={ IMAGE_ROOT + '/mail_nicepay_logo.svg' }
+									alt="NICEPAY"
+								/>
+							</div>
+							<div className="divider"></div>
+							<div className="title-row">
+								<div className="title">입금확인증</div>
+							</div>
+						</div>	
+						<div className="section">
 							<div className="head">
 								<div className="icon">
 									<svg
@@ -96,8 +101,7 @@ export const DepositReceiptSample = ({
 										thousandSeparator
 										displayType='text'
 										suffix='원'
-                                    >
-                                    </NumericFormat>
+									></NumericFormat>
 								</div>
 							</div>
 							<div className="row">
@@ -111,7 +115,7 @@ export const DepositReceiptSample = ({
 						</div>
 					</div>
 				</div>
-            </motion.div>
+			</div>
 		</>
-    )
-}
+  );
+};

src/shared/ui/assets/css/style-tax-invoice.css

@@ -40,9 +40,25 @@
 
 .mail-page {
   margin: 0; background: #FAFAFA;
-  padding: 0; width: 100%;
-  transform: translateY(100%);
+  min-height: unset; 
+  width: 100%;
   position: fixed;
-  bottom: 0;
+  left: 0;
+  top: 0;
+  z-index: 1010;
+  display: unset;
+  padding-bottom: 0;
+  transform: translateX(100%);
+}
+
+.mail-page .wrap {
+  min-width: unset;
+  padding-bottom: 30px;
+}
+.mail-page .wrap .header .header-top {
+  box-sizing: unset;
+}
+.mail-page .wrap .header .divider {
+  margin-top: 0px;
 }