신용카드 관련 하단 정보

src/entities/additional-service/model/fund-account/types.ts

@@ -213,7 +213,16 @@ export interface ExtensionFundAccountBalanceParams {
   mid: string;
 };
 export interface ExtensionFundAccountBalanceResponse {
-  balance: number;
+  status: boolean;
+  error?: {
+    root? : string;
+    errorKey?: string;
+    message?: string;
+  } 
+  data?: {
+    balance?: number;
+  }
+
 };
 
 // 입금확인증 다운로드

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

@@ -17,6 +17,7 @@ import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
 import { DepositReceiptSample } from '@/entities/common/ui/deposit-receipt-sample';
 import { DepositInfo } from '@/entities/transaction/model/types';
+import { useDownloadBottomSheetOn2Store } from '@/shared/model/store';
 
 export interface FundAccountResultDetailProps {
   detailOn: boolean;
@@ -31,10 +32,9 @@ export const FundAccountResultDetail = ({
   tid
 }: FundAccountResultDetailProps) => {
   const { t } = useTranslation();
+  const { downloadBottomSheetOn2, setDownloadBottomSheetOn2 } = useDownloadBottomSheetOn2Store();
 
   const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
-
-  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
   const [depositReceiptSampleOn, setDepositReceiptSampleOn] = useState<boolean>(false);
   const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
   const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation();
@@ -57,7 +57,7 @@ export const FundAccountResultDetail = ({
   };
 
   const onClickToOpenDownloadBottomSheet = () => {
-    setDownloadBottomSheetOn(true);
+    setDownloadBottomSheetOn2(true);
   };
 
   const onRequestDownload = (
@@ -200,17 +200,17 @@ export const FundAccountResultDetail = ({
             </ul>
           </div>
         </div>
-        {!!downloadBottomSheetOn &&
+        {!!downloadBottomSheetOn2 &&
           <DownloadBottomSheet
-            bottomSheetOn={downloadBottomSheetOn}
-            setBottomSheetOn={setDownloadBottomSheetOn}
+            bottomSheetOn={downloadBottomSheetOn2}
+            setBottomSheetOn={setDownloadBottomSheetOn2}
             imageMode={true}
             emailMode={true}
             sendRequest={onRequestDownload}
           ></DownloadBottomSheet>
         }
       </motion.div>
-      { depositReceiptSampleOn && 
+      {depositReceiptSampleOn &&
         <DepositReceiptSample
           depositReceiptSampleOn={depositReceiptSampleOn}
           setDepositReceiptSampleOn={setDepositReceiptSampleOn}

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

@@ -194,7 +194,17 @@ export const FundAccountTransferListWrap = () => {
       mid: mid
     };
     extensionFundAccountBalance(params).then((rs: ExtensionFundAccountBalanceResponse) => {
-      setBalance(rs.balance);
+      if (rs.status) {
+        if (!rs.data?.balance) {
+          setBalance(0);
+        } else {
+          setBalance(balance)
+        }
+      } else {
+        const errorMessage = rs.error?.message || t('additionalService.fundAccount.failRequestBalance');
+        setBalance(0);
+        snackBar(errorMessage)
+      }
     }).catch((e: any) => {
       if (e.response?.data?.error?.message) {
         snackBar(e.response?.data?.error?.message);

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

@@ -13,6 +13,7 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { snackBar } from '@/shared/lib';
 import { DepositReceiptSample } from '@/entities/common/ui/deposit-receipt-sample';
 import { DepositInfo } from '@/entities/transaction/model/types';
+import { useDownloadBottomSheetOn2Store } from '@/shared/model/store';
 
 export interface PayoutDetailProps {
     detailOn: boolean;
@@ -30,10 +31,9 @@ export const PayoutDetail = ({
     depositAmount
 }: PayoutDetailProps) => {
     const { t } = useTranslation();
-
+    const { downloadBottomSheetOn2, setDownloadBottomSheetOn2 } = useDownloadBottomSheetOn2Store();
     const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
 
-    const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
     const [depositReceiptSampleOn, setDepositReceiptSampleOn] = useState<boolean>(false);
     const [depositReceiptData, setDepositReceiptData] = useState<ExtensionPayoutDetailDownloadCertificateResponse>();
 
@@ -60,7 +60,7 @@ export const PayoutDetail = ({
             showAlert(t('common.nopermission'));
             return;
         }
-        setDownloadBottomSheetOn(true);
+        setDownloadBottomSheetOn2(true);
     };
 
     const onRequestDownload = (
@@ -208,10 +208,10 @@ export const PayoutDetail = ({
                         </ul>
                     </div>
                 </div>
-                {!!downloadBottomSheetOn &&
+                {!!downloadBottomSheetOn2 &&
                     <DownloadBottomSheet
-                        bottomSheetOn={downloadBottomSheetOn}
-                        setBottomSheetOn={setDownloadBottomSheetOn}
+          bottomSheetOn={ downloadBottomSheetOn2 }
+          setBottomSheetOn={ setDownloadBottomSheetOn2 }
                         imageMode={true}
                         emailMode={true}
                         sendRequest={onRequestDownload}

src/entities/home/ui/day-status-box-container1.tsx

@@ -10,7 +10,7 @@ import {
 } from '../model/types';
 import { useNavigate } from '@/shared/lib/hooks';
 import { PATHS } from '@/shared/constants/paths';
-import { useStore } from '@/shared/model/store';
+import { useNewMidStore, useStore } from '@/shared/model/store';
 import { useTranslation } from 'react-i18next';
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
@@ -19,9 +19,9 @@ import { snackBar } from '@/shared/lib';
 export const BoxContainer1 = () => {
   const { navigate } = useNavigate();
   const { t, i18n } = useTranslation();
-  const userMid = useStore.getState().UserStore.mid;
+  const { newMid } = useNewMidStore();
   
-  const [mid, setMid] = useState<string>(userMid);
+  const [mid, setMid] = useState<string>();
   const [searchDate, setSearchDate] = useState<string>(moment().format('YYYYMMDD'));
 
   const [sales, setSales] = useState<Sales>();
@@ -84,8 +84,19 @@ export const BoxContainer1 = () => {
   };
     
   useEffect(() => {
-    callToday();
+    const userMid = useStore.getState().UserStore.mid;
+    setMid(userMid);
   }, []);
+  useEffect(() => {
+    if(mid){
+      callToday();
+    }
+  }, [mid]);
+  useEffect(() => {
+    if(!!newMid){
+      setMid(newMid);
+    }
+  }, [newMid]);
   
   return (
     <>

src/entities/home/ui/day-status-box-container2.tsx

@@ -6,7 +6,7 @@ import { useHomeOverviewMutation } from '../api/use-home-overview-mutation';
 import { useHomeMonthwMutation } from '../api/use-home-month-mutation';
 import { useNavigate } from '@/shared/lib/hooks';
 import { PATHS } from '@/shared/constants/paths';
-import { useStore } from '@/shared/model/store';
+import { useNewMidStore, useStore } from '@/shared/model/store';
 import { useTranslation } from 'react-i18next';
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
@@ -15,9 +15,9 @@ import { snackBar } from '@/shared/lib';
 export const BoxContainer2 = () => {
   const { navigate } = useNavigate();
   const { t, i18n } = useTranslation();
-  const userMid = useStore.getState().UserStore.mid;
+  const { newMid } = useNewMidStore();
   
-  const [mid, setMid] = useState<string>(userMid);
+  const [mid, setMid] = useState<string>();
   const [searchMonth, setSearchMonth] = useState<string>(moment().format('YYYYMM'));
   const [searchDate, setSearchDate] = useState<string>(moment().format('YYYYMMDD'));
   
@@ -89,9 +89,20 @@ export const BoxContainer2 = () => {
   };
 
   useEffect(() => {
-    callMonth();
-    callOverview();
+    const userMid = useStore.getState().UserStore.mid;
+    setMid(userMid);
   }, []);
+   useEffect(() => {
+    if(!!mid){
+      callMonth();
+      callOverview();
+    }
+  }, [mid]);
+  useEffect(() => {
+    if(!!newMid){
+      setMid(newMid);
+    }
+  }, [newMid]);
 
   const onClickToNavigate = (path: string) => {
     if(path === 'allTransaction'){

src/entities/payment/ui/card-commission-bottom-sheet.tsx

@@ -1,3 +1,4 @@
+import * as _ from 'lodash-es';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
@@ -43,37 +44,57 @@ export const CardCommissionBottomSheet = ({
   feeRate
 }: CardCommissionBottomSheetProps) => {
   const { t } = useTranslation();
+  // 01: 비씨, 02: KB국민, 03: 하나(외환), 04: 삼성, 06: 신한, 
+  // 07: 현대, 08: 롯데, 11: 씨티, 12: NH채움, 16: 하나
+  // const useCodes = ['01', '02', '03', '04', '06', '07', '08', '11', '12', '16'];
   const cardList = useStore.getState().CommonStore.creditCardList;
-  console.log(cardList);
   let newCardList = cardList.filter((value, index) => value.code2 === 'pur');
+  // let newCardList = cardList.filter((value, index) => useCodes.includes(value.code1));
 
+  const [newGeneralTabItems, setNewGeneralTabItems] = useState<Record<string, any>>({});
+  const [newInstallmentTabItems, setNewInstallmentTabItems] = useState<Array<InstallmentTabItems> | undefined>();
+  const [newMoneyPointTabItems, setNewMoneyPointTabItems] = useState<Array<MoneyPointTabItems> | undefined>();
 
   const [onTab, setOnTab] = useState<CardCommissionTabKey>(CardCommissionTabKey.GENERAL);
   const [selectedCard, setSelectedCard] = useState<string>(cardList[0].desc1);
-  const [leftTitle, setLeftTitle] = useState<string>('');
-  const [leftText, setLeftText] = useState<string>('');
+  const [moneyPointTitle, setMoneyPointTitle] = useState<string>('');
+  const [moneyPointText, setMoneyPointText] = useState<string>('');
+  const [moneyPointRate, setMoneyPointRate] = useState<string>();
 
   const onClickToClose = () => {
     setCardCommissionBottomSheetOn(false);
   };
   
+  
   const getItemList = (key?: CardCommissionTabKey) => {
     let rs = [];
     if(key === CardCommissionTabKey.GENERAL){
       for(let i=0;i<newCardList.length;i++){
-        rs.push(
-          <div 
-            key={`card-fee-row-${i}`}
-            className="card-fee-row"
-          >
-            <span>{ newCardList[i].desc1 }</span>
-            <span>2.000%</span>
-          </div>
-        );
+        let cardItem = newCardList[i];
+        let cardCompany = cardItem.desc1;
+        if(newGeneralTabItems.hasOwnProperty(cardCompany)){
+          let feeRate = newGeneralTabItems[cardCompany];
+          rs.push(
+            <div 
+              key={`card-fee-row-${i}`}
+              className="card-fee-row"
+            >
+              <span>{ cardCompany }</span>
+              <span>{ feeRate+'%' || ''}</span>
+            </div>
+          );
+        }
+        
       }
     }
     return rs;
   }
+  const getMoneyPointRate = (itemKey: string) => {
+    let items = moneyPointTabItems?.filter((value, index) => {
+      return value.category === itemKey;
+    });
+    setNewMoneyPointTabItems(items);
+  };
 
   useEffect(() => {
     // 탭 이동시 할일
@@ -81,22 +102,43 @@ export const CardCommissionBottomSheet = ({
   
   useEffect(() => {
     if(!!itemKey){
+      getMoneyPointRate(itemKey);
       if(itemKey === 'kakaoPay'){
-        setLeftTitle('구분');
-        setLeftText('카카오머니');
+        setMoneyPointTitle('구분');
+        setMoneyPointText('카카오머니');
       }
       else if(itemKey === 'naverPay'){
-        setLeftTitle('할부개월');
-        setLeftText('네이버포인트');
+        setMoneyPointTitle('할부개월');
+        setMoneyPointText('네이버포인트');
+        
       }
       else if(itemKey === 'tossPay'){
-        setLeftTitle('할부개원');
-        setLeftText('토스머니');
+        setMoneyPointTitle('할부개원');
+        setMoneyPointText('토스머니');
       }
-      
     }
   }, [itemKey]);
 
+  const getInstallmentTabItems = () => {
+    let items = installmentTabItems?.filter((value, index) => {
+      return value.cardCompany === selectedCard;
+    });
+    setNewInstallmentTabItems(items);
+  }
+
+  useEffect(() => {
+    if(onTab === CardCommissionTabKey.NO_INTEREST && !!selectedCard){
+      getInstallmentTabItems();
+    }
+  }, [selectedCard]);
+
+  useEffect(() => {
+    if(!!generalTabItems){
+      let objectGeneralTabItems = _.chain(generalTabItems).keyBy('cardCompany').mapValues('feeRate').value();
+      setNewGeneralTabItems(objectGeneralTabItems);
+    }
+  }, []);
+
   return (
     <>
       { cardCommissionBottomSheetOn &&
@@ -172,11 +214,13 @@ export const CardCommissionBottomSheet = ({
                       onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCard(e.target.value) }
                     >
                       { 
-                        newCardList.map((value, index) => (
+                        newCardList.filter((value1, index1) => {
+                          return newGeneralTabItems.hasOwnProperty(value1.desc1)
+                        }).map((value2, index2) => (
                           <option 
-                            key={ `card-list-${value.desc1}`}
-                            value={ value.desc1 }
-                          >{ value.desc1 }</option>
+                            key={ `card-list-${value2.desc1}`}
+                            value={ value2.desc1 }
+                          >{ value2.desc1 }</option>
                         ))
                       }
                     </select>
@@ -188,42 +232,13 @@ export const CardCommissionBottomSheet = ({
                     <span className="th-left">{t('payment.installmentMonths')}</span>
                     <span className="th-right">{t('payment.commission')}</span>
                   </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 2 })}</span>
-                    <span>2.000%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 3 })}</span>
-                    <span>3.100%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 4 })}</span>
-                    <span>4.400%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 5 })}</span>
-                    <span>5.200%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 6 })}</span>
-                    <span>6.000%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 7 })}</span>
-                    <span>6.600%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 8 })}</span>
-                    <span>7.500%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 9 })}</span>
-                    <span>8.000%</span>
-                  </div>
-                  <div className="card-fee-row">
-                    <span>{t('payment.months', { count: 10 })}</span>
-                    <span>9.000%</span>
-                  </div>
+                  { !!newInstallmentTabItems && newInstallmentTabItems.map((value, index) => (
+                      <div className="card-fee-row">
+                        <span>{t('payment.months', { count: parseInt(value.installmentMonth.substring(0, 1)) })}</span>
+                        <span>{ value.feeRate+'%' || '' }</span>
+                      </div>  
+                    ))
+                  }
                 </div>
               </>
             }
@@ -231,13 +246,16 @@ export const CardCommissionBottomSheet = ({
             { (onTab === CardCommissionTabKey.MONEY_POINT) &&
               <>
                 <div className="card-fee-list-header">
-                  <span className="th-left">{ leftTitle }</span>
+                  <span className="th-left">{ moneyPointTitle }</span>
                   <span className="th-right">{t('payment.commission')}</span>
                 </div>
-                <div className="card-fee-row">
-                  <span>{ leftText }</span>
-                  <span>2.000%</span>
-                </div>
+                { !!newMoneyPointTabItems && newMoneyPointTabItems.map((value, index) => (
+                    <div className="card-fee-row">
+                      <span>{ value.category }</span>
+                      <span>{ value.feeRate+'%' || '' }</span>
+                    </div>
+                  ))
+                }
               </>
             }
           </div>

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

@@ -58,7 +58,8 @@ export const InfoWrap = () => {
   
   const [payType, setPayType] = useState<number>(2);
   const [itemKey, setItemKey] = useState<string>('');
-  const [settlementPeriod, setSettlementPeriod] = useState<string>();
+  const [cardSettlementPeriod, setCardSettlementPeriod] = useState<string>();
+  const [nonCardSettlementPeriod, setNonCardSettlementPeriod] = useState<string>();
   const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
   const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
   const [moneyPointTabItems, setMoneyPointTabItems] = useState<Array<MoneyPointTabItems>>([]);
@@ -175,7 +176,7 @@ export const InfoWrap = () => {
     };
     
     paymentCard(params).then((rs: PaymentCardResponse) => {
-      setSettlementPeriod(rs.settlementPeriod);
+      setCardSettlementPeriod(rs.settlementPeriod);
       setGeneralTabItems(rs.generalTab.items);
       setInstallmentTabItems(rs.installmentTab.items);
       setMoneyPointTabItems(rs.moneyPointTab.items);
@@ -193,7 +194,7 @@ export const InfoWrap = () => {
     };
     
     paymentNonCard(params).then((rs: PaymentNonCardResponse) => {
-      setSettlementPeriod(rs.settlementPeriod);
+      setNonCardSettlementPeriod(rs.settlementPeriod);
       setFeeRanges(rs.accountTransferData.feeRanges);
       setBankFees(rs.accountTransferData.bankFees);
       setPaymentFees(rs.mobilePaymentData.paymentFees);
@@ -297,7 +298,7 @@ export const InfoWrap = () => {
           setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
           payType={ payType }
           itemKey={ itemKey }
-          settlementPeriod={ settlementPeriod }
+          settlementPeriod={ cardSettlementPeriod }
           generalTabItems={ generalTabItems }
           installmentTabItems={ installmentTabItems }
           moneyPointTabItems= { moneyPointTabItems }
@@ -311,6 +312,7 @@ export const InfoWrap = () => {
       { !!transferCommissionBottomSheetOn &&
         <TransferCommissionBottomSheet
           itemKey={ itemKey }
+          settlementPeriod={ nonCardSettlementPeriod }
           transferCommissionBottomSheetOn={ transferCommissionBottomSheetOn }
           setTransferCommissionBottomSheetOn={ setTransferCommissionBottomSheetOn }
         ></TransferCommissionBottomSheet>

src/entities/transaction/ui/section/amount-info-section.tsx

@@ -278,11 +278,6 @@ export const AmountInfoSection = ({
           tid: tid
         };
         cashReceiptReceiptDownload(params).then((rs: CashReceiptReceiptDownloadResponse) => {
-          /*
-          if(rs?.merchantInfo){
-            rs.merchantInfo.merchantName = '나이스페이먼츠';
-          }
-          */
           setReceiptIssueInfo(rs?.issueInfo);
           setReceiptMerchantInfo(rs?.merchantInfo);
           setReceiptTransactionInfo(rs?.transactionInfo);

src/entities/vat-return/ui/section/amount-section.tsx

@@ -10,7 +10,7 @@ import { useVatReturnTaxInvoiceMutation } from '../../api/use-vat-return-tax-inv
 import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample';
 import { useVatReturnTaxInvoiceSendEmailMutation } from '../../api/use-vat-return-tax-invoice-send-email-mutation';
 import { snackBar } from '@/shared/lib';
-import { useDownloadBottomSheetOnStore } from '@/shared/model/store';
+import { useDownloadBottomSheetOn2Store } from '@/shared/model/store';
 
 export interface AmountSectionProps {
   taxInvoiceNumber: string;
@@ -23,7 +23,7 @@ export const AmountSection = ({
 }: AmountSectionProps) => {
   const { t, i18n } = useTranslation();
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const { downloadBottomSheetOn, setDownloadBottomSheetOn } = useDownloadBottomSheetOnStore();
+  const { downloadBottomSheetOn2, setDownloadBottomSheetOn2 } = useDownloadBottomSheetOn2Store();
 
   const [taxInvoiceSampleOn, setTaxInvoiceSampleOn] = useState<boolean>(false);
 
@@ -95,7 +95,7 @@ export const AmountSection = ({
   };
 
   const onClickToOpenDownloadBottomSheet = () => {
-    setDownloadBottomSheetOn(true);
+    setDownloadBottomSheetOn2(true);
   };
 
   return (
@@ -151,10 +151,10 @@ export const AmountSection = ({
           >{t('vatReturn.taxInvoice')}</button>
         </div>
       </div>
-      { !!downloadBottomSheetOn &&
+      { !!downloadBottomSheetOn2 &&
         <DownloadBottomSheet
-          bottomSheetOn={ downloadBottomSheetOn }
-          setBottomSheetOn={ setDownloadBottomSheetOn }
+          bottomSheetOn={ downloadBottomSheetOn2 }
+          setBottomSheetOn={ setDownloadBottomSheetOn2 }
           imageMode={ true }
           emailMode={ true }
           sendRequest={ onRequestDownload }

src/locales/en.json

@@ -1131,6 +1131,7 @@
             "registrationSuccess": "Transfer registration successful.",
             "registrationFailed": "Transfer registration failed.",
             "registrationError": "An error occurred during transfer registration.",
+            "failReqeustBalance": "An error occured during request balance",
             "register": "Register",
             "transferDetailTitle": "Fund Transfer Detail",
             "detailInfo": "Detail Information",

src/locales/ko.json

@@ -1131,6 +1131,7 @@
             "registrationSuccess": "이체등록을 성공하였습니다.",
             "registrationFailed": "이체등록이 실패하였습니다.",
             "registrationError": "이체등록 중 오류가 발생했습니다.",
+            "failReqeustBalance": "잔액을 불러오는데 실패했습니다.",
             "register": "등록",
             "transferDetailTitle": "자금이체 상세",
             "detailInfo": "상세 정보",

src/pages/additional-service/key-in-payment/requeset-page.tsx

@@ -258,8 +258,11 @@ export const KeyInPaymentRequestPage = () => {
 
                                 <div className="billing-row">
                                     <div className="billing-label">{t('additionalService.keyIn.cardNumber')} <span>*</span></div>
+                                </div>
+                                <div className="billing-row" style={{ gap: '10px'}}>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo1}
                                             allowEmptyFormatting
                                             valueIsNumericString
@@ -271,6 +274,7 @@ export const KeyInPaymentRequestPage = () => {
                                     </div>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo2}
                                             allowEmptyFormatting
                                             valueIsNumericString
@@ -282,6 +286,7 @@ export const KeyInPaymentRequestPage = () => {
                                     </div>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo3}
                                             allowEmptyFormatting
                                             valueIsNumericString
@@ -293,6 +298,7 @@ export const KeyInPaymentRequestPage = () => {
                                     </div>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo4}
                                             allowEmptyFormatting
                                             valueIsNumericString

src/pages/support/notice/list-page.tsx

@@ -168,6 +168,7 @@ export const NoticeListPage = () => {
                     placeholder={ t('support.notice.searchPlaceholder') }
                     value={ searchKeyword }
                     onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
+                    onBlur={ onClickToAction }
                     onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
                       if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
                         onClickToAction();

src/shared/constants/local-storage.ts

@@ -15,4 +15,5 @@ export enum StorageKeys {
   AppVersion = 'APP_VERSION',
   LogOut = 'LOGOUT',
   i18nextLng = 'i18nextLng',
+  UserMid = 'USER_MID',
 };

src/shared/model/store.ts

@@ -6,6 +6,10 @@ import { createUserInfoStore, UserInfoState } from '@/entities/user/model/store'
 import { createBannerInfoStore, BannerInfoState, createCommonStore, CommonState } from '@/entities/common/model/store';
 import { StorageKeys } from '@/shared/constants/local-storage';
 
+export interface NewMidStore {
+  newMid: string;
+  setNewMid: (newMid: string) => void;
+};
 export interface DownloadBottomSheetOnStore {
   downloadBottomSheetOn: boolean;
   setDownloadBottomSheetOn: (downloadBottomSheetOn: boolean) => void;
@@ -46,6 +50,15 @@ export interface MenuIdsStore {
   deleteMenuId: (menuId: number) => void;
 };
 
+export const useNewMidStore = create<NewMidStore>((set) => ({
+  newMid: '',
+  setNewMid: (newMid: string) => {
+    set((state: {newMid: string}) => ({
+      newMid: (state.newMid = newMid)
+    }));
+  }
+}));
+
 export const useDownloadBottomSheetOnStore = create<DownloadBottomSheetOnStore>((set) => ({
   downloadBottomSheetOn: false,
   setDownloadBottomSheetOn: (downloadBottomSheetOn: boolean) => {

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

@@ -12,7 +12,9 @@ main {
 .align-left {
   text-align: left !important;
 }
-
+.align-center{
+  text-align: center !important;
+}
 .transaction-list {
   /* overflow-y: auto; */
 }
@@ -648,3 +650,7 @@ main.pop .apply-row {
 .settings-login-auth .icon-btn.minus {
   flex-shrink: 0;
 }
+
+.card-format-input{
+  text-align: center; letter-spacing: 1px;
+}

src/shared/ui/filter/button-groups.tsx

@@ -24,7 +24,8 @@ export const FilterButtonGroups = ({
             style={{ 
               width: `calc((100% - ${onwRowMaxBtn === 2? '10px': '30px'}) / ${onwRowMaxBtn})`,
               wordBreak: 'break-all',
-              fontSize: 'var(--fs-13)'
+              fontSize: 'var(--fs-13)',
+              height: 'auto'
             }}
             onClick={ () => setter(btnGroups[i]?.value || '') }
           >{ btnGroups[i]?.name }</span>
@@ -49,7 +50,8 @@ export const FilterButtonGroups = ({
                 visibility: 'hidden', 
                 width: `calc((100% - ${onwRowMaxBtn === 2? '10px': '30px'}) / ${onwRowMaxBtn})`,
                 wordBreak: 'break-all',
-                fontSize: 'var(--fs-13)'
+                fontSize: 'var(--fs-13)',
+                height: 'auto'
               }}
             ></span>
           );

src/shared/ui/filter/calendar.tsx

@@ -64,6 +64,9 @@ export const FilterCalendar = ({
   };
 
   const onClickToOpenCalendar = (calendarType: CalendarType) => {
+    setCalendarOpen(true);
+    setCalendarType(calendarType);
+    /*
     if(!dateReadOnly){
       setCalendarOpen(true);
       setCalendarType(calendarType);
@@ -72,6 +75,7 @@ export const FilterCalendar = ({
       setCalendarOpen(false);
       
     }
+      */
   };
 
   const setNewDate = (date: string, calendarType: CalendarType) => {
@@ -83,6 +87,7 @@ export const FilterCalendar = ({
       setEndDate(moment(date, 'YYYY.MM.DD').format('YYYYMMDD'));
       setNewEndDate(moment(date, 'YYYY.MM.DD').format('YYYY.MM.DD'));
     }
+    setFilterDateOptionsBtn(FilterDateOptions.Input);
     setCalendarOpen(false);
   };
 
@@ -141,7 +146,6 @@ export const FilterCalendar = ({
                 placeholder={t('filter.selectDate')}
                 value={ newStartDate }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
-                readOnly={ dateReadOnly }
               />
               <button
                 type="button"
@@ -163,7 +167,6 @@ export const FilterCalendar = ({
                 placeholder={t('filter.selectDate')}
                 value={ newEndDate }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
-                readOnly={ dateReadOnly }
               />
               <button
                 type="button"

src/widgets/navigation/header.tsx

@@ -6,11 +6,13 @@ import {
   HeaderType,
   HeaderNavigationProps
 } from '@/entities/common/model/types';
-import { useStore } from '@/shared/model/store';
+import { useNewMidStore, useStore } from '@/shared/model/store';
 import { ChangeEvent, useEffect, useState } from 'react';
 import { AppAlarmUnreadCountParams, AppAlarmUnreadCountResponse, MERCHANT_ADMIN_APP } from '@/entities/alarm/model/types';
 import { useAppAlarmUnreadCountMutation } from '@/entities/alarm/api/use-app-alarm-unread-count-mutation';
 import { appBridge } from '@/utils/appBridge';
+import { getLocalStorage, setLocalStorage } from '@/shared/lib';
+import { StorageKeys } from '@/shared/constants/local-storage';
 
 export const HeaderNavigation = ({
   onBack,
@@ -22,13 +24,16 @@ export const HeaderNavigation = ({
   setMid
 }: HeaderNavigationProps) => {
   const { mutateAsync: appAlarmUnreadCount } = useAppAlarmUnreadCountMutation();
+  const { newMid, setNewMid } = useNewMidStore();
 
   let [selectOptions, setSelectOptions] = useState<Array<Record<string, string>>>([]);
   const [unreadCount, setUnreadCount] = useState<number>(0);
 
+
   const {
     navigate,
-    navigateBack
+    navigateBack,
+    reload
   } = useNavigate();
   
   const handleBack = () => {
@@ -53,7 +58,9 @@ export const HeaderNavigation = ({
   const onChangeToMid = (e: ChangeEvent<HTMLSelectElement>) => {
     let value = e.target.value;
     useStore.getState().UserStore.setMid(value);
+    setLocalStorage(StorageKeys.UserMid, value);
     setMid(value);
+    setNewMid(value);
   };
 
   const callAlarmCount = () => {

src/widgets/sub-layout/index.tsx

@@ -39,6 +39,8 @@ import { AlarmLinkOptions } from '@/entities/alarm/model/types';
 import { AlarmRoutes } from '@/entities/alarm/ui/alarm-routes';
 import { useNavigate } from '@/shared/lib/hooks';
 import { PATHS } from '@/shared/constants/paths';
+import { getLocalStorage, setLocalStorage } from '@/shared/lib';
+import { StorageKeys } from '@/shared/constants/local-storage';
 
 export interface ContextType {
   setOnBack: (onBack: () => void) => void;
@@ -69,6 +71,7 @@ export const SubLayout = () => {
   } = useUserInfo();
 
   const { reload, navigateBack, navigate } = useNavigate();
+  const userMid = getLocalStorage(StorageKeys.UserMid);
 
   const { menuOn, setMenuOn } = useMenuOnStore();
   const { favoriteEditOn, setFavoriteEditOn } = useFavoriteEditOnStore();
@@ -79,7 +82,6 @@ export const SubLayout = () => {
   const { downloadBottomSheetOn, setDownloadBottomSheetOn } = useDownloadBottomSheetOnStore();
 
   const location = useLocation();
-  console.log(location)
   
   const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState(false);
   const [onBack, setOnBack] = useState(undefined);
@@ -90,7 +92,7 @@ export const SubLayout = () => {
   const [footerCurrentPage, setFooterCurrentPage] = useState<undefined | string | null>(undefined);
   const [headerNavigationKey, setHeaderNavigationKey] = useState<number>(1);
   const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
-  const [mid, setMid] = useState<string>();
+  const [mid, setMid] = useState<string>(userMid || undefined);
   const [alarmRoutesOn, setAlarmRoutesOn] = useState<boolean>(false);
   const [alarmOptions, setAlarmOptions] = useState<AlarmLinkOptions>();
 
@@ -111,9 +113,17 @@ export const SubLayout = () => {
     };
     homeGroups(params).then((rs: HomeGroupsResponse) => {
       useStore.getState().UserStore.setUserMids(rs.mids);
-      if(!!rs.mids[0]){
-        useStore.getState().UserStore.setMid(rs.mids[0]);
-        setMid(rs.mids[0]);
+      let userMid = getLocalStorage(StorageKeys.UserMid);
+      if(!userMid){
+        if(rs.mids[0]){
+          useStore.getState().UserStore.setMid(rs.mids[0]);
+          setMid(rs.mids[0]);
+          setLocalStorage(StorageKeys.UserMid, rs.mids[0]);
+        }
+      }
+      else{
+        useStore.getState().UserStore.setMid(userMid);
+        setMid(userMid);
       }
       let options: Array<Record<string, string>> = rs.mids.map((value, index) => {
         return {