From 61491cd2c8d9a470fdb0656f1ca2bd336cc32930 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Thu, 8 May 2025 16:52:05 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=B6=95=EC=9E=AC=20=EC=A0=81?=
 =?UTF-8?q?=ED=95=A9=EC=84=B1=20=EC=83=81=EC=84=B8=20=ED=8C=9D=EC=97=85=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PublishList/PublishList.tsx    |   1 +
 .../RoofComplianceDetailPop.tsx               | 172 +++++++++++++++++-
 src/styles/components/_pop-contents.scss      |  77 +++++++-
 src/styles/layout/_pop-common.scss            |   1 -
 4 files changed, 243 insertions(+), 8 deletions(-)

diff --git a/src/components/PublishList/PublishList.tsx b/src/components/PublishList/PublishList.tsx
index 8e0c822..f5d2a83 100644
--- a/src/components/PublishList/PublishList.tsx
+++ b/src/components/PublishList/PublishList.tsx
@@ -195,6 +195,7 @@ export default function PublishList (){
                       <Link href={'roofcompliance'}>RoofCompliancePage.tsx</Link>
                     </td>
                     <td className='c'>
+                      지붕재 적합성 상세 팝업 포함
                     </td>
                     <td className='c'>
                     </td>
diff --git a/src/components/roofcompliance/RoofComplianceDetailPop.tsx b/src/components/roofcompliance/RoofComplianceDetailPop.tsx
index 2c8e001..e33562d 100644
--- a/src/components/roofcompliance/RoofComplianceDetailPop.tsx
+++ b/src/components/roofcompliance/RoofComplianceDetailPop.tsx
@@ -15,14 +15,174 @@ export default function RoofComplianceDetailPop(){
             </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 className="compliance-check-pop-wrap">
+              <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 className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                    <div className="check-pop-data-txt">㈱ダイトー</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根材</div>
+                    <div className="check-pop-data-txt">瓦</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">金具タイプ</div>
+                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
+                  </div>
+                  <div className="check-pop-data-table-wrap">
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon check"></i>
+                          <i className="compliance-icon tip"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ｄで設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon x"></i>
+                          <i className="compliance-icon tip"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">設置不可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon quest"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">お問い合わせください</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon check"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
-              <div className="compliance-check-pop-contents"></div>
+              <div className={`compliance-check-bx `}>
+                <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 className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                    <div className="check-pop-data-txt">㈱ダイトー</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根材</div>
+                    <div className="check-pop-data-txt">瓦</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">金具タイプ</div>
+                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
+                  </div>
+                  <div className="check-pop-data-table-wrap">
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon check"></i>
+                          <i className="compliance-icon tip"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ｄで設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon x"></i>
+                          <i className="compliance-icon tip"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">設置不可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon quest"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">お問い合わせください</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
+                        <div className="pop-data-table-head-icon">
+                          <i className="compliance-icon check"></i>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </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">1：1お問い合わせ<i className="btn-arr"></i></button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/styles/components/_pop-contents.scss b/src/styles/components/_pop-contents.scss
index 3eb796b..e154adf 100644
--- a/src/styles/components/_pop-contents.scss
+++ b/src/styles/components/_pop-contents.scss
@@ -36,8 +36,83 @@
 }
 
 // 지붕재 적합성 상세
+.compliance-check-bx{
+  &.act{
+    .compliance-check-pop-contents{
+      display: block;
+    }
+  }
+}
 .compliance-check-pop-contents{
-  padding: 14px;
+  display: none;
+  padding: 14px 14px 10px 14px;
   border-top: 1px solid #ECECEC;
   margin-top: 10px;
+}
+.check-pop-data-wrap{
+  margin-bottom: 24px;
+  .check-pop-data-tit{
+    position: relative;
+    padding-left: 10px;
+    margin-bottom: 8px;
+    @include defaultFont($font-s-13, $font-w-500, $font-c);
+    &::before{
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 4px;
+      background-color: #2E3A59;
+      border-radius: 50%;
+    }
+  }
+  .check-pop-data-txt{
+    padding-left: 10px;
+    @include defaultFont($font-s-13, $font-w-400, $font-c);
+  }
+}
+
+.check-pop-data-table{
+  border-top: 1px solid #2E3A59;
+  &:last-child{
+    .pop-data-table-footer{
+      border-bottom: 1px solid #2E3A59;
+    }
+  }
+}
+.pop-data-table-head{
+  @include flex(0px);
+  align-items: center;
+  padding: 10px;
+  border-top: 1px solid #2E3A59;
+  border-bottom: 1px solid #2E3A59;
+  .pop-data-table-head-name{
+    @include defaultFont($font-s-13, $font-w-500, $font-c);
+  }
+  .pop-data-table-head-icon{
+    margin-left: auto;
+    @include flex(0px);
+  }
+}
+.pop-data-table-body{
+  padding: 11px 10px;
+  border-bottom: 1px solid #2E3A59;
+  @include defaultFont($font-s-13, $font-w-400, $font-c);
+}
+.pop-data-table-footer{
+  @include flex(0px);
+  .pop-data-table-footer-unit{
+    flex: 1;
+    padding: 10px;
+    @include defaultFont($font-s-13, $font-w-500, $font-c);
+    border-right: 1px solid #2E3A59;
+  }
+  .pop-data-table-footer-data{
+    flex: none;
+    width: 104px;
+    padding: 10px;
+    @include defaultFont($font-s-13, $font-w-400, $font-c);
+  }
 }
\ No newline at end of file
diff --git a/src/styles/layout/_pop-common.scss b/src/styles/layout/_pop-common.scss
index 365d2b3..e90529a 100644
--- a/src/styles/layout/_pop-common.scss
+++ b/src/styles/layout/_pop-common.scss
@@ -22,7 +22,6 @@
     .modal-content{
       flex:1;
       position: relative; 
-      margin: 0 16px;
       background-clip: padding-box;
       background-color: $white-fff;
       border-radius: 16px;