From 9e2e4bff581fc2a63aa6b790fd4589b1f909d34e Mon Sep 17 00:00:00 2001
From: leeyongjae <dhfkdl26@interplug.co.kr>
Date: Wed, 23 Oct 2024 13:33:55 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20focus=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/Login.jsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx
index d75d9b6e..66d149ac 100644
--- a/src/components/auth/Login.jsx
+++ b/src/components/auth/Login.jsx
@@ -71,6 +71,10 @@ export default function Login() {
 
   const { promisePost, promisePatch, post } = useAxios(globalLocaleState)
 
+  // focus state
+  const [idFocus, setIdFocus] = useState(false)
+  const [secFocus, setSecFocus] = useState(false)
+
   // login process
   const loginProcess = async (e) => {
     e.preventDefault()
@@ -191,7 +195,7 @@ export default function Login() {
                   {getMessage('site.sub_name')}
                 </div>
                 <div className="login-input-wrap">
-                  <div className="login-area id">
+                  <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
                     <input
                       type="text"
                       className="login-input"
@@ -203,6 +207,8 @@ export default function Login() {
                       onChange={(e) => {
                         setUserId(e.target.value)
                       }}
+                      onFocus={() => setIdFocus(true)}
+                      onBlur={() => setIdFocus(false)}
                     />
                     <button
                       type="button"
@@ -212,7 +218,7 @@ export default function Login() {
                       }}
                     ></button>
                   </div>
-                  <div className="login-area password">
+                  <div className={`login-area password ${secFocus ? 'focus' : ''}`}>
                     <input
                       type={passwordVisible ? 'text' : 'password'}
                       className="login-input"
@@ -224,6 +230,8 @@ export default function Login() {
                       onChange={(e) => {
                         setPasswordVisible(passwordVisible)
                       }}
+                      onFocus={() => setSecFocus(true)}
+                      onBlur={() => setSecFocus(false)}
                     />
                     <button
                       className={`password-hidden ${passwordVisible ? 'visible' : ''}`}
@@ -275,7 +283,7 @@ export default function Login() {
                 {getMessage('login.init_password.sub_title')}
               </div>
               <div className="login-input-wrap">
-                <div className="login-area id">
+                <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
                   <input
                     type="text"
                     id="checkId"
@@ -287,6 +295,8 @@ export default function Login() {
                     onChange={(e) => {
                       setCheckId(e.target.value)
                     }}
+                    onFocus={() => setIdFocus(true)}
+                    onBlur={() => setIdFocus(false)}
                   />
                   <button
                     type="button"
@@ -296,7 +306,7 @@ export default function Login() {
                     }}
                   ></button>
                 </div>
-                <div className="login-area email">
+                <div className={`login-area email ${secFocus ? 'focus' : ''}`}>
                   <input
                     id="checkEmail"
                     name="checkEmail"
@@ -308,6 +318,8 @@ export default function Login() {
                       setCheckEmail(e.target.value)
                     }}
                     placeholder={getMessage('login.init_password.email.placeholder')}
+                    onFocus={() => setSecFocus(true)}
+                    onBlur={() => setSecFocus(false)}
                   />
                   <button
                     type="button"