로그인 페이지 로딩바 추가

src/components/auth/AutoLogin.jsx

@@ -1,11 +1,16 @@
 'use client'
 
+import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
 
 export default function AutoLoginPage() {
+  const [isLoading, setIsLoading] = useState(true)
   const { getMessage } = useMessage()
 
   return (
+    <>
+      {isLoading && <GlobalSpinner />}
       <div className="login-input-frame">
         <div className="login-frame-tit ">
           <span>{getMessage('site.name')}</span>
@@ -17,5 +22,6 @@ export default function AutoLoginPage() {
           </div>
         </div>
       </div>
+    </>
   )
 }

src/components/auth/Login.jsx

@@ -10,14 +10,15 @@ import { useMessage } from '@/hooks/useMessage'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { useRouter } from 'next/navigation'
-
-import Cookies from 'js-cookie'
-
 import { useSearchParams } from 'next/navigation'
 
+import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
+import Cookies from 'js-cookie'
 import AutoLogin from './AutoLogin'
 
 export default function Login() {
+  const [isLoading, setIsLoading] = useState(false)
+
   // 자동 로그인
   const initParams = useSearchParams()
   const autoLoginParam = initParams.get('autoLoginParam1')
@@ -35,11 +36,13 @@ export default function Login() {
   }, [])
 
   const autoLoginProcess = async (autoLoginParam) => {
+    setIsLoading(true)
     await promisePost({ url: '/api/login/v1.0/user/login/autoLoginDecryptData', data: { loginId: autoLoginParam } })
       .then((res) => {
         if (res) {
           if (res.data) {
             post({ url: '/api/login/v1.0/user', data: { loginId: res.data } }).then((response) => {
+              setIsLoading(false)
               if (response) {
                 const result = { ...response, storeLvl: response.groupId === '60000' ? '1' : '2', pwdInitYn: 'Y' }
                 setSession(result)
@@ -53,6 +56,7 @@ export default function Login() {
         }
       })
       .catch((error) => {
+        setIsLoading(false)
         router.push('/login')
       })
   }
@@ -93,9 +97,11 @@ export default function Login() {
       loginId: formData.get('id'),
       pwd: formData.get('password'),
     }
+    setIsLoading(true)
     await promisePost({ url: '/api/login/v1.0/login', data: param })
       .then((res) => {
         if (res) {
+          setIsLoading(false)
           if (res.data.result.resultCode === 'S') {
             setSession(res.data.data)
             setSessionState(res.data.data)
@@ -105,7 +111,6 @@ export default function Login() {
             } else {
               Cookies.remove('chkLoginId')
             }
-            // router.push('/')
             login()
           } else {
             alert(res.data.result.resultMsg)
@@ -113,6 +118,7 @@ export default function Login() {
         }
       })
       .catch((error) => {
+        setIsLoading(false)
         alert(error.response.data.message)
       })
   }
@@ -123,12 +129,14 @@ export default function Login() {
       loginId: checkId,
       email: checkEmail,
     }
+    setIsLoading(true)
     await promisePatch({
       url: '/api/login/v1.0/user/init-password',
       data: param,
     })
       .then((res) => {
         if (res) {
+          setIsLoading(false)
           if (res.data.result.resultCode == 'S') {
             alert(getMessage('login.init_password.complete_message'))
             setCheckId('')
@@ -140,15 +148,25 @@ export default function Login() {
         }
       })
       .catch((error) => {
+        setIsLoading(false)
         alert(error.response.data.message)
       })
   }
 
   return (
+    <>
+      {isLoading && <GlobalSpinner />}
       <div className="login-wrap">
         <div className="login-inner">
           <Link href={'/login'} className="login-logo">
-          <Image src="/static/images/main/login-logo.svg" alt="react" width={236} height={43} styles={{ width: '236px', height: '43px' }} priority />
+            <Image
+              src="/static/images/main/login-logo.svg"
+              alt="react"
+              width={236}
+              height={43}
+              styles={{ width: '236px', height: '43px' }}
+              priority
+            />
           </Link>
           {!autoLoginParam && passwordReset === 1 && (
             <>
@@ -318,5 +336,6 @@ export default function Login() {
         </div>
         <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
       </div>
+    </>
   )
 }