Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/suitable
This commit is contained in:
commit
b61f5205e4
5
public/assets/images/layout/modal_header_icon03.svg
Normal file
5
public/assets/images/layout/modal_header_icon03.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.5 2.00372C10.6049 1.99039 9.7047 2.01289 8.8294 2.07107C4.64639 2.34913 1.31441 5.72838 1.04024 9.97072C0.986587 10.8009 0.986587 11.6607 1.04024 12.4909C1.1401 14.036 1.82343 15.4666 2.62791 16.6746C3.09501 17.5203 2.78674 18.5758 2.30021 19.4978C1.94941 20.1626 1.77401 20.495 1.91484 20.7351C2.05568 20.9752 2.37026 20.9829 2.99943 20.9982C4.24367 21.0285 5.08268 20.6757 5.74868 20.1846C6.1264 19.9061 6.31527 19.7668 6.44544 19.7508C6.5756 19.7348 6.83177 19.8403 7.34401 20.0513C7.8044 20.2409 8.33896 20.3579 8.8294 20.3905C10.2536 20.4852 11.7435 20.4854 13.1706 20.3905C17.3536 20.1125 20.6856 16.7332 20.9598 12.4909C21.0021 11.836 21.011 11.1627 20.9866 10.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 14H14.5M7.5 9H11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14 4.5H21M17.5 1L17.5 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
4
public/assets/images/sub/compliance_bx_icon.svg
Normal file
4
public/assets/images/sub/compliance_bx_icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="#A8B6C7"/>
|
||||
<path d="M7 13L11 9L15 13" stroke="#A8B6C7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 289 B |
4
public/assets/images/sub/compliance_check_icon.svg
Normal file
4
public/assets/images/sub/compliance_check_icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#F1FFF4" stroke="#6CB67C"/>
|
||||
<path d="M7 11.5875L9.5625 14.15L15.2 8" stroke="#6CB67C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 387 B |
4
public/assets/images/sub/compliance_quest_icon.svg
Normal file
4
public/assets/images/sub/compliance_quest_icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#EFF7FF" stroke="#67A9EF"/>
|
||||
<path d="M10.9219 14.7871C11.3002 14.8253 11.5956 15.1448 11.5957 15.5332C11.5957 15.9217 11.3002 16.2411 10.9219 16.2793L10.8457 16.2832H10.833C10.419 16.283 10.083 15.9473 10.083 15.5332C10.0831 15.1192 10.4191 14.7834 10.833 14.7832H10.8457L10.9219 14.7871ZM10.835 5C12.4218 5.00022 13.6687 6.32107 13.6689 7.90039C13.6689 8.4001 13.545 8.87321 13.3252 9.28613L13.2256 9.45898C13.0473 9.74483 12.8377 10.0187 12.6436 10.2676C12.4417 10.5263 12.2576 10.7567 12.0908 10.9932C11.7534 11.4716 11.5851 11.8465 11.585 12.2002V12.7383C11.5847 13.1522 11.2489 13.4881 10.835 13.4883C10.4209 13.4883 10.0852 13.1523 10.085 12.7383V12.2002C10.0851 11.3669 10.4817 10.6716 10.8652 10.1279C11.059 9.85327 11.2756 9.58331 11.4609 9.3457C11.6538 9.09844 11.8192 8.87814 11.9521 8.66504L12.0439 8.49316C12.1238 8.3143 12.1689 8.11368 12.1689 7.90039C12.1687 7.10541 11.55 6.50023 10.835 6.5C10.1198 6.50002 9.50021 7.10528 9.5 7.90039C9.49985 8.31448 9.16412 8.65039 8.75 8.65039C8.33589 8.65037 8.00015 8.31447 8 7.90039C8.00021 6.32095 9.24791 5.00002 10.835 5Z" fill="#67A9EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
4
public/assets/images/sub/compliance_tip_icon.svg
Normal file
4
public/assets/images/sub/compliance_tip_icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#F6F6F6" stroke="#999999"/>
|
||||
<path d="M11.0088 13.75C11.5611 13.75 12.0088 14.1977 12.0088 14.75C12.0088 15.3023 11.5611 15.75 11.0088 15.75H11C10.4477 15.75 10 15.3023 10 14.75C10 14.1977 10.4477 13.75 11 13.75H11.0088ZM11 6C11.4142 6 11.75 6.33579 11.75 6.75V11.75C11.75 12.1642 11.4142 12.5 11 12.5C10.5858 12.5 10.25 12.1642 10.25 11.75V6.75C10.25 6.33579 10.5858 6 11 6Z" fill="#999999"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 626 B |
4
public/assets/images/sub/compliance_x_icon.svg
Normal file
4
public/assets/images/sub/compliance_x_icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" fill="#FFF3F7" stroke="#EB6F94"/>
|
||||
<path d="M8 8L11 11M11 11L14 14M11 11L14 8M11 11L8 14" stroke="#EB6F94" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 401 B |
@ -1,6 +1,7 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
import ReactQueryProviders from '@/providers/ReactQueryProvider'
|
||||
import EdgeProvider from '@/providers/EdgeProvider'
|
||||
import PopupController from '@/components/ui/PopupController'
|
||||
|
||||
import '@/styles/style.scss'
|
||||
@ -22,6 +23,7 @@ interface RootLayoutProps {
|
||||
export default async function RootLayout({ children, header, footer, floatBtn }: RootLayoutProps): Promise<ReactNode> {
|
||||
return (
|
||||
<ReactQueryProviders>
|
||||
<EdgeProvider>
|
||||
<html lang="en">
|
||||
<body>
|
||||
<div className="wrap">
|
||||
@ -33,6 +35,7 @@ export default async function RootLayout({ children, header, footer, floatBtn }:
|
||||
<PopupController />
|
||||
</body>
|
||||
</html>
|
||||
</EdgeProvider>
|
||||
</ReactQueryProviders>
|
||||
)
|
||||
}
|
||||
|
||||
24
src/app/suitable/layout.tsx
Normal file
24
src/app/suitable/layout.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface SuitableLayoutProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export default function layout({ children }: SuitableLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="container">
|
||||
<div className="sale-contents">
|
||||
<div className="border-frame">
|
||||
<div className="pw-guide">
|
||||
<div className="pw-guide-txt">この適合表は参考資料として使用してください.</div>
|
||||
<div className="pw-guide-txt">詳細やお問い合わせは1：1お問い合わせをご利用ください.</div>
|
||||
<div className="pw-guide-txt">屋根材の選択or屋根材名を直接入力してください.</div>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,7 +1,9 @@
|
||||
import Suitable from '@/components/suitable/Suitable'
|
||||
|
||||
export default function page() {
|
||||
return (
|
||||
<>
|
||||
<h1>지붕재 적합성</h1>
|
||||
<Suitable />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
32
src/components/popup/SuitableDetailPopup.tsx
Normal file
32
src/components/popup/SuitableDetailPopup.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
export default function SuitableDetailPopup() {
|
||||
return (
|
||||
<div className="modal-popup">
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<div className="modal-header-inner">
|
||||
<div className="modal-name-wrap">
|
||||
<div className="modal-img">
|
||||
<img src="/assets/images/layout/modal_header_icon03.svg" alt="" />
|
||||
</div>
|
||||
<div className="modal-name">屋根材適合性詳細 </div>
|
||||
</div>
|
||||
<button className="modal-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className={`compliance-check-bx act`}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-name">アースティ４０</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compliance-check-pop-contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
87
src/components/suitable/Suitable.tsx
Normal file
87
src/components/suitable/Suitable.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import SuitableCheckData from './SuitableCheckData'
|
||||
import SuitableNoData from './SuitableNoData'
|
||||
|
||||
export default function Suitable() {
|
||||
const [reference, setReference] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="border-frame">
|
||||
<div className="sale-form-bx">
|
||||
<select className="select-form" name="" id="">
|
||||
<option value="">屋根材を選択してください.</option>
|
||||
<option value="">屋根材を選択してください.</option>
|
||||
<option value="">屋根材を選択してください.</option>
|
||||
<option value="">屋根材を選択してください.</option>
|
||||
<option value="">屋根材を選択してください.</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="sale-form-bx">
|
||||
<div className="search-input">
|
||||
<input type="text" className="search-frame" placeholder="屋根材 製品名を入力してください." />
|
||||
<button className="search-icon"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compliance-check-wrap">
|
||||
<div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-name">凡例</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn" onClick={() => setReference(!reference)}></button>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="reference-list">
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon check"></i>設置可能
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon x"></i>設置可能
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon quest"></i>設置可能
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon tip"></i>設置可能
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* checkData */}
|
||||
{/* 데이터 없을경우 버튼 영역 안보여야함 */}
|
||||
<SuitableCheckData />
|
||||
<SuitableCheckData />
|
||||
<SuitableCheckData />
|
||||
<SuitableCheckData />
|
||||
</div>
|
||||
{/* 데이터 없을경우 버튼 영역 안보여야함 */}
|
||||
<div className="btn-flex-wrap com">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon">
|
||||
全選択<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame red icon">
|
||||
詳細を見る<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon">
|
||||
選択ダウンロード<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
|
||||
{/* <SuitableNoData /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
68
src/components/suitable/SuitableCheckData.tsx
Normal file
68
src/components/suitable/SuitableCheckData.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
|
||||
export default function SuitableCheckData() {
|
||||
return (
|
||||
<>
|
||||
<div className={`compliance-check-bx act`}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-form-box com-tit">
|
||||
<input type="checkbox" id="ch01" />
|
||||
<label htmlFor="ch01">アースティ４０</label>
|
||||
</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="reference-list check">
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<input type="checkbox" id="ch02" />
|
||||
<label htmlFor="ch02">屋根技研 支持瓦</label>
|
||||
</div>
|
||||
<div className="compliance-icon-wrap">
|
||||
<i className="compliance-icon check"></i>
|
||||
<i className="compliance-icon x"></i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<input type="checkbox" id="ch03" />
|
||||
<label htmlFor="ch03">屋根技研 支持金具</label>
|
||||
</div>
|
||||
<div className="compliance-icon-wrap">
|
||||
<i className="compliance-icon x"></i>
|
||||
<i className="compliance-icon tip"></i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<input type="checkbox" id="ch04" />
|
||||
<label htmlFor="ch04">屋根技研YGアンカー</label>
|
||||
</div>
|
||||
<div className="compliance-icon-wrap">
|
||||
<i className="compliance-icon tip"></i>
|
||||
<i className="compliance-icon quest"></i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<input type="checkbox" id="ch05" />
|
||||
<label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
|
||||
</div>
|
||||
<div className="compliance-icon-wrap">
|
||||
<i className="compliance-icon check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
15
src/components/suitable/SuitableNoData.tsx
Normal file
15
src/components/suitable/SuitableNoData.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export default function SuitableNoData() {
|
||||
return (
|
||||
<>
|
||||
<div className="compliace-nosearch">
|
||||
<span className="mb10">検索結果はありません。</span>
|
||||
<span className="mb10">屋根材適合性表にない製品の情報を入力してください。 今後返信いたします。</span>
|
||||
<span>
|
||||
<button className="btn-frame n-blue icon">
|
||||
お問い合わせ登録<i className="btn-arr"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,27 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import { useHeaderStore } from '@/store/header'
|
||||
import { useSideNavState } from '@/store/sideNavState'
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function Main() {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const { setBackBtn } = useHeaderStore()
|
||||
const { reset } = useSideNavState()
|
||||
|
||||
/**
|
||||
* 헤더 뒤로가기 버튼 컨트롤
|
||||
* 사이드바 초기화 컨트롤
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (pathname === '/') {
|
||||
setBackBtn(false)
|
||||
}
|
||||
//사이드바 초기화
|
||||
reset()
|
||||
}, [pathname])
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -30,7 +12,7 @@ export default function Main() {
|
||||
<div className="head-block-tit">屋根材の照会</div>
|
||||
<div className="head-block-text">ご使用の屋根材の適合性をご確認いただけます</div>
|
||||
<div className="head-block-link-wrap">
|
||||
<button className="head-block-link">
|
||||
<button className="head-block-link" onClick={() => router.push('/suitable')}>
|
||||
照会まさに移動<i className="block-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
|
||||
import MemberInfomationPopup from '../popup/MemberInformationPopup'
|
||||
import ZipCodePopup from '../popup/ZipCodePopup'
|
||||
import Alert from './common/Alert'
|
||||
import DoubleBtnAlert from './common/DoubleBtnAlert'
|
||||
import SuitableDetailPopup from '../popup/SuitableDetailPopup'
|
||||
|
||||
export default function PopupController() {
|
||||
const popupController = usePopupController()
|
||||
@ -11,6 +15,9 @@ export default function PopupController() {
|
||||
<>
|
||||
{popupController.memberInfomationPopup && <MemberInfomationPopup />}
|
||||
{popupController.zipCodePopup && <ZipCodePopup />}
|
||||
{popupController.alert && <Alert />}
|
||||
{popupController.alert2 && <DoubleBtnAlert />}
|
||||
{popupController.suitableDetailPopup && <SuitableDetailPopup />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
24
src/components/ui/common/Alert.tsx
Normal file
24
src/components/ui/common/Alert.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
'use client'
|
||||
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
|
||||
export default function Alert() {
|
||||
const { alertMsg, alertBtn } = usePopupController()
|
||||
|
||||
return (
|
||||
<div className="modal-popup alert">
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="alert-tit">{alertMsg}</div>
|
||||
<div className="alert-btn-wrap">
|
||||
<div className="alert-btn-bx">
|
||||
<button className="btn-frame red min" onClick={() => alertBtn()}>
|
||||
確認
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
21
src/components/ui/common/DoubleBtnAlert.tsx
Normal file
21
src/components/ui/common/DoubleBtnAlert.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function DoubleBtnAlert() {
|
||||
return (
|
||||
<div className="modal-popup alert">
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="alert-tit">本当に削除しますか?</div>
|
||||
<div className="alert-btn-wrap">
|
||||
<div className="alert-btn-bx">
|
||||
<button className="btn-frame red min">確認</button>
|
||||
</div>
|
||||
<div className="alert-btn-bx">
|
||||
<button className="btn-frame n-blue min">キャンセル</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
66
src/providers/EdgeProvider.tsx
Normal file
66
src/providers/EdgeProvider.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
'use client'
|
||||
|
||||
import { useHeaderStore } from '@/store/header'
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
import { useSideNavState } from '@/store/sideNavState'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
alert2: (msg: string, alert2BtnYes?: () => void, alert2BtnNo?: () => void) => void
|
||||
}
|
||||
}
|
||||
|
||||
export default function EdgeProvider({ children }: React.PropsWithChildren) {
|
||||
const pathname = usePathname()
|
||||
const { setBackBtn } = useHeaderStore()
|
||||
const { reset } = useSideNavState()
|
||||
const { setAlertMsg, setAlertBtn, setAlert, setAlert2, setAlert2BtnYes, setAlert2BtnNo } = usePopupController()
|
||||
|
||||
const alertFunc = (msg: string, alertBtn: Function) => {
|
||||
console.log('🚀 ~ alertFunc ~ msg:', msg)
|
||||
setAlertMsg(msg)
|
||||
setAlertBtn(alertBtn)
|
||||
setAlert(true)
|
||||
}
|
||||
/**
|
||||
* alert2 함수
|
||||
* @param msg alert 메시지
|
||||
* @param alertBtn2Yes alert 확인 버튼 클릭시 실행되는 함수
|
||||
* @param alertBtn2No alert 취소 버튼 클릭시 실행되는 함수
|
||||
*/
|
||||
const alertFunc2 = (msg: string, alertBtn2Yes: Function, alertBtn2No: Function) => {
|
||||
console.log('🚀 ~ alertFunc ~ msg:', msg)
|
||||
setAlertMsg(msg)
|
||||
setAlert2BtnYes(alertBtn2Yes)
|
||||
setAlert2BtnNo(alertBtn2No)
|
||||
setAlert2(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.alert = function (msg, alertBtn = () => setAlert(false)) {
|
||||
alertFunc(msg, alertBtn)
|
||||
}
|
||||
|
||||
window.alert2 = function (msg, alert2BtnYes = () => setAlert2(false), alert2BtnNo = () => setAlert2(false)) {
|
||||
alertFunc2(msg, alert2BtnYes, alert2BtnNo)
|
||||
}
|
||||
}, [])
|
||||
|
||||
/**
|
||||
* 헤더 뒤로가기 버튼 컨트롤
|
||||
* 사이드바 초기화 컨트롤
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (pathname === '/') {
|
||||
setBackBtn(false)
|
||||
} else {
|
||||
setBackBtn(true)
|
||||
}
|
||||
//사이드바 초기화
|
||||
reset()
|
||||
}, [pathname])
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
@ -3,23 +3,59 @@ import { create } from 'zustand'
|
||||
type PoupControllerState = {
|
||||
memberInfomationPopup: boolean
|
||||
zipCodePopup: boolean
|
||||
alertMsg: string
|
||||
setAlertMsg: (value: string) => void
|
||||
alert: boolean
|
||||
alertBtn: Function
|
||||
alert2: boolean
|
||||
alert2BtnYes: Function
|
||||
alert2BtnNo: Function
|
||||
setMemberInfomationPopup: (value: boolean) => void
|
||||
setZipCodePopup: (value: boolean) => void
|
||||
setAlert: (value: boolean) => void
|
||||
setAlertBtn: (value: Function) => void
|
||||
setAlert2: (value: boolean) => void
|
||||
setAlert2BtnYes: (value: Function) => void
|
||||
setAlert2BtnNo: (value: Function) => void
|
||||
suitableDetailPopup: boolean
|
||||
setSuitableDetailPopup: (value: boolean) => void
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
type InitialState = {
|
||||
memberInfomationPopup: boolean
|
||||
zipCodePopup: boolean
|
||||
alertMsg: string
|
||||
alert: boolean
|
||||
alertBtn: Function
|
||||
alert2: boolean
|
||||
alert2BtnYes: Function
|
||||
alert2BtnNo: Function
|
||||
suitableDetailPopup: boolean
|
||||
}
|
||||
|
||||
const initialState: InitialState = {
|
||||
memberInfomationPopup: false,
|
||||
zipCodePopup: false,
|
||||
alertMsg: '',
|
||||
alert: false,
|
||||
alertBtn: () => {},
|
||||
alert2: false,
|
||||
alert2BtnYes: () => {},
|
||||
alert2BtnNo: () => {},
|
||||
suitableDetailPopup: false,
|
||||
}
|
||||
|
||||
export const usePopupController = create<PoupControllerState>((set) => ({
|
||||
...initialState,
|
||||
setMemberInfomationPopup: (value: boolean) => set((state) => ({ ...state, memberInfomationPopup: value })),
|
||||
setZipCodePopup: (value: boolean) => set((state) => ({ ...state, zipCodePopup: value })),
|
||||
setAlertMsg: (value: string) => set((state) => ({ ...state, alertMsg: value })),
|
||||
setAlert: (value: boolean) => set((state) => ({ ...state, alert: value })),
|
||||
setAlertBtn: (value: Function) => set((state) => ({ ...state, alertBtn: value })),
|
||||
setAlert2: (value: boolean) => set((state) => ({ ...state, alert2: value })),
|
||||
setAlert2BtnYes: (value: Function) => set((state) => ({ ...state, alert2BtnYes: value })),
|
||||
setAlert2BtnNo: (value: Function) => set((state) => ({ ...state, alert2BtnNo: value })),
|
||||
setSuitableDetailPopup: (value: boolean) => set((state) => ({ ...state, suitableDetailPopup: value })),
|
||||
reset: () => set(initialState),
|
||||
}))
|
||||
|
||||
@ -82,13 +82,13 @@ input::-webkit-inner-spin-button {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
height: 40px;
|
||||
font-size: $font-s-13;
|
||||
color: $font-c;
|
||||
font-weight: $font-w-400;
|
||||
background-color: $white-fff;
|
||||
border: 1px solid #D5DEE8;
|
||||
border-radius: 4px;
|
||||
input{
|
||||
font-size: $font-s-13;
|
||||
color: $font-c;
|
||||
font-weight: $font-w-400;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
@ -194,4 +194,11 @@ input::-webkit-inner-spin-button {
|
||||
}
|
||||
}
|
||||
}
|
||||
&.change{
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,3 +17,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px){
|
||||
.login-contents{
|
||||
padding: 70px 34px 0;
|
||||
}
|
||||
}
|
||||
@ -89,3 +89,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px){
|
||||
.main-grid-wrap{
|
||||
.main-grid-bx{
|
||||
padding: 40px 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -34,3 +34,10 @@
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 지붕재 적합성 상세
|
||||
.compliance-check-pop-contents{
|
||||
padding: 14px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -17,6 +17,10 @@
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
}
|
||||
}
|
||||
.data-input-guide{
|
||||
margin-top: 8px;
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flex-wrap{
|
||||
@ -25,6 +29,14 @@
|
||||
.btn-bx{
|
||||
flex: 1;
|
||||
}
|
||||
&.com{
|
||||
.btn-bx{
|
||||
flex: 1 1 auto;
|
||||
button{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 매물 common
|
||||
@ -177,6 +189,13 @@
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
&.nodata{
|
||||
.sale-item-nodata{
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-edit-btn{
|
||||
margin-top: 24px;
|
||||
@ -335,6 +354,14 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
&.nodata{
|
||||
padding-right: 0;
|
||||
.inquiry-item-nodata{
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -360,9 +387,12 @@
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.file-item-name{
|
||||
@include ellipsis(1);
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding-right: 10px;
|
||||
}
|
||||
.file-del{
|
||||
flex: none;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
width: 16px;
|
||||
@ -417,3 +447,176 @@
|
||||
@include defaultFont($font-s-13, $font-w-400, #F86A56);
|
||||
}
|
||||
}
|
||||
|
||||
// 비밀번호 변경
|
||||
.border-frame{
|
||||
padding: 20px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.pw-guide{
|
||||
.pw-guide-tit{
|
||||
@include defaultFont($font-s-16, $font-w-500, #1259CB);
|
||||
}
|
||||
.pw-guide-txt{
|
||||
@include defaultFont($font-s-13, $font-w-400, #417DDC);
|
||||
}
|
||||
}
|
||||
|
||||
// 지붕재 적합성
|
||||
.compliance-icon{
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
&.check{
|
||||
background-image: url(/assets/images/sub/compliance_check_icon.svg);
|
||||
}
|
||||
&.x{
|
||||
background-image: url(/assets/images/sub/compliance_x_icon.svg);
|
||||
}
|
||||
&.quest{
|
||||
background-image: url(/assets/images/sub/compliance_quest_icon.svg);
|
||||
}
|
||||
&.tip{
|
||||
background-image: url(/assets/images/sub/compliance_tip_icon.svg);
|
||||
}
|
||||
}
|
||||
.compliance-check-wrap{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.compliance-check-bx{
|
||||
position: relative;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid #EFEFEF;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.act{
|
||||
.bx-btn{
|
||||
transform: rotate(0) !important;
|
||||
}
|
||||
.reference-list{
|
||||
display: block
|
||||
}
|
||||
}
|
||||
}
|
||||
.check-name-wrap{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.check-name{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.check-name-btn{
|
||||
margin-left: auto;
|
||||
.bx-btn{
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.reference-list{
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
transition: all .15s ease-in-out;
|
||||
.reference-item{
|
||||
margin-bottom: 8px;
|
||||
padding-left: 14px;
|
||||
.reference-item-bx{
|
||||
@include flex(10px);
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
align-items: center;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.check{
|
||||
.reference-item{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.compliace-nodata{
|
||||
margin-top: 24px;
|
||||
padding: 30px 0;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
text-align: center;
|
||||
}
|
||||
.compliace-nosearch{
|
||||
padding: 30px 0;
|
||||
span{
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.check-form-box{
|
||||
&.com-tit{
|
||||
label{
|
||||
&:before{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + label{
|
||||
font-weight: 500;
|
||||
&::after{
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.com-txt{
|
||||
label{
|
||||
@include defaultFont($font-s-13, $font-w-400, #8595A7);
|
||||
&:before{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + label{
|
||||
&::after{
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.check-item-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.compliance-icon-wrap{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px){
|
||||
.btn-flex-wrap{
|
||||
flex-direction: column;
|
||||
}
|
||||
.data-check-wrap{
|
||||
.radio-form-box,
|
||||
.check-form-box{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -31,6 +31,7 @@ $default-color: #2C2C2C;
|
||||
|
||||
.p-body{
|
||||
margin-top: 30px;
|
||||
padding-bottom: 70px;
|
||||
flex: 1 1 auto;
|
||||
.p-contents{
|
||||
max-width: 1480px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user