1.로그인 후 메인화면 작업
2.layout.js QModal 미사용으로 주석처리 3. 퍼블 10/11 11시26분 까지 반영
This commit is contained in:
parent
2437f6fcfa
commit
b379ec670d
10
public/static/images/main/login_email.svg
Normal file
10
public/static/images/main/login_email.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 647 B |
11
public/static/images/sub/address_search.svg
Normal file
11
public/static/images/sub/address_search.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 611 B |
4
public/static/images/sub/information_help.svg
Normal file
4
public/static/images/sub/information_help.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -75,7 +75,7 @@ export default async function RootLayout({ children }) {
|
||||
<QcastProvider>{children}</QcastProvider>
|
||||
)}
|
||||
<ToastContainer />
|
||||
<QModal />
|
||||
{/* <QModal /> */}
|
||||
</body>
|
||||
</html>
|
||||
</RecoilRootWrapper>
|
||||
|
||||
@ -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'
|
||||
|
||||
export default function MainPage(props) {
|
||||
import { useForm } from 'react-hook-form'
|
||||
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') {
|
||||
setOpen(true)
|
||||
setContent(html)
|
||||
setModalProps({
|
||||
closeOnOverlayClick: false,
|
||||
closeOnEsc: false,
|
||||
showCloseIcon: false,
|
||||
})
|
||||
} else {
|
||||
if (sessionState.pwdInitYn === 'Y') {
|
||||
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 />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
168
src/components/main/ChangePasswordPop.jsx
Normal file
168
src/components/main/ChangePasswordPop.jsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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": "パスワードが変更されました。"
|
||||
}
|
||||
|
||||
@ -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": "비밀번호가 변경되었습니다."
|
||||
}
|
||||
|
||||
@ -1,106 +1,106 @@
|
||||
// 패널 배치 집계
|
||||
.penal-wrap{
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 50px;
|
||||
z-index: 999999;
|
||||
width: 237px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff;
|
||||
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{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
h2{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.penal-table-wrap{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -1px;
|
||||
min-width: calc(100% + 2px);
|
||||
background-color: #3D3D3D;
|
||||
border: 1px solid #3D3D3D;
|
||||
padding: 20px;
|
||||
.penal-table{
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead{
|
||||
th{
|
||||
text-align: center;
|
||||
background-color:rgba(255, 255, 255, 0.05);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
border: 1px solid #505050;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
td{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #505050;
|
||||
}
|
||||
}
|
||||
.penal-wrap {
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 50px;
|
||||
z-index: 999999;
|
||||
width: 237px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff;
|
||||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
.penal-table-wrap {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -1px;
|
||||
min-width: calc(100% + 2px);
|
||||
background-color: #3d3d3d;
|
||||
border: 1px solid #3d3d3d;
|
||||
padding: 20px;
|
||||
.penal-table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
th {
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
border: 1px solid #505050;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #505050;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.act{
|
||||
border: 1px solid #3D3D3D;
|
||||
background-color: #3D3D3D;
|
||||
h2{
|
||||
color: #fff;
|
||||
}
|
||||
&::before{
|
||||
background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
|
||||
}
|
||||
.penal-table-wrap{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.act {
|
||||
border: 1px solid #3d3d3d;
|
||||
background-color: #3d3d3d;
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
&::before {
|
||||
background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
|
||||
}
|
||||
.penal-table-wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// context menu
|
||||
.context-menu-wrap{
|
||||
min-width: 238px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E9E9E9;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
|
||||
ul{
|
||||
padding: 17px 0;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
li{
|
||||
padding: 4px 30px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #101010;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
background-color: #0D99FF;
|
||||
}
|
||||
}
|
||||
.context-menu-wrap {
|
||||
min-width: 238px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9e9e9;
|
||||
background: #fff;
|
||||
box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
|
||||
ul {
|
||||
padding: 17px 0;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
li {
|
||||
padding: 4px 30px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #101010;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #0d99ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
198
src/styles/_submodal.scss
Normal file
198
src/styles/_submodal.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,205 +1,281 @@
|
||||
@mixin flexbox(){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@mixin flexbox() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
table{
|
||||
.overflow-lab{
|
||||
table {
|
||||
.overflow-lab {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.al-l {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flx-box {
|
||||
@include flexbox;
|
||||
}
|
||||
|
||||
.common-table {
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border: 1px solid #ecf0f4;
|
||||
border-radius: 3px;
|
||||
border-collapse: collapse;
|
||||
tbody {
|
||||
th {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #344356;
|
||||
padding: 14px 12px;
|
||||
border: 1px solid #ecf0f4;
|
||||
background-color: #f7f9fa;
|
||||
vertical-align: middle;
|
||||
}
|
||||
td {
|
||||
padding: 9px;
|
||||
border: 1px solid #ecf0f4;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #45576f;
|
||||
vertical-align: middle;
|
||||
.radio-wrap {
|
||||
flex: none;
|
||||
@include flexbox;
|
||||
}
|
||||
.form-flex-wrap {
|
||||
@include flexbox;
|
||||
}
|
||||
.date-picker-wrap {
|
||||
width: 100%;
|
||||
@include flexbox;
|
||||
span {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bt-able {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.infomation-table {
|
||||
table {
|
||||
border-top: 1px solid #dee3ea;
|
||||
border-bottom: 1px solid #dee3ea;
|
||||
border-collapse: collapse;
|
||||
tbody {
|
||||
tr {
|
||||
th {
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid #f4f4f7;
|
||||
.title {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding: 0 0 0 15px;
|
||||
border-bottom: 1px solid #f4f4f7;
|
||||
|
||||
.guide {
|
||||
font-size: 13px;
|
||||
color: #697c8f;
|
||||
font-weight: normal;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: #697c8f;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
th,
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tooltips {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background: url(../../public/static/images/sub/tooltips.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.module-table {
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
th {
|
||||
padding: 13px 0;
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid #e0e5eb;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
tr {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: 1px solid #ecf0f4;
|
||||
td {
|
||||
padding: 10px 0px;
|
||||
font-size: 13px;
|
||||
color: #45576f;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #c1ccd7;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
tbody {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
&.big {
|
||||
td,
|
||||
th {
|
||||
&:nth-child(2) {
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
height: 160px;
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roof-module-table {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
th {
|
||||
height: 40px;
|
||||
padding: 0px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.1;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border: 1px solid #505050;
|
||||
vertical-align: middle;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.al-l{
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.common-table{
|
||||
table{
|
||||
}
|
||||
&.overflow-y {
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
border: 1px solid #ECF0F4;
|
||||
border-radius: 3px;
|
||||
border-collapse:collapse;
|
||||
tbody{
|
||||
th{
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #344356;
|
||||
padding: 14px 12px;
|
||||
border: 1px solid #ECF0F4 ;
|
||||
background-color: #F7F9FA;
|
||||
vertical-align: middle;
|
||||
}
|
||||
td{
|
||||
padding: 9px;
|
||||
border: 1px solid #ECF0F4 ;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
vertical-align: middle;
|
||||
.radio-wrap{
|
||||
flex: none;
|
||||
@include flexbox;
|
||||
}
|
||||
.form-flex-wrap{
|
||||
@include flexbox;
|
||||
}
|
||||
.date-picker-wrap{
|
||||
width: 100%;
|
||||
@include flexbox;
|
||||
span{
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bt-able{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.infomation-table{
|
||||
table{
|
||||
border-top: 1px solid #DEE3EA;
|
||||
border-bottom: 1px solid #DEE3EA;
|
||||
border-collapse:collapse;
|
||||
tbody{
|
||||
tr{
|
||||
th{
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid #F4F4F7;
|
||||
.title{
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
td{
|
||||
padding: 0 0 0 15px;
|
||||
border-bottom: 1px solid #F4F4F7;
|
||||
|
||||
.guide{
|
||||
font-size: 13px;
|
||||
color: #697C8F;
|
||||
font-weight: normal;
|
||||
margin-left: 15px;
|
||||
}
|
||||
span{
|
||||
font-size: 13px;
|
||||
color: #697C8F;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
th,td{border-bottom: none;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flx-box{
|
||||
@include flexbox;
|
||||
}
|
||||
}
|
||||
.tooltips{
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
tbody {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
th{
|
||||
padding: 13px 0;
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid #E0E5EB;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
tr{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: 1px solid #ECF0F4;
|
||||
td{
|
||||
padding: 10px 0px;
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #C1CCD7;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&.small{
|
||||
tbody{height: 120px;}
|
||||
}
|
||||
&.big{
|
||||
td,
|
||||
th{
|
||||
&:nth-child(2){
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
height: 160px;
|
||||
td{
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roof-module-table{
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
thead{
|
||||
th{
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border: 1px solid #505050;
|
||||
vertical-align: middle;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
td{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
border: 1px solid #505050;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
@import '_contents.scss';
|
||||
@import '_modal.scss';
|
||||
@import '_submodal.scss';
|
||||
@import '_table.scss';
|
||||
@import '_canvasside.scss';
|
||||
@import '_canvasside.scss';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user