diff --git a/src/components/auth/Join.jsx b/src/components/auth/Join.jsx
index a9e79750..008de3a5 100644
--- a/src/components/auth/Join.jsx
+++ b/src/components/auth/Join.jsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useRouter } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
@@ -8,7 +8,11 @@ import Cookies from 'js-cookie'
 
 import { isObjectNotEmpty, inputTelNumberCheck, inputNumberCheck } from '@/util/common-utils'
 
+import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
+
 export default function Join() {
+  const [isLoading, setIsLoading] = useState(false)
+
   const { getMessage } = useMessage()
   const { promisePost } = useAxios()
   const router = useRouter()
@@ -152,6 +156,8 @@ export default function Join() {
           },
         }
 
+        setIsLoading(true)
+
         await promisePost({ url: '/api/login/v1.0/user/join', data: param })
           .then((res) => {
             if (res) {
@@ -162,8 +168,10 @@ export default function Join() {
                 alert(res.data.result.resultMsg)
               }
             }
+            setIsLoading(false)
           })
           .catch((error) => {
+            setIsLoading(false)
             alert(error.response.data.message)
           })
       }
@@ -171,277 +179,280 @@ export default function Join() {
   }
 
   return (
-    <div className="center-page-wrap">
-      <div className="center-page-inner">
-        <form onSubmit={joinProcess}>
-          <div className="center-page-tit">{getMessage('join.title')}</div>
-          <div className="sub-table-box signup">
-            <div className="table-box-title-wrap">
-              <div className="title-wrap">
-                <h3>
-                  {getMessage('join.sub1.title')} <span className="important">(*{getMessage('common.require')})</span>
-                </h3>
-                <span className="option">{getMessage('join.sub1.comment')}</span>
+    <>
+      {isLoading && <GlobalSpinner />}
+      <div className="center-page-wrap">
+        <div className="center-page-inner">
+          <form onSubmit={joinProcess}>
+            <div className="center-page-tit">{getMessage('join.title')}</div>
+            <div className="sub-table-box signup">
+              <div className="table-box-title-wrap">
+                <div className="title-wrap">
+                  <h3>
+                    {getMessage('join.sub1.title')} <span className="important">(*{getMessage('common.require')})</span>
+                  </h3>
+                  <span className="option">{getMessage('join.sub1.comment')}</span>
+                </div>
               </div>
-            </div>
-            <div className="common-table">
-              <table>
-                <colgroup>
-                  <col style={{ width: '180px' }} />
-                  <col />
-                </colgroup>
-                <tbody>
-                  {/* 판매대리점명 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub1.storeQcastNm')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '700px' }}>
-                        <input
-                          type="text"
-                          id="storeQcastNm"
-                          name="storeQcastNm"
-                          alt={getMessage('join.sub1.storeQcastNm')}
-                          className="input-light"
-                          placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
-                          maxLength={30}
-                          ref={storeQcastNmRef}
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 판매대리점명 후리가나 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub1.storeQcastNmKana')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '700px' }}>
-                        <input
-                          type="text"
-                          id="storeQcastNmKana"
-                          name="storeQcastNmKana"
-                          className="input-light"
-                          placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
-                          maxLength={30}
-                          ref={storeQcastNmKanaRef}
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 우편번호/주소 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="flx-box">
-                        <div className="input-wrap mr5" style={{ width: '200px' }}>
+              <div className="common-table">
+                <table>
+                  <colgroup>
+                    <col style={{ width: '180px' }} />
+                    <col />
+                  </colgroup>
+                  <tbody>
+                    {/* 판매대리점명 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub1.storeQcastNm')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '700px' }}>
                           <input
                             type="text"
-                            id="postCd"
-                            name="postCd"
+                            id="storeQcastNm"
+                            name="storeQcastNm"
+                            alt={getMessage('join.sub1.storeQcastNm')}
                             className="input-light"
-                            placeholder={getMessage('join.sub1.postCd_placeholder')}
-                            onChange={inputNumberCheck}
-                            maxLength={7}
-                            ref={postCdRef}
+                            placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
+                            maxLength={30}
+                            ref={storeQcastNmRef}
                           />
                         </div>
-                        <div className="input-wrap" style={{ width: '495px' }}>
+                      </td>
+                    </tr>
+                    {/* 판매대리점명 후리가나 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub1.storeQcastNmKana')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '700px' }}>
                           <input
                             type="text"
-                            id="addr"
-                            name="addr"
+                            id="storeQcastNmKana"
+                            name="storeQcastNmKana"
                             className="input-light"
-                            placeholder={getMessage('join.sub1.addr_placeholder')}
-                            maxLength={50}
-                            ref={addrRef}
+                            placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
+                            maxLength={30}
+                            ref={storeQcastNmKanaRef}
                           />
                         </div>
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 전화번호 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub1.telNo')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input
-                          type="text"
-                          id="telNo"
-                          name="telNo"
-                          className="input-light"
-                          placeholder={getMessage('join.sub1.telNo_placeholder')}
-                          maxLength={15}
-                          onChange={inputTelNumberCheck}
-                          ref={telNoRef}
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* FAX 번호 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub1.fax')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input
-                          type="text"
-                          id="fax"
-                          name="fax"
-                          className="input-light"
-                          placeholder={getMessage('join.sub1.fax_placeholder')}
-                          maxLength={15}
-                          onChange={inputTelNumberCheck}
-                          ref={faxRef}
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 법인번호 */}
-                  <tr>
-                    <th>{getMessage('join.sub1.bizNo')}</th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="bizNo" name="bizNo" className="input-light" maxLength={15} onChange={inputTelNumberCheck} />
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div className="sub-table-box signup">
-            <div className="table-box-title-wrap">
-              <div className="title-wrap">
-                <h3>
-                  {getMessage('join.sub2.title')} <span className="important">(*{getMessage('common.require')})</span>
-                </h3>
+                      </td>
+                    </tr>
+                    {/* 우편번호/주소 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="flx-box">
+                          <div className="input-wrap mr5" style={{ width: '200px' }}>
+                            <input
+                              type="text"
+                              id="postCd"
+                              name="postCd"
+                              className="input-light"
+                              placeholder={getMessage('join.sub1.postCd_placeholder')}
+                              onChange={inputNumberCheck}
+                              maxLength={7}
+                              ref={postCdRef}
+                            />
+                          </div>
+                          <div className="input-wrap" style={{ width: '495px' }}>
+                            <input
+                              type="text"
+                              id="addr"
+                              name="addr"
+                              className="input-light"
+                              placeholder={getMessage('join.sub1.addr_placeholder')}
+                              maxLength={50}
+                              ref={addrRef}
+                            />
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    {/* 전화번호 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub1.telNo')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input
+                            type="text"
+                            id="telNo"
+                            name="telNo"
+                            className="input-light"
+                            placeholder={getMessage('join.sub1.telNo_placeholder')}
+                            maxLength={15}
+                            onChange={inputTelNumberCheck}
+                            ref={telNoRef}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* FAX 번호 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub1.fax')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input
+                            type="text"
+                            id="fax"
+                            name="fax"
+                            className="input-light"
+                            placeholder={getMessage('join.sub1.fax_placeholder')}
+                            maxLength={15}
+                            onChange={inputTelNumberCheck}
+                            ref={faxRef}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* 법인번호 */}
+                    <tr>
+                      <th>{getMessage('join.sub1.bizNo')}</th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" id="bizNo" name="bizNo" className="input-light" maxLength={15} onChange={inputTelNumberCheck} />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
             </div>
-            <div className="common-table">
-              <table>
-                <colgroup>
-                  <col style={{ width: '180px' }} />
-                  <col />
-                </colgroup>
-                <tbody>
-                  {/* 담당자명 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub2.userNm')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="userNm" name="userNm" className="input-light" maxLength={20} ref={userNmRef} />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 담당자명 후리가나 */}
-                  <tr>
-                    <th>{getMessage('join.sub2.userNmKana')}</th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="userNmKana" name="userNmKana" maxLength={20} className="input-light" />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 신청 ID */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub2.userId')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="userId" name="userId" className="input-light" maxLength={20} ref={userIdRef} />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 이메일 주소 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub2.email')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="email" name="email" className="input-light" maxLength={30} ref={emailRef} />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 전화번호 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub2.telNo')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input
-                          type="text"
-                          id="userTelNo"
-                          name="userTelNo"
-                          className="input-light"
-                          placeholder={getMessage('join.sub2.telNo_placeholder')}
-                          maxLength={15}
-                          onChange={inputTelNumberCheck}
-                          ref={userTelNoRef}
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* FAX 번호 */}
-                  <tr>
-                    <th>
-                      {getMessage('join.sub2.fax')} <span className="important">*</span>
-                    </th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input
-                          type="text"
-                          id="userFax"
-                          name="userFax"
-                          className="input-light"
-                          placeholder={getMessage('join.sub1.fax_placeholder')}
-                          maxLength={15}
-                          onChange={inputTelNumberCheck}
-                          ref={userFaxRef}
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  {/* 부서명 */}
-                  <tr>
-                    <th>{getMessage('join.sub2.category')}</th>
-                    <td>
-                      <div className="input-wrap" style={{ width: '200px' }}>
-                        <input type="text" id="category" name="category" className="input-light" maxLength={20} />
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+            <div className="sub-table-box signup">
+              <div className="table-box-title-wrap">
+                <div className="title-wrap">
+                  <h3>
+                    {getMessage('join.sub2.title')} <span className="important">(*{getMessage('common.require')})</span>
+                  </h3>
+                </div>
+              </div>
+              <div className="common-table">
+                <table>
+                  <colgroup>
+                    <col style={{ width: '180px' }} />
+                    <col />
+                  </colgroup>
+                  <tbody>
+                    {/* 담당자명 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub2.userNm')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" id="userNm" name="userNm" className="input-light" maxLength={20} ref={userNmRef} />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* 담당자명 후리가나 */}
+                    <tr>
+                      <th>{getMessage('join.sub2.userNmKana')}</th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" id="userNmKana" name="userNmKana" maxLength={20} className="input-light" />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* 신청 ID */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub2.userId')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" id="userId" name="userId" className="input-light" maxLength={20} ref={userIdRef} />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* 이메일 주소 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub2.email')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" id="email" name="email" className="input-light" maxLength={30} ref={emailRef} />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* 전화번호 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub2.telNo')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input
+                            type="text"
+                            id="userTelNo"
+                            name="userTelNo"
+                            className="input-light"
+                            placeholder={getMessage('join.sub2.telNo_placeholder')}
+                            maxLength={15}
+                            onChange={inputTelNumberCheck}
+                            ref={userTelNoRef}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* FAX 번호 */}
+                    <tr>
+                      <th>
+                        {getMessage('join.sub2.fax')} <span className="important">*</span>
+                      </th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input
+                            type="text"
+                            id="userFax"
+                            name="userFax"
+                            className="input-light"
+                            placeholder={getMessage('join.sub1.fax_placeholder')}
+                            maxLength={15}
+                            onChange={inputTelNumberCheck}
+                            ref={userFaxRef}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                    {/* 부서명 */}
+                    <tr>
+                      <th>{getMessage('join.sub2.category')}</th>
+                      <td>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" id="category" name="category" className="input-light" maxLength={20} />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
-          </div>
-          <div className="sign-up-btn-wrap">
-            <button
-              type="button"
-              className="btn-origin grey mr5"
-              onClick={() => {
-                router.push('/login')
-              }}
-            >
-              {getMessage('join.btn.login_page')}
-            </button>
-            <button type="submit" className="btn-origin navy">
-              {getMessage('join.btn.approval_request')}
-            </button>
-          </div>
-        </form>
+            <div className="sign-up-btn-wrap">
+              <button
+                type="button"
+                className="btn-origin grey mr5"
+                onClick={() => {
+                  router.push('/login')
+                }}
+              >
+                {getMessage('join.btn.login_page')}
+              </button>
+              <button type="submit" className="btn-origin navy">
+                {getMessage('join.btn.approval_request')}
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
-    </div>
+    </>
   )
 }