..

src/entities/home/ui/favorite-wrapper.tsx

@@ -8,7 +8,6 @@ import { useFavoriteEditOnStore, useMenuIds, useMenuOnStore, useStore } from '@/
 import { useTranslation } from 'react-i18next';
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
-import { snackBar } from '@/shared/lib';
 
 export interface FavoriteWrapperProps {
   usingType: 'home' | 'menu',
@@ -28,7 +27,6 @@ export const FavoriteWrapper = ({
   const { menuIds, setMenuIds, deleteMenuId} = useMenuIds();
   const [isFirst, setIsFirst] = useState<boolean>(true);
   const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
-  const [prevMenuOn, setPrevMenuOn] = useState<boolean>(false);
   
   const itemAdd: UserFavorite = {
     menuId: -1,
@@ -75,12 +73,6 @@ export const FavoriteWrapper = ({
   };
 
   const onClickToRemoveItem = (item?: UserFavorite) => {
-    // 삭제 전에 먼저 개수 체크
-    if(menuIds.length === 1){
-      snackBar(t('favorite.cannotDeleteLastItem'));
-      return; // 삭제 중단
-    }
-
     let idx = -1;
     let newFavorite: Array<UserFavorite> = favoriteItems.filter((value, index) => {
       if(value.menuId === item?.menuId){
@@ -88,16 +80,18 @@ export const FavoriteWrapper = ({
       }
       return value.menuId !== item?.menuId;
     });
-
     useStore.getState().UserStore.setUserFavorite(newFavorite);
     setFavoriteItems(newFavorite);
-
     if(idx > -1){
       goToSlide(idx);
     }
-
+    if(menuIds.length <= 1){
-    if(item?.menuId){
+      showAlert('바로가기는 1개이상 설정 필요 합니다.');
-      deleteMenuId(item?.menuId);
+    }
+    else{
+      if(item?.menuId){
+        deleteMenuId(item?.menuId);
+      }
     }
   };
 
@@ -168,31 +162,16 @@ export const FavoriteWrapper = ({
 
   useEffect(() => {
     getFavoriteList();
-
     if(usingType === 'home'){
       goToSlide('first');
     }
-    else if(usingType === 'menu'){
+    else if(usingType === 'menu' && !isFirst){
-      // 메뉴가 새로 열렸는지 확인 (prevMenuOn: false -> menuOn: true)
+      setTimeout(() => {
-      const isMenuJustOpened = !prevMenuOn && menuOn;
+        goToSlide('last');
-
+      }, 100);
-      if(isMenuJustOpened || isFirst){
-        // 메뉴가 새로 열렸거나 처음 렌더링 시 맨 앞으로
-        setTimeout(() => {
-          goToSlide('first');
-        }, 100);
-      }
-      else if(changeMenuId){
-        // 즐겨찾기 아이템 추가/삭제 시 마지막으로 (변경된 항목 보여주기)
-        setTimeout(() => {
-          goToSlide('last');
-        }, 100);
-      }
     }
-
     setIsFirst(false);
-    setPrevMenuOn(menuOn);
+  }, [changeMenuId, favoriteEditOn]);
-  }, [changeMenuId, favoriteEditOn, menuOn]);
 
   return (
     <>

src/entities/transaction/model/types.ts

@@ -667,6 +667,7 @@ export interface AllTransactionCancelResponse {
 export interface AllTransactionCancelInfoParams {
   serviceCode: string;
   tid: string;
+  mid: string;
 };
 export interface AllTransactionCancelInfoResponse {
   debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;

src/entities/transaction/ui/all-transaction-cancel.tsx

@@ -0,0 +1,277 @@
+import { motion } from 'framer-motion';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from "@/entities/common/model/constant";
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useTranslation } from 'react-i18next';
+import { AllTransactionAllCancel } from './all-transaction-all-cancel';
+import { AllTransactionPartCancel } from './all-transaction-part-cancel';
+import { AllTransactionCancelInfoParams, AllTransactionCancelInfoResponse, AllTransactionCancelParams, AllTransactionCancelResponse, CancelTabKeys, DebtPreventionCancelDisplayInfo, DebtPreventionCancelRequestInfo } from '../model/types';
+import { useEffect, useState } from 'react';
+import { useAllTransactioCancleMutation } from '../api/use-all-transaction-cancel-mutation';
+import { useAllTransactioCancleInfoMutation } from '../api/use-all-transaction-cancel-info-mutation';
+import { snackBar } from '@/shared/lib';
+import { useStore } from '@/shared/model/store';
+
+export interface AllTransactionCancelProps {
+  cancelOn: boolean;
+  setCancelOn: (cancelOn: boolean) => void;
+  serviceCode: string;
+  tid: string;
+};
+export const AllTransactionCancel = ({
+  cancelOn,
+  setCancelOn,
+  serviceCode,
+  tid
+}: AllTransactionCancelProps) => {
+  const { t } = useTranslation();
+  const userInfo = useStore.getState().UserStore.userInfo;
+  const userMid = useStore.getState().UserStore.mid;
+  
+  const [tabAction, setTabAction] = useState<CancelTabKeys>(CancelTabKeys.All);
+  const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(null);
+  const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null | undefined>(null);
+  const [goodsVat, setGoodsVat] = useState<number | null>(null);
+  const [isCompoundTax, setIsCompoundTax] = useState<boolean>(false);
+  const [isConditionalVatAutoCalcMerchant, setIsConditionalVatAutoCalcMerchant] = useState<boolean>(false);
+  const [isNpg, setIsNpg] = useState<boolean>(false);
+  const [isVatAutoCalcMerchant, setIsVatAutoCalcMerchant] = useState<boolean>(false);
+  const [isVatDisplayed, setIsVatDisplayed] = useState<boolean>(false);
+  const [partCancelCl, setPartCancelCl] = useState<boolean>(false);
+  const [remainAmount, setRemainAmount] = useState<number>(0);
+  const [serviceAmount, setServiceAmount] = useState<number | null>(null);
+  const [supplyAmount, setSupplyAmount] = useState<number | null>(null);
+  const [taxFreeAmount, setTaxFreeAmount] = useState<number | null>(null);
+  const [vatAutoCalcSummary, setVatAutoCalcSummary] = useState<number>(0);
+  const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
+  const [cancelPassword, setCancelPassword] = useState<string>('');
+  const [cancelSupplyAmount, setCancelSupplyAmount] = useState<number>(0);
+  const [cancelGoodsVat, setCancelGoodsVat] = useState<number>(0);
+  const [cancelTaxFreeAmount, setCancelTaxFreeAmount] = useState<number>(0);
+  const [cancelServiceAmount, setCancelServiceAmount] = useState<number>(0);
+
+  const [requestSuccess, setRequestSuccess] = useState<boolean>(true);
+
+  const [bankCode, setBankCode] = useState<string>('');
+  const [accountNo, setAccountNo] = useState<string>('');
+  const [accountHolder, setAccountHolder] = useState<string>('');
+
+  const [cancelPreventBondOn, setCancelPreventBondOn] = useState<boolean>(false);
+
+  const { mutateAsync: transactionCancel } = useAllTransactioCancleMutation();
+  const { mutateAsync: allTransactionCancelInfo } = useAllTransactioCancleInfoMutation();
+  
+  const callCancelInfo = () => {
+    let params: AllTransactionCancelInfoParams = {
+      serviceCode: serviceCode,
+      tid: tid,
+      mid: userMid
+    };
+    allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
+      if(rs.debtPreventionCancelDisplayInfo !== null){
+        setCancelPreventBondOn(true);
+      }
+      else{
+        setDebtPreventionCancelDisplayInfo(rs.debtPreventionCancelDisplayInfo);
+        setDebtPreventionCancelRequestInfo(rs.debtPreventionCancelRequestInfo);
+        setGoodsVat(rs.goodsVat);
+        setIsCompoundTax(rs.isCompoundTax);
+        setIsConditionalVatAutoCalcMerchant(rs.isConditionalVatAutoCalcMerchant);
+        setIsNpg(rs.isNpg);
+        setIsVatAutoCalcMerchant(rs.isVatAutoCalcMerchant);
+        setIsVatDisplayed(rs.isVatDisplayed);
+        setPartCancelCl(rs.partCancelCl);
+        setRemainAmount(rs.remainAmount);
+        setServiceAmount(rs.serviceAmount);
+        setSupplyAmount(rs.supplyAmount);
+        setTaxFreeAmount(rs.taxFreeAmount);
+        setVatAutoCalcSummary(rs.vatAutoCalcSummary);
+        
+        if(!partCancelCl){
+          setTotalCancelAmount(rs.remainAmount);
+        }
+        else{
+          setTotalCancelAmount(0);
+        }
+      }
+      
+      // partCancelCl == true ==> 부분취소 버튼 활성화
+      // isCompoundTax == true ==> 부분취소의 복합과세 노출
+      // debtPreventionCancelDisplayInfo != null => 입금 후 취소 페이지 노출
+      // [취소신청]버튼 클릭시
+      // debtPreventionCancelDisplayInfo.isCancel == true => 취소api호출
+      // debtPreventionCancelRequestInfo 이 값 통쨰로 변조없이 그대로 api에 전달
+      // debtPreventionCancelDisplayInfo.isCancel == false => 얼럿만 띄우고 취소요청하면안됨
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
+      
+    }).catch((e: any) => {
+      if(e.response?.data?.error?.message){
+        snackBar(e.response?.data?.error?.message);
+        return;
+      }
+    }); 
+  };
+
+  const callTransactionCancel = () => {
+    if(debtPreventionCancelDisplayInfo?.isCancel === false){
+      snackBar('취소요청이 불가능 합니다.');
+    }
+    else{
+      let transactionCancelParams: AllTransactionCancelParams = {
+        tid: tid,
+        cancelAmount: totalCancelAmount || 0,
+        cancelPassword: cancelPassword,
+        bankCode: bankCode,
+        accountNo: accountNo,
+        accountHolder: accountHolder,
+        supplyAmount: (!!partCancelCl)? cancelSupplyAmount: (supplyAmount || 0),
+        goodsVatAmount: (!!partCancelCl)? cancelGoodsVat: (goodsVat || 0),
+        taxFreeAmount: (!!partCancelCl)? cancelTaxFreeAmount: (taxFreeAmount || 0),
+        serviceAmount: (!!partCancelCl)? cancelServiceAmount: (serviceAmount || 0),
+        clientIp: userInfo.clientAddressIP,
+        partCancelCl: partCancelCl,
+        isNpg: isNpg,
+        serviceCode: serviceCode
+      };
+      transactionCancel(transactionCancelParams).then((rs: AllTransactionCancelResponse) => {
+        console.log(rs);
+        setRequestSuccess(true);
+      }).catch((e: any) => {
+        setRequestSuccess(false);
+        if(e.response?.data?.error?.message){
+          snackBar(e.response?.data?.error?.message);
+          return;
+        }
+      });
+    }
+    
+  };
+
+  const onClickToClose = () => {
+    setCancelOn(false);
+  };
+  const onClickToChangeTab = (tab: CancelTabKeys) => {
+    setTabAction(tab);
+  };
+
+  useEffect(() => {
+    callCancelInfo();
+  }, []);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (cancelOn)? '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('transaction.cancelTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
+            </div>
+          </div>
+          <div 
+            className="subTab"
+            style={{ top: '50px' }}
+          >
+            <button
+              className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
+              onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
+            >{t('transaction.fullCancel')}</button>
+            { !!partCancelCl &&
+              <button
+                className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
+                onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
+              >{t('transaction.partialCancel')}</button>
+            }
+          </div>
+          <div 
+            className="option-list pb-86"
+            style={{ marginTop: '81px'}}
+          >
+            { (tabAction === CancelTabKeys.All) &&
+              <AllTransactionAllCancel
+                serviceCode={ serviceCode }
+                debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
+                debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
+                goodsVat={ goodsVat }
+                isCompoundTax={ isCompoundTax }
+                isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
+                isNpg={ isNpg }
+                isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
+                isVatDisplayed={ isVatDisplayed }
+                partCancelCl={ partCancelCl }
+                remainAmount={ remainAmount }
+                serviceAmount={ serviceAmount }
+                supplyAmount={ supplyAmount }
+                taxFreeAmount={ taxFreeAmount }
+                vatAutoCalcSummary={ vatAutoCalcSummary }
+                cancelPassword={ cancelPassword }
+                setCancelPassword={ setCancelPassword }
+                bankCode={ bankCode }
+                setBankCode={ setBankCode }
+                accountNo={ accountNo }
+                setAccountNo={ setAccountNo }
+                accountHolder={ accountHolder }
+                setAccountHolder={ setAccountHolder }
+                requestSuccess={ requestSuccess }
+                totalCancelAmount={ totalCancelAmount }
+              ></AllTransactionAllCancel>
+            }
+            { !!partCancelCl && (tabAction === CancelTabKeys.Part) &&
+              <AllTransactionPartCancel
+                serviceCode={ serviceCode }
+                debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
+                debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
+                goodsVat={ goodsVat }
+                isCompoundTax={ isCompoundTax }
+                isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
+                isNpg={ isNpg }
+                isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
+                isVatDisplayed={ isVatDisplayed }
+                partCancelCl={ partCancelCl }
+                remainAmount={ remainAmount }
+                serviceAmount={ serviceAmount }
+                supplyAmount={ supplyAmount }
+                taxFreeAmount={ taxFreeAmount }
+                vatAutoCalcSummary={ vatAutoCalcSummary }
+                cancelPassword={ cancelPassword }
+                setCancelPassword={ setCancelPassword }
+                bankCode={ bankCode }
+                setBankCode={ setBankCode }
+                accountNo={ accountNo }
+                setAccountNo={ setAccountNo }
+                accountHolder={ accountHolder }
+                setAccountHolder={ setAccountHolder }
+                cancelSupplyAmount={ cancelSupplyAmount }
+                setCancelSupplyAmount={ setCancelSupplyAmount }
+                cancelGoodsVat={ cancelGoodsVat }
+                setCancelGoodsVat={ setCancelGoodsVat }
+                cancelTaxFreeAmount={ cancelTaxFreeAmount}
+                setCancelTaxFreeAmount={ setCancelTaxFreeAmount }
+                cancelServiceAmount={ cancelServiceAmount }
+                setCancelServiceAmount={ setCancelServiceAmount }
+                requestSuccess={ requestSuccess }
+                totalCancelAmount={ totalCancelAmount }
+                setTotalCancelAmount={ setTotalCancelAmount }
+              ></AllTransactionPartCancel>
+            }
+          </div>
+        </div>
+        <div className="apply-row">
+          <button
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => callTransactionCancel() }
+          >{t('transaction.submit')}</button>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/transaction/ui/detail/all-transaction-detail.tsx

@@ -33,6 +33,7 @@ import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
+import { AllTransactionCancel } from '../all-transaction-cancel';
 
 export interface AllTransactionDetailProps {
   detailOn: boolean;
@@ -64,6 +65,7 @@ export const AllTransactionDetail = ({
   const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
   const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);
 
+  const [cancelOn, setCancelOn] = useState<boolean>(false);
   const { mutateAsync: allTransactionDetail } = useAllTransactionDetailMutation();
   
   const callDetail = () => {
@@ -85,6 +87,9 @@ export const AllTransactionDetail = ({
       }
     });
   };
+  const onClickToMoveCancel = () => {
+    setCancelOn(true);
+  };
   useEffect(() => {
     if(!!detailOn && serviceCode && tid){
       callDetail();
@@ -117,8 +122,7 @@ export const AllTransactionDetail = ({
             afterLeave={ unmount }
             open={ isOpen }
             onClose={ close }
-            onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
+            onConfirmClick={ onClickToMoveCancel }
-            // onConfirmClick={ () => callCancelInfo() }
             message={ msg }
             buttonLabel={[t('common.cancel'), t('common.confirm')]}
           />
@@ -247,6 +251,14 @@ export const AllTransactionDetail = ({
           >{t('transaction.cancelTransaction')}</button>
         </div>
       </motion.div>
+      { !!cancelOn &&
+        <AllTransactionCancel
+          cancelOn={ cancelOn }
+          setCancelOn={ setCancelOn }
+          serviceCode={ serviceCode }
+          tid={ tid }
+        ></AllTransactionCancel>
+      }
     </>
   );
 };

src/pages/transaction/all-transaction/cancel-page.tsx

@@ -29,6 +29,7 @@ export const AllTransactionCancelPage = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const userInfo = useStore.getState().UserStore.userInfo;
+  const userMid = useStore.getState().UserStore.mid;
   const tid = location.state.tid;
   const serviceCode = location.state.serviceCode;
 
@@ -73,7 +74,8 @@ export const AllTransactionCancelPage = () => {
   const callCancelInfo = () => {
     let params: AllTransactionCancelInfoParams = {
       serviceCode: serviceCode,
-      tid: tid
+      tid: tid,
+      mid: userMid
     };
     allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
       if(rs.debtPreventionCancelDisplayInfo !== null){