qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/survey

Browse Source
This commit is contained in:
Dayoung 2025-05-16 11:03:18 +09:00
commit 6b62dfc1f2
10 changed files with 169 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/assets/images/layout/modal_header_icon04.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8.90909L18 6.81818C18 5.12494 18 4.27832 17.732 3.60214C17.3013 2.5151 16.3902 1.65765 15.2352 1.2522C14.5168 1 13.6173 1 11.8182 0.999999C8.66981 0.999999 7.09563 1 5.83836 1.44135C3.81714 2.15088 2.22282 3.65142 1.46894 5.55375C1 6.73706 1 8.21865 1 11.1818L1 13.7273C1 16.7966 1 18.3313 1.8477 19.3971C2.09058 19.7025 2.37862 19.9736 2.70307 20.2022C3.83546 21 5.46607 21 8.72727 21L9.5 21C10.0347 21 11.0337 21 11.5 20.9972" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 11C1 9.15905 2.49238 7.66667 4.33333 7.66667C4.99912 7.66667 5.78404 7.78333 6.43137 7.60988C7.00652 7.45576 7.45576 7.00652 7.60988 6.43136C7.78333 5.78404 7.66667 4.99912 7.66667 4.33333C7.66667 2.49238 9.15905 1 11 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 15H10.5M18 15C18 15.7002 16.0057 17.0085 15.5 17.5M18 15C18 14.2998 16.0057 12.9915 15.5 12.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
public/assets/images/sub/sale_toggle_btn.svg Normal file
View 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="#2E3A59"/>
<path d="M7 9L11 13L15 9" stroke="#2E3A59" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 288 B

6
public/assets/images/sub/sale_toggle_btn_white.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="toggle btn">
<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="white"/>
<path id="Vector 7412" d="M7 13L11 9L15 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 327 B

3
src/components/popup/MemberInformationPopup.tsx
View File

@ -3,6 +3,7 @@
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { usePopupController } from '@/store/popupController' import { usePopupController } from '@/store/popupController'
import { useSessionStore } from '@/store/session' import { useSessionStore } from '@/store/session'
import Image from 'next/image'
export default function MemberInformationPopup() { export default function MemberInformationPopup() {
const popupController = usePopupController() const popupController = usePopupController()
@ -22,7 +23,7 @@ export default function MemberInformationPopup() {
<div className="modal-header-inner"> <div className="modal-header-inner">
<div className="modal-name-wrap"> <div className="modal-name-wrap">
<div className="modal-img"> <div className="modal-img">
<img src="/assets/images/layout/modal_header_icon.svg" alt="" /> <Image src="/assets/images/layout/modal_header_icon.svg" width={18} height={20} alt="" />
</div> </div>
<div className="modal-name">会員情報</div> <div className="modal-name">会員情報</div>
</div> </div>

59
src/components/suitable/Suitable.tsx
View File

@ -3,6 +3,7 @@
import { useState } from 'react' import { useState } from 'react'
import SuitableCheckData from './SuitableCheckData' import SuitableCheckData from './SuitableCheckData'
import SuitableNoData from './SuitableNoData' import SuitableNoData from './SuitableNoData'
import Image from 'next/image'
export default function Suitable() { export default function Suitable() {
const [reference, setReference] = useState(false) const [reference, setReference] = useState(false)
@ -35,22 +36,34 @@ export default function Suitable() {
<ul className="reference-list"> <ul className="reference-list">
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<i className="compliance-icon check"></i>設置可能 <div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>設置可能</span>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<i className="compliance-icon x"></i>設置可能 <div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>設置不可</span>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<i className="compliance-icon quest"></i>設置可能 <div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>お問い合わせ</span>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<i className="compliance-icon tip"></i>設置可能 <div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>備考</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -61,25 +74,29 @@ export default function Suitable() {
<SuitableCheckData /> <SuitableCheckData />
<SuitableCheckData /> <SuitableCheckData />
<SuitableCheckData /> <SuitableCheckData />
</div>
{/* 데이터 없을경우 버튼 영역 안보여야함 */} {/* 데이터 없을경우 버튼 영역 안보여야함 */}
<div className="btn-flex-wrap com"> <div className="float-btn-wrap">
<div className="btn-bx"> <div className="btn-flex-wrap com">
<button className="btn-frame n-blue icon"> <div className="btn-bx">
全選択<i className="btn-arr"></i> <button className="btn-frame n-blue icon">
</button> 全選択<i className="btn-arr"></i>
</div> </button>
<div className="btn-bx"> </div>
<button className="btn-frame red icon"> <div className="btn-bx">
詳細を見る<i className="btn-arr"></i> <button className="btn-frame red icon">
</button> 詳細を見る<i className="btn-arr"></i>
</div> </button>
<div className="btn-bx"> </div>
<button className="btn-frame n-blue icon"> <div className="btn-bx">
選択ダウンロード<i className="btn-arr"></i> <button className="btn-frame n-blue icon">
</button> 選択ダウンロード<i className="btn-arr"></i>
</button>
</div>
</div>
</div> </div>
</div> </div>
{/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/} {/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
{/* <SuitableNoData /> */} {/* <SuitableNoData /> */}
</div> </div>

41
src/components/suitable/SuitableCheckData.tsx
View File

@ -1,11 +1,13 @@
'use client' 'use client'
import Image from 'next/image'
export default function SuitableCheckData() { export default function SuitableCheckData() {
return ( return (
<> <>
<div className={`compliance-check-bx act`}> <div className={`compliance-check-bx act`}>
<div className="check-name-wrap"> <div className="check-name-wrap">
<div className="check-form-box com-tit"> <div className="check-form-box ch-bld">
<input type="checkbox" id="ch01" /> <input type="checkbox" id="ch01" />
<label htmlFor="ch01">アースティ４０</label> <label htmlFor="ch01">アースティ４０</label>
</div> </div>
@ -16,48 +18,59 @@ export default function SuitableCheckData() {
<ul className="reference-list check"> <ul className="reference-list check">
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box com-txt"> <div className="check-form-box light">
<input type="checkbox" id="ch02" /> <input type="checkbox" id="ch02" />
<label htmlFor="ch02">屋根技研 支持瓦</label> <label htmlFor="ch02">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<i className="compliance-icon check"></i> <div className="compliance-icon">
<i className="compliance-icon x"></i> <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box com-txt"> <div className="check-form-box light">
<input type="checkbox" id="ch03" /> <input type="checkbox" id="ch03" />
<label htmlFor="ch03">屋根技研 支持金具</label> <label htmlFor="ch03">屋根技研 支持金具</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<i className="compliance-icon x"></i> <div className="compliance-icon">
<i className="compliance-icon tip"></i> <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box com-txt"> <div className="check-form-box light">
<input type="checkbox" id="ch04" /> <input type="checkbox" id="ch04" />
<label htmlFor="ch04">屋根技研YGアンカー</label> <label htmlFor="ch04">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<i className="compliance-icon tip"></i> <div className="compliance-icon">
<i className="compliance-icon quest"></i> <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box com-txt"> <div className="check-form-box light">
<input type="checkbox" id="ch05" /> <input type="checkbox" id="ch05" />
<label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label> <label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<i className="compliance-icon check"></i> <div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>

9
src/components/ui/common/FloatBtn.tsx
View File

@ -5,9 +5,16 @@ import { usePathname } from 'next/navigation'
export default function FloatBtn() { export default function FloatBtn() {
const pathname = usePathname() const pathname = usePathname()
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
if (pathname === '/login' || pathname === '/') { if (pathname === '/login' || pathname === '/') {
return null return null
} }
return <button className="top-btn"></button> return <button className="top-btn" onClick={scrollToTop}></button>
} }

3
src/styles/base/_check-radio.scss
View File

@ -85,6 +85,9 @@
input[type="checkbox"]:disabled + label::after{ input[type="checkbox"]:disabled + label::after{
cursor: default; cursor: default;
} }
input[type="checkbox"]:disabled:checked + label::before{
background-color: #A8B6C7;
}
&.ch-bld{ &.ch-bld{
input[type="checkbox"]:checked + label{ input[type="checkbox"]:checked + label{
font-weight: 500; font-weight: 500;

106
src/styles/components/_sub.scss
View File

@ -77,36 +77,11 @@
} }
} }
} }
.sale-detail-tab-relative{ .sale-form-btn-wrap{
height: 40px; padding: 20px 20px 0 ;
margin-bottom: 10px; background-color: #fff;
} .btn-flex-wrap{
.sale-detail-tab-wrap{ margin-top: 0;
position: fixed;
top: 66px;
left: 0;
width: 100%;
height: 40px;
background-color: $white-fff;
z-index: 98000;
.sale-detail-tab-inner{
position: relative;
@include flex(0px);
align-items: center;
height: 100%;
.sale-detail-tab{
flex: 1;
height: 100%;
background-color: #fff;
border-top: 1px solid #DDDFE2;
border-bottom: 1px solid #DDDFE2;
@include defaultFont($font-s-13, $font-w-500, $font-c);
&.act{
color: $white-fff;
background-color: #5F738E;
border-color: #5F738E;
}
}
} }
} }
@ -202,6 +177,11 @@
} }
// 매물 상세 // 매물 상세
.sale-data-table-wrap{
padding: 24px;
background-color: #fff;
border-top: 1px solid #ECECEC;
}
.sale-data-table{ .sale-data-table{
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
@ -242,6 +222,63 @@
} }
} }
.sale-detail-toggle-wrap{
border-top: 1px solid #ECECEC;
}
.sale-detail-toggle-bx{
border-bottom: 1px solid #ECECEC;
}
.sale-detail-toggle-head{
@include flex(5px);
padding: 14px 18px;
background-color: $white-fff;
cursor: pointer;
.sale-detail-toggle-name{
@include defaultFont($font-s-13, $font-w-500, $font-c);
}
.sale-detail-toggle-btn-wrap{
margin-left: auto;
.sale-detail-toggle-btn{
display: block;
width: 22px;
height: 22px;
background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
background-size: cover
}
}
}
.sale-detail-toggle-cont{
display: none;
.sale-frame{
padding: 24px 20px;
&:first-child{
padding-top: 24px;
}
&:last-child{
padding-bottom: 24px;
}
}
}
.sale-detail-toggle-bx{
&.act{
.sale-detail-toggle-head{
background-color: #5F738E;
.sale-detail-toggle-name{
color: #fff
}
.sale-detail-toggle-btn-wrap{
.sale-detail-toggle-btn{
background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
}
}
}
.sale-detail-toggle-cont{
display: block;
}
}
}
// 매물 기본정보 // 매물 기본정보
.form-flex{ .form-flex{
@include flex(5px); @include flex(5px);
@ -614,7 +651,14 @@
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
} }
.float-btn-wrap{
position: sticky;
bottom: 10px;
left: 0;
width: 100%;
background-color: #fff;
z-index: 9;
}
@media screen and (max-width: 360px){ @media screen and (max-width: 360px){
.btn-flex-wrap{ .btn-flex-wrap{
flex-direction: column; flex-direction: column;

2
src/styles/layout/_layout.scss
View File

@ -6,7 +6,7 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; // overflow-x: hidden;
.container{ .container{
flex: 1 1 auto; flex: 1 1 auto;
} }