From b079f03bef1df5ab587bba374e6159e0e7d0c81f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Wed, 23 Oct 2024 11:14:32 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20input=20focus=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/login/page.jsx | 43 ++++++++++++++++++++++++++++++++++--------
 src/styles/_main.scss  |  5 +++++
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/app/login/page.jsx b/src/app/login/page.jsx
index 7c398b1..4cca284 100644
--- a/src/app/login/page.jsx
+++ b/src/app/login/page.jsx
@@ -8,6 +8,10 @@ import { useState } from 'react'
 export default function LoginPage(){
     const [passwordVisible, setPasswordVisible] = useState(false);
     const [passwordReset, setPasswordReset] = useState(1);
+
+    // focus state
+    const [idFocus, setIdFocus] = useState(false);
+    const [secFocus, setSecFocus] = useState(false);
     return(
         <div className="login-wrap">
             <div className="login-inner">
@@ -22,12 +26,23 @@ export default function LoginPage(){
                                 太陽光発電システム図面管理サイト
                             </div>
                             <div className="login-input-wrap">
-                                <div className="login-area id">
-                                    <input type="text" className='login-input' placeholder='IDを入力してください'/>
+                                <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
+                                    <input 
+                                        type="text" 
+                                        className='login-input' 
+                                        placeholder='IDを入力してください' 
+                                        onFocus={() => setIdFocus(true)}
+                                        onBlur={() => setIdFocus(false)}
+                                    />
                                     <button className='id-delete'></button>
                                 </div>
-                                <div className="login-area password">
-                                    <input type="password" className='login-input' />
+                                <div className={`login-area password ${secFocus ? 'focus' : ''}`}>
+                                    <input 
+                                        type="password" 
+                                        className='login-input' 
+                                        onFocus={() => setSecFocus(true)}
+                                        onBlur={() => setSecFocus(false)}
+                                    />
                                     <button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button>
                                 </div>
                                 <div className="d-check-box login">
@@ -56,12 +71,24 @@ export default function LoginPage(){
                                 パスワードを初期化するIDとEメールアドレスを入力してください。
                             </div>
                             <div className="login-input-wrap">
-                                <div className="login-area id">
-                                    <input type="text" className='login-input' defaultValue={'IDを入力してください'}/>
+                                <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
+                                    <input 
+                                        type="text" 
+                                        className='login-input' 
+                                        placeholder={'IDを入力してください'}
+                                        onFocus={() => setIdFocus(true)}
+                                        onBlur={() => setIdFocus(false)}
+                                    />
                                     <button className='id-delete'></button>
                                 </div>
-                                <div className="login-area email">
-                                    <input type="email" className='login-input' defaultValue={'メールを入力してください'}/>
+                                <div className={`login-area email ${secFocus ? 'focus' : ''}`}>
+                                    <input 
+                                        type="email" 
+                                        className='login-input' 
+                                        placeholder={'メールを入力してください'}
+                                        onFocus={() => setSecFocus(true)}
+                                        onBlur={() => setSecFocus(false)}
+                                    />
                                     <button className='id-delete'></button>
                                 </div>
                                 <div className='pwreset-btn-box'>
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index ea9b883..b8783c3 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -405,10 +405,15 @@
                     display: flex;
                     align-items: center;
                     border: 1px solid #E5E9EF;
+                    border-radius: 4px;
                     height: 45px;
                     padding-left: 40px;
                     padding-right: 15px;
                     margin-bottom: 15px;
+                    transition: border .15s ease-in-out;
+                    &.focus{
+                        border-color: #A8B6C7;
+                    }
                     .login-input{
                         flex: 1;
                         height: 100%;