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

@@ -1,5 +1,5 @@
 // 패널 배치 집계
-.penal-wrap{
+.penal-wrap {
   position: fixed;
   top: 200px;
   left: 50px;
@@ -8,12 +8,12 @@
   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);
   cursor: pointer;
-    &::before{
+  &::before {
     content: '';
     position: absolute;
     top: 50%;
@@ -21,38 +21,38 @@
     transform: translateY(-50%);
     width: 10px;
     height: 6px;
-        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
+    background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
     background-size: cover;
   }
-    h2{
+  h2 {
     font-size: 12px;
     font-weight: 500;
-        color: #3D3D3D;
+    color: #3d3d3d;
   }
-    .penal-table-wrap{
+  .penal-table-wrap {
     display: none;
     position: absolute;
     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{
+    .penal-table {
       table-layout: fixed;
       border-collapse: collapse;
-            thead{
+      thead {
-                th{
+        th {
           text-align: center;
-                    background-color:rgba(255, 255, 255, 0.05);
+          background-color: rgba(255, 255, 255, 0.05);
           font-size: 12px;
           font-weight: 500;
           color: #fff;
           border: 1px solid #505050;
         }
       }
-            tbody{
+      tbody {
-                td{
+        td {
           font-size: 12px;
           color: #fff;
           font-weight: 400;
@@ -63,43 +63,43 @@
       }
     }
   }
-    &.act{
+  &.act {
-        border: 1px solid #3D3D3D;
+    border: 1px solid #3d3d3d;
-        background-color: #3D3D3D;
+    background-color: #3d3d3d;
-        h2{
+    h2 {
       color: #fff;
     }
-        &::before{
+    &::before {
-            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
+      background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
     }
-        .penal-table-wrap{
+    .penal-table-wrap {
       display: block;
     }
   }
 }
 
 // context menu
-.context-menu-wrap{
+.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{
+  ul {
     padding: 17px 0;
-        border-bottom: 1px solid #E9E9E9;
+    border-bottom: 1px solid #e9e9e9;
-        &:last-child{
+    &:last-child {
       border: none;
     }
-        li{
+    li {
       padding: 4px 30px;
       cursor: pointer;
       font-size: 12px;
       font-weight: 400;
       color: #101010;
-            &:hover{
+      &:hover {
         color: #fff;
-                background-color: #0D99FF;
+        background-color: #0d99ff;
       }
     }
   }

src/styles/_main.scss

@@ -1,24 +1,24 @@
 // background img
-.background-bord{
+.background-bord {
   position: absolute;
   top: 46px;
   left: 0;
   width: 100%;
   height: 280px;
-    background: url(../../public/static/images/main/main_background.png)no-repeat center;
+  background: url(../../public/static/images/main/main_background.png) no-repeat center;
   background-size: cover;
   z-index: 0;
 }
 
 // main-wrap
-.main-contents{
+.main-contents {
   position: relative;
   z-index: 1;
   padding-bottom: 15px;
 }
 
 // contents
-.store-id-wrap{
+.store-id-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,12 +26,12 @@
   padding: 33.5px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   background-color: rgba(255, 255, 255, 0.05);
-    .store-id-title{
+  .store-id-title {
     position: relative;
     padding-left: 32px;
     font-size: 13px;
     color: #fff;
-        &::before{
+    &::before {
       content: '';
       position: absolute;
       top: 50%;
@@ -39,16 +39,16 @@
       transform: translateY(-50%);
       width: 20px;
       height: 20px;
-            background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
+      background: url(../../public/static/images/main/id_icon.svg) no-repeat center;
     }
   }
-    .store-arr{
+  .store-arr {
     display: block;
     width: 7px;
     height: 10px;
     background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
   }
-    .store-id-name{
+  .store-id-name {
     font-size: 16px;
     color: #fff;
     font-weight: 600;
@@ -56,28 +56,28 @@
 }
 
 // main-search-form
-.main-search-wrap{
+.main-search-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 45px 0;
-    .search-raido-wrap{
+  .search-raido-wrap {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-right: 30px;
   }
 }
-.search-input-box{
+.search-input-box {
   display: flex;
   align-items: center;
   width: 580px;
   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{
+  .main-search {
     flex: 1;
     height: 100%;
     font-size: 13px;
@@ -87,7 +87,7 @@
     border: none;
     font-family: 'Noto Sans JP', sans-serif;
   }
-    .search-icon{
+  .search-icon {
     width: 20px;
     height: 100%;
     background-image: url(../../public/static/images/main/main_search.svg);
@@ -98,82 +98,107 @@
 }
 
 // main-contents-inner
-.main-product-list-wrap{
+.main-product-list-wrap {
   max-width: 1400px;
   margin: 0 auto;
-    .main-product-list{
+  .main-product-list {
     display: flex;
     gap: 24px;
     margin-bottom: 24px;
-        .product-item{
+    .product-item {
       display: flex;
       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 {
-            .product-item-title-wrap{
+        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;
-                .product-item-title{
+        .product-item-title {
           display: flex;
           align-items: center;
           font-size: 16px;
           color: #101010;
           font-weight: 600;
-                    .item-logo{
+          .item-logo {
             display: block;
             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{
+        }
+        .more-btn {
           display: block;
           width: 20px;
           height: 20px;
           margin-left: auto;
-                    background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
+          background: url(../../public/static/images/main/more_btn.svg) no-repeat center;
         }
       }
-            .product-item-content{
+      .product-item-content {
         margin-top: 30px;
         overflow: hidden;
-                .recently-list{
+        .recently-list {
-                    .recently-item{
+          .recently-item {
-                        border: 1px solid #F2F2F2;
+            border: 1px solid #f2f2f2;
             background-color: transparent;
             padding: 29.9px 20px;
             margin-bottom: 5px;
             cursor: pointer;
-                        .item-inner{
+            .item-inner {
               display: flex;
               align-items: center;
-                            span{
+              span {
                 position: relative;
                 display: block;
                 font-size: 13px;
                 color: #101010;
                 font-weight: 400;
                 padding: 0 10px;
-                                &.time{
+                &.time {
                   padding-left: 22px;
-                                    &::before{
+                  &::before {
                     content: '';
                     position: absolute;
                     top: 50%;
@@ -181,11 +206,11 @@
                     transform: translateY(-50%);
                     width: 14px;
                     height: 14px;
-                                        background:url(../../public/static/images/main/clock.svg)no-repeat center;
+                    background: url(../../public/static/images/main/clock.svg) no-repeat center;
                     background-size: cover;
                   }
                 }
-                                &:after{
+                &:after {
                   content: '';
                   position: absolute;
                   top: 50%;
@@ -193,30 +218,30 @@
                   transform: translateY(-50%);
                   width: 1px;
                   height: 10px;
-                                    background-color: #BBB;
+                  background-color: #bbb;
                 }
-                                &:last-child{
+                &:last-child {
-                                    &:after{
+                  &:after {
                     display: none;
                   }
                 }
               }
             }
-                        &:last-child{
+            &:last-child {
               margin-bottom: 5px;
             }
           }
         }
-                .notice-box{
+        .notice-box {
           height: 100%;
           overflow-y: auto;
-                    .notice-day{
+          .notice-day {
             font-size: 13px;
             color: #666;
             font-weight: 400;
             margin-bottom: 7px;
           }
-                    .notice-title{
+          .notice-title {
             font-size: 14px;
             color: #101010;
             font-weight: 600;
@@ -224,16 +249,16 @@
             line-height: 24px;
             word-break: keep-all;
           }
-                    .notice-contents{
+          .notice-contents {
             font-size: 12px;
             color: #666;
             font-weight: 400;
             line-height: 22px;
-                        span{
+            span {
               position: relative;
               display: block;
               padding-left: 10px;
-                            &::before{
+              &::before {
                 content: '';
                 position: absolute;
                 top: 10px;
@@ -245,19 +270,25 @@
               }
             }
           }
-                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
+          &::-webkit-scrollbar {
-                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
+            width: 4px; /* 스크롤바의 너비 */
-                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
           }
-                .faq-item{
+          &::-webkit-scrollbar-thumb {
+            background: #697c8f; /* 스크롤바의 색상 */
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent; /*스크롤바 뒷 배경 색상*/
+          }
+        }
+        .faq-item {
           position: relative;
           margin-bottom: 10px;
           cursor: pointer;
-                    .faq-item-inner{
+          .faq-item-inner {
             display: flex;
             align-items: center;
 
-                        .faq-num{
+            .faq-num {
               flex: none;
               padding: 7px 12.5px;
               font-size: 13px;
@@ -267,7 +298,7 @@
               border: 1px solid rgba(242, 242, 242, 0.95);
               margin-right: 20px;
             }
-                        .faq-title{
+            .faq-title {
               width: 0;
               flex: 1 1 auto;
               font-size: 13px;
@@ -278,7 +309,7 @@
               text-overflow: ellipsis;
               overflow: hidden;
             }
-                        .faq-day{
+            .faq-day {
               position: absolute;
               top: 50%;
               right: 0;
@@ -288,29 +319,29 @@
               font-weight: 400;
             }
           }
-                    &:last-child{
+          &:last-child {
             margin-bottom: 0;
           }
         }
-                .data-download-wrap{
+        .data-download-wrap {
           width: 100%;
-                    .data-down{
+          .data-down {
             display: block;
             width: 100%;
             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{
+            span {
               position: relative;
               display: block;
               padding-right: 30px;
               font-size: 13px;
               color: #fff;
               font-weight: 400;
-                            &:after{
+              &:after {
                 content: '';
                 position: absolute;
                 top: 50%;
@@ -318,34 +349,39 @@
                 transform: translateY(-50%);
                 width: 18px;
                 height: 16px;
-                                background: url(../../public/static/images/main/download.svg)no-repeat center;
+                background: url(../../public/static/images/main/download.svg) no-repeat center;
                 background-size: cover;
               }
             }
-                        &:last-child{
+            &:last-child {
               margin-bottom: 0;
             }
-                        &:hover{
+            &:hover {
               background-color: #859eb6;
             }
           }
         }
-                .contact-info-list{
+        .contact-info-list {
           padding: 25px 30px;
           border-radius: 4px;
-                    background-color: #F4F4F7;
+          background-color: #f4f4f7;
-                    .info-item{
+          .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;
-                        .icon-box{
+            }
+            &:last-child {
+              padding-bottom: 0;
+              border: none;
+            }
+            .icon-box {
               display: flex;
               margin-right: 12px;
             }
-                        .infor-data{
+            .infor-data {
               font-size: 13px;
               color: #101010;
               font-weight: 500;
@@ -354,14 +390,14 @@
         }
       }
     }
-        &:last-child{
+    &:last-child {
       margin-bottom: 0;
     }
   }
 }
 
 // loginpage
-.login-wrap{
+.login-wrap {
   position: relative;
   width: 100%;
   min-height: 100vh;
@@ -370,54 +406,59 @@
   justify-content: center;
   background: url(../../public/static/images/main/login_bg.png) no-repeat center;
   background-size: cover;
-    .login-inner{
+  .login-inner {
     max-width: 500px;
     width: 100%;
     margin: 0 auto;
-        .login-logo{
+    .login-logo {
       display: block;
       margin-bottom: 25px;
     }
-        .login-input-frame{
+    .login-input-frame {
       padding: 40px 50px;
       border-radius: 6px;
       background: rgba(255, 255, 255, 0.97);
       box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            .login-frame-tit{
+      .login-frame-tit {
         font-size: 18px;
         color: #364864;
         font-weight: 400;
         padding-bottom: 30px;
-                border-bottom: 1px solid #E5E9EF;
+        border-bottom: 1px solid #e5e9ef;
-                span{
+        span {
           display: block;
           font-weight: 600;
           margin-bottom: 5px;
         }
+        &.pw-reset {
+          font-size: 13px;
         }
-            .login-input-wrap{
+      }
+      .login-input-wrap {
         margin-top: 30px;
-                .login-area{
+        .login-area {
           position: relative;
           display: flex;
           align-items: center;
-                    border: 1px solid #E5E9EF;
+          border: 1px solid #e5e9ef;
           height: 45px;
           padding-left: 40px;
           padding-right: 15px;
           margin-bottom: 15px;
-                    .login-input{
+          .login-input {
             flex: 1;
             height: 100%;
             background-color: transparent;
             font-size: 13px;
             font-weight: 400;
-                        color: #D1D7E0;
+            color: #6c819c;
-                        &::placeholder{
+            &::placeholder {
-                            color: #D1D7E0;
+              font-size: 13px;
+              font-weight: 400;
+              color: #d1d7e0;
             }
           }
-                    &::before{
+          &::before {
             content: '';
             position: absolute;
             top: 50%;
@@ -427,62 +468,81 @@
             height: 12px;
             background-size: cover;
           }
-                    button{
+          button {
             width: 20px;
             height: 100%;
             background-repeat: no-repeat;
             background-position: center;
           }
-                    &.id{
+          &.id {
-                        &::before{
+            &::before {
-                            background: url(../../public/static/images/main/login_id.svg)no-repeat center;
+              background: url(../../public/static/images/main/login_id.svg) no-repeat center;
             }
-                        .id-delete{
+            .id-delete {
               background-image: url(../../public/static/images/main/id_delete.svg);
               background-size: 17px 17px;
             }
           }
-                    &.password{
+          &.email {
-                        margin-bottom: 20px;
+            &::before {
-                        &::before{
+              background: url(../../public/static/images/main/login_email.svg) no-repeat center;
-                            background: url(../../public/static/images/main/login_password.svg)no-repeat center;
+              width: 12px;
+              height: 9px;
             }
-                        .password-hidden{
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
+          &.password {
+            margin-bottom: 20px;
+            &::before {
+              background: url(../../public/static/images/main/login_password.svg) no-repeat center;
+            }
+            .password-hidden {
               background-image: url(../../public/static/images/main/password_hidden.svg);
               background-size: 19px 13px;
-                            &.visible{
+              &.visible {
                 background-image: url(../../public/static/images/main/password_visible.svg);
               }
             }
           }
         }
-                .login-btn-box{
+        .login-btn {
-                    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{
+          &:hover {
             background-color: #717e8d;
           }
+          &.light {
+            background-color: #fff;
+            border: 1px solid #5c6773;
+            color: #5c6773;
           }
         }
-                .reset-password{
+        .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;
             font-weight: 400;
             padding-right: 16px;
-                        &::before{
+            &::before {
               content: '';
               position: absolute;
               top: calc(50% + 1px);
@@ -490,13 +550,13 @@
               transform: translateY(-50%);
               width: 6px;
               height: 8px;
-                            background: url(../../public/static/images/main/login-arr.svg)no-repeat center;
+              background: url(../../public/static/images/main/login-arr.svg) no-repeat center;
             }
           }
         }
       }
     }
-        .login-guide-wrap{
+    .login-guide-wrap {
       position: relative;
       margin-left: 10px;
       margin-top: 30px;
@@ -504,19 +564,19 @@
       font-size: 13px;
       color: #fff;
       line-height: 24px;
-            a{
+      a {
         color: #fff;
         font-weight: 600;
         text-decoration: underline;
       }
-            span{
+      span {
         position: absolute;
         top: 0;
         left: 0;
       }
     }
   }
-    .login-copyright{
+  .login-copyright {
     position: absolute;
     bottom: 40px;
     left: 50%;
@@ -527,27 +587,27 @@
   }
 }
 
-.d-check-box{
+.d-check-box {
-    &.login{
+  &.login {
     margin-bottom: 25px;
-        label{
+    label {
       padding-left: 20px;
       color: #364864;
-            &:before{
+      &:before {
         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/_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

@@ -1,146 +1,151 @@
-@mixin flexbox(){
+@mixin flexbox() {
   display: flex;
   align-items: center;
 }
 
-table{
+table {
-    .overflow-lab{
+  .overflow-lab {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }
-    .al-l{
+  .al-l {
     text-align: left !important;
   }
 }
 
-.common-table{
+.flx-box {
-    table{
+  @include flexbox;
+}
+
+.common-table {
+  table {
     table-layout: fixed;
-        border: 1px solid #ECF0F4;
+    border: 1px solid #ecf0f4;
     border-radius: 3px;
-        border-collapse:collapse;
+    border-collapse: collapse;
-        tbody{
+    tbody {
-            th{
+      th {
         font-size: 13px;
         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{
+      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{
+        .radio-wrap {
           flex: none;
           @include flexbox;
         }
-                .form-flex-wrap{
+        .form-flex-wrap {
           @include flexbox;
         }
-                .date-picker-wrap{
+        .date-picker-wrap {
           width: 100%;
           @include flexbox;
-                    span{
+          span {
             margin: 0 4px;
           }
         }
       }
     }
   }
-    &.bt-able{
+  &.bt-able {
     margin-bottom: 30px;
   }
 }
 
-.infomation-table{
+.infomation-table {
-    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;
+    border-collapse: collapse;
-        tbody{
+    tbody {
-            tr{
+      tr {
-                th{
+        th {
           font-size: 13px;
           color: #344356;
           font-weight: 500;
           padding: 18px 0;
-                    border-bottom: 1px solid #F4F4F7;
+          border-bottom: 1px solid #f4f4f7;
-                    .title{
+          .title {
             margin-right: 8px;
           }
         }
-                td{
+        td {
           padding: 0 0 0 15px;
-                    border-bottom: 1px solid #F4F4F7;
+          border-bottom: 1px solid #f4f4f7;
 
-                    .guide{
+          .guide {
             font-size: 13px;
-                        color: #697C8F;
+            color: #697c8f;
             font-weight: normal;
             margin-left: 15px;
+            margin-bottom: 0;
           }
-                    span{
+          span {
             font-size: 13px;
-                        color: #697C8F;
+            color: #697c8f;
             font-weight: normal;
           }
         }
-                &:last-child{
+        &:last-child {
-                    th,td{border-bottom: none;}
+          th,
+          td {
+            border-bottom: none;
           }
         }
       }
-        .flx-box{
-            @include flexbox;
     }
   }
-    .tooltips{
+  .tooltips {
     display: block;
     width: 14px;
     height: 14px;
     display: inline-block;
-        background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
+    background: url(../../public/static/images/sub/tooltips.svg) no-repeat center;
     background-size: cover;
     cursor: pointer;
   }
 }
 
-.module-table{
+.module-table {
-    table{
+  table {
     table-layout: fixed;
     border-collapse: collapse;
-        thead{
+    thead {
       display: table;
       table-layout: fixed;
       width: 100%;
-            th{
+      th {
         padding: 13px 0;
         font-size: 13px;
         color: #344356;
         font-weight: 500;
-                border-bottom: 2px solid #E0E5EB;
+        border-bottom: 2px solid #e0e5eb;
         text-align: center;
       }
     }
-        tbody{
+    tbody {
       display: block;
       overflow-y: auto;
-            tr{
+      tr {
         display: table;
         table-layout: fixed;
         width: 100%;
-                border: 1px solid #ECF0F4;
+        border: 1px solid #ecf0f4;
-                td{
+        td {
           padding: 10px 0px;
           font-size: 13px;
-                    color: #45576F;
+          color: #45576f;
           font-weight: 400;
           text-align: center;
         }
@@ -150,25 +155,27 @@ table{
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-                background-color: #C1CCD7;
+        background-color: #c1ccd7;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
     }
-        &.small{
+    &.small {
-            tbody{height: 120px;}
+      tbody {
+        height: 120px;
       }
-        &.big{
+    }
+    &.big {
       td,
-            th{
+      th {
-                &:nth-child(2){
+        &:nth-child(2) {
           width: 121px;
         }
       }
-            tbody{
+      tbody {
         height: 160px;
-                td{
+        td {
           padding: 10px 20px;
         }
       }
@@ -176,14 +183,15 @@ table{
   }
 }
 
-.roof-module-table{
+.roof-module-table {
-    table{
+  table {
     border-collapse: collapse;
-        thead{
+    thead {
-            th{
+      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{
+    }
-            td{
+    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';