diff --git a/src/components/auth/AutoLogin.jsx b/src/components/auth/AutoLogin.jsx
index 0d539cbb..d400f2c4 100644
--- a/src/components/auth/AutoLogin.jsx
+++ b/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 ">
-        <span>{getMessage('site.name')}</span>
-        {getMessage('site.sub_name')}
-      </div>
-      <div className="login-input-wrap">
-        <div className="login-area id" style={{ fontWeight: 'bolder' }}>
-          {getMessage('login.auto.page.text')}
+    <>
+      {isLoading && <GlobalSpinner />}
+      <div className="login-input-frame">
+        <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" style={{ fontWeight: 'bolder' }}>
+            {getMessage('login.auto.page.text')}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx
index eca80361..b23f9c53 100644
--- a/src/components/auth/Login.jsx
+++ b/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">
-        <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 />
-        </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')}
+    <>
+      {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
+            />
+          </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="userId"
-                      name="id"
+                      id="checkId"
+                      name="checkId"
+                      value={checkId}
                       required
-                      value={userId}
-                      placeholder={getMessage('login.id.placeholder')}
+                      className="login-input"
+                      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) => {
-                        setUserId('')
+                      onClick={() => {
+                        setCheckId('')
                       }}
                     ></button>
                   </div>
-                  <div className={`login-area password ${secFocus ? 'focus' : ''}`}>
+                  <div className={`login-area email ${secFocus ? 'focus' : ''}`}>
                     <input
-                      type={passwordVisible ? 'text' : 'password'}
-                      className="login-input"
-                      id="password"
-                      name="password"
+                      id="checkEmail"
+                      name="checkEmail"
+                      type="email"
                       required
-                      autoComplete="current-password"
-                      placeholder={getMessage('login.password.placeholder')}
+                      className="login-input"
+                      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' : ''}`}
-                      onClick={(e) => {
-                        e.preventDefault()
-                        setPasswordVisible(!passwordVisible)
+                      className="id-delete"
+                      onClick={() => {
+                        setCheckEmail('')
                       }}
                     ></button>
                   </div>
-                  <div className="d-check-box login">
-                    <input
-                      type="checkbox"
-                      id="ch01"
-                      name="chkLoginId"
-                      checked={chkLoginId}
-                      onChange={(e) => {
-                        setChkLoginId(e.target.checked)
+                  <div className="pwreset-btn-box">
+                    <button
+                      type="button"
+                      className="login-btn light mr5"
+                      onClick={() => {
+                        setPasswordReset(1)
+                        setCheckEmail('')
+                        setCheckId('')
                       }}
-                    />
-                    <label htmlFor="ch01">{getMessage('login.id.save')}</label>
-                  </div>
-                  <div className="login-btn-box">
-                    <button type="submit" className="login-btn">
-                      {getMessage('login')}
+                    >
+                      {getMessage('login.init_password.btn.back')}
                     </button>
-                  </div>
-                  <div className="reset-password">
-                    <button type="button" onClick={() => setPasswordReset(2)}>
+                    <button type="button" className="login-btn" onClick={initPasswordProcess}>
                       {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"
-                    id="checkId"
-                    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 />}
+            </>
+          )}
+          {autoLoginParam && <AutoLogin />}
+        </div>
+        <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
       </div>
-      <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
-    </div>
+    </>
   )
 }
diff --git a/src/hooks/common/useRoof.js b/src/hooks/common/useRoof.js
index 0b5e5a6b..14407aa9 100644
--- a/src/hooks/common/useRoof.js
+++ b/src/hooks/common/useRoof.js
@@ -16,7 +16,9 @@ export function useRoof() {
       .filter((polygon) => polygon.name === 'roof')
       .forEach((polygon) => {
         if (allocDisplay) {
-          setSurfaceShapePattern(polygon, roofDisplay.column)
+          if (polygon.roofMaterial) {
+            setSurfaceShapePattern(polygon, roofDisplay.column, false, polygon.roofMaterial, true)
+          }
         } else {
           polygon.set('fill', null)
         }
diff --git a/src/hooks/module/useTrestle.js b/src/hooks/module/useTrestle.js
index c04bb3ce..2df04fdc 100644
--- a/src/hooks/module/useTrestle.js
+++ b/src/hooks/module/useTrestle.js
@@ -5,7 +5,7 @@ import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { getDegreeByChon } from '@/util/canvas-util'
 import { v4 as uuidv4 } from 'uuid'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { basicSettingState } from '@/store/settingAtom'
+import { basicSettingState, trestleDisplaySelector } from '@/store/settingAtom'
 import { useSwal } from '@/hooks/useSwal'
 
 // 회로 및 가대설정
@@ -15,6 +15,7 @@ export const useTrestle = () => {
   const { getQuotationItem } = useMasterController()
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const roofSizeSet = useRecoilValue(basicSettingState).roofSizeSet
+  const isTrestleDisplay = useRecoilValue(trestleDisplaySelector)
   const { swalFire } = useSwal()
   const apply = () => {
     try {
@@ -135,6 +136,7 @@ export const useTrestle = () => {
               selectable: false,
               surfaceId: surface.id,
               parentId: module.id,
+              visible: isTrestleDisplay,
             })
             canvas.add(eaveBar)
             canvas.renderAll()
@@ -165,6 +167,7 @@ export const useTrestle = () => {
                 selectable: false,
                 surfaceId: surface.id,
                 parentId: module.id,
+                visible: isTrestleDisplay,
               })
               canvas.add(halfEaveBar)
               canvas.renderAll()
@@ -193,6 +196,7 @@ export const useTrestle = () => {
                 strokeWidth: 4,
                 selectable: false,
                 parentId: module.id,
+                visible: isTrestleDisplay,
               })
               canvas.add(halfEaveBar)
               canvas.renderAll()
@@ -918,7 +922,7 @@ export const useTrestle = () => {
                     offsetX: 0,
                     offsetY: 0,
                   },
-
+                  visible: isTrestleDisplay,
                   parentId: module.id,
                   surfaceId: surface.id,
                   supFitQty,
@@ -952,6 +956,7 @@ export const useTrestle = () => {
               },
               parentId: module.id,
               surfaceId: surface.id,
+              visible: isTrestleDisplay,
               supFitQty,
               supFitIntvlPct,
               rackLen,
@@ -992,6 +997,7 @@ export const useTrestle = () => {
                   },
                   parentId: module.id,
                   surfaceId: surface.id,
+                  visible: isTrestleDisplay,
                   supFitQty,
                   supFitIntvlPct,
                   rackLen: rackLength,
@@ -1022,6 +1028,7 @@ export const useTrestle = () => {
               surfaceId: surface.id,
               strokeWidth: 4,
               selectable: false,
+              visible: isTrestleDisplay,
               supFitQty,
               supFitIntvlPct,
               rackLen,
@@ -1062,6 +1069,7 @@ export const useTrestle = () => {
                   },
                   parentId: module.id,
                   surfaceId: surface.id,
+                  visible: isTrestleDisplay,
                   supFitQty,
                   supFitIntvlPct,
                   rackLen: rackLength,
@@ -1090,6 +1098,7 @@ export const useTrestle = () => {
               },
               parentId: module.id,
               surfaceId: surface.id,
+              visible: isTrestleDisplay,
               strokeWidth: 4,
               selectable: false,
               supFitQty,
@@ -1130,6 +1139,7 @@ export const useTrestle = () => {
                   },
                   parentId: module.id,
                   surfaceId: surface.id,
+                  visible: isTrestleDisplay,
                   supFitQty,
                   supFitIntvlPct,
                   rackLen,
@@ -1158,6 +1168,7 @@ export const useTrestle = () => {
               },
               parentId: module.id,
               surfaceId: surface.id,
+              visible: isTrestleDisplay,
               strokeWidth: 4,
               selectable: false,
               supFitQty,
@@ -1209,6 +1220,7 @@ export const useTrestle = () => {
             fill: 'green',
             name: 'bracket',
             parentId: rack.parentId,
+            visible: isTrestleDisplay,
             surfaceId: surface.id,
             width: bracketLength,
             height: bracketLength,
@@ -1228,6 +1240,7 @@ export const useTrestle = () => {
             fill: 'green',
             name: 'bracket',
             parentId: rack.parentId,
+            visible: isTrestleDisplay,
             surfaceId: surface.id,
             width: bracketLength,
             height: bracketLength,
@@ -1246,6 +1259,7 @@ export const useTrestle = () => {
             top: y2 - bracketLength / 3,
             fill: 'green',
             parentId: rack.parentId,
+            visible: isTrestleDisplay,
             surfaceId: surface.id,
             name: 'bracket',
             width: bracketLength,
@@ -1266,6 +1280,7 @@ export const useTrestle = () => {
             fill: 'green',
             name: 'bracket',
             parentId: rack.parentId,
+            visible: isTrestleDisplay,
             surfaceId: surface.id,
             width: bracketLength,
             height: bracketLength,
@@ -1431,6 +1446,7 @@ export const useTrestle = () => {
         width: 10,
         height: 10,
         selectable: false,
+        visible: isTrestleDisplay,
       })
       canvas.add(bracket)
       canvas.renderAll()
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 29287689..07f46740 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -727,7 +727,7 @@ export function useCanvasSetting() {
     for (let i = 0; i < option1.length; i++) {
       switch (option1[i].column) {
         case 'allocDisplay': //할당 표시
-          optionName = ['1']
+          optionName = []
           break
         case 'outlineDisplay': //외벽선 표시
           optionName = ['outerLine', POLYGON_TYPE.WALL]
@@ -742,19 +742,20 @@ export function useCanvasSetting() {
           optionName = ['commonText']
           break
         case 'circuitNumDisplay': //회로번호 표시
-          optionName = ['7']
+          optionName = ['circuitNumber']
           break
         case 'flowDisplay': //흐름방향 표시
           optionName = ['arrow', 'flowText']
           break
         case 'trestleDisplay': //가대 표시
-          optionName = ['8']
+          optionName = ['rack', 'smartRack', 'bracket', 'eaveBar', 'halfEaveBar']
           break
         case 'imageDisplay': //이미지 표시
           optionName = ['9']
           break
         case 'totalDisplay': //집계표 표시
-          optionName = ['10']
+          // 작업할 필요 없음
+          optionName = []
           break
       }
       // 표시 선택 상태(true/false)
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 643c640d..edb8574c 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -235,6 +235,7 @@ export default function offsetPolygon(vertices, offset) {
   const arcSegments = 0
 
   const originPolygon = new QPolygon(vertices, { fontSize: 0 })
+  originPolygon.setViewLengthText(false)
 
   if (offset > 0) {
     let result = createMarginPolygon(polygon, offset, arcSegments).vertices