로그인 페이지 로딩바 추가

src/components/auth/AutoLogin.jsx

@@ -1,21 +1,27 @@
 '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 (
-    <div className="login-input-frame">
+    <>
-      <div className="login-frame-tit ">
+      {isLoading && <GlobalSpinner />}
-        <span>{getMessage('site.name')}</span>
+      <div className="login-input-frame">
-        {getMessage('site.sub_name')}
+        <div className="login-frame-tit ">
-      </div>
+          <span>{getMessage('site.name')}</span>
-      <div className="login-input-wrap">
+          {getMessage('site.sub_name')}
-        <div className="login-area id" style={{ fontWeight: 'bolder' }}>
+        </div>
-          {getMessage('login.auto.page.text')}
+        <div className="login-input-wrap">
+          <div className="login-area id" style={{ fontWeight: 'bolder' }}>
+            {getMessage('login.auto.page.text')}
+          </div>
         </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,36 +148,135 @@ export default function Login() {
         }
       })
       .catch((error) => {
+        setIsLoading(false)
         alert(error.response.data.message)
       })
   }
 
   return (
-    <div className="login-wrap">
+    <>
-      <div className="login-inner">
+      {isLoading && <GlobalSpinner />}
-        <Link href={'/login'} className="login-logo">
+      <div className="login-wrap">
-          <Image src="/static/images/main/login-logo.svg" alt="react" width={236} height={43} styles={{ width: '236px', height: '43px' }} priority />
+        <div className="login-inner">
-        </Link>
+          <Link href={'/login'} className="login-logo">
-        {!autoLoginParam && passwordReset === 1 && (
+            <Image
-          <>
+              src="/static/images/main/login-logo.svg"
-            <div className="login-input-frame">
+              alt="react"
-              <form onSubmit={loginProcess} className="space-y-6">
+              width={236}
-                <div className="login-frame-tit">
+              height={43}
-                  <span>{getMessage('site.name')}</span>
+              styles={{ width: '236px', height: '43px' }}
-                  {getMessage('site.sub_name')}
+              priority
+            />
+          </Link>
+          {!autoLoginParam && passwordReset === 1 && (
+            <>
+              <div className="login-input-frame">
+                <form onSubmit={loginProcess} className="space-y-6">
+                  <div className="login-frame-tit">
+                    <span>{getMessage('site.name')}</span>
+                    {getMessage('site.sub_name')}
+                  </div>
+                  <div className="login-input-wrap">
+                    <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
+                      <input
+                        type="text"
+                        className="login-input"
+                        id="userId"
+                        name="id"
+                        required
+                        value={userId}
+                        placeholder={getMessage('login.id.placeholder')}
+                        onChange={(e) => {
+                          setUserId(e.target.value)
+                        }}
+                        onFocus={() => setIdFocus(true)}
+                        onBlur={() => setIdFocus(false)}
+                      />
+                      <button
+                        type="button"
+                        className="id-delete"
+                        onClick={(e) => {
+                          setUserId('')
+                        }}
+                      ></button>
+                    </div>
+                    <div className={`login-area password ${secFocus ? 'focus' : ''}`}>
+                      <input
+                        type={passwordVisible ? 'text' : 'password'}
+                        className="login-input"
+                        id="password"
+                        name="password"
+                        required
+                        autoComplete="current-password"
+                        placeholder={getMessage('login.password.placeholder')}
+                        onChange={(e) => {
+                          setPasswordVisible(passwordVisible)
+                        }}
+                        onFocus={() => setSecFocus(true)}
+                        onBlur={() => setSecFocus(false)}
+                      />
+                      <button
+                        type="button"
+                        className={`password-hidden ${passwordVisible ? 'visible' : ''}`}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          setPasswordVisible(!passwordVisible)
+                        }}
+                      ></button>
+                    </div>
+                    <div className="d-check-box login">
+                      <input
+                        type="checkbox"
+                        id="ch01"
+                        name="chkLoginId"
+                        checked={chkLoginId}
+                        onChange={(e) => {
+                          setChkLoginId(e.target.checked)
+                        }}
+                      />
+                      <label htmlFor="ch01">{getMessage('login.id.save')}</label>
+                    </div>
+                    <div className="login-btn-box">
+                      <button type="submit" className="login-btn">
+                        {getMessage('login')}
+                      </button>
+                    </div>
+                    <div className="reset-password">
+                      <button type="button" onClick={() => setPasswordReset(2)}>
+                        {getMessage('login.init_password.btn')}
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+              <div className="login-guide-wrap">
+                <span>※</span>
+                {getMessage('login.guide.text')}
+                <br />
+                {getMessage('login.guide.sub1')} <Link href={'../join'}>{getMessage('login.guide.join.btn')}</Link>
+                {getMessage('login.guide.sub2')}
+              </div>
+            </>
+          )}
+          {!autoLoginParam && passwordReset === 2 && (
+            <>
+              <div className="login-input-frame">
+                <div className="login-frame-tit pw-reset">
+                  <span>{getMessage('login.init_password.title')}</span>
+                  {getMessage('login.init_password.sub_title')}
                 </div>
                 <div className="login-input-wrap">
                   <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
                     <input
                       type="text"
-                      className="login-input"
+                      id="checkId"
-                      id="userId"
+                      name="checkId"
-                      name="id"
+                      value={checkId}
                       required
-                      value={userId}
+                      className="login-input"
-                      placeholder={getMessage('login.id.placeholder')}
+                      placeholder={getMessage('login.init_password.id.placeholder')}
                       onChange={(e) => {
-                        setUserId(e.target.value)
+                        setCheckId(e.target.value)
                       }}
                       onFocus={() => setIdFocus(true)}
                       onBlur={() => setIdFocus(false)}
@@ -177,146 +284,58 @@ export default function Login() {
                     <button
                       type="button"
                       className="id-delete"
-                      onClick={(e) => {
+                      onClick={() => {
-                        setUserId('')
+                        setCheckId('')
                       }}
                     ></button>
                   </div>
-                  <div className={`login-area password ${secFocus ? 'focus' : ''}`}>
+                  <div className={`login-area email ${secFocus ? 'focus' : ''}`}>
                     <input
-                      type={passwordVisible ? 'text' : 'password'}
+                      id="checkEmail"
-                      className="login-input"
+                      name="checkEmail"
-                      id="password"
+                      type="email"
-                      name="password"
                       required
-                      autoComplete="current-password"
+                      className="login-input"
-                      placeholder={getMessage('login.password.placeholder')}
+                      value={checkEmail}
                       onChange={(e) => {
-                        setPasswordVisible(passwordVisible)
+                        setCheckEmail(e.target.value)
                       }}
+                      placeholder={getMessage('login.init_password.email.placeholder')}
                       onFocus={() => setSecFocus(true)}
                       onBlur={() => setSecFocus(false)}
                     />
                     <button
                       type="button"
-                      className={`password-hidden ${passwordVisible ? 'visible' : ''}`}
+                      className="id-delete"
-                      onClick={(e) => {
+                      onClick={() => {
-                        e.preventDefault()
+                        setCheckEmail('')
-                        setPasswordVisible(!passwordVisible)
                       }}
                     ></button>
                   </div>
-                  <div className="d-check-box login">
+                  <div className="pwreset-btn-box">
-                    <input
+                    <button
-                      type="checkbox"
+                      type="button"
-                      id="ch01"
+                      className="login-btn light mr5"
-                      name="chkLoginId"
+                      onClick={() => {
-                      checked={chkLoginId}
+                        setPasswordReset(1)
-                      onChange={(e) => {
+                        setCheckEmail('')
-                        setChkLoginId(e.target.checked)
+                        setCheckId('')
                       }}
-                    />
+                    >
-                    <label htmlFor="ch01">{getMessage('login.id.save')}</label>
+                      {getMessage('login.init_password.btn.back')}
-                  </div>
-                  <div className="login-btn-box">
-                    <button type="submit" className="login-btn">
-                      {getMessage('login')}
                     </button>
-                  </div>
+                    <button type="button" className="login-btn" onClick={initPasswordProcess}>
-                  <div className="reset-password">
-                    <button type="button" onClick={() => setPasswordReset(2)}>
                       {getMessage('login.init_password.btn')}
                     </button>
                   </div>
                 </div>
-              </form>
-            </div>
-            <div className="login-guide-wrap">
-              <span>※</span>
-              {getMessage('login.guide.text')}
-              <br />
-              {getMessage('login.guide.sub1')} <Link href={'../join'}>{getMessage('login.guide.join.btn')}</Link>
-              {getMessage('login.guide.sub2')}
-            </div>
-          </>
-        )}
-        {!autoLoginParam && passwordReset === 2 && (
-          <>
-            <div className="login-input-frame">
-              <div className="login-frame-tit pw-reset">
-                <span>{getMessage('login.init_password.title')}</span>
-                {getMessage('login.init_password.sub_title')}
               </div>
-              <div className="login-input-wrap">
+            </>
-                <div className={`login-area id ${idFocus ? 'focus' : ''}`}>
+          )}
-                  <input
+          {autoLoginParam && <AutoLogin />}
-                    type="text"
+        </div>
-                    id="checkId"
+        <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
-                    name="checkId"
-                    value={checkId}
-                    required
-                    className="login-input"
-                    placeholder={getMessage('login.init_password.id.placeholder')}
-                    onChange={(e) => {
-                      setCheckId(e.target.value)
-                    }}
-                    onFocus={() => setIdFocus(true)}
-                    onBlur={() => setIdFocus(false)}
-                  />
-                  <button
-                    type="button"
-                    className="id-delete"
-                    onClick={() => {
-                      setCheckId('')
-                    }}
-                  ></button>
-                </div>
-                <div className={`login-area email ${secFocus ? 'focus' : ''}`}>
-                  <input
-                    id="checkEmail"
-                    name="checkEmail"
-                    type="email"
-                    required
-                    className="login-input"
-                    value={checkEmail}
-                    onChange={(e) => {
-                      setCheckEmail(e.target.value)
-                    }}
-                    placeholder={getMessage('login.init_password.email.placeholder')}
-                    onFocus={() => setSecFocus(true)}
-                    onBlur={() => setSecFocus(false)}
-                  />
-                  <button
-                    type="button"
-                    className="id-delete"
-                    onClick={() => {
-                      setCheckEmail('')
-                    }}
-                  ></button>
-                </div>
-                <div className="pwreset-btn-box">
-                  <button
-                    type="button"
-                    className="login-btn light mr5"
-                    onClick={() => {
-                      setPasswordReset(1)
-                      setCheckEmail('')
-                      setCheckId('')
-                    }}
-                  >
-                    {getMessage('login.init_password.btn.back')}
-                  </button>
-                  <button type="button" className="login-btn" onClick={initPasswordProcess}>
-                    {getMessage('login.init_password.btn')}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-        {autoLoginParam && <AutoLogin />}
       </div>
-      <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
+    </>
-    </div>
   )
 }