From 319cd73da0decd58894258fef419e469eb1f8e9e 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: Fri, 11 Oct 2024 16:07:06 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/canvas/CanvasEstimate.jsx      |   6 +-
 .../canvas/estimatepop/FileDownOptionPop.jsx  | 101 ++++++++++++++++++
 .../canvas/estimatepop/ProductFeaturesPop.jsx |  28 +++--
 src/styles/_contents.scss                     |   5 +-
 src/styles/_submodal.scss                     |  22 +++-
 5 files changed, 144 insertions(+), 18 deletions(-)
 create mode 100644 src/components/canvas/estimatepop/FileDownOptionPop.jsx

diff --git a/src/components/canvas/CanvasEstimate.jsx b/src/components/canvas/CanvasEstimate.jsx
index 2fd2104..8b66e4f 100644
--- a/src/components/canvas/CanvasEstimate.jsx
+++ b/src/components/canvas/CanvasEstimate.jsx
@@ -1,5 +1,6 @@
 import SingleDatePicker from "../common/datepicker/SingleDatePicker";
 import Footer from "../layout/Footer";
+import FileDownOptionPop from "./estimatepop/FileDownOptionPop";
 import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop";
 
 export default function CanvasEstimate() {
@@ -408,7 +409,10 @@ export default function CanvasEstimate() {
             <Footer/>
 
             {/* 제품 특이사항 */}
-            <ProductFeaturesPop/>
+            {/* <ProductFeaturesPop/> */}
+
+            {/* 문서 다운로드 옵션 */}
+            <FileDownOptionPop/>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/estimatepop/FileDownOptionPop.jsx b/src/components/canvas/estimatepop/FileDownOptionPop.jsx
new file mode 100644
index 0000000..bd3bc6a
--- /dev/null
+++ b/src/components/canvas/estimatepop/FileDownOptionPop.jsx
@@ -0,0 +1,101 @@
+export default function FileDownOptionPop(){
+    return(
+        <div className="modal-popup">
+            <div className="modal-dialog middle">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="title">ドキュメントダウンロードオプションの設定 </h1>
+                        <button className="modal-close">닫기</button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="modal-body-inner">
+                            <div className="explane">ダウンロードする文書のオプションを選択したら、 [文書のダウンロード]ボタンをクリックします。</div>
+                            <div className="common-table bt-able">
+                                <table>
+                                    <colgroup>
+                                        <col style={{width: '260px'}}/>
+                                        <col />
+                                    </colgroup>
+                                    <tbody>
+                                        <tr>
+                                            <th>ダウンロードファイル <span className="red">*</span></th>
+                                            <td>
+                                                <div className="form-flex-wrap">
+                                                    <div className="d-check-box light mr10">
+                                                        <input type="checkbox" id="ch16" />
+                                                        <label htmlFor="ch16">見積もりExcel</label>
+                                                    </div>
+                                                    <div className="d-check-box light mr10">
+                                                        <input type="checkbox" id="ch17" />
+                                                        <label htmlFor="ch17">定価用Excel</label>
+                                                    </div>
+                                                    <div className="d-check-box light mr10">
+                                                        <input type="checkbox" id="ch18" />
+                                                        <label htmlFor="ch18">見積もりPDF</label>
+                                                    </div>
+                                                    <div className="d-check-box light ">
+                                                        <input type="checkbox" id="ch19" />
+                                                        <label htmlFor="ch19">定価用PDF</label>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>見積提出先表示名 <span className="red">*</span></th>
+                                            <td>
+                                                <div className="form-flex-wrap">
+                                                    <div className="d-check-radio light mr10">
+                                                        <input type="radio" name="radio02" id="ra03" />
+                                                        <label htmlFor="ra03">販売店名</label>
+                                                    </div>
+                                                    <div className="d-check-radio light">
+                                                        <input type="radio" name="radio02" id="ra04" />
+                                                        <label htmlFor="ra04">案件名</label>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>架台重量表を含む <span className="red">*</span></th>
+                                            <td>
+                                                <div className="form-flex-wrap">
+                                                    <div className="d-check-radio light mr10">
+                                                        <input type="radio" name="radio03" id="ra05" />
+                                                        <label htmlFor="ra05">含む</label>
+                                                    </div>
+                                                    <div className="d-check-radio light">
+                                                        <input type="radio" name="radio03" id="ra06" />
+                                                        <label htmlFor="ra06">含まない</label>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>図面/シミュレーションファイルを含む</th>
+                                            <td>
+                                                <div className="form-flex-wrap">
+                                                    <div className="d-check-radio light mr10">
+                                                        <input type="radio" name="radio04" id="ra07" />
+                                                        <label htmlFor="ra07">付属 </label>
+                                                    </div>
+                                                    <div className="d-check-radio light">
+                                                        <input type="radio" name="radio04" id="ra08" />
+                                                        <label htmlFor="ra08">含まない</label>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div className="footer-btn-wrap">
+                            <button className="btn-origin grey mr5">閉じる</button>
+                            <button className="btn-origin navy ">文書のダウンロード</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/estimatepop/ProductFeaturesPop.jsx b/src/components/canvas/estimatepop/ProductFeaturesPop.jsx
index 62d5d24..cef20f2 100644
--- a/src/components/canvas/estimatepop/ProductFeaturesPop.jsx
+++ b/src/components/canvas/estimatepop/ProductFeaturesPop.jsx
@@ -4,26 +4,24 @@ export default function ProductFeaturesPop(){
             <div className="modal-dialog">
                 <div className="modal-content">
                     <div className="modal-header">
-                        <h1 className="title">設計依頼のインポート </h1>
+                        <h1 className="title">製品特異性 </h1>
                         <button className="modal-close">닫기</button>
                     </div>
                     <div className="modal-body">
                         <div className="modal-body-inner border">
-                            <div className="calculation-estimate">
+                            <div className="calculation-estimate usemodal">
                                 <dl>
-                                    <dt>ダイドハント (D Y 4)(DY5)</dt>
-                                    <dd>・木製垂木の場合、幅38㎜×厚さ40㎜以上、間隔455㎜以下となります。  </dd>
-                                    <dd>・本見積は概算見積です。詳細設計時、及び構造計算時に材料等の変更の可能性があります。 </dd>
-                                    <dd>・金具が取付可能と仮定して積算しております。ご注文前に必ず現調シートをご提出頂けます様、お願い致します。  </dd>
-                                    <dd>・設置基準を満たした屋根面と仮定して積算しております。屋根材固定強度等、施工マニュアルをご参照の上、ご確認ください。</dd>
-                                </dl>
-                                <dl>
-                                    <dt>ワンカチ </dt>
-                                    <dd>・風速は46ｍ/sを超える地域は設置不可となります。  </dd>
-                                    <dd>・屋根材質は鋼板製（JIS A6514規格品の内）として御見積もり作成しております。  </dd>
-                                    <dd>・屋根材板厚は0.6㎜以上として御見積もり作成しております。</dd>
-                                    <dd>ピッチ外 ・若し現場で太陽電池モジュール 固定範囲から 両端の金具 がはみ出た 場合は、</dd>
-                                    <dd>弊社システム保証対象外になりますので充分 ご注意下さい 。"</dd>
+                                    <dt>Q.SUPREME</dt>
+                                    <dd>・納期は注文書受領後、約2週間となります。 </dd>
+                                    <dd>・太陽電池モジュールは、本住宅PKG専用モデル（G9+シリーズ: 25年製品保証）となっております。 標準モデル（G9シリーズ:15年製品保証）とは異なりますのでご注意ください（JP-ACの登録も別型式となっております）     </dd>
+                                    <dd>・システム最小容量は、モジュール8枚(235Wの場合1.88kW）となります。</dd>
+                                    <dd>・本住宅PKGは、パワーコンディショナ容量9.9kW以下、パワーコンディショナ2台までを条件とします。</dd>
+                                    <dd>・ソーラーエッジ単相パワコン5.5kWは、定格出力制限証明書発行手続きを行うことで定格出力4.4kWに変更可能です。</dd>
+                                    <dd>・システム金額はモジュール容量×kW単価にて計算いたします。</dd>
+                                    <dd>・最適設計を超えた機種選定をされる場合、追加差額が発生いたします。</dd>
+                                    <dd>・システム設計、積算につきましては、一部ソーラーエッジのデザイナーをご利用いただき、お取引先様にてご対応いただく必要がございます。 </dd>
+                                    <dd>・kW単価にパワーオプティマイザ取り付け金具が含まれております。 </dd>
+                                    <dd>・パワーオプティマイザ設置のため、架台に条件がございます。</dd>
                                 </dl>
                             </div>
                         </div>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index dc02fc8..2c4e637 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -811,7 +811,10 @@
             font-size: 12px;
             font-weight: 400;
             color: #45576F;
-            margin-bottom: 5px;
+            margin-bottom: 8px;
+            &:last-child{
+                margin-bottom: 0;
+            }
         }
     }
     &::-webkit-scrollbar {
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
index 34d0e9c..452c6cb 100644
--- a/src/styles/_submodal.scss
+++ b/src/styles/_submodal.scss
@@ -73,6 +73,15 @@
     }
 }
 
+.explane{
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    margin-bottom: 20px;
+}
+.red{
+    color: #F00;
+}
 // modal-contents
 
 //  비밀번호 변경
@@ -196,4 +205,15 @@
         color: #101010;
         margin-bottom: 15px;
     }
-}
\ No newline at end of file
+}
+
+// 제품 특이사항 팝업
+.calculation-estimate{
+    &.usemodal{
+        margin-bottom: 0;
+        border: none;
+        padding: 0;
+    }
+}
+
+// 문서 다운로드 옵션