1.로그인 후 메인화면 작업

2.layout.js QModal 미사용으로 주석처리
3. 퍼블 10/11 11시26분 까지 반영

public/static/images/main/login_email.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon" clip-path="url(#clip0_4212_2156)">
+<path id="Vector" d="M1.125 0C0.503906 0 0 0.503906 0 1.125C0 1.47891 0.166406 1.81172 0.45 2.025L5.55 5.85C5.81719 6.04922 6.18281 6.04922 6.45 5.85L11.55 2.025C11.8336 1.81172 12 1.47891 12 1.125C12 0.503906 11.4961 0 10.875 0H1.125ZM0 2.625V7.5C0 8.32734 0.672656 9 1.5 9H10.5C11.3273 9 12 8.32734 12 7.5V2.625L6.9 6.45C6.36562 6.85078 5.63438 6.85078 5.1 6.45L0 2.625Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_4212_2156">
+<rect width="12" height="9" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/sub/address_search.svg

@@ -0,0 +1,11 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4220_3331)">
+<path d="M17.8789 17.9736L19.8789 19.9736" stroke="#364864" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M9.98926 18.4036C14.6837 18.4036 18.4893 14.5986 18.4893 9.90494C18.4893 5.21124 14.6837 1.40625 9.98926 1.40625C5.29484 1.40625 1.48926 5.21124 1.48926 9.90494C1.48926 14.5986 5.29484 18.4036 9.98926 18.4036Z" stroke="#364864" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_4220_3331">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/sub/information_help.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9598 10.4707C21.0134 11.3009 21.0134 12.1606 20.9598 12.9908C20.6856 17.2332 17.3536 20.6124 13.1706 20.8905C11.7435 20.9853 10.2536 20.9851 8.8294 20.8905C8.33896 20.8579 7.8044 20.7408 7.34401 20.5512C6.83177 20.3402 6.5756 20.2347 6.44544 20.2507C6.31527 20.2668 6.1264 20.406 5.74868 20.6846C5.08268 21.1757 4.24367 21.5284 2.99943 21.4981C2.37026 21.4828 2.05568 21.4751 1.91484 21.235C1.77401 20.9949 1.94941 20.6625 2.30021 19.9978C2.78674 19.0758 3.09501 18.0202 2.62791 17.1745C1.82343 15.9665 1.1401 14.5359 1.04024 12.9908C0.986587 12.1606 0.986587 11.3009 1.04024 10.4707C1.31441 6.22831 4.64639 2.84907 8.8294 2.57101C10.0318 2.49108 10.2812 2.4785 11.5 2.53362" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9996 5C20.9996 6.933 19.4326 8.5 17.4996 8.5C15.5666 8.5 13.9996 6.933 13.9996 5C13.9996 3.067 15.5666 1.5 17.4996 1.5C19.4326 1.5 20.9996 3.067 20.9996 5Z" stroke="#45576F" stroke-width="1.5"/>
+</svg>

src/app/layout.js

@@ -75,7 +75,7 @@ export default async function RootLayout({ children }) {
             <QcastProvider>{children}</QcastProvider>
           )}
           <ToastContainer />
-          <QModal />
+          {/* <QModal /> */}
         </body>
       </html>
     </RecoilRootWrapper>

src/components/Main.jsx

@@ -9,18 +9,16 @@ import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import MainContents from './main/MainContents'
 import { useMessage } from '@/hooks/useMessage'
-import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
 import { stuffSearchState } from '@/store/stuffAtom'
-
+import { useForm } from 'react-hook-form'
-export default function MainPage(props) {
+import '@/styles/contents.scss'
+import ChangePasswordPop from './main/ChangePasswordPop'
+export default function MainPage() {
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
-  const [open, setOpen] = useRecoilState(modalState)
-  const setContent = useSetRecoilState(modalContent)
-  const setModalProps = useSetRecoilState(modalProps)
 
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
-  const { get, patch } = useAxios(globalLocaleState)
+  const { get } = useAxios(globalLocaleState)
   const router = useRouter()
   const { getMessage } = useMessage()
 
@@ -38,76 +36,8 @@ export default function MainPage(props) {
 
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
 
-  //비밀번호 변경
-  const updateProcess = async (formData) => {
-    const pwd1 = formData.get('password1')
-    const pwd2 = formData.get('password2')
-
-    if (pwd1 !== pwd2) {
-      alert('입력한 패스워드가 다릅니다')
-      return false
-    }
-
-    //패스워드 길이수 체크
-    if (checkLength(pwd1) > 10) {
-      alert('반각10자이내로 입력')
-    }
-
-    const param = {
-      loginId: sessionState.userId,
-      chgType: 'I',
-      chgPwd: formData.get('password1'),
-    }
-
-    await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => {
-      if (res) {
-        if (res.result.resultCode === 'S') {
-          alert('비밀번호가 변경되었습니다.')
-          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
-          setOpen(false)
-        } else {
-          alert(res.result.resultMsg)
-        }
-      }
-    })
-  }
-
-  //자리수체크
-  const checkLength = (pwd1) => {
-    let str = new String(pwd1)
-    let _byte = 0
-    if (str.length !== 0) {
-      for (let i = 0; i < str.length; i++) {
-        let str2 = str.charAt(i)
-        if (encodeURIComponent(str2).length > 4) {
-          _byte += 2
-        } else {
-          _byte++
-        }
-      }
-    }
-    return _byte
-  }
-
-  //공백제거
-  const checkValue = (e) => {
-    let spaceChk = /\s/
-    if (spaceChk.exec(e.target.value)) {
-      e.target.value = e.target.value.replace(/\s|/gi, '')
-      return false
-    }
-  }
-
   useEffect(() => {
-    if (sessionState.pwdInitYn === 'N') {
+    if (sessionState.pwdInitYn === 'Y') {
-      setOpen(true)
-      setContent(html)
-      setModalProps({
-        closeOnOverlayClick: false,
-        closeOnEsc: false,
-        showCloseIcon: false,
-      })
-    } else {
       fetchObjectList()
     }
   }, [sessionState])
@@ -130,74 +60,6 @@ export default function MainPage(props) {
     }
   }
 
-  // 모달팝업 컨텐츠
-  const html = (
-    <>
-      <p className="text-2xl">비밀번호 변경</p>
-      <p>* 초기화된 비밀번호로 로그인한 경우, 비밀번호를 변경해야 사이트 이용이 가능합니다.</p>
-      <p>비밀번호를 변경하지 않을 경우, 로그인 화면으로 이동합니다.</p>
-      <form action={updateProcess}>
-        <table>
-          <colgroup>
-            <col style={{ width: '200px' }} />
-            <col />
-          </colgroup>
-          <tbody>
-            <tr>
-              <th>
-                신규비밀번호 입력 <span className="important">*</span>
-              </th>
-              <td>
-                <div className="input-wrap" style={{ width: '500px' }}>
-                  <input
-                    type="text"
-                    className="input-origin"
-                    name="password1"
-                    required
-                    autoComplete="off"
-                    onChange={checkValue}
-                    onKeyUp={checkValue}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th>
-                신규비밀번호 재입력 <span className="important">*</span>
-              </th>
-              <td>
-                <div className="input-wrap" style={{ width: '500px' }}>
-                  <input
-                    type="text"
-                    className="input-origin"
-                    name="password2"
-                    required
-                    autoComplete="off"
-                    onChange={checkValue}
-                    onKeyUp={checkValue}
-                  />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <button type="submit" className="btn-origin navy mr5">
-          변경
-        </button>
-        <button
-          className="btn-origin grey"
-          onClick={() => {
-            router.push('/login')
-            setOpen(false)
-          }}
-        >
-          변경안함
-        </button>
-      </form>
-    </>
-  )
-
   // 엔터 이벤트
   const handleByOnKeyUp = (e) => {
     if (e.key === 'Enter') {
@@ -250,7 +112,7 @@ export default function MainPage(props) {
 
   return (
     <>
-      {sessionState.pwdInitYn === 'Y' && (
+      {(sessionState.pwdInitYn === 'Y' && (
         <>
           <div className="background-bord"></div>
           <div className="main-contents">
@@ -297,6 +159,10 @@ export default function MainPage(props) {
             />
           </div>
         </>
+      )) || (
+        <>
+          <ChangePasswordPop />
+        </>
       )}
     </>
   )

src/components/main/ChangePasswordPop.jsx

@@ -0,0 +1,168 @@
+import React from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import { useForm } from 'react-hook-form'
+import { sessionStore } from '@/store/commonAtom'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+
+export default function ChangePasswordPop() {
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { patch } = useAxios(globalLocaleState)
+  const { getMessage } = useMessage()
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
+  const formInitValue = {
+    password1: '',
+    password2: '',
+  }
+  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
+    defaultValues: formInitValue,
+  })
+
+  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
+
+  //자리수체크
+  const checkLength = (pwd1) => {
+    let str = new String(pwd1)
+    let _byte = 0
+    if (str.length !== 0) {
+      for (let i = 0; i < str.length; i++) {
+        let str2 = str.charAt(i)
+        if (encodeURIComponent(str2).length > 4) {
+          _byte += 2
+        } else {
+          _byte++
+        }
+      }
+    }
+    return _byte
+  }
+
+  //공백제거
+  const checkValue = (e) => {
+    let spaceChk = /\s/
+    if (spaceChk.exec(e.target.value)) {
+      e.target.value = e.target.value.replace(/\s|/gi, '')
+      return false
+    }
+  }
+
+  //비밀번호 변경
+  const updateProcess = async () => {
+    const _password1 = form.watch('password1')
+    const _password2 = form.watch('password2')
+
+    if (_password1 !== _password2) {
+      alert(getMessage('main.popup.login.validate1'))
+      return false
+    }
+
+    //패스워드 길이수 체크
+    if (checkLength(_password1) > 10) {
+      alert(getMessage('main.popup.login.validate2'))
+    }
+
+    const param = {
+      loginId: sessionState.userId,
+      chgType: 'I',
+      chgPwd: _password1,
+    }
+    await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => {
+      if (res) {
+        if (res.result.resultCode === 'S') {
+          alert(getMessage('main.popup.login.success'))
+          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
+        } else {
+          alert(res.result.resultMsg)
+        }
+      }
+    })
+  }
+
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="title">{getMessage('main.popup.login.popupTitle')}</h1>
+          </div>
+          <div className="modal-body">
+            <div className="modal-body-inner">
+              <div className="change-password-box">
+                <div className="form-table">
+                  <div className="table-item">
+                    <div className="table-item-th">
+                      <div className="change-password-tit">
+                        <div className="tit-b">
+                          {getMessage('main.popup.login.newPassword1')}
+                          <span className="important">*</span>
+                        </div>
+                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
+                      </div>
+                    </div>
+                    <div className="table-item-td">
+                      <div className="change-password-input">
+                        <input
+                          type="text"
+                          className="change-password"
+                          {...form.register('password1')}
+                          autoComplete="off"
+                          onChange={checkValue}
+                          onKeyUp={checkValue}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="table-item">
+                    <div className="table-item-th">
+                      <div className="change-password-tit">
+                        <div className="tit-b">
+                          {getMessage('main.popup.login.newPassword2')}
+                          <span className="important">*</span>
+                        </div>
+                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
+                      </div>
+                    </div>
+                    <div className="table-item-td">
+                      <div className="change-password-input">
+                        <input
+                          type="text"
+                          className="change-password"
+                          {...form.register('password2')}
+                          autoComplete="off"
+                          onChange={checkValue}
+                          onKeyUp={checkValue}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="change-password-guide">
+                <span>{getMessage('main.popup.login.guide1')}</span>
+                <span>{getMessage('main.popup.login.guide2')}</span>
+              </div>
+            </div>
+            <div className="footer-btn-wrap">
+              <button type="sumbit" className="btn-origin navy mr5" onClick={updateProcess}>
+                {getMessage('main.popup.login.btn1')}
+              </button>
+              <button
+                type="button"
+                className="btn-origin grey"
+                onClick={() => {
+                  router.push('/login')
+                  setOpen(false)
+                }}
+              >
+                {getMessage('main.popup.login.btn2')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/locales/ja.json

@@ -372,5 +372,16 @@
   "main.content.objectList": "最近の更新物件一覧",
   "main.content.notice": "お知らせ",
   "main.content.download1": "操作マニュアル",
-  "main.content.download2": "屋根の説明書"
+  "main.content.download2": "屋根の説明書",
+  "main.popup.login.popupTitle": "パスワード変更",
+  "main.popup.login.newPassword1": "新しいパスワードを入力",
+  "main.popup.login.newPassword2": "新規パスワード再入力",
+  "main.popup.login.placeholder": "半角10文字以内 ",
+  "main.popup.login.guide1": "初期化されたパスワードでログインした場合、パスワードを変更しなければサイト利用が可能です。",
+  "main.popup.login.guide2": "パスワードを変更しない場合は、ログイン画面に進みます。",
+  "main.popup.login.btn1": "変更",
+  "main.popup.login.btn2": "変更しない",
+  "main.popup.login.validate1": "入力したパスワードが異なります。",
+  "main.popup.login.validate2": "半角10文字以内で入力してください。",
+  "main.popup.login.success": "パスワードが変更されました。"
 }

src/locales/ko.json

@@ -375,5 +375,16 @@
   "main.content.objectList": "최근 갱신 물건목록",
   "main.content.notice": "공지사항",
   "main.content.download1": "조작메뉴얼",
-  "main.content.download2": "지붕설명서"
+  "main.content.download2": "지붕설명서",
+  "main.popup.login.popupTitle": "비밀번호변경",
+  "main.popup.login.newPassword1": "새 비밀번호 입력",
+  "main.popup.login.newPassword2": "새 비밀번호 재입력",
+  "main.popup.login.placeholder": "반각 10자 이내",
+  "main.popup.login.guide1": "초기화된 비밀번호로 로그인한 경우 비밀번호를 변경하지 않으면 사이트 이용이 가능합니다.",
+  "main.popup.login.guide2": "비밀번호를 변경하지 않으려면 로그인 화면으로 이동합니다.",
+  "main.popup.login.btn1": "변경",
+  "main.popup.login.btn2": "변경안함",
+  "main.popup.login.validate1": "입력한 패스워드가 다릅니다.",
+  "main.popup.login.validate2": "반각 10자 이내로 입력해주세요.",
+  "main.popup.login.success": "비밀번호가 변경되었습니다."
 }

src/styles/_canvasside.scss

@@ -8,7 +8,7 @@
   height: 40px;
   line-height: 40px;
   background-color: #fff;
-    border: 1px solid #DFDFDF;
+  border: 1px solid #dfdfdf;
   padding: 0 34px 0 10px;
   border-radius: 2px;
   box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
@@ -27,7 +27,7 @@
   h2 {
     font-size: 12px;
     font-weight: 500;
-        color: #3D3D3D;
+    color: #3d3d3d;
   }
   .penal-table-wrap {
     display: none;
@@ -35,8 +35,8 @@
     top: 100%;
     left: -1px;
     min-width: calc(100% + 2px);
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
-        border: 1px solid #3D3D3D;
+    border: 1px solid #3d3d3d;
     padding: 20px;
     .penal-table {
       table-layout: fixed;
@@ -64,8 +64,8 @@
     }
   }
   &.act {
-        border: 1px solid #3D3D3D;
+    border: 1px solid #3d3d3d;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
     h2 {
       color: #fff;
     }
@@ -82,12 +82,12 @@
 .context-menu-wrap {
   min-width: 238px;
   border-radius: 4px;
-    border: 1px solid #E9E9E9;
+  border: 1px solid #e9e9e9;
-    background: #FFF;
+  background: #fff;
   box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
   ul {
     padding: 17px 0;
-        border-bottom: 1px solid #E9E9E9;
+    border-bottom: 1px solid #e9e9e9;
     &:last-child {
       border: none;
     }
@@ -99,7 +99,7 @@
       color: #101010;
       &:hover {
         color: #fff;
-                background-color: #0D99FF;
+        background-color: #0d99ff;
       }
     }
   }

src/styles/_contents.scss

@@ -23,13 +23,13 @@
   width: 100%;
   padding-bottom: 0;
   background-color: #383838;
-    transition: padding .17s ease-in-out;
+  transition: padding 0.17s ease-in-out;
   .canvas-menu-inner {
     position: relative;
     display: flex;
     align-items: center;
     padding: 0 40px 0 20px;
-        background-color: #2C2C2C;
+    background-color: #2c2c2c;
     z-index: 999;
     .canvas-menu-list {
       display: flex;
@@ -48,7 +48,7 @@
           font-weight: 600;
           padding: 15px 20px;
           opacity: 0.55;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
           .menu-icon {
             display: block;
             width: 16px;
@@ -57,13 +57,27 @@
             background-position: center;
             background-size: cover;
             margin-right: 10px;
-                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+            &.con00 {
-                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+              background-image: url(/static/images/canvas/menu_icon00.svg);
-                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+            }
-                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+            &.con01 {
-                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+              background-image: url(/static/images/canvas/menu_icon01.svg);
-                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+            }
-                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
+            }
           }
         }
         &.active {
@@ -94,25 +108,43 @@
           width: 30px;
           height: 30px;
           border-radius: 2px;
-                    background-color: #3D3D3D;
+          background-color: #3d3d3d;
           background-position: center;
           background-repeat: no-repeat;
           background-size: 15px 15px;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+          &.btn01 {
-                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+          }
-                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+          &.btn02 {
-                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
-                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+          }
-                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+          &.btn03 {
-                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
-                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+          }
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
           &:hover {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
           &.active {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
         }
       }
@@ -128,10 +160,18 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: contain;
-                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
+            &.ico01 {
-                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
-                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
+            }
-                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
           }
           .name {
             font-size: 12px;
@@ -161,16 +201,16 @@
         button {
           margin-left: auto;
           height: 100%;
-                    background-color: #4B4B4B;
+          background-color: #4b4b4b;
           font-size: 13px;
           font-weight: 400;
           color: #fff;
           padding: 0 7.5px;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
         }
         &.on {
           button {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
         }
       }
@@ -179,7 +219,7 @@
         align-items: center;
         justify-content: center;
         gap: 10px;
-                background-color: #3D3D3D;
+        background-color: #3d3d3d;
         border-radius: 2px;
         width: 100px;
         height: 30px;
@@ -212,7 +252,7 @@
     background-color: #383838;
     width: 100%;
     height: 50px;
-        transition: all .17s ease-in-out;
+    transition: all 0.17s ease-in-out;
     .canvas-depth2-inner {
       display: flex;
       align-items: center;
@@ -264,7 +304,7 @@
           align-items: center;
           margin-right: 34px;
           height: 100%;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
           button {
             position: relative;
             font-size: 12px;
@@ -305,7 +345,7 @@
 .canvas-layout {
   .canvas-page-list {
     display: flex;
-        background-color: #1C1C1C;
+    background-color: #1c1c1c;
     border-top: 1px solid #000;
     width: 100%;
     .canvas-plane-wrap {
@@ -319,14 +359,14 @@
         padding: 9.6px 20px;
         border-right: 1px solid #000;
         min-width: 0;
-                transition: all .17s ease-in-out;
+        transition: all 0.17s ease-in-out;
         span {
           display: flex;
           align-items: center;
           width: 100%;
           font-size: 12px;
           font-family: 'Pretendard', sans-serif;
-                    color: #AAA;
+          color: #aaa;
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
@@ -364,9 +404,9 @@
       justify-content: center;
       width: 45px;
       padding: 13.5px 0;
-            background-color: #1C1C1C;
+      background-color: #1c1c1c;
       border-right: 1px solid #000;
-            transition: all .17s ease-in-out;
+      transition: all 0.17s ease-in-out;
       span {
         display: block;
         width: 9px;
@@ -388,9 +428,10 @@
   canvas {
     position: absolute;
     top: 0;
-        left: 0;
+    left: 50%;
-        width: 100%;
+    transform: translateX(-50%);
-        height: 100%;
+    width: 1600px;
+    height: 1000px;
   }
 }
 
@@ -402,7 +443,7 @@
   width: 100%;
   height: 46px;
   border-bottom: 1px solid #000;
-    background: #2C2C2C;
+  background: #2c2c2c;
   z-index: 999;
   .sub-header-inner {
     display: flex;
@@ -425,7 +466,9 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
-                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
+            }
           }
         }
         &:after {
@@ -436,7 +479,7 @@
           transform: translateY(-50%);
           width: 1px;
           height: 16px;
-                    background-color: #D9D9D9;
+          background-color: #d9d9d9;
         }
         &:first-child {
           padding-left: 0;
@@ -466,7 +509,7 @@
         span {
           display: flex;
           font-size: 12px;
-                    color: #AAA;
+          color: #aaa;
           font-weight: normal;
           cursor: default;
         }
@@ -526,8 +569,8 @@
 .sub-table-box {
   padding: 20px;
   border-radius: 6px;
-    border: 1px solid #E9EAED;
+  border: 1px solid #e9eaed;
-    background: #FFF;
+  background: #fff;
   box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
   .table-box-title-wrap {
     display: flex;
@@ -561,7 +604,7 @@
           span {
             font-weight: 600;
             &.red {
-                            color: #E23D70;
+              color: #e23d70;
             }
           }
           &:after {
@@ -572,10 +615,17 @@
             transform: translateY(-50%);
             width: 1px;
             height: 11px;
-                        background-color: #D9D9D9;
+            background-color: #d9d9d9;
+          }
+          &:first-child {
+            padding-left: 0;
+          }
+          &:last-child {
+            padding-right: 0;
+            &::after {
+              display: none;
+            }
           }
-                    &:first-child{padding-left: 0;}
-                    &:last-child{padding-right: 0;&::after{display: none;}}
         }
       }
     }
@@ -595,17 +645,27 @@
   .important {
     color: #f00;
   }
-    .sub-table-footer{
+  .sub-center-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
   }
+  .sub-right-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
   .pagination-wrap {
     margin-top: 24px;
   }
 }
 
+.infomation-wrap {
+  margin-bottom: 30px;
+}
+
 .infomation-box-wrap {
   display: flex;
   align-items: center;
@@ -652,7 +712,7 @@
       width: 105px;
       height: 30px;
       line-height: 30px;
-            background-color: #F4F4F7;
+      background-color: #f4f4f7;
       border-radius: 100px;
       text-align: center;
       font-size: 13px;
@@ -676,7 +736,7 @@
   padding: 10px;
   .btn-area {
     padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
+    border-bottom: 1px solid #ecf0f4;
   }
   .drag-file-area {
     position: relative;
@@ -698,7 +758,7 @@
       span {
         position: relative;
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 400;
         white-space: nowrap;
         padding-right: 55px;
@@ -752,23 +812,23 @@
   table {
     table-layout: fixed;
     border-collapse: collapse;
-        border: 1px solid #ECF0F4;
+    border: 1px solid #ecf0f4;
     border-radius: 4px;
     thead {
       th {
         padding: 4.5px 0;
-                border-bottom: 1px solid #ECF0F4;
+        border-bottom: 1px solid #ecf0f4;
         text-align: center;
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 500;
-                background-color: #F8F9FA;
+        background-color: #f8f9fa;
       }
     }
     tbody {
       td {
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         text-align: center;
         padding: 4.5px 0;
       }
@@ -781,13 +841,13 @@
   padding: 20px;
   .simulation-tit-wrap {
     padding-right: 40px;
-        border-right: 1px solid #EEEEEE;
+    border-right: 1px solid #eeeeee;
     span {
       display: block;
       position: relative;
       padding-left: 60px;
       font-size: 15px;
-            color: #14324F;
+      color: #14324f;
       font-weight: 600;
       &::before {
         content: '';
@@ -814,7 +874,7 @@
       }
       dd {
         font-size: 12px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 400;
         line-height: 24px;
       }
@@ -828,10 +888,10 @@
 .module-total {
   display: flex;
   align-items: center;
-    background-color: #F8F9FA;
+  background-color: #f8f9fa;
   padding: 9px 0;
   margin-right: 4px;
-    border: 1px solid #ECF0F4;
+  border: 1px solid #ecf0f4;
   border-top: none;
   .total-title {
     flex: 1;
@@ -850,3 +910,44 @@
   }
 }
 
+// 물건상세
+.information-help-wrap {
+  display: flex;
+  padding: 24px;
+  background-color: #f4f4f4;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  .information-help-tit-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: 40px;
+    border-right: 1px solid #e0e0e3;
+    .help-tit-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 10px;
+      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
+      background-size: 20px 20px;
+    }
+    .help-tit {
+      font-size: 13px;
+      font-weight: 600;
+      color: #45576f;
+    }
+  }
+  .information-help-guide {
+    padding-left: 40px;
+    span {
+      display: block;
+      font-size: 12px;
+      font-weight: 400;
+      color: #45576f;
+      margin-bottom: 7px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

src/styles/_main.scss

@@ -75,8 +75,8 @@
   height: 45px;
   border-radius: 100px;
   padding: 0 20px;
-    border: 1px solid rgba(255, 255, 255, 0.30);
+  border: 1px solid rgba(255, 255, 255, 0.3);
-    background: rgba(31, 31, 31, 0.30);
+  background: rgba(31, 31, 31, 0.3);
   .main-search {
     flex: 1;
     height: 100%;
@@ -110,13 +110,28 @@
       flex-direction: column;
       padding: 40px;
       border-radius: 6px;
-            background: #FFF;
+      background: #fff;
       box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            &.item01{flex: 1; max-height: 400px;}
+      &.item01 {
-            &.item02{flex: none; width: 451px; max-height: 400px;}
+        flex: 1;
-            &.item03{flex: 1;}
+        max-height: 400px;
-            &.item04{flex: none; width: 351px;}
+      }
-            &.item05{flex: none; width: 451px;}
+      &.item02 {
+        flex: none;
+        width: 451px;
+        max-height: 400px;
+      }
+      &.item03 {
+        flex: 1;
+      }
+      &.item04 {
+        flex: none;
+        width: 351px;
+      }
+      &.item05 {
+        flex: none;
+        width: 451px;
+      }
       .product-item-title-wrap {
         display: flex;
         align-items: center;
@@ -131,16 +146,26 @@
             width: 40px;
             height: 40px;
             border-radius: 50px;
-                        background: #14324F;
+            background: #14324f;
             margin-right: 12px;
             background-repeat: no-repeat;
             background-size: 22px 22px;
             background-position: center;
-                        &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
+            &.ico01 {
-                        &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
+              background-image: url(../../public/static/images/main/product_ico01.svg);
-                        &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
+            }
-                        &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
+            &.ico02 {
-                        &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
+              background-image: url(../../public/static/images/main/product_ico02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/main/product_ico03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/main/product_ico04.svg);
+            }
+            &.ico05 {
+              background-image: url(../../public/static/images/main/product_ico05.svg);
+            }
           }
         }
         .more-btn {
@@ -156,7 +181,7 @@
         overflow: hidden;
         .recently-list {
           .recently-item {
-                        border: 1px solid #F2F2F2;
+            border: 1px solid #f2f2f2;
             background-color: transparent;
             padding: 29.9px 20px;
             margin-bottom: 5px;
@@ -193,7 +218,7 @@
                   transform: translateY(-50%);
                   width: 1px;
                   height: 10px;
-                                    background-color: #BBB;
+                  background-color: #bbb;
                 }
                 &:last-child {
                   &:after {
@@ -245,9 +270,15 @@
               }
             }
           }
-                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
+          &::-webkit-scrollbar {
-                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
+            width: 4px; /* 스크롤바의 너비 */
-                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
+          }
+          &::-webkit-scrollbar-thumb {
+            background: #697c8f; /* 스크롤바의 색상 */
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent; /*스크롤바 뒷 배경 색상*/
+          }
         }
         .faq-item {
           position: relative;
@@ -300,9 +331,9 @@
             padding: 20px;
             text-align: left;
             border-radius: 4px;
-                        background-color: #697C8F;
+            background-color: #697c8f;
             margin-bottom: 5px;
-                        transition: background .17s ease-in-out;
+            transition: background 0.17s ease-in-out;
             span {
               position: relative;
               display: block;
@@ -333,14 +364,19 @@
         .contact-info-list {
           padding: 25px 30px;
           border-radius: 4px;
-                    background-color: #F4F4F7;
+          background-color: #f4f4f7;
           .info-item {
             display: flex;
             align-items: center;
             padding: 15px 0;
             border-bottom: 1px solid #fff;
-                        &:first-child{padding-top: 0;}
+            &:first-child {
-                        &:last-child{padding-bottom: 0; border: none;}
+              padding-top: 0;
+            }
+            &:last-child {
+              padding-bottom: 0;
+              border: none;
+            }
             .icon-box {
               display: flex;
               margin-right: 12px;
@@ -388,12 +424,15 @@
         color: #364864;
         font-weight: 400;
         padding-bottom: 30px;
-                border-bottom: 1px solid #E5E9EF;
+        border-bottom: 1px solid #e5e9ef;
         span {
           display: block;
           font-weight: 600;
           margin-bottom: 5px;
         }
+        &.pw-reset {
+          font-size: 13px;
+        }
       }
       .login-input-wrap {
         margin-top: 30px;
@@ -401,7 +440,7 @@
           position: relative;
           display: flex;
           align-items: center;
-                    border: 1px solid #E5E9EF;
+          border: 1px solid #e5e9ef;
           height: 45px;
           padding-left: 40px;
           padding-right: 15px;
@@ -412,9 +451,11 @@
             background-color: transparent;
             font-size: 13px;
             font-weight: 400;
-                        color: #D1D7E0;
+            color: #6c819c;
             &::placeholder {
-                            color: #D1D7E0;
+              font-size: 13px;
+              font-weight: 400;
+              color: #d1d7e0;
             }
           }
           &::before {
@@ -442,6 +483,17 @@
               background-size: 17px 17px;
             }
           }
+          &.email {
+            &::before {
+              background: url(../../public/static/images/main/login_email.svg) no-repeat center;
+              width: 12px;
+              height: 9px;
+            }
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
           &.password {
             margin-bottom: 20px;
             &::before {
@@ -456,27 +508,35 @@
             }
           }
         }
-                .login-btn-box{
-                    margin-bottom: 20px;
         .login-btn {
           display: block;
           width: 100%;
           height: 45px;
-                        background-color: #5C6773;
+          background-color: #5c6773;
           color: #fff;
           font-size: 15px;
           font-weight: 600;
           border-radius: 4px;
-                        transition: background .15s ease-in-out;
+          transition: background 0.15s ease-in-out;
           &:hover {
             background-color: #717e8d;
           }
+          &.light {
+            background-color: #fff;
+            border: 1px solid #5c6773;
+            color: #5c6773;
           }
         }
+        .login-btn-box {
+          margin-bottom: 20px;
+        }
+        .pwreset-btn-box {
+          display: flex;
+        }
         .reset-password {
           width: 100%;
           text-align: center;
-                    a{ 
+          button {
             position: relative;
             font-size: 13px;
             color: #364864;
@@ -537,17 +597,17 @@
         width: 22px;
         height: 22px;
         top: -1px;
-                border-color: #A8B6C7;
+        border-color: #a8b6c7;
         border-radius: 3px;
-                transition: background .05s ease-in-out;
+        transition: background 0.05s ease-in-out;
       }
     }
   }
-    input[type=checkbox]:checked + label::before{
+  input[type='checkbox']:checked + label::before {
-        border-color: #A8B6C7;
+    border-color: #a8b6c7;
-        background-color: #A8B6C7;
+    background-color: #a8b6c7;
   }
-    input[type=checkbox]:checked + label::after{
+  input[type='checkbox']:checked + label::after {
     border-color: #fff;
     width: 7px;
     height: 11px;
@@ -555,3 +615,73 @@
     left: 1px;
   }
 }
+
+// 회원가입
+.center-page-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f4f4f7;
+  overflow-x: hidden;
+  .center-page-inner {
+    width: 100%;
+    max-width: 1720px;
+    margin: 0 auto;
+    .center-page-tit {
+      font-size: 18px;
+      font-weight: 600;
+      color: #101010;
+      margin-bottom: 24px;
+    }
+    .sub-table-box {
+      &.signup {
+        margin-bottom: 20px;
+      }
+    }
+    .sign-up-btn-wrap {
+      display: flex;
+      justify-content: flex-end;
+    }
+    &.complete {
+      max-width: 1000px;
+    }
+  }
+}
+
+// 회원가입 완료
+.complete-box-wrap {
+  padding: 72px 80px;
+  .complete-tit {
+    font-size: 18px;
+    font-weight: 600;
+    color: #101010;
+    margin-bottom: 17px;
+  }
+  .complete-txt {
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    margin-bottom: 27px;
+  }
+  .complete-email-wrap {
+    padding: 36px 30px;
+    border-radius: 2px;
+    background: #f4f4f7;
+    margin-bottom: 20px;
+    .email-info {
+      font-size: 13px;
+      font-weight: 400;
+      color: #000;
+      span {
+        color: #204af4;
+        font-weight: 500;
+      }
+    }
+  }
+  .complete-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

src/styles/_reset.scss

@@ -3,29 +3,100 @@
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
   text-size-adjust: none;
-    box-sizing: content-box
+  box-sizing: content-box;
 }
-*, ::after, ::before {
+*,
+::after,
+::before {
   box-sizing: border-box;
 }
-html, body{
+html,
+body {
   width: 100%;
   height: 100%;
   font-size: 16px;
 }
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-b, u, i, center,
+object,
-dl, dt, dd, ol, ul, li,
+iframe,
-fieldset, form, label, legend,
+h1,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h2,
-article, aside, canvas, details, embed, 
+h3,
-figure, figcaption, footer, header, hgroup, 
+h4,
-menu, nav, output, ruby, section, summary,
+h5,
-time, mark, audio, video {
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -37,23 +108,38 @@ time, mark, audio, video {
   font-smooth: never;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article,
-footer, header, hgroup, menu, nav, section {
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 body {
   line-height: 1.4;
 }
-body:first-of-type caption { display:none;}
+body:first-of-type caption {
+  display: none;
+}
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
+q:before,
+q:after {
   content: '';
   content: none;
 }
@@ -63,7 +149,9 @@ table {
   border-spacing: 0;
   border: 0 none;
 }
-caption, th, td {
+caption,
+th,
+td {
   text-align: left;
   font-weight: normal;
   border: 0;
@@ -73,26 +161,38 @@ a {
   cursor: pointer;
   color: #000;
 }
-a, a:hover, a:active {
+a,
+a:hover,
+a:active {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
 }
 /*form_style*/
-input, select, textarea, button, a, label {
+input,
+select,
+textarea,
+button,
+a,
+label {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-button,input[type=text], input[type=button] {
+button,
+input[type='text'],
+input[type='button'] {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
   -webkit-appearance: none;
   appearance: none;
-    border-radius: 0
+  border-radius: 0;
 }
-input[type=checkbox], input[type=radio] {
+input[type='checkbox'],
+input[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
-input, select, button {
+input,
+select,
+button {
   border: 0 none;
   outline: none;
   margin: 0;
@@ -131,24 +231,53 @@ button{
 }
 
 // margin
-.mt5{margin-top: 5px !important;}
+.mt5 {
-.mt10{margin-top: 10px !important;}
+  margin-top: 5px !important;
-.mt15{margin-top: 15px !important;}
+}
-.mb5{margin-bottom: 5px !important;}
+.mt10 {
-.mb10{margin-bottom: 10px !important;}
+  margin-top: 10px !important;
-.mb15{margin-bottom: 15px !important;}
+}
-.mr5{margin-right: 5px !important;}
+.mt15 {
-.mr10{margin-right: 10px !important;}
+  margin-top: 15px !important;
-.mr15{margin-right: 15px !important;}
+}
-.ml5{margin-left: 5px !important;}
+.mb5 {
-.ml10{margin-left: 10px !important;}
+  margin-bottom: 5px !important;
-.ml15{margin-left: 15px !important;}
+}
+.mb10 {
+  margin-bottom: 10px !important;
+}
+.mb15 {
+  margin-bottom: 15px !important;
+}
+.mr5 {
+  margin-right: 5px !important;
+}
+.mr10 {
+  margin-right: 10px !important;
+}
+.mr15 {
+  margin-right: 15px !important;
+}
+.ml5 {
+  margin-left: 5px !important;
+}
+.ml10 {
+  margin-left: 10px !important;
+}
+.ml15 {
+  margin-left: 15px !important;
+}
 
 // align
-.al-l{text-align: left !important;}
+.al-l {
-.al-r{text-align: right !important;}
+  text-align: left !important;
-.al-c{text-align: center !important;}
+}
-
+.al-r {
+  text-align: right !important;
+}
+.al-c {
+  text-align: center !important;
+}
 
 // button
 .btn-frame {
@@ -163,7 +292,7 @@ button{
   border: 1px solid #000;
   text-align: center;
   font-family: 'Pretendard', sans-serif;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   cursor: pointer;
   &.block {
     width: 100%;
@@ -176,15 +305,15 @@ button{
   }
 
   &.deepgray {
-        background-color: #2C2C2C;
+    background-color: #2c2c2c;
     border: 1px solid #484848;
   }
   &.gray {
-        background-color: #3C3C3C;
+    background-color: #3c3c3c;
     border: 1px solid #545454;
   }
   &.dark {
-        background-color: #1C1C1C;
+    background-color: #1c1c1c;
     border: 1px solid #484848;
   }
   &.modal {
@@ -193,8 +322,8 @@ button{
     border: 1px solid #484848;
     color: #aaa;
     &:hover {
-            background-color: #1083E3;
+      background-color: #1083e3;
-            border: 1px solid #1083E3;
+      border: 1px solid #1083e3;
       color: #fff;
       font-weight: 500;
     }
@@ -204,21 +333,68 @@ button{
     padding: 0 10px;
     line-height: 28px;
     font-family: 'Noto Sans JP', sans-serif;
-        background-color: #2D2D2D;
+    background-color: #2d2d2d;
     border: 1px solid #393939;
     color: #aaa;
     &.act,
     &:hover {
-            background-color: #414E6C;
+      background-color: #414e6c;
-            border: 1px solid #414E6C;
+      border: 1px solid #414e6c;
       color: #fff;
       font-weight: 500;
     }
   }
+  &.roof {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #484848;
+    color: #fff;
+    &.blue {
+      background-color: #414e6c;
+      border: 1px solid #414e6c;
+      &:hover {
+        background-color: #414e6c;
+        border: 1px solid #414e6c;
+      }
+    }
+    &.white {
+      background-color: #fff;
+      border: 1px solid #fff;
+      color: #101010;
+      &:hover {
+        background-color: #fff;
+        border: 1px solid #fff;
+        color: #101010;
+      }
+    }
+    &:hover {
+      font-weight: 400;
+      background-color: transparent;
+      border: 1px solid #484848;
+      color: #fff;
+    }
+  }
+  &.self {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #676767;
+    color: #aaaaaa;
+    &:hover {
+      background-color: #272727;
+      border-color: #676767;
+      font-weight: 400;
+    }
+  }
   &:hover,
   &.act {
-        background-color: #1083E3;
+    background-color: #1083e3;
-        border: 1px solid #1083E3;
+    border: 1px solid #1083e3;
     color: #fff;
     font-weight: 500;
   }
@@ -242,23 +418,23 @@ button{
 .btn-origin {
   display: inline-block;
   height: 30px;
-    padding: 0 14px;
+  padding: 0 10px;
   border-radius: 2px;
   background-color: #101010;
   color: #fff;
   font-size: 13px;
   font-weight: 400;
-    transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   &.navy {
     background-color: #304961;
     &:hover {
-            background-color: #1083E3;
+      background-color: #233546;
     }
   }
   &.grey {
-        background-color: #94A0AD;
+    background-color: #94a0ad;
     &:hover {
-            background-color: #607F9A;
+      background-color: #607f9a;
     }
   }
 }
@@ -272,7 +448,7 @@ button{
   line-height: 30px;
   padding: 0 25px 0 10px;
   background-color: #373737;
-    border: 1px solid #3F3F3F;
+  border: 1px solid #3f3f3f;
   border-radius: 2px;
   border-top-left-radius: 2px;
   color: #fff;
@@ -292,7 +468,7 @@ button{
     max-height: 100px;
     overflow-y: auto;
     background-color: #373737;
-        border: 1px solid #3F3F3F;
+    border: 1px solid #3f3f3f;
     border-radius: 2px;
     transition: all 0.17s ease-in-out;
     visibility: hidden;
@@ -302,20 +478,19 @@ button{
       align-items: center;
       padding: 8px 20px;
       line-height: 1.4;
-            transition: all .17s ease-in-out;
+      transition: all 0.17s ease-in-out;
       button {
         font-size: 12px;
         color: #fff;
         line-height: 1.4;
       }
       &:hover {
-                background-color: #2C2C2C;
+        background-color: #2c2c2c;
       }
     }
     &::-webkit-scrollbar {
       width: 2px;
       background-color: transparent;
-            
     }
     &::-webkit-scrollbar-thumb {
       background-color: #5a5a5a;
@@ -335,7 +510,7 @@ button{
     height: 6px;
     background: url(/static/images/common/select-arr.svg) no-repeat center;
     background-size: cover;
-        transition: all .17s ease-in-out;
+    transition: all 0.17s ease-in-out;
   }
   &.active {
     .select-item-wrap {
@@ -353,17 +528,17 @@ button{
   display: block;
   width: 100%;
   height: 30px;
-    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+  background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
   background-size: 10px 6px;
   border: 1px solid #eee;
   padding: 0 30px 0 10px;
   font-size: 13px;
-    color: #45576F;
+  color: #45576f;
   font-family: 'Noto Sans JP', sans-serif;
   cursor: pointer;
   &:disabled {
     opacity: 1;
-        background-color: #FAFAFA;
+    background-color: #fafafa;
     color: #999;
     cursor: default;
   }
@@ -379,7 +554,6 @@ button{
   }
 }
 
-
 // input
 .form-input {
   label {
@@ -390,8 +564,8 @@ button{
     margin-bottom: 10px;
   }
 }
-input[type=number],
+input[type='number'],
-input[type=text]{
+input[type='text'] {
   &.input-origin {
     display: inline-block;
     height: 30px;
@@ -414,7 +588,7 @@ input[type=text]{
       width: 100%;
     }
     &:read-only {
-            color: #AAA;
+      color: #aaa;
     }
     &.plane {
       font-family: 'Noto Sans JP', sans-serif;
@@ -432,27 +606,25 @@ input[type=text]{
     background-color: #fff;
     font-family: 'Noto Sans JP', sans-serif;
     font-size: 13px;
-        color: #45576F;
+    color: #45576f;
     font-weight: normal;
-        transition: border-color .17s ease-in-out;
+    transition: border-color 0.17s ease-in-out;
     text-align: left;
     &:read-only {
-            background-color: #FAFAFA;
+      background-color: #fafafa;
       color: #999999;
     }
   }
 }
 
-
-
 // check-btn
 .check-btn {
   display: flex;
   align-items: center;
   height: 30px;
-    background-color: #3A3A3A;
+  background-color: #3a3a3a;
   border-radius: 3px;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   .check-area {
     flex: none;
     width: 30px;
@@ -489,10 +661,10 @@ input[type=text]{
   display: block;
   height: 30px;
   border-radius: 3px;
-    background-color: #3A3A3A;
+  background-color: #3a3a3a;
   padding: 0 11px;
   text-align: left;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   span {
     position: relative;
     font-size: 12px;
@@ -526,15 +698,15 @@ input[type=text]{
     background-color: #272727;
     border: 1px solid #484848;
     span {
-            color: #Fff;
+      color: #fff;
       &:after {
         background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
       }
     }
     &:hover,
     &.act {
-            background-color: #1083E3;
+      background-color: #1083e3;
-            border: 1px solid #1083E3;
+      border: 1px solid #1083e3;
     }
   }
 }
@@ -544,8 +716,8 @@ input[type=text]{
 .d-check-box {
   line-height: 1.1;
   cursor: pointer;
-    input[type=checkbox],
+  input[type='checkbox'],
-    input[type=radio]{
+  input[type='radio'] {
     position: static;
     margin-left: 0;
     cursor: pointer;
@@ -568,7 +740,7 @@ input[type=text]{
   }
   &.light {
     label {
-            color: #45576F;
+      color: #45576f;
     }
   }
   &.no-text {
@@ -582,7 +754,7 @@ input[type=text]{
   label {
     &::before {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 17px;
@@ -596,11 +768,13 @@ input[type=text]{
       text-align: center;
       font-size: 13px;
       line-height: 1.4;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
     &::after {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 9px;
@@ -616,20 +790,22 @@ input[type=text]{
       line-height: 1.4;
       opacity: 0;
       visibility: hidden;
-            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
+      transition:
+        opacity 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
   }
   &.light {
     label {
       &:before {
-                border-color: #D6D6D7;
+        border-color: #d6d6d7;
       }
       &:after {
-                background-color: #697C8F;
+        background-color: #697c8f;
       }
     }
   }
-    input[type=radio]:checked + label::after{
+  input[type='radio']:checked + label::after {
     opacity: 1;
     visibility: visible;
   }
@@ -653,9 +829,12 @@ input[type=text]{
 // check-box
 .d-check-box {
   label {
+    &.red {
+      color: #ffcaca;
+    }
     &::before {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 17px;
@@ -663,51 +842,71 @@ input[type=text]{
       top: 2px;
       left: 0;
       margin-left: -12px;
-            border: 1px solid #D6D6D7;
+      border: 1px solid #d6d6d7;
       background-color: transparent;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
     &:after {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 16px;
       height: 16px;
       top: 0;
       left: 0;
-            margin-left: -.8rem;
+      margin-left: -0.8rem;
-            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
+      transition:
+        border 0.05s ease-in-out,
+        color 0.05s ease-in-out;
     }
   }
-    input[type=checkbox]:checked + label::after{
+  input[type='checkbox']:checked + label::after {
-        content: "";
+    content: '';
     display: inline-block;
     position: absolute;
     top: 1px;
     left: -1px;
     width: 5px;
     height: 8px;
-        border: 2px solid #697C8F;
+    border: 2px solid #697c8f;
     border-left: none;
     border-top: none;
     transform: translate(7.75px, 4.5px) rotate(45deg);
     -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
   }
   &.pop {
-        input[type=checkbox]:checked + label::after{
+    input[type='checkbox']:checked + label::after {
       border-color: #fff;
     }
+    &.no-text {
+      label {
+        padding-left: 0;
+      }
+    }
+  }
+  &.sel {
+    input[type='checkbox']:checked + label {
+      color: #d7c863;
+    }
+    input[type='checkbox']:checked + label::before,
+    input[type='checkbox']:checked + label::after {
+      border-color: #d7c863;
+    }
   }
 }
 
 // date-picker
 .date-picker {
-    svg{display: none;}
+  svg {
+    display: none;
+  }
   .react-datepicker-wrapper {
     width: 100%;
   }
-    input[type=text]{
+  input[type='text'] {
     display: block;
     width: 100%;
     height: 30px;
@@ -715,7 +914,7 @@ input[type=text]{
     border-radius: 2px;
     border: 1px solid #eee;
     font-size: 13px;
-        color: #45576F;
+    color: #45576f;
     font-weight: normal;
     font-family: 'Noto Sans JP', sans-serif;
     background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;

src/styles/_submodal.scss

@@ -0,0 +1,198 @@
+.modal-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 110000;
+  .modal-dialog {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - (1.5rem * 2));
+    width: 680px;
+    z-index: 200000;
+    margin: 1.5rem auto;
+    pointer-events: none;
+    &.middle {
+      width: 800px;
+    }
+    &.big {
+      width: 1000px;
+    }
+    .modal-content {
+      flex: 1;
+      position: relative;
+      background-clip: padding-box;
+      background-color: transparent;
+      outline: 0 none;
+      pointer-events: auto;
+      border-radius: 4px;
+      .modal-header {
+        display: flex;
+        align-items: center;
+        padding: 10px 24px;
+        background-color: #7992ba;
+        border-radius: 4px 4px 0px 0px;
+        // overflow: hidden;
+        h1.title {
+          font-size: 13px;
+          color: $pop-color;
+          font-weight: 700;
+        }
+        .modal-close {
+          margin-left: auto;
+          color: transparent;
+          font-size: 0;
+          width: 10px;
+          height: 10px;
+          background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+        }
+      }
+      .modal-body {
+        padding: 30px;
+        background-color: #fff;
+        border-radius: 0px 0px 4px 4px;
+        .modal-body-inner {
+          margin-bottom: 20px;
+          &.border {
+            padding-bottom: 20px;
+            border-bottom: 1px solid #ecf0f4;
+          }
+        }
+        .footer-btn-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}
+
+// modal-contents
+
+//  비밀번호 변경
+.change-password-guide {
+  span {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.change-password-box {
+  padding: 30px;
+  border-radius: 4px;
+  background: #f4f4f7;
+  margin-bottom: 20px;
+  .change-password-tit {
+    .tit-b {
+      font-size: 13px;
+      font-weight: 500;
+      color: #344356;
+    }
+    .tit-s {
+      font-size: 12px;
+      font-weight: 400;
+      color: #898989;
+    }
+  }
+  .change-password-input {
+    width: 100%;
+    .change-password {
+      width: 100%;
+      height: 45px;
+      border-radius: 4px;
+      border: 1px solid #e9e9e9;
+      background-color: #fff;
+      padding: 0 10px;
+      font-size: 12px;
+      color: #364864;
+      font-family: 'Noto Sans JP', sans-serif;
+      &::placeholder {
+        font-size: 12px;
+      }
+    }
+  }
+  .table-item-th {
+    width: 145px;
+  }
+}
+.form-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  .table-item {
+    display: table-row;
+    .table-item-th,
+    .table-item-td {
+      display: table-cell;
+      vertical-align: middle;
+      padding-bottom: 10px;
+    }
+    &:last-child {
+      .table-item-th,
+      .table-item-td {
+        padding-bottom: 0;
+      }
+    }
+    .table-item-td {
+      padding-left: 10px;
+    }
+  }
+}
+
+// 주소찾기 팝업
+.address-input-wrap {
+  position: relative;
+  height: 45px;
+  padding: 0 40px 0 15px;
+  border-radius: 4px;
+  border: 1px solid #e9e9e9;
+  background: #fff;
+  margin-bottom: 20px;
+  input {
+    width: 100%;
+    height: 100%;
+    font-size: 13px;
+    font-weight: 400;
+    font-family: 'Noto Sans JP' sans-serif;
+    color: #868686;
+    &::placeholder {
+      color: #aeaeae;
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+  .search-btn {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    width: 21px;
+    height: 100%;
+    background: url(../../public/static/images/sub/address_search.svg) no-repeat center;
+    background-size: 21px 21px;
+  }
+}
+
+// 설계의뢰 불러오기
+.design-request-table {
+  margin-bottom: 20px;
+}
+.design-request-grid {
+  .design-request-grid-tit {
+    font-size: 13px;
+    font-weight: 600;
+    color: #101010;
+    margin-bottom: 15px;
+  }
+}

src/styles/_table.scss

@@ -14,10 +14,14 @@ table{
   }
 }
 
+.flx-box {
+  @include flexbox;
+}
+
 .common-table {
   table {
     table-layout: fixed;
-        border: 1px solid #ECF0F4;
+    border: 1px solid #ecf0f4;
     border-radius: 3px;
     border-collapse: collapse;
     tbody {
@@ -26,16 +30,16 @@ table{
         font-weight: 500;
         color: #344356;
         padding: 14px 12px;
-                border: 1px solid #ECF0F4 ;
+        border: 1px solid #ecf0f4;
-                background-color: #F7F9FA;
+        background-color: #f7f9fa;
         vertical-align: middle;
       }
       td {
         padding: 9px;
-                border: 1px solid #ECF0F4 ;
+        border: 1px solid #ecf0f4;
         font-size: 13px;
         font-weight: 400;
-                color: #45576F;
+        color: #45576f;
         vertical-align: middle;
         .radio-wrap {
           flex: none;
@@ -61,8 +65,8 @@ table{
 
 .infomation-table {
   table {
-        border-top: 1px solid #DEE3EA;
+    border-top: 1px solid #dee3ea;
-        border-bottom: 1px solid #DEE3EA;
+    border-bottom: 1px solid #dee3ea;
     border-collapse: collapse;
     tbody {
       tr {
@@ -71,34 +75,35 @@ table{
           color: #344356;
           font-weight: 500;
           padding: 18px 0;
-                    border-bottom: 1px solid #F4F4F7;
+          border-bottom: 1px solid #f4f4f7;
           .title {
             margin-right: 8px;
           }
         }
         td {
           padding: 0 0 0 15px;
-                    border-bottom: 1px solid #F4F4F7;
+          border-bottom: 1px solid #f4f4f7;
 
           .guide {
             font-size: 13px;
-                        color: #697C8F;
+            color: #697c8f;
             font-weight: normal;
             margin-left: 15px;
+            margin-bottom: 0;
           }
           span {
             font-size: 13px;
-                        color: #697C8F;
+            color: #697c8f;
             font-weight: normal;
           }
         }
         &:last-child {
-                    th,td{border-bottom: none;}
+          th,
+          td {
+            border-bottom: none;
           }
         }
       }
-        .flx-box{
-            @include flexbox;
     }
   }
   .tooltips {
@@ -125,7 +130,7 @@ table{
         font-size: 13px;
         color: #344356;
         font-weight: 500;
-                border-bottom: 2px solid #E0E5EB;
+        border-bottom: 2px solid #e0e5eb;
         text-align: center;
       }
     }
@@ -136,11 +141,11 @@ table{
         display: table;
         table-layout: fixed;
         width: 100%;
-                border: 1px solid #ECF0F4;
+        border: 1px solid #ecf0f4;
         td {
           padding: 10px 0px;
           font-size: 13px;
-                    color: #45576F;
+          color: #45576f;
           font-weight: 400;
           text-align: center;
         }
@@ -150,14 +155,16 @@ table{
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-                background-color: #C1CCD7;
+        background-color: #c1ccd7;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
     }
     &.small {
-            tbody{height: 120px;}
+      tbody {
+        height: 120px;
+      }
     }
     &.big {
       td,
@@ -182,8 +189,9 @@ table{
     thead {
       th {
         height: 40px;
-                padding: 0 10px;
+        padding: 0px 10px;
         font-size: 12px;
+        line-height: 1.1;
         color: #fff;
         font-weight: 500;
         border: 1px solid #505050;
@@ -191,14 +199,82 @@ table{
         background-color: rgba(255, 255, 255, 0.05);
         text-align: center;
         word-break: keep-all;
+        .d-check-box {
+          opacity: 0.5;
+        }
       }
     }
     tbody {
+      tr {
+        cursor: pointer;
+        &.on {
+          background-color: #272727;
+        }
+      }
       td {
+        height: 40px;
+        vertical-align: middle;
         font-size: 12px;
         color: #fff;
         font-weight: 400;
         border: 1px solid #505050;
+        padding: 0 10px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        .warning {
+          color: PCSオプションマスター;
+        }
+        .color-wrap {
+          display: flex;
+          align-items: center;
+          .color-box {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+          }
+          .name {
+            width: 0;
+            flex: 1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+  &.overflow-y {
+    table {
+      table-layout: fixed;
+      border-collapse: collapse;
+      thead {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+        border-collapse: collapse;
+      }
+      tbody {
+        display: block;
+        max-height: 81px;
+        overflow-y: auto;
+        tr {
+          display: table;
+          table-layout: fixed;
+          width: 100%;
+          border-collapse: collapse;
+          margin-top: -1px;
+        }
+        &::-webkit-scrollbar {
+          width: 2px;
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: #c1ccd7;
+        }
+        &::-webkit-scrollbar-track {
+          background-color: rgba(255, 255, 255, 0.05);
+        }
       }
     }
   }

src/styles/contents.scss

@@ -1,4 +1,5 @@
 @import '_contents.scss';
 @import '_modal.scss';
+@import '_submodal.scss';
 @import '_table.scss';
 @import '_canvasside.scss';