refactor: Enhance authentication API and login component functionality

- Updated authentication API to improve response handling and session management.
- Refactored login component to include validation and keyboard event handling for login submission.
- Improved user feedback by displaying alerts for login success and failure messages.

src/app/api/auth/route.ts

@@ -15,7 +15,9 @@ export async function POST(request: Request) {
   })
   console.log('🚀 ~ result ~ result:', result.data)
 
-  if (result.data.result.code === 200) {
+  let finalResult = {}
+
+  if (result.data.result.resultCode === 'S') {
     tracking({
       url: `/api/auth/login`,
       data: JSON.stringify({
@@ -72,7 +74,6 @@ export async function POST(request: Request) {
     console.log('end session edit!')
 
     await session.save()
-  }
 
     const resultForSession = {
       LANG_CD: result.data.data.langCd,
@@ -119,5 +120,18 @@ export async function POST(request: Request) {
       resultForSession.ROLE = 'User'
     }
 
-  return NextResponse.json({ code: 200, message: 'Login is Succecss!!', result: resultForSession })
+    finalResult = {
+      code: 200,
+      message: 'Login is Succecss!!',
+      result: resultForSession,
+    }
+  } else {
+    finalResult = {
+      code: 400,
+      message: 'Login is Failed!!',
+      result: {},
+    }
+  }
+
+  return NextResponse.json(finalResult)
 }

src/components/Login.tsx

@@ -39,6 +39,26 @@ export default function Login() {
     return emailRegex.test(email)
   }
 
+  const handleLogin = () => {
+    if (validateLogin()) {
+      setIsLogin(true)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleLogin()
+    }
+  }
+
+  const validateLogin = () => {
+    if (account.loginId === '' || account.pwd === '') {
+      alert('Please enter your ID and password.')
+      return false
+    }
+    return true
+  }
+
   interface LoginData {
     code: number
     message: string | null
@@ -85,6 +105,9 @@ export default function Login() {
         ...loginData?.result,
       })
       router.push('/')
+    } else if (loginData?.code === 400) {
+      alert(loginData?.message)
+      setAccount({ loginId: '', pwd: '' })
     }
   }, [loginData])
 
@@ -106,6 +129,7 @@ export default function Login() {
               className="login-frame"
               placeholder="Input Frame ID"
               value={account.loginId}
+              onKeyDown={(e) => handleKeyDown(e)}
               onChange={(e) => setAccount({ loginId: e.target.value })}
             />
             <button className="login-icon" onClick={() => setAccount({ loginId: '' })}>
@@ -120,6 +144,7 @@ export default function Login() {
               className="login-frame"
               placeholder="Input Frame PW"
               value={account.pwd}
+              onKeyDown={(e) => handleKeyDown(e)}
               onChange={(e) => setAccount({ pwd: e.target.value })}
             />
             <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
@@ -141,7 +166,7 @@ export default function Login() {
           </div>
         </div>
         <div className="login-btn-wrap">
-          <button className="btn-frame icon login" onClick={() => setIsLogin(true)}>
+          <button className="btn-frame icon login" onClick={handleLogin}>
             お問い合わせ <i className="btn-arr"></i>
           </button>
         </div>