catch 수정 및 불필요 api 삭제 api 변경 내역 수정

src/entities/additional-service/ui/account-holder-auth/detail/account-holder-auth-detail.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 export interface AccountHolderAuthDetailProps {
   detailOn: boolean;
@@ -37,7 +38,7 @@ export const AccountHolderAuthDetail = ({
       setDetail(rs);
     }).catch((e: any) => {
       if (e.response?.data?.error?.message) {
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });

src/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 export interface AccountHolderSearchDetailProps {
   detailOn: boolean;
@@ -36,7 +37,7 @@ export const AccountHolderSearchDetail = ({
       setDetail(rs);
     }).catch((e: any) => {
       if(e.response?.data?.error?.message){
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });

src/entities/additional-service/ui/alimtalk/detail/alimtalk-detail.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 export interface AlimtalkDetailProps {
   detailOn: boolean;
@@ -43,7 +44,7 @@ export const AlimtalkDetail = ({
       setDetail(rs);
     }).catch((e: any) => {
       if(e.response?.data?.error?.message){
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });

src/entities/additional-service/ui/ars/detail/ars-detail.tsx

@@ -14,183 +14,183 @@ import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
 
 export interface ArsDetailProps {
-    detailOn: boolean;
-    setDetailOn: (detailOn: boolean) => void;
-    mid: string;
-    tid: string;
+	detailOn: boolean;
+	setDetailOn: (detailOn: boolean) => void;
+	mid: string;
+	tid: string;
 };
 
 export const ArsDetail = ({
-    detailOn,
-    setDetailOn,
-    mid,
-    tid
+	detailOn,
+	setDetailOn,
+	mid,
+	tid
 }: ArsDetailProps) => {
-    const { t } = useTranslation();
+	const { t } = useTranslation();
 
-    const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
-    const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+	const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
+	const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
 
-    const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
-    const { mutateAsync: extensionArsResend } = useExtensionArsResendMutation();
+	const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
+	const { mutateAsync: extensionArsResend } = useExtensionArsResendMutation();
 
-    const callDetail = () => {
-        let arsDetailParams: ExtensionArsDetailParams = {
-            mid: mid,
-            tid: tid
-        };
-        extensionArsDetail(arsDetailParams).then((rs: ExtensionArsDetailResponse) => {
-            setDetail(rs);
-        }).catch((e: any) => {
-            if (e.response?.data?.error?.message) {
-                showAlert(e.response?.data?.error?.message);
-                return;
-            }
-        });
-    }
+	const callDetail = () => {
+		let arsDetailParams: ExtensionArsDetailParams = {
+			mid: mid,
+			tid: tid
+		};
+		extensionArsDetail(arsDetailParams).then((rs: ExtensionArsDetailResponse) => {
+			setDetail(rs);
+		}).catch((e: any) => {
+			if (e.response?.data?.error?.message) {
+				snackBar(e.response?.data?.error?.message);
+				return;
+			}
+		});
+	}
 
-    const arsResend = () => {
-        let arsResendParams: ExtensionArsResendParams = {
-            mid: mid,
-            tid: tid
-        };
-        extensionArsResend(arsResendParams).then((rs: ExtensionArsResendResponse) => {
-            if (rs.status) {
-                snackBar(t('additionalService.ars.smsResendSuccess'));
-                setBottomSheetOn(false);
-                callDetail(); // 상세 정보 갱신
-            } else {
-                const errorMessage = rs.error?.message || t('additionalService.ars.smsResendFailed');
-                snackBar(`[${t('common.failed')}] ${errorMessage}`);
-            }
-        }).catch((error) => {
-            const errorMessage = error?.response?.data?.error?.message ||
-                error?.message ||
-                t('additionalService.ars.smsResendError');
-            snackBar(`[${t('common.failed')}] ${errorMessage}`);
-        });
-    }
+	const arsResend = () => {
+		let arsResendParams: ExtensionArsResendParams = {
+			mid: mid,
+			tid: tid
+		};
+		extensionArsResend(arsResendParams).then((rs: ExtensionArsResendResponse) => {
+			if (rs.status) {
+				snackBar(t('additionalService.ars.smsResendSuccess'));
+				setBottomSheetOn(false);
+				callDetail(); // 상세 정보 갱신
+			}
+			else{
+				const errorMessage = rs.error?.message || t('additionalService.ars.smsResendFailed');
+				snackBar(`[${t('common.failed')}] ${errorMessage}`);
+			}
+		}).catch((error) => {
+			const errorMessage = error?.response?.data?.error?.message ||
+				error?.message ||
+				t('additionalService.ars.smsResendError');
+			snackBar(`[${t('common.failed')}] ${errorMessage}`);
+		});
+	}
 
-    const onClickToOpenResendBottomSheet = () => {
-        if (!checkGrant(52, 'X')) {
-            showAlert(t('common.nopermission'));
-            return;
-        }
-        setBottomSheetOn(true);
-    };
-    const onClickToClose = () => {
-        setDetailOn(false);
-    };
+	const onClickToOpenResendBottomSheet = () => {
+		if(!checkGrant(52, 'X')){
+			showAlert(t('common.nopermission'));
+			return;
+		}
+		setBottomSheetOn(true);
+	};
+	const onClickToClose = () => {
+		setDetailOn(false);
+	};
 
-    const getDate = (date?: string) => {
-        return (date) ? moment(date.substr(0, 8)).format('YYYY.MM.DD') : '';
-    };
+	const getDate = (date?: string) => {
+		return (date) ? moment(date.substr(0, 8)).format('YYYY.MM.DD') : '';
+	};
 
-    useEffect(() => {
-        if (!!mid && !!tid) {
-            callDetail();
-        }
-    }, [mid, tid]);
+	useEffect(() => {
+		if (!!mid && !!tid) {
+			callDetail();
+		}
+	}, [mid, tid]);
 
-    return (
-        <>
-            <motion.div
-                className="full-menu-modal"
-                initial="hidden"
-                animate={(detailOn) ? 'visible' : 'hidden'}
-                variants={DetailMotionVariants}
-                transition={DetailMotionDuration}
-                style={DetailMotionStyle}
-            >
-                <div className="full-menu-container pdw-16">
-                    <div className="full-menu-header">
-                        <div className="full-menu-title center">{t('additionalService.ars.detailTitle')}</div>
-                        <div className="full-menu-actions">
-                            <FullMenuClose
-                                addClass="full-menu-close"
-                                onClickToCallback={onClickToClose}
-                            ></FullMenuClose>
-                        </div>
-                    </div>
-                    <div className="pay-top">
-                        <div className="num-amount">
-                            <span className="amount">
-                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(Number(detail?.amount) || 0) })}
-                            </span>
-                        </div>
-                        <div className="num-store">{detail?.corpName}</div>
-                        <div className="num-day">{getDate(detail?.paymentDate)}</div>
-                    </div>
-                    <div className="detail-divider"></div>
-                    <div className="pay-detail">
-                        <div className="detail-title">{t('additionalService.ars.transactionInfo')}</div>
-                        <ul className="kv-list">
-                            <li className="kv-row">
-                                <span className="k">{t('transaction.fields.mid')}</span>
-                                <span className="v">{detail?.mid}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.paymentMethod')}</span>
-                                <span className="v">{detail?.arsPaymentMethod}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.paymentStatus')}</span>
-                                <span className="v">{getArsPaymentStatusName(t)(detail?.paymentStatus)}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.orderStatus')}</span>
-                                <span className="v">{getArsOrderStatusName(t)(detail?.orderStatus)}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.orderDateTime')}</span>
-                                <span className="v">{
-                                    detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'
-                                }</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.productName')}</span>
-                                <span className="v">{detail?.goodsName}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.orderNumber')}</span>
-                                <span className="v">{detail?.tid}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.buyer')}</span>
-                                <span className="v">{detail?.buyerName}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.phoneNumber')}</span>
-                                <span className="v">{detail?.maskPhoneNumber}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.email')}</span>
-                                <span className="v">{detail?.email}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.ars.sendVerificationCode')}</span>
-                                <span className="v">{detail?.smsVerificationCode}</span>
-                            </li>
-                        </ul>
-                    </div>
-                    {detail?.arsPaymentMethod === ArsPaymentMethod.SMS && (
-                        <div className="apply-row">
-                            <button
-                                className="btn-50 btn-blue flex-1"
-                                onClick={() => onClickToOpenResendBottomSheet()}
-                            //disabled={ detail?.orderStatus !== OrderStatus.PENDING }
-                            >{t('additionalService.ars.smsResend')}</button>
-                        </div>
-                    )}
-                </div>
-                <ArsResendSmsBottomSheet
-                    setBottomSheetOn={setBottomSheetOn}
-                    bottomSheetOn={bottomSheetOn}
-                    phoneNumber={detail?.phoneNumber}
-                    callResendSms={arsResend}
-                ></ArsResendSmsBottomSheet>
-            </motion.div>
-        </>
-    )
-
-}
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(detailOn) ? 'visible' : 'hidden'}
+				variants={DetailMotionVariants}
+				transition={DetailMotionDuration}
+				style={DetailMotionStyle}
+			>
+				<div className="full-menu-container pdw-16">
+					<div className="full-menu-header">
+						<div className="full-menu-title center">{t('additionalService.ars.detailTitle')}</div>
+						<div className="full-menu-actions">
+							<FullMenuClose
+								addClass="full-menu-close"
+								onClickToCallback={onClickToClose}
+							></FullMenuClose>
+						</div>
+					</div>
+					<div className="pay-top">
+						<div className="num-amount">
+							<span className="amount">
+								{t('home.money', { value: new Intl.NumberFormat('en-US').format(Number(detail?.amount) || 0) })}
+							</span>
+						</div>
+						<div className="num-store">{detail?.corpName}</div>
+						<div className="num-day">{getDate(detail?.paymentDate)}</div>
+					</div>
+					<div className="detail-divider"></div>
+					<div className="pay-detail">
+						<div className="detail-title">{t('additionalService.ars.transactionInfo')}</div>
+						<ul className="kv-list">
+							<li className="kv-row">
+								<span className="k">{t('transaction.fields.mid')}</span>
+								<span className="v">{detail?.mid}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.paymentMethod')}</span>
+								<span className="v">{detail?.arsPaymentMethod}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.paymentStatus')}</span>
+								<span className="v">{getArsPaymentStatusName(t)(detail?.paymentStatus)}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.orderStatus')}</span>
+								<span className="v">{getArsOrderStatusName(t)(detail?.orderStatus)}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.orderDateTime')}</span>
+								<span className="v">{
+										detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'
+								}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.productName')}</span>
+								<span className="v">{detail?.goodsName}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.orderNumber')}</span>
+								<span className="v">{detail?.tid}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.buyer')}</span>
+								<span className="v">{detail?.buyerName}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.phoneNumber')}</span>
+								<span className="v">{detail?.maskPhoneNumber}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.email')}</span>
+								<span className="v">{detail?.email}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.ars.sendVerificationCode')}</span>
+								<span className="v">{detail?.smsVerificationCode}</span>
+							</li>
+						</ul>
+					</div>
+					{ detail?.arsPaymentMethod === ArsPaymentMethod.SMS && (
+						<div className="apply-row">
+							<button
+								className="btn-50 btn-blue flex-1"
+								onClick={() => onClickToOpenResendBottomSheet()}
+							//disabled={ detail?.orderStatus !== OrderStatus.PENDING }
+							>{t('additionalService.ars.smsResend')}</button>
+						</div>
+					)}
+				</div>
+				<ArsResendSmsBottomSheet
+					setBottomSheetOn={setBottomSheetOn}
+					bottomSheetOn={bottomSheetOn}
+					phoneNumber={detail?.phoneNumber}
+					callResendSms={arsResend}
+				></ArsResendSmsBottomSheet>
+			</motion.div>
+		</>
+	);
+};

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

@@ -14,6 +14,7 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 export interface FundAccountResultDetailProps {
   detailOn: boolean;
@@ -46,7 +47,7 @@ export const FundAccountResultDetail = ({
       setDetail(rs);
     }).catch((e: any) => {
       if (e.response?.data?.error?.message) {
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });
@@ -67,7 +68,7 @@ export const FundAccountResultDetail = ({
         console.log('Receipt Download Status:', rs);
       }).catch((e: any) => {
         if(e.response?.data?.error?.message){
-          showAlert(e.response?.data?.error?.message);
+          snackBar(e.response?.data?.error?.message);
           return;
         }
       });

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

@@ -45,7 +45,7 @@ export const FundAccountTransferDetail = ({
       setDetail(rs);
     }).catch((e: any) => {
       if (e.response?.data?.error?.message) {
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });;

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

@@ -21,6 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { FundAccountResultDetail } from './detail/result-detail';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 export const FundAccountResultListWrap = () => {
   const { navigate } = useNavigate();
@@ -128,7 +129,7 @@ export const FundAccountResultListWrap = () => {
       );
     }).catch((e: any) => {
       if(e.response?.data?.error?.message){
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });
@@ -149,7 +150,7 @@ export const FundAccountResultListWrap = () => {
       setTotalFailAmount(rs.totalFailAmount);
     }).catch((e: any) => {
       if(e.response?.data?.error?.message){
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });
@@ -176,7 +177,7 @@ export const FundAccountResultListWrap = () => {
         console.log('Excel Download Status:', rs);
       }).catch((e: any) => {
         if(e.response?.data?.error?.message){
-          showAlert(e.response?.data?.error?.message);
+          snackBar(e.response?.data?.error?.message);
           return;
         }
       });

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -30,6 +30,7 @@ import { useTranslation } from 'react-i18next';
 import { FundAccountTransferDetail } from './detail/transfer-detail';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 export const FundAccountTransferListWrap = () => {
   const { navigate } = useNavigate();
@@ -126,7 +127,7 @@ export const FundAccountTransferListWrap = () => {
       );
     }).catch((e: any) => {
       if(e.response?.data?.error?.message){
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });
@@ -160,7 +161,7 @@ export const FundAccountTransferListWrap = () => {
         console.log('Excel Download Status:', rs.status);
       }).catch((e: any) => {
         if(e.response?.data?.error?.message){
-          showAlert(e.response?.data?.error?.message);
+          snackBar(e.response?.data?.error?.message);
           return;
         }
       });
@@ -176,7 +177,7 @@ export const FundAccountTransferListWrap = () => {
       setBalance(rs.balance);
     }).catch((e: any) => {
       if(e.response?.data?.error?.message){
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });

src/entities/additional-service/ui/link-payment/detail/link-payment-history-detail.tsx

@@ -70,7 +70,7 @@ export const LinkPaymentHistoryDetail = ({
       setDetailExposure(rs.detailExposure ?? false)
     }).catch((e: any) => {
       if (e.response?.data?.error?.message) {
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });

src/entities/additional-service/ui/link-payment/detail/link-payment-wait-detail.tsx

@@ -45,7 +45,7 @@ export const LinkPaymentWaitDetail = ({
       setPaymentInfo(rs.paymentInfo)
     }).catch((e: any) => {
       if (e.response?.data?.error?.message) {
-        showAlert(e.response?.data?.error?.message);
+        snackBar(e.response?.data?.error?.message);
         return;
       }
     });

src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { LinkPaymentHistoryDetail } from './detail/link-payment-history-detail';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 const getPaymentResultBtnGroup = (t: any) => [
 	{ name: t('additionalService.linkPayment.all'), value: LinkPaymentPaymentStatus.ALL },
@@ -137,7 +138,7 @@ export const LinkPaymentHistoryWrap = () => {
 			);
 		}).catch((e: any) => {
 			if(e.response?.data?.error?.message){
-				showAlert(e.response?.data?.error?.message);
+				snackBar(e.response?.data?.error?.message);
 				return;
 			}
 		});
@@ -168,7 +169,7 @@ export const LinkPaymentHistoryWrap = () => {
 				console.log('Excel Download Status: ' + rs.status);
 			}).catch((e: any) => {
         if(e.response?.data?.error?.message){
-          showAlert(e.response?.data?.error?.message);
+          snackBar(e.response?.data?.error?.message);
           return;
         }
       });

src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx

@@ -20,6 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { LinkPaymentWaitDetail } from './detail/link-payment-wait-detail';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
+import { snackBar } from '@/shared/lib';
 
 
 export const LinkPaymentWaitSendWrap = () => {
@@ -148,7 +149,7 @@ export const LinkPaymentWaitSendWrap = () => {
         console.log('Excel Download Status: ' + rs.status);
       }).catch((e: any) => {
         if(e.response?.data?.error?.message){
-          showAlert(e.response?.data?.error?.message);
+          snackBar(e.response?.data?.error?.message);
           return;
         }
       });

src/entities/additional-service/ui/payout/detail/payout-detail.tsx

@@ -11,206 +11,200 @@ import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bott
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
-
+import { snackBar } from '@/shared/lib';
 
 export interface PayoutDetailProps {
-    detailOn: boolean;
-    setDetailOn: (detailOn: boolean) => void;
-    mid: string;
-    tid: string;
+	detailOn: boolean;
+	setDetailOn: (detailOn: boolean) => void;
+	mid: string;
+	tid: string;
 };
 
 export const PayoutDetail = ({
-    detailOn,
-    setDetailOn,
-    mid,
-    tid
+	detailOn,
+	setDetailOn,
+	mid,
+	tid
 }: PayoutDetailProps) => {
-    const { t } = useTranslation();
+	const { t } = useTranslation();
 
-    const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
-    const [downloadTypeBottomSheetOn, setDownloadTypeBottomSheetOn] = useState<boolean>(false);
-    const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
+	const [downloadTypeBottomSheetOn, setDownloadTypeBottomSheetOn] = useState<boolean>(false);
+	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
 
-    const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
-    const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
+	const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
+	const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
 
+	const callDetail = () => {
+		let params: ExtensionPayoutDetailParams = {
+			tid: tid,
+			mid: mid,
+		};
+		extensionPayoutDetail(params).then((rs: ExtensionPayoutDetailResponse) => {
+			setDetail(rs);
+		}).catch((e: any) => {
+			if(e.response?.data?.error?.message){
+				snackBar(e.response?.data?.error?.message);
+				return;
+			}
+		});
+	}
 
-    const callDetail = () => {
-        let params: ExtensionPayoutDetailParams = {
-            tid: tid,
-            mid: mid,
-        };
-        extensionPayoutDetail(params).then((rs: ExtensionPayoutDetailResponse) => {
-            setDetail(rs);
-        }).catch((e: any) => {
-            if (e.response?.data?.error?.message) {
-                showAlert(e.response?.data?.error?.message);
-                return;
-            }
-        });
-    }
+	const onClickToDownload = () => {
+		if(!checkGrant(53, 'D')){
+			showAlert(t('common.nopermission'));
+			return;
+		}
+		setDownloadTypeBottomSheetOn(true);
+	};
 
-    const onClickToDownload = () => {
-        if (!checkGrant(53, 'D')) {
-            showAlert(t('common.nopermission'));
-            return;
-        }
-        setDownloadTypeBottomSheetOn(true);
-    };
+	const onSelectDownloadType = (type: 'IMAGE' | 'EMAIL') => {
+		if(type === 'IMAGE'){
+			// Save image directly
+			const params: ExtensionPayoutDetailDownloadCertificateParams = {
+				mid: mid,
+				tid: tid,
+				requestType: 'IMAGE',
+				email: ''
+			};
+			extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
+				console.log('Certificate Download Status:', rs);
+			}).catch((error) => {
+				console.error('Certificate Download Failed:', error);
+			});
+		}
+		else{
+			// Open EmailBottomSheet for email option
+			setEmailBottomSheetOn(true);
+		}
+	};
 
-    const onSelectDownloadType = (type: 'IMAGE' | 'EMAIL') => {
-        if (type === 'IMAGE') {
-            // Save image directly
-            const params: ExtensionPayoutDetailDownloadCertificateParams = {
-                mid: mid,
-                tid: tid,
-                requestType: 'IMAGE',
-                email: ''
-            };
-            extensionPayoutDetailDownloadCertification(params)
-                .then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
-                    console.log('Certificate Download Status:', rs);
-                })
-                .catch((error) => {
-                    console.error('Certificate Download Failed:', error);
-                });
-        } else {
-            // Open EmailBottomSheet for email option
-            setEmailBottomSheetOn(true);
-        }
-    };
+	const onSendRequest = (selectedEmail?: string) => {
+		if(selectedEmail){
+			const params: ExtensionPayoutDetailDownloadCertificateParams = {
+				mid: mid,
+				tid: tid,
+				requestType: 'EMAIL',
+				email: selectedEmail
+			};
+			extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
+				console.log('Certificate Download Status:', rs);
+			}).catch((error) => {
+				console.error('Certificate Download Failed:', error);
+			});
+		}
+		setEmailBottomSheetOn(false);
+	};
 
-    const onSendRequest = (selectedEmail?: string) => {
-        if (selectedEmail) {
-            const params: ExtensionPayoutDetailDownloadCertificateParams = {
-                mid: mid,
-                tid: tid,
-                requestType: 'EMAIL',
-                email: selectedEmail
-            };
-            extensionPayoutDetailDownloadCertification(params)
-                .then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
-                    console.log('Certificate Download Status:', rs);
-                })
-                .catch((error) => {
-                    console.error('Certificate Download Failed:', error);
-                });
-        }
-        setEmailBottomSheetOn(false);
-    };
+	const onClickToClose = () => {
+		setDetailOn(false);
+	};
 
-    const onClickToClose = () => {
-        setDetailOn(false);
-    };
+	useEffect(() => {
+		if (!!mid && !!tid) {
+			callDetail();
+		}
+	}, [mid, tid]);
 
-
-    useEffect(() => {
-        if (!!mid && !!tid) {
-            callDetail();
-        }
-    }, [mid, tid]);
-
-    return (
-        <>
-            <motion.div
-                className="full-menu-modal"
-                initial="hidden"
-                animate={(detailOn) ? 'visible' : 'hidden'}
-                variants={DetailMotionVariants}
-                transition={DetailMotionDuration}
-                style={DetailMotionStyle}
-            >
-                <div className="full-menu-container pdw-16">
-                    <div className="full-menu-header">
-                        <div className="full-menu-title center">{t('additionalService.payout.detailTitle')}</div>
-                        <div className="full-menu-actions">
-                            <FullMenuClose
-                                addClass="full-menu-close"
-                                onClickToCallback={onClickToClose}
-                            ></FullMenuClose>
-                        </div>
-                    </div>
-                    <div className="pay-top">
-                        <div className="num-amount">
-                            <span className="amount">
-                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.disbursementAmount || 0) })}
-                            </span>
-                        </div>
-                        <div className="num-store">{detail?.companyName}</div>
-                        <div className="num-day">{moment(detail?.settlementDate).format('YYYY.MM.DD')}</div>
-                        <div className="receipt-row">
-                            <button
-                                className="receipt-btn"
-                                type="button"
-                                onClick={onClickToDownload}
-                            >
-                                <span className="icon-24 download"></span>
-                                <span>{t('additionalService.payout.depositCertificate')}</span>
-                            </button>
-                        </div>
-                    </div>
-                    <div className="detail-divider"></div>
-                    <div className="pay-detail">
-                        <div className="detail-title">{t('additionalService.payout.detailInfo')}</div>
-                        <ul className="kv-list">
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.disbursementStatus')}</span>
-                                <span className="v">{detail?.disbursementStatus}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.transactionType')}</span>
-                                <span className="v">{detail?.transTypeName}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('common.requestDate')}</span>
-                                <span className="v">{moment(detail?.requestDate).format('YYYY.MM.DD')}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.disbursementDateTime')}</span>
-                                <span className="v">{detail?.settlementDateTime ? moment(detail?.settlementDateTime, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : ""}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.businessNumber')}</span>
-                                <span className="v">{detail?.companyNo}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.accountHolder')}</span>
-                                <span className="v">{detail?.accountName}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.bank')}</span>
-                                <span className="v">{detail?.bankName}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.accountNumber')}</span>
-                                <span className="v">{detail?.accountNo}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.depositor')}</span>
-                                <span className="v">{detail?.depositName}</span>
-                            </li>
-                            <li className="kv-row">
-                                <span className="k">{t('additionalService.payout.failureReason')}</span>
-                                <span className="v">{detail?.failReason}</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <DownloadTypeBottomSheet
-                    bottomSheetOn={downloadTypeBottomSheetOn}
-                    setBottomSheetOn={setDownloadTypeBottomSheetOn}
-                    onSelectType={onSelectDownloadType}
-                />
-                <EmailBottomSheet
-                    bottomSheetOn={emailBottomSheetOn}
-                    setBottomSheetOn={setEmailBottomSheetOn}
-                    imageSave={false}
-                    sendEmail={true}
-                    sendRequest={onSendRequest}
-                />
-            </motion.div>
-        </>
-    )
-
-}
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(detailOn) ? 'visible' : 'hidden'}
+				variants={DetailMotionVariants}
+				transition={DetailMotionDuration}
+				style={DetailMotionStyle}
+			>
+				<div className="full-menu-container pdw-16">
+					<div className="full-menu-header">
+						<div className="full-menu-title center">{t('additionalService.payout.detailTitle')}</div>
+						<div className="full-menu-actions">
+							<FullMenuClose
+								addClass="full-menu-close"
+								onClickToCallback={onClickToClose}
+							></FullMenuClose>
+						</div>
+					</div>
+					<div className="pay-top">
+						<div className="num-amount">
+							<span className="amount">
+								{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.disbursementAmount || 0) })}
+							</span>
+						</div>
+						<div className="num-store">{detail?.companyName}</div>
+						<div className="num-day">{moment(detail?.settlementDate).format('YYYY.MM.DD')}</div>
+						<div className="receipt-row">
+							<button
+								className="receipt-btn"
+								type="button"
+								onClick={onClickToDownload}
+							>
+								<span className="icon-24 download"></span>
+								<span>{t('additionalService.payout.depositCertificate')}</span>
+							</button>
+						</div>
+					</div>
+					<div className="detail-divider"></div>
+					<div className="pay-detail">
+						<div className="detail-title">{t('additionalService.payout.detailInfo')}</div>
+						<ul className="kv-list">
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.disbursementStatus')}</span>
+								<span className="v">{detail?.disbursementStatus}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.transactionType')}</span>
+								<span className="v">{detail?.transTypeName}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('common.requestDate')}</span>
+								<span className="v">{moment(detail?.requestDate).format('YYYY.MM.DD')}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.disbursementDateTime')}</span>
+								<span className="v">{detail?.settlementDateTime ? moment(detail?.settlementDateTime, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : ""}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.businessNumber')}</span>
+								<span className="v">{detail?.companyNo}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.accountHolder')}</span>
+								<span className="v">{detail?.accountName}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.bank')}</span>
+								<span className="v">{detail?.bankName}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.accountNumber')}</span>
+								<span className="v">{detail?.accountNo}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.depositor')}</span>
+								<span className="v">{detail?.depositName}</span>
+							</li>
+							<li className="kv-row">
+								<span className="k">{t('additionalService.payout.failureReason')}</span>
+								<span className="v">{detail?.failReason}</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<DownloadTypeBottomSheet
+					bottomSheetOn={downloadTypeBottomSheetOn}
+					setBottomSheetOn={setDownloadTypeBottomSheetOn}
+					onSelectType={onSelectDownloadType}
+				/>
+				<EmailBottomSheet
+					bottomSheetOn={emailBottomSheetOn}
+					setBottomSheetOn={setEmailBottomSheetOn}
+					imageSave={false}
+					sendEmail={true}
+					sendRequest={onSendRequest}
+				/>
+			</motion.div>
+		</>
+	);
+};