Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

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

@@ -13,6 +13,8 @@ import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
+import { overlay } from 'overlay-kit';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
 
 export interface FundAccountTransferDetailProps {
   detailOn: boolean;
@@ -54,6 +56,27 @@ export const FundAccountTransferDetail = ({
       showAlert(t('common.nopermission'));
       return;
     }
+    let msg = t('additionalService.fundAccount.transferRequestMsg');
+
+    overlay.open(({
+      isOpen,
+      close,
+      unmount
+    }) => {
+      return (
+        <Dialog
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          onConfirmClick={() => transferReqeust()}
+          message={msg}
+          buttonLabel={[t('common.cancel'), t('common.confirm')]}
+        />
+      );
+    });
+  }
+
+  const transferReqeust = () => {
     let params: ExtensionFundAccountTransferRequestParams = {
       seq: seq
     };

src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx

@@ -7,6 +7,7 @@ import { LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additiona
 import { NumericFormat } from 'react-number-format';
 import { useStore } from '@/shared/model/store';
 import { useEffect } from 'react';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 
 interface LinkPaymentStep1Props {
   formData: LinkPaymentFormData;
@@ -16,6 +17,7 @@ interface LinkPaymentStep1Props {
 export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Props) => {
   const { t, i18n } = useTranslation();
   const { navigate } = useNavigate();
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
   const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
   const isEnglish = i18n.language === 'en';
 
@@ -102,6 +104,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
               placeholder=""
               value={formData.goodsName}
               onChange={(e) => handleInputChange('goodsName', e.target.value)}
+              onFocus={handleInputFocus}
             />
           </div>
         </div>
@@ -114,6 +117,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
               allowNegative={false}
               displayType="input"
               thousandSeparator={true}
+              onFocus={handleInputFocus}
               onValueChange={(values) => {
                 const { floatValue } = values;
                 setFormData({ ...formData, amount: floatValue ?? 0 });
@@ -130,11 +134,12 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
               placeholder=""
               value={formData.moid}
               onChange={(e) => handleInputChange('moid', e.target.value)}
+              onFocus={handleInputFocus}
             />
           </div>
         </div>
 
-        <div className="issue-row gap-10">
+        <div className="issue-row gap-10" style={keyboardAwarePadding}>
           <div className="issue-label">{t('additionalService.linkPayment.paymentValidDate')}</div>
           <div className="issue-field">
             <div className="link-apply-date">

src/locales/en.json

@@ -1060,6 +1060,7 @@
             "transferResult": "Transfer Result",
             "beneficiaryName": "Beneficiary Name",
             "transferRequestButton": "Transfer Request",
+            "transferRequestMsg": "Do you want to request the transfer?",
             "transferRequestSuccess": "Transfer request successful.",
             "transferRequestFailed": "Transfer request failed.",
             "transferRequestError": "An error occurred during transfer request.",

src/locales/ko.json

@@ -1060,6 +1060,7 @@
             "transferResult": "이체결과",
             "beneficiaryName": "수취인명",
             "transferRequestButton": "이체 요청",
+            "transferRequestMsg": "이체요청을 하시겠습니까?",
             "transferRequestSuccess": "이체요청을 성공하였습니다.",
             "transferRequestFailed": "이체요청이 실패하였습니다.",
             "transferRequestError": "이체요청 중 오류가 발생했습니다.",

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -160,13 +160,13 @@ export const AccountHolderSearchPage = () => {
         bankCode: bank,
         resultStatus: resultStatus
       }).then((rs) => {
-        if (rs.status) {
+        // if (rs.status) {
-          setTimeout(() => {
+        //   setTimeout(() => {
-            snackBar("다운로드가 완료되었습니다.");
+        //     snackBar("다운로드가 완료되었습니다.");
-          }, 2000);
+        //   }, 2000);
-        } else {
+        // } else {
-          snackBar("다운로드에 실패했습니다.")
+        //   snackBar("다운로드에 실패했습니다.")
-        }
+        // }
       });
     }
     setEmailBottomSheetOn(false);

src/pages/additional-service/ars/request-page.tsx

@@ -18,6 +18,7 @@ import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import { showAlert } from '@/widgets/show-alert';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 
 export const ArsRequestPage = () => {
   const { t } = useTranslation();
@@ -42,6 +43,8 @@ export const ArsRequestPage = () => {
   const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
   const [resultMessage, setResultMessage] = useState<string>('');
 
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
+
   useSetHeaderTitle(t('additionalService.ars.paymentRequest'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
@@ -160,6 +163,7 @@ export const ArsRequestPage = () => {
                       type="text"
                       value={moid}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -171,6 +175,7 @@ export const ArsRequestPage = () => {
                       type="text"
                       value={goodsName}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -187,6 +192,7 @@ export const ArsRequestPage = () => {
                         const { floatValue } = values;
                         setAmount(floatValue ?? 0);
                       }}
+                      onFocus={handleInputFocus}
                     ></NumericFormat>
                   </div>
                 </div>
@@ -211,6 +217,7 @@ export const ArsRequestPage = () => {
                       type="text"
                       value={buyerName}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -230,6 +237,7 @@ export const ArsRequestPage = () => {
                       inputMode="numeric"
                       pattern="[0-9]*"
                       maxLength={11}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -243,12 +251,12 @@ export const ArsRequestPage = () => {
                       placeholder='test@nicepay.co.kr'
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
                       className={email && !isValidEmail(email) ? 'error' : ''}
-
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
 
-                <div className="billing-row" style={{ paddingBottom: '60px' }}>
+                <div className="billing-row" style={keyboardAwarePadding}>
                   <div className="billing-label">{t('additionalService.ars.paymentMethod')} <span>*</span></div>
                   <div className="billing-field">
                     {getArsPaymentMethodBtns()}

src/pages/additional-service/fund-account/transfer-request-page.tsx

@@ -14,8 +14,8 @@ import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
 import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation';
 import { NumericFormat } from 'react-number-format';
-import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
 import { showAlert } from '@/widgets/show-alert';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 
 
 export const FundAccountTransferRequestPage = () => {
@@ -32,6 +32,7 @@ export const FundAccountTransferRequestPage = () => {
   const [amount, setAmount] = useState<number>(0);
   const [moid, setMoid] = useState<string>('');
   const [depositParameter, setDepositParameter] = useState<string>('');
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 
   const { mutateAsync: extensionFundAccountRegist } = useExtensionFundAccountTransferRegistMutation();
 
@@ -159,6 +160,7 @@ export const FundAccountTransferRequestPage = () => {
                         return !value || value.length <= 14;
                       }}
                       onValueChange={(values) => setAccountNo(values.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -169,6 +171,7 @@ export const FundAccountTransferRequestPage = () => {
                       type="text"
                       value={accountName}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setAccountName(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
@@ -180,6 +183,7 @@ export const FundAccountTransferRequestPage = () => {
                       allowNegative={false}
                       thousandSeparator={true}
                       displayType='input'
+                      onFocus={handleInputFocus}
                       onValueChange={(values) => {
                         const { floatValue } = values;
                         setAmount(floatValue ?? 0);
@@ -194,16 +198,18 @@ export const FundAccountTransferRequestPage = () => {
                       type="text"
                       value={moid}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
-                <div className="billing-row">
+                <div className="billing-row" style={keyboardAwarePadding}>
                   <div className="billing-label">{t('additionalService.fundAccount.depositParameter')}</div>
                   <div className="billing-field">
                     <input
                       type="text"
                       value={depositParameter}
                       onChange={(e) => setDepositParameter(e.target.value)}
+                      onFocus={handleInputFocus}
                     />
                   </div>
                 </div>

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

@@ -2,7 +2,6 @@ import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
 import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
 import {
@@ -11,13 +10,12 @@ import {
     useSetFooterMode,
     useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { overlay } from 'overlay-kit';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import { useTranslation } from 'react-i18next';
 import { showAlert } from '@/widgets/show-alert';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 
 export const KeyInPaymentRequestPage = () => {
     const { t } = useTranslation();
@@ -43,6 +41,7 @@ export const KeyInPaymentRequestPage = () => {
     const [orderNumber, setOrderNumber] = useState<string>('');
 
     const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
+    const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 
     useSetHeaderTitle(t('additionalService.keyIn.title'));
     useSetHeaderType(HeaderType.LeftArrow);
@@ -191,6 +190,7 @@ export const KeyInPaymentRequestPage = () => {
                                             type="text"
                                             value={productName}
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
+                                            onFocus={handleInputFocus}
                                         />
                                     </div>
                                 </div>
@@ -218,6 +218,7 @@ export const KeyInPaymentRequestPage = () => {
                                             type="text"
                                             value={customerName}
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomerName(e.target.value)}
+                                            onFocus={handleInputFocus}
                                         />
                                     </div>
                                 </div>
@@ -230,6 +231,7 @@ export const KeyInPaymentRequestPage = () => {
                                             value={email}
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
                                             className={email && !isValidEmail(email) ? 'error' : ''}
+                                            onFocus={handleInputFocus}
                                         />
                                     </div>
                                 </div>
@@ -249,6 +251,7 @@ export const KeyInPaymentRequestPage = () => {
                                             inputMode="numeric"
                                             pattern="[0-9]*"
                                             maxLength={11}
+                                            onFocus={handleInputFocus}
                                         />
                                     </div>
                                 </div>
@@ -262,6 +265,7 @@ export const KeyInPaymentRequestPage = () => {
                                             valueIsNumericString
                                             format="####"
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo1(e.target.value)}
+                                            onFocus={handleInputFocus}
                                         >
                                         </PatternFormat>
                                     </div>
@@ -272,6 +276,7 @@ export const KeyInPaymentRequestPage = () => {
                                             valueIsNumericString
                                             format="####"
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo2(e.target.value)}
+                                            onFocus={handleInputFocus}
                                         >
                                         </PatternFormat>
                                     </div>
@@ -282,6 +287,7 @@ export const KeyInPaymentRequestPage = () => {
                                             valueIsNumericString
                                             format="####"
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo3(e.target.value)}
+                                            onFocus={handleInputFocus}
                                         >
                                         </PatternFormat>
                                     </div>
@@ -292,6 +298,7 @@ export const KeyInPaymentRequestPage = () => {
                                             valueIsNumericString
                                             format="####"
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo4(e.target.value)}
+                                            onFocus={handleInputFocus}
                                         >
                                         </PatternFormat>
                                     </div>
@@ -315,6 +322,7 @@ export const KeyInPaymentRequestPage = () => {
                                                 const { value } = values;
                                                 setExpMon(value);
                                             }}
+                                            onFocus={handleInputFocus}
                                             onBlur={() => {
                                                 if (expMon.length === 1 && parseInt(expMon) >= 1 && parseInt(expMon) <= 9) {
                                                     setExpMon(expMon.padStart(2, '0'));
@@ -333,6 +341,7 @@ export const KeyInPaymentRequestPage = () => {
                                                 const { value } = values;
                                                 setExpYear(value);
                                             }}
+                                            onFocus={handleInputFocus}
                                             style={{ flex: 1 }}
                                             inputMode="numeric"
                                         />
@@ -367,13 +376,17 @@ export const KeyInPaymentRequestPage = () => {
                                     </div>
                                 </div>
 
-                                <div className="billing-row">
+                                <div
+                                    className="billing-row"
+                                    style={keyboardAwarePadding}
+                                >
                                     <div className="billing-label">{t('additionalService.keyIn.orderNumber')}<span>*</span></div>
                                     <div className="billing-field">
                                         <input
                                             type="text"
                                             value={orderNumber}
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
+                                            onFocus={handleInputFocus}
                                         />
                                     </div>
                                 </div>

src/shared/lib/hooks/index.tsx

@@ -2,4 +2,4 @@ export * from './use-navigate';
 export * from './use-fix-scroll-view-safari';
 export * from './use-navigate';
 export * from './use-router-listener';
-
+export * from './use-keyboard-aware';

src/shared/lib/hooks/use-keyboard-aware.ts

@@ -0,0 +1,88 @@
+import { useEffect, useState, useMemo, CSSProperties } from 'react';
+
+export interface UseKeyboardAwareOptions {
+    defaultPadding?: number;
+    heightRatio?: number;
+    maxPadding?: number;
+    transition?: string;
+}
+
+export const useKeyboardAware = (options?: UseKeyboardAwareOptions) => {
+    const {
+        defaultPadding = 60,
+        heightRatio = 0.7,
+        maxPadding = 300,
+        transition = 'padding-bottom 0.2s ease'
+    } = options || {};
+
+    const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+
+    useEffect(() => {
+        let focusedElement: HTMLInputElement | null = null;
+        let isKeyboardOpen = false;
+
+        // 네이티브에서 호출할 전역 함수 등록
+        (window as any).onKeyboardShow = (height: number) => {
+            console.log('Keyboard shown, height:', height);
+            const wasKeyboardOpen = isKeyboardOpen;
+            isKeyboardOpen = true;
+            setKeyboardHeight(height);
+
+            // 키보드가 새로 열릴 때만 스크롤 (이미 열려있으면 스크롤 안함)
+            if (!wasKeyboardOpen && focusedElement) {
+                setTimeout(() => {
+                    focusedElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }, 250);
+            }
+        };
+
+        (window as any).onKeyboardHide = () => {
+            console.log('Keyboard hidden');
+            isKeyboardOpen = false;
+            setKeyboardHeight(0);
+            focusedElement = null;
+        };
+
+        // focus된 요소를 추적하기 위한 함수
+        (window as any).setFocusedElement = (element: HTMLInputElement) => {
+            focusedElement = element;
+
+            // 키보드가 이미 열려있으면 즉시 스크롤
+            if (isKeyboardOpen) {
+                setTimeout(() => {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }, 100);
+            }
+        };
+
+        return () => {
+            delete (window as any).onKeyboardShow;
+            delete (window as any).onKeyboardHide;
+            delete (window as any).setFocusedElement;
+        };
+    }, []);
+
+    // 모든 input에서 사용할 공통 핸들러
+    const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+        // focus된 요소를 저장
+        (window as any).setFocusedElement?.(e.target);
+    };
+
+    // 동적 패딩 스타일 계산
+    const keyboardAwarePadding: CSSProperties = useMemo(() => {
+        const calculatedPadding = keyboardHeight > 0
+            ? Math.min(keyboardHeight * heightRatio, maxPadding)
+            : defaultPadding;
+
+        return {
+            paddingBottom: `${calculatedPadding}px`,
+            transition
+        };
+    }, [keyboardHeight, defaultPadding, heightRatio, maxPadding, transition]);
+
+    return {
+        keyboardHeight,
+        handleInputFocus,
+        keyboardAwarePadding
+    };
+};