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

지붕재 적합성 아이콘 Image 컴포넌트 변환

Browse Source
This commit is contained in:
김창수 2025-05-15 13:13:49 +09:00
parent f4ca9879d0
commit f5a0357370
5 changed files with 80 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/roofcompliance/page.tsx
View File

@ -24,7 +24,7 @@ export default function RoofCompliancePage(){
<button className="top-btn"></button> <button className="top-btn"></button>
</div> </div>
{/* 지붕제 적합성 상세 팝업 */} {/* 지붕제 적합성 상세 팝업 */}
{/* <RoofComplianceDetailPop/> */} <RoofComplianceDetailPop/>
</> </>
) )
} }

21
src/components/roofcompliance/RoofCompliance.tsx
View File

@ -2,6 +2,7 @@
import { useState } from "react" import { useState } from "react"
import RoofComplianceNoSearch from "./nosearch/RoofComplianceNoSearch"; import RoofComplianceNoSearch from "./nosearch/RoofComplianceNoSearch";
import RoofComplianceCheckData from "./RoofComplianceCheckData"; import RoofComplianceCheckData from "./RoofComplianceCheckData";
import Image from "next/image";
export default function RoofCompliance(){ export default function RoofCompliance(){
const [reference, setReference] = useState(false); const [reference, setReference] = useState(false);
@ -42,22 +43,34 @@ export default function RoofCompliance(){
<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>

30
src/components/roofcompliance/RoofComplianceCheckData.tsx
View File

@ -1,3 +1,5 @@
import Image from "next/image";
export default function RoofComplianceCheckData(){ export default function RoofComplianceCheckData(){
return( return(
<div className={`compliance-check-bx act`}> <div className={`compliance-check-bx act`}>
@ -15,10 +17,12 @@ export default function RoofComplianceCheckData(){
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box light"> <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 x"></i> <div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>
@ -29,8 +33,12 @@ export default function RoofComplianceCheckData(){
<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>
@ -38,11 +46,15 @@ export default function RoofComplianceCheckData(){
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box light"> <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 quest"></i> <div className="compliance-icon">
<i className="compliance-icon tip"></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>
@ -53,7 +65,9 @@ export default function RoofComplianceCheckData(){
<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>

50
src/components/roofcompliance/RoofComplianceDetailPop.tsx
View File

@ -1,3 +1,5 @@
import Image from "next/image";
export default function RoofComplianceDetailPop(){ export default function RoofComplianceDetailPop(){
return( return(
<div className="modal-popup"> <div className="modal-popup">
@ -41,8 +43,12 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">屋根技研 支持瓦</div> <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<i className="compliance-icon check"></i> <div className="compliance-icon">
<i className="compliance-icon tip"></i> <Image src={'/assets/images/sub/compliance_check_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>
<div className="pop-data-table-body">Ｄで設置可</div> <div className="pop-data-table-body">Ｄで設置可</div>
@ -55,8 +61,12 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">屋根技研支持金具</div> <div className="pop-data-table-head-name">屋根技研支持金具</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<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>
<div className="pop-data-table-body">設置不可</div> <div className="pop-data-table-body">設置不可</div>
@ -69,7 +79,9 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">屋根技研YGアンカー</div> <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<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>
</div> </div>
</div> </div>
<div className="pop-data-table-body">お問い合わせください</div> <div className="pop-data-table-body">お問い合わせください</div>
@ -82,7 +94,9 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div> <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<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>
<div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div> <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
@ -119,8 +133,12 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">屋根技研 支持瓦</div> <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<i className="compliance-icon check"></i> <div className="compliance-icon">
<i className="compliance-icon tip"></i> <Image src={'/assets/images/sub/compliance_check_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>
<div className="pop-data-table-body">Ｄで設置可</div> <div className="pop-data-table-body">Ｄで設置可</div>
@ -133,8 +151,12 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">屋根技研支持金具</div> <div className="pop-data-table-head-name">屋根技研支持金具</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<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>
<div className="pop-data-table-body">設置不可</div> <div className="pop-data-table-body">設置不可</div>
@ -147,7 +169,9 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">屋根技研YGアンカー</div> <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<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>
</div> </div>
</div> </div>
<div className="pop-data-table-body">お問い合わせください</div> <div className="pop-data-table-body">お問い合わせください</div>
@ -160,7 +184,9 @@ export default function RoofComplianceDetailPop(){
<div className="pop-data-table-head"> <div className="pop-data-table-head">
<div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div> <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
<div className="pop-data-table-head-icon"> <div className="pop-data-table-head-icon">
<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>
<div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div> <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>

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

@ -529,24 +529,7 @@
// 지붕재 적합성 // 지붕재 적합성
.compliance-icon{ .compliance-icon{
display: block; display: flex;
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{ .compliance-check-wrap{
padding-top: 10px; padding-top: 10px;