메물 상세 페이지 전체 수정 및 매물 신규 등록 페이지 추가

public/assets/images/sub/sale_toggle_btn.svg

@@ -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>

public/assets/images/sub/sale_toggle_btn_white.svg

@@ -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>

src/app/sale/saledefault/page.tsx

@@ -1,33 +0,0 @@
-import Footer from "@/components/layouts/Footer";
-import Header from "@/components/layouts/Header";
-import SaleDefaultForm from "@/components/sale/saledefault/SaleDefaultForm";
-import SaleDefaultForm02 from "@/components/sale/saledefault/SaleDefaultForm02";
-import SaleZipCodePop from "@/components/sale/saledefault/SaleZipCodePop";
-
-export default function SaleDefaultPage(){
-  return(
-    <>
-      <div className="wrap">
-        <Header name={"調査物件新規登録"} backBtn={true}/>
-        <div className="container">
-          <div className="sale-contents">
-            <div className="sale-detail-tab-relative">
-              <div className="sale-detail-tab-wrap">
-                <div className="sale-detail-tab-inner">
-                  <button className="sale-detail-tab">基本情報</button>
-                  <button className="sale-detail-tab act">電気 / 屋根情報</button>
-                </div>
-              </div>
-            </div>
-            <SaleDefaultForm/>
-            <SaleDefaultForm02/>
-          </div>
-        </div>
-        <Footer/>
-        <button className="top-btn"></button>
-      </div>
-      {/* 우편번호 팝업 */}
-      {/* <SaleZipCodePop/> */}
-    </>
-  )
-}

src/app/sale/saledetail/page.tsx

@@ -1,8 +1,7 @@
 import Footer from "@/components/layouts/Footer";
 import Header from "@/components/layouts/Header";
+import SaleDetailContents from "@/components/sale/saledetail/SaleDetailContents";
 import SaleDetailData from "@/components/sale/saledetail/SaleDetailData";
-import SaleDetailForm from "@/components/sale/saledetail/SaleDetailForm";
-import SaleDetailForm02 from "@/components/sale/saledetail/SaleDetailForm02";
 
 export default function SaleDetailPage(){
   return(
@@ -10,17 +9,8 @@ export default function SaleDetailPage(){
       <Header name={"調査物件一覧"} backBtn={true}/>
       <div className="container">
         <div className="sale-contents">
-          <div className="sale-detail-tab-relative">
-            <div className="sale-detail-tab-wrap">
-              <div className="sale-detail-tab-inner">
-                <button className="sale-detail-tab act">基本情報</button>
-                <button className="sale-detail-tab ">電気 / 屋根情報</button>
-              </div>
-            </div>
-          </div>
           <SaleDetailData/>
-          <SaleDetailForm/>
+          <SaleDetailContents/>
-          <SaleDetailForm02/>
         </div>
       </div>
       <Footer/>

src/app/sale/saleedit/page.tsx

@@ -0,0 +1,23 @@
+import Footer from "@/components/layouts/Footer";
+import Header from "@/components/layouts/Header";
+import SaleZipCodePop from "@/components/sale/saleedit/pop/SaleZipCodePop";
+import SaleEidtContents from "@/components/sale/saleedit/SaleEditContents";
+
+export default function SaleEditPage() {
+  return(
+    <>
+      <div className="wrap">
+        <Header name={"調査売買新規登録"} backBtn={true}/>
+        <div className="container">
+          <div className="sale-contents">
+            <SaleEidtContents/>
+          </div>
+        </div>
+        <Footer/>
+        <button className="top-btn"></button>
+      </div>
+      {/* 주소 검색 팝업 */}
+      {/* <SaleZipCodePop/> */}
+    </>
+  )
+}

src/app/sale/saleroof/page.tsx

@@ -1,28 +0,0 @@
-import Footer from "@/components/layouts/Footer";
-import Header from "@/components/layouts/Header";
-import SaleRoofForm from "@/components/sale/saleroof/SaleRoofForm";
-import SaleRoofForm02 from "@/components/sale/saleroof/SaleRoofForm02";
-
-export default function SaleRoofPage() {
-  return(
-    <div className="wrap">
-      <Header name={"調査物件新規登録"} backBtn={true}/>
-      <div className="container">
-        <div className="sale-contents">
-          <div className="sale-detail-tab-relative">
-            <div className="sale-detail-tab-wrap">
-              <div className="sale-detail-tab-inner">
-                <button className="sale-detail-tab">基本情報</button>
-                <button className="sale-detail-tab act">電気 / 屋根情報</button>
-              </div>
-            </div>
-          </div>
-          <SaleRoofForm/>
-          <SaleRoofForm02/>
-        </div>
-      </div>
-      <Footer/>
-      <button className="top-btn"></button>
-    </div>
-  )
-}

src/components/PublishList/PublishList.tsx

@@ -86,7 +86,7 @@ export default function PublishList (){
                     <td className='c red'>2025/04/29</td>
                   </tr>
                   <tr>
-                    <td rowSpan={4}>매물</td>
+                    <td rowSpan={3}>매물</td>
                     <td>매물 목록</td>
                     <td>
                       <Link href={'sale/salelist'}>SaleListPage.tsx</Link>
@@ -104,33 +104,33 @@ export default function PublishList (){
                     </td>
                     <td className='c'>
                     </td>
-                    <td className='c'>
+                    <td className='c red'>
+                      <ul>
+                        <li>2025/05/15</li>
+                        <li>* 상세 페이지 전체 재수정</li>
+                      </ul>
                     </td>
                     <td className='c red'>2025/04/29</td>
                   </tr>
                   <tr>
-                    <td>매물 기본정보</td>
+                    <td>매물 신규등록</td>
                     <td>
-                      <Link href={'sale/saledefault'}>SaleDefaultPage.tsx</Link>
+                      <Link href={'sale/saleedit'}>SaleEditPage.tsx</Link>
                     </td>
                     <td className='c'>
-                      우편번호 찾기 팝업 포함
+                      <ul>
+                        <li>주소 검색 팝업 포함</li>
+                      </ul>
                     </td>
-                    <td className='c'>
+                    <td className='c red'>
+                      <ul>
+                        <li>2025/05/15</li>
+                        <li>* 페이지 추가</li>
+                      </ul>
                     </td>
-                    <td className='c red'>2025/04/29</td>
+                    <td className='c red'>2025/05/15</td>
-                  </tr>
-                  <tr>
-                    <td>매물 전기∙지붕정보</td>
-                    <td>
-                      <Link href={'sale/saleroof'}>SaleRoofPage.tsx</Link>
-                    </td>
-                    <td className='c'>
-                    </td>
-                    <td className='c'>
-                    </td>
-                    <td className='c red'>2025/04/29</td>
                   </tr>
+                  
                   <tr>
                     <td rowSpan={4}>1:1 문의</td>
                     <td>1:1 문의 목록</td>

src/components/sale/saledetail/SaleDetailContents.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from "react";
+import SaleDefaultDetailForm from "./saledefaultdetail/SaleDefaultDetailForm";
+import SaleDefaultDetailForm02 from "./saledefaultdetail/SaleDefaultDetailForm02";
+import SaleRoofDetailForm from "./saleroofdetail/SaleRoofDetailForm";
+import SaleRoofDetailForm02 from "./saleroofdetail/SaleRoofDetailForm02";
+
+export default function SaleDetailContents(){
+  const [defaultValue, setDefaultValue] = useState(false); //기본정보 tab
+  const [roofValue, setRoofValue] = useState(false); //전기/지붕 정보 tab
+
+  return(
+    <div className="sale-detail-toggle-wrap">
+      <div className={`sale-detail-toggle-bx ${defaultValue ? 'act' : ''}`}>
+        <div className="sale-detail-toggle-head" onClick={() => setDefaultValue(!defaultValue)}>
+          <div className="sale-detail-toggle-name">基本情報</div>
+          <div className="sale-detail-toggle-btn-wrap">
+            <button className="sale-detail-toggle-btn" ></button>
+          </div>
+        </div>
+        <div className="sale-detail-toggle-cont">
+          <SaleDefaultDetailForm/>
+          <SaleDefaultDetailForm02/>
+        </div>
+      </div>
+      <div className={`sale-detail-toggle-bx ${roofValue ? 'act' : ''}`}>
+        <div className="sale-detail-toggle-head" onClick={() => setRoofValue(!roofValue)}>
+          <div className="sale-detail-toggle-name">電気 / 屋根情報</div>
+          <div className="sale-detail-toggle-btn-wrap">
+            <button className="sale-detail-toggle-btn" ></button>
+          </div>
+        </div>
+        <div className="sale-detail-toggle-cont">
+          <SaleRoofDetailForm/>
+          <SaleRoofDetailForm02/>
+        </div>
+      </div>
+      <div className="sale-form-btn-wrap">
+        <div className="btn-flex-wrap">
+          <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">修正<i className="btn-arr"></i></button>
+          </div>
+          <div className="btn-bx">
+            <button className="btn-frame n-blue icon">削除<i className="btn-arr"></i></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sale/saledetail/SaleDetailData.tsx

@@ -1,6 +1,6 @@
 export default function SaleDetailData(){
   return(
-    <div className="sale-frame">
+    <div className="sale-data-table-wrap">
       <table className="sale-data-table">
         <colgroup>
         <col style={{width: '80px'}}/>

src/components/sale/saledetail/saledefaultdetail/SaleDefaultDetailForm.tsx

@@ -1,4 +1,4 @@
-export default function SaleDetailForm(){
+export default function SaleDefaultDetailForm(){
   return(
       <div className="sale-frame">
         <div className="data-form-wrap">

src/components/sale/saledetail/saledefaultdetail/SaleDefaultDetailForm02.tsx

@@ -1,4 +1,4 @@
-export default function SaleDetailForm02(){
+export default function SaleDefaultDetailForm02(){
   return(
       <div className="sale-frame">
         <div className="data-form-wrap">
@@ -14,19 +14,19 @@ export default function SaleDetailForm02(){
             <div className="data-input-form-tit">顧客名</div>
             <input type="text" className="input-frame" disabled  defaultValue={'Hong gi'}/>
           </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">郵便番号/都道府県</div>
+            <div className="form-flex">
+              <div className="form-bx">
+                <input type="text" className="input-frame" defaultValue={'1050013'} disabled/>
               </div>
-        <div className="btn-flex-wrap">
+              <div className="form-bx">
-          <div className="btn-bx">
+                <input type="text" className="input-frame" defaultValue={'東京都'} disabled/>
-            <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">
+            <div className="data-input mt5">
-            <button className="btn-frame n-blue icon">修正<i className="btn-arr"></i></button>
+              <input type="text" className="input-frame" defaultValue={'浜松浜松町'} disabled/>
             </div>
-          <div className="btn-bx">
-            <button className="btn-frame n-blue icon">削除<i className="btn-arr"></i></button>
           </div>
         </div>
       </div>

src/components/sale/saledetail/saleroofdetail/SaleRoofDetailForm.tsx

@@ -0,0 +1,59 @@
+export default function SaleRoofDetailForm(){
+  return(
+    <div className="sale-frame">
+      <div className="sale-roof-title">電気関係</div>
+      <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">電気契約容量</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'10'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={'A'} disabled/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">電気小売会社</div>
+              <input type="text" className="input-frame" defaultValue={'Interplug'} disabled/>
+            </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">電気袋設備<span>※複数選択可能</span></div>
+            <div className="data-check-wrap">
+              <div className="check-form-box">
+                <input type="checkbox" id="ch01" defaultChecked disabled/>
+                <label htmlFor="ch01">エコキュート</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch02" disabled/>
+                <label htmlFor="ch02">エネパーム</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch03" defaultChecked disabled/>
+                <label htmlFor="ch03">蓄電池システム</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch04" disabled/>
+                <label htmlFor="ch04">太陽光発電</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch05" disabled/>
+                <label htmlFor="ch05">その他 (直接入力)</label>
+              </div>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" disabled  defaultValue={''}/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">設置希望システム</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'太陽光発電'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={''} disabled/>
+            </div>
+          </div>
+        </div>
+    </div>
+  )
+}

src/components/sale/saledetail/saleroofdetail/SaleRoofDetailForm02.tsx

@@ -0,0 +1,212 @@
+export default function SaleRoofDetailForm02(){
+  return(
+    <div className="sale-frame">
+      <div className="sale-roof-title">屋根関係</div>
+        <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">建築研修</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'既存の建築物'} disabled/>
+            </div>
+            <div className="data-input flex">
+              <input type="text" className="input-frame" defaultValue={'10'} disabled/>
+              <span>年</span>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">屋根材<span>※最大2個まで選択可能</span></div>
+            <div className="data-check-wrap">
+              <div className="check-form-box">
+                <input type="checkbox" id="ch01" disabled defaultChecked/>
+                <label htmlFor="ch01">スレート</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch02" disabled/>
+                <label htmlFor="ch02">アスファルトシングル</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch03" disabled/>
+                <label htmlFor="ch03">瓦</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch04" disabled defaultChecked/>
+                <label htmlFor="ch04">金属屋根</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch05" disabled/>
+                <label htmlFor="ch05">その他 (直接入力)</label>
+              </div>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" disabled  defaultValue={''}/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">建築研修</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'太陽光発電'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={''} disabled/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">屋根の斜面</div>
+            <div className="data-input flex">
+              <input type="text" className="input-frame" defaultValue={'4'} disabled/>
+              <span>寸</span>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">住宅構造</div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio01" id="ra01" defaultChecked disabled/>
+              <label htmlFor="ra01">木製</label>
+            </div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio01" id="ra02" disabled/>
+              <label htmlFor="ra02">その他 (直接入力)</label>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" disabled  defaultValue={''}/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木材質</div>
+            <div className="data-check-wrap">
+              <div className="radio-form-box">
+                <input type="radio" name="radio02" id="ra03" defaultChecked disabled/>
+                <label htmlFor="ra03">木製</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio02" id="ra04" disabled/>
+                <label htmlFor="ra04">強制</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio02" id="ra05" disabled/>
+                <label htmlFor="ra05">その他 (直接入力)</label>
+              </div>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" disabled  defaultValue={''}/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木サイズ</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'幅35mm以上×高さ48mm以上'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={''} disabled/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木サイズ</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'455mm以下'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={''} disabled/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">垂木の方向</div>
+            <div className="data-check-wrap mb0">
+              <div className="radio-form-box">
+                <input type="radio" name="radio03" id="ra06" defaultChecked disabled/>
+                <label htmlFor="ra06">垂直垂木</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio03" id="ra07" disabled/>
+                <label htmlFor="ra07">水平垂木</label>
+              </div>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">路地板の種類</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'構造用合板'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={''} disabled/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span></div>
+            <div className="data-input flex">
+              <input type="text" className="input-frame" defaultValue={'150'} disabled/>
+              <span>mm</span>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit ">垂木の方向</div>
+            <div className="data-check-wrap mb0">
+              <div className="radio-form-box">
+                <input type="radio" name="radio04" id="ra08" defaultChecked disabled/>
+                <label htmlFor="ra08">あり</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio04" id="ra09" disabled/>
+                <label htmlFor="ra09">なし</label>
+              </div>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">住宅構造</div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio05" id="ra10" defaultChecked disabled/>
+              <label htmlFor="ra10">アスファルト屋根940（22kg以上）</label>
+            </div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio05" id="ra11" disabled/>
+              <label htmlFor="ra11">その他 (直接入力)</label>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" disabled  defaultValue={''}/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">断熱材の有無</div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio06" id="ra12" defaultChecked disabled/>
+              <label htmlFor="ra12">あり</label>
+            </div>
+            <div className="data-input mb10">
+              <input type="text" className="input-frame" defaultValue={'断熱材4mm'} disabled/>
+            </div>
+            <div className="radio-form-box">
+              <input type="radio" name="radio06" id="ra13" disabled/>
+              <label htmlFor="ra13">なし</label>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">路地板の種類</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'材/防水材/屋根基礎/垂木'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={''} disabled/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">屋根製品名 設置可否確認</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'確認済み'} disabled/>
+            </div>
+            <div className="data-input">
+              <input type="text" className="input-frame" defaultValue={'高島'} disabled/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">メモ</div>
+            <div className="data-input mb5">
+              <input type="text" className="input-frame" defaultValue={'確認済み'} disabled/>
+            </div>
+            <div className="data-input">
+              <textarea className="textarea-form" name="" id="" defaultValue={'漏れの兆候があるため、正確な点検が必要です.'} disabled></textarea>
+            </div>
+          </div>
+        </div>
+    </div>
+  )
+}

src/components/sale/saleedit/SaleEditContents.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from "react";
+import SaleDefaultForm from "./saledefault/SaleDefaultForm";
+import SaleDefaultForm02 from "./saledefault/SaleDefaultForm02";
+import SaleRoofForm from "./saleroof/SaleRoofForm";
+import SaleRoofForm02 from "./saleroof/SaleRoofForm02";
+export default function SaleEidtContents(){
+  const [defaultValue, setDefaultValue] = useState(false); //기본정보 tab
+  const [roofValue, setRoofValue] = useState(false); //전기/지붕 정보 tab
+
+  return(
+    <div className="sale-detail-toggle-wrap">
+      <div className={`sale-detail-toggle-bx ${defaultValue ? 'act' : ''}`}>
+        <div className="sale-detail-toggle-head" onClick={() => setDefaultValue(!defaultValue)}>
+          <div className="sale-detail-toggle-name">基本情報</div>
+          <div className="sale-detail-toggle-btn-wrap">
+            <button className="sale-detail-toggle-btn" ></button>
+          </div>
+        </div>
+        <div className="sale-detail-toggle-cont">
+          <SaleDefaultForm/>
+          <SaleDefaultForm02/>
+        </div>
+      </div>
+      <div className={`sale-detail-toggle-bx ${roofValue ? 'act' : ''}`}>
+        <div className="sale-detail-toggle-head" onClick={() => setRoofValue(!roofValue)}>
+          <div className="sale-detail-toggle-name">電気 / 屋根情報</div>
+          <div className="sale-detail-toggle-btn-wrap">
+            <button className="sale-detail-toggle-btn" ></button>
+          </div>
+        </div>
+        <div className="sale-detail-toggle-cont">
+          <SaleRoofForm/>
+          <SaleRoofForm02/>
+        </div>
+      </div>
+      <div className="sale-form-btn-wrap">
+        <div className="btn-flex-wrap">
+          <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">リスト<i className="btn-arr"></i></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sale/saleedit/saledefault/SaleDefaultForm02.tsx

@@ -42,17 +42,7 @@ export default function SaleDefaultForm02(){
             <input type="text" className="input-frame" defaultValue={'浜松 浜松町'}/>
           </div>
         </div>
-        <div className="btn-flex-wrap">
+        
-          <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">リスト<i className="btn-arr"></i></button>
-          </div>
-        </div>
       </div> 
   )
 }

src/components/sale/saleedit/saleroof/SaleRoofForm02.tsx

@@ -236,36 +236,16 @@ export default function SaleRoofForm02(){
               </select>
             </div>
             <div className="data-input">
-              <input type="text" className="input-frame" defaultValue={'高島'}/>
+              <input type="text" className="input-frame" defaultValue={''} disabled/>
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">メモ</div>
-            <div className="data-input mb5">
-              <select className="select-form" name="" id="">
-                <option value="">確認済み</option>
-                <option value="">確認済み</option>
-                <option value="">確認済み</option>
-                <option value="">確認済み</option>
-                <option value="">確認済み</option>
-              </select>
-            </div>
             <div className="data-input">
               <textarea className="textarea-form" name="" id="" defaultValue={'漏れの兆候があるため、正確な点検が必要です.'} placeholder="TextArea Filed"></textarea>
             </div>
           </div>
         </div>
-        <div className="btn-flex-wrap">
-          <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">リスト<i className="btn-arr"></i></button>
-          </div>
-        </div>
     </div>
   )
 }

src/styles/base/_check-radio.scss

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

src/styles/components/_sub.scss

@@ -77,36 +77,11 @@
     }
   }
 }
-.sale-detail-tab-relative{
+.sale-form-btn-wrap{
-  height: 40px;
+  padding: 20px 20px 0 ;
-  margin-bottom: 10px;
-}
-.sale-detail-tab-wrap{
-  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;
+  .btn-flex-wrap{
-      border-bottom: 1px solid #DDDFE2;
+    margin-top: 0;
-      @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{
   width: 100%;
   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{
   @include flex(5px);