- 수기발행,1:1문의 등록, 빌링 모바일 용 패딩 추가 로직 추가

src/pages/support/qna/register-page.tsx

@@ -4,9 +4,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useQnaSaveMutation } from '@/entities/support/api/use-qna-save-mutation';
 import { HeaderType } from '@/entities/common/model/types';
 import {
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useStore } from '@/shared/model/store';
@@ -16,6 +16,7 @@ import { overlay } from 'overlay-kit';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { QnaSaveParams, QnaSaveResponse } from '@/entities/support/model/types';
 import { checkGrant } from '@/shared/lib/check-grant';
+import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 
 export enum QnaRegisterPropsName {
   Mid = 'Mid',
@@ -39,6 +40,7 @@ export const QnaRegisterPage = () => {
   const [requestEmail, setRequestEmail] = useState<string>('');
   const [title, setTitle] = useState<string>('');
   const [contents, setContents] = useState<string>('');
+  const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 
   useSetHeaderTitle(t('support.qna.title'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -54,25 +56,25 @@ export const QnaRegisterPage = () => {
     key: string
   ) => {
     let value = e.target.value;
-    if(key === QnaRegisterPropsName.Mid){
+    if (key === QnaRegisterPropsName.Mid) {
       setMid(value);
     }
-    else if(key === QnaRegisterPropsName.RequestType){
+    else if (key === QnaRegisterPropsName.RequestType) {
       setRequestType(value);
     }
-    else if(key === QnaRegisterPropsName.RequestName){
+    else if (key === QnaRegisterPropsName.RequestName) {
       setRequestName(value);
     }
-    else if(key === QnaRegisterPropsName.RequestTel){
+    else if (key === QnaRegisterPropsName.RequestTel) {
       setRequestTel(value);
     }
-    else if(key === QnaRegisterPropsName.RequestEmail){
+    else if (key === QnaRegisterPropsName.RequestEmail) {
       setRequestEmail(value);
     }
-    else if(key === QnaRegisterPropsName.Title){
+    else if (key === QnaRegisterPropsName.Title) {
       setTitle(value);
     }
-    else if(key === QnaRegisterPropsName.Contents){
+    else if (key === QnaRegisterPropsName.Contents) {
       setContents(value);
     }
   };
@@ -87,7 +89,7 @@ export const QnaRegisterPage = () => {
           afterLeave={unmount}
           open={isOpen}
           onClose={close}
-          message={ msg }
+          message={msg}
           buttonLabel={[t('support.qna.confirmButton')]}
         />
       );
@@ -95,35 +97,35 @@ export const QnaRegisterPage = () => {
   }
   const checkEmail = (email: string) => {
     var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
-    if(email != '' && email != 'undefined' && re.test(email)){
+    if (email != '' && email != 'undefined' && re.test(email)) {
       return true;
     }
-    else{
+    else {
       return false;
     }
   };
   const callRegister = () => {
-    if(!title){
+    if (!title) {
       showAlert(t('support.qna.validation.title'));
       return;
     }
-    else if(!requestType){
+    else if (!requestType) {
       showAlert(t('support.qna.validation.requestType'));
       return;
     }
-    else if(!requestName){
+    else if (!requestName) {
       showAlert(t('support.qna.validation.requestName'));
       return;
     }
-    else if(!requestTel){
+    else if (!requestTel) {
       showAlert(t('support.qna.validation.requestTel'));
       return;
     }
-    else if(requestEmail && !checkEmail(requestEmail)){
+    else if (requestEmail && !checkEmail(requestEmail)) {
       showAlert(t('support.qna.validation.requestEmail'));
       return;
     }
-    else if(!contents){
+    else if (!contents) {
       showAlert(t('support.qna.validation.contents'));
       return;
     }
@@ -140,7 +142,7 @@ export const QnaRegisterPage = () => {
       alert(t('support.qna.successMessage'));
       navigate(PATHS.support.qna.list);
     }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
         showAlert(e.response?.data?.error?.message);
         return;
       }
@@ -168,9 +170,10 @@ export const QnaRegisterPage = () => {
                 <div className="inq-control">
                   <input
                     type="text"
-                    value={ title }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title) }
+                    value={title}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title)}
+                    onFocus={handleInputFocus}
                   />
                 </div>
               </div>
@@ -180,9 +183,9 @@ export const QnaRegisterPage = () => {
                 </div>
                 <div className="inq-control">
                   <select
-                    value={ requestType }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.RequestType) }
+                    value={requestType}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.RequestType)}
                   >
                     <option value="">{t('support.qna.categories.choose')}</option>
                     <option value="01">{t('support.qna.categories.01')}</option>
@@ -202,9 +205,10 @@ export const QnaRegisterPage = () => {
                 <div className="inq-control">
                   <input
                     type="text"
-                    value={ requestName }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName) }
+                    value={requestName}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName)}
+                    onFocus={handleInputFocus}
                   />
                 </div>
               </div>
@@ -215,10 +219,11 @@ export const QnaRegisterPage = () => {
                 <div className="inq-control">
                   <PatternFormat
                     placeholder={t('support.qna.formLabels.phonePlaceholder')}
-                    value={ requestTel }
+                    value={requestTel}
                     valueIsNumericString
                     format="###########"
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestTel) }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestTel)}
+                    onFocus={handleInputFocus}
                   ></PatternFormat>
                 </div>
               </div>
@@ -228,20 +233,22 @@ export const QnaRegisterPage = () => {
                   <input
                     type="email"
                     placeholder={t('support.qna.formLabels.emailPlaceholder')}
-                    value={ requestEmail }
-                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail) }
+                    value={requestEmail}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail)}
+                    onFocus={handleInputFocus}
                   />
                 </div>
               </div>
-              <div className="inq-text">
+              <div className="inq-text" style={keyboardAwarePadding}>
                 <div className="inq-text-label">
                   {t('support.qna.formLabels.inquiryContents')} <span className="red">{t('support.qna.formLabels.required')}</span>
                 </div>
                 <div className="inq-text-body">
                   <textarea
-                    value={ contents }
-                    required= { true }
-                    onChange={ (e: ChangeEvent<HTMLTextAreaElement>) => setInputValue(e, QnaRegisterPropsName.Contents) }
+                    value={contents}
+                    required={true}
+                    onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setInputValue(e, QnaRegisterPropsName.Contents)}
+                    onFocus={handleInputFocus}
                   ></textarea>
                 </div>
               </div>
@@ -249,7 +256,7 @@ export const QnaRegisterPage = () => {
             <div className="apply-row">
               <button
                 className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToRegisterQna() }
+                onClick={() => onClickToRegisterQna()}
               >{t('support.qna.submitButton')}</button>
             </div>
           </div>