From 06fe8487d15f59ee7505d569a9acf7375a05ca5c Mon Sep 17 00:00:00 2001
From: chaeseungyun <101871802+chaeseungyun@users.noreply.github.com>
Date: Mon, 15 Jul 2024 11:01:36 +0900
Subject: [PATCH] =?UTF-8?q?[=EB=B9=84=EC=A6=88=EB=8B=88=EC=8A=A4]=20?=
 =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=9E=90=EB=8F=99?=
 =?UTF-8?q?=EC=99=84=EC=84=B1=20=EB=A7=89=EA=B8=B0=20(#377)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 비밀번호 자동완성 방지

* fix: 계좌번호 바텀시트 마운트 시 계좌번호 input에 포커스
---
 src/page/Auth/Login/index.tsx                        |  1 +
 src/page/MyShopPage/components/BankList/index.tsx    | 12 ++++++++++--
 .../components/EditShopInfoModal/index.tsx           |  4 +++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/page/Auth/Login/index.tsx b/src/page/Auth/Login/index.tsx
index ab3e4f27..ee3313aa 100644
--- a/src/page/Auth/Login/index.tsx
+++ b/src/page/Auth/Login/index.tsx
@@ -72,6 +72,7 @@ export default function Login() {
               type={isBlind ? 'text' : 'password'}
               placeholder={isMobile ? '비밀번호' : '비밀번호 입력'}
               {...register('password')}
+              autoComplete="new-password"
             />
             <button
               type="button"
diff --git a/src/page/MyShopPage/components/BankList/index.tsx b/src/page/MyShopPage/components/BankList/index.tsx
index 497418ad..f948ec46 100644
--- a/src/page/MyShopPage/components/BankList/index.tsx
+++ b/src/page/MyShopPage/components/BankList/index.tsx
@@ -1,6 +1,7 @@
 import { OwnerShop } from 'model/shopInfo/ownerShop';
-import { UseFormSetValue, UseFormRegister } from 'react-hook-form';
+import { UseFormSetValue, UseFormRegister, UseFormSetFocus } from 'react-hook-form';
 import { bank } from 'utils/constant/bank';
+import { useEffect } from 'react';
 import cn from 'utils/ts/className';
 import showToast from 'utils/ts/showToast';
 import styles from './index.module.scss';
@@ -11,11 +12,12 @@ interface Props {
   setValue: UseFormSetValue<OwnerShop>;
   bankName: string | null;
   account_number: string | null;
+  setFocus: UseFormSetFocus<OwnerShop>;
 }
 
 const NUMBER_REGEX = /^[0-9-]+$/;
 export default function BankList({
-  close, register, setValue, bankName, account_number,
+  close, register, setValue, bankName, account_number, setFocus,
 }: Props) {
   const validation = () => {
     if (account_number && !NUMBER_REGEX.test(account_number)) {
@@ -28,6 +30,12 @@ export default function BankList({
     }
     close();
   };
+
+  useEffect(() => {
+    setFocus('account_number');
+    // eslint-disable-next-line
+  }, []); // 마운트 시 한 번만 포커스
+
   return (
     <div className={styles.overlay} onClick={validation} role="button" aria-hidden>
       <div className={styles.modal} onClick={(e) => e.stopPropagation()} role="button" aria-hidden>
diff --git a/src/page/MyShopPage/components/EditShopInfoModal/index.tsx b/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
index 0673a4fb..8dadb392 100644
--- a/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
+++ b/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
@@ -65,7 +65,7 @@ export default function EditShopInfoModal({
   } = CheckSameTime();
 
   const {
-    register, control, handleSubmit, setValue, formState: { errors },
+    register, control, handleSubmit, setValue, formState: { errors }, setFocus,
   } = useForm<OwnerShop>({
     resolver: zodResolver(OwnerShop),
     defaultValues: {
@@ -353,6 +353,7 @@ export default function EditShopInfoModal({
                 account_number={account}
                 setValue={setValue}
                 close={() => setIsOpen(false)}
+                setFocus={setFocus}
               />
             )}
             <label htmlFor="description" className={styles['mobile-main-info__label']}>
@@ -623,6 +624,7 @@ export default function EditShopInfoModal({
                 account_number={account}
                 setValue={setValue}
                 close={() => setIsOpen(false)}
+                setFocus={setFocus}
               />
             )}
           </div>