견적서 견적 특이사항 열림 닫힘 추가

public/static/images/canvas/estiment_arr.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5.5 5.5L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/canvas/page.jsx

@@ -87,7 +87,7 @@ export default function CanvasPage() {
                     {/* <Penal04/> */}
 
                     {/* 배치면 초기 설정 */}
-                    <PlacementSettingPop/>
+                    {/* <PlacementSettingPop/> */}
 
                     {/* 캔버스 기본 셋팅 */}
                     {/* {modalOption.option && <SettingModal01/>} */}

src/components/canvas/CanvasEstimate.jsx

@@ -5,8 +5,10 @@ import FileDownOptionPop from "./estimatepop/FileDownOptionPop";
 import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop";
 
 import ReactSelect from "../common/reactselect/ReactSelect";
+import { useState } from "react";
 
 export default function CanvasEstimate() {
+    const [hidden, setHidden] = useState(false);
     return(
         <div className="sub-content estimate">
             <div className="sub-content-inner">
@@ -217,7 +219,13 @@ export default function CanvasEstimate() {
                                 <h3 className="product">見積もりの具体的な</h3>
                                 <div className="product_tit">製品情報</div>
                             </div>
+                            <div className="left-unit-box">
+                                <button className="estimate-arr-btn down mr5" onClick={() => setHidden(false)}></button>
+                                <button className="estimate-arr-btn up" onClick={() => setHidden(true)}></button>
                             </div>
+                        </div>
+                        <div className={`estimate-check-wrap ${hidden ? 'hide':''}`}>
+                            <div className="estimate-check-inner">
                                 <div className="special-note-check-wrap">
                                     <div className="special-note-check-item">
                                         <div className="d-check-box light">
@@ -303,12 +311,12 @@ export default function CanvasEstimate() {
                                             <label htmlFor="ch14">HEMS</label>
                                         </div>
                                     </div>
-                            <div className="special-note-check-item">
+                                    {/* <div className="special-note-check-item">
                                         <div className="d-check-box light">
                                             <input type="checkbox" id="ch15" />
                                             <label htmlFor="ch15">概算見積概算見積</label>
                                         </div>
-                            </div>
+                                    </div> */}
                                 </div>
                                 <div className="calculation-estimate">
                                     <dl>
@@ -327,6 +335,8 @@ export default function CanvasEstimate() {
                                         <dd>弊社システム保証対象外になりますので充分 ご注意下さい 。"</dd>
                                     </dl>
                                 </div>
+                            </div>
+                        </div>
                         <div className="table-box-title-wrap">
                             <div className="title-wrap">
                                 <h3>製品情報</h3>

src/components/publishpage/PublishPage.jsx

@@ -166,6 +166,7 @@ export default function PublishPage() {
                   <ul>
                     <li>2024-11-04</li>
                     <li>*배치면 초기설정 pop 이미지 불러오기 영역 수정</li>
+                    <li>*견적서 견적 특이사항 영역 닫힘 열림 추가</li>
                   </ul>
                 </td>
                 <td className="t-center">2024-10-28</td>

src/styles/_contents.scss

@@ -828,22 +828,40 @@
     }
 }
 
+.estimate-arr-btn{
+    display: block;
+    width: 20px;
+    height: 20px;
+    background: #94A0AD url(../../public/static/images/canvas/estiment_arr.svg)no-repeat center;
+    background-size: 11px 7px;
+    border-radius: 2px;
+    &.up{
+        rotate: 180deg;
+    }
+}
+.estimate-check-wrap{
+    .estimate-check-inner{
+        display: block;
+    }
+    &.hide{
+        border-bottom: 1px solid #ECF0F4;
+        margin-bottom: 15px;
+        .estimate-check-inner{
+            display: none;
+        }
+    }
+}
+
 .special-note-check-wrap{
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    border: 1px solid #ECF0F4;
     border-radius: 3px;
     margin-bottom: 30px;
     .special-note-check-item{
         padding: 14px 10px;
-        border-right: 1px solid #ECF0F4;
+        border: 1px solid #ECF0F4;
-        border-top: 1px solid #ECF0F4;
+        margin-top: -1px;
-        &:nth-child(5n){
+        margin-right: -1px;
-            border-right: none;
-        }
-        &:nth-child(-n+5){
-            border-top: none;
-        }
         &.act{
             background-color: #F7F9FA;
         }