매물 기본정보 페이지 생성

src/app/saledefault/page.tsx

@@ -0,0 +1,26 @@
+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";
+
+export default function SaleDefaultPage(){
+  return(
+    <div className="wrap">
+      <Header name={"調査物件新規登録"} backBtn={true}/>
+      <div className="container">
+        <div className="sale-contents">
+          <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>
+          <SaleDefaultForm/>
+          <SaleDefaultForm02/>
+        </div>
+      </div>
+      <Footer/>
+      <button className="top-btn"></button>
+    </div>
+  )
+}

src/app/saledetail/page.tsx

@@ -2,6 +2,7 @@ import Footer from "@/components/layouts/Footer";
 import Header from "@/components/layouts/Header";
 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(
@@ -17,6 +18,7 @@ export default function SaleDetailPage(){
           </div>
           <SaleDetailData/>
           <SaleDetailForm/>
+          <SaleDetailForm02/>
         </div>
       </div>
       <Footer/>

src/components/PublishList/PublishList.tsx

@@ -94,6 +94,17 @@ export default function PublishList (){
                     </td>
                     <td className='c red'>2025/04/29</td>
                   </tr>
+                  <tr>
+                    <td>매물 기본정보</td>
+                    <td>
+                      <Link href={'saledefault'}>SaleDefaultPage.tsx</Link>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c red'>2025/04/29</td>
+                  </tr>
                 </tbody>
               </table>
             </div>

src/components/sale/saledefault/SaleDefaultForm.tsx

@@ -0,0 +1,20 @@
+export default function SaleDefaultForm(){
+  return(
+      <div className="sale-frame">
+        <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">担当者名</div>
+            <input type="text" className="input-frame" defaultValue={'HG'}/>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">販売店</div>
+            <input type="text" className="input-frame" defaultValue={'HWJ(T01)'}/>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">施工店</div>
+            <input type="text" className="input-frame" defaultValue={'施工点名表示'}/>
+          </div>
+        </div>
+      </div> 
+  )
+}

src/components/sale/saledefault/SaleDefaultForm02.tsx

@@ -0,0 +1,58 @@
+export default function SaleDefaultForm02(){
+  return(
+      <div className="sale-frame">
+        <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">現地調査日</div>
+            <div className="date-input">
+              <button className="date-btn"><i className="date-icon"></i></button>
+              <input type="text" className="date-frame" defaultValue={'2025.04.16'}/>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">建物名</div>
+            <input type="text" className="input-frame" defaultValue={'ギルドン'}/>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">建物名</div>
+            <input type="text" className="input-frame" defaultValue={'HWJ Building'}/>
+          </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="form-bx">
+                <select className="select-form" name="" id="">
+                  <option value="">東京都</option>
+                  <option value="">東京都</option>
+                  <option value="">東京都</option>
+                  <option value="">東京都</option>
+                  <option value="">東京都</option>
+                </select>
+              </div>
+            </div>
+            <div className="form-btn">
+              <button className="btn-frame n-blue icon">郵便番号<i className="btn-arr"></i></button>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">市区町村名, 以後の住所</div>
+            <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/saledetail/SaleDetailForm.tsx

@@ -1,6 +1,5 @@
 export default function SaleDetailForm(){
   return(
-    <>
       <div className="sale-frame">
         <div className="data-form-wrap">
           <div className="data-input-form-bx">
@@ -17,36 +16,5 @@ export default function SaleDetailForm(){
           </div>
         </div>
       </div>
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">現地調査日</div>
-            <input type="text" className="input-frame" disabled  defaultValue={'2025/04/05'}/>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" disabled  defaultValue={'ハンファジャパンビル'}/>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">顧客名</div>
-            <input type="text" className="input-frame" disabled  defaultValue={'Hong gi'}/>
-          </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 className="btn-bx">
-            <button className="btn-frame n-blue icon">削除<i className="btn-arr"></i></button>
-          </div>
-        </div>
-      </div>
-    </>
   )
 }

src/components/sale/saledetail/SaleDetailForm02.tsx

@@ -0,0 +1,34 @@
+export default function SaleDetailForm02(){
+  return(
+      <div className="sale-frame">
+        <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">現地調査日</div>
+            <input type="text" className="input-frame" disabled  defaultValue={'2025/04/05'}/>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">建物名</div>
+            <input type="text" className="input-frame" disabled  defaultValue={'ハンファジャパンビル'}/>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">顧客名</div>
+            <input type="text" className="input-frame" disabled  defaultValue={'Hong gi'}/>
+          </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 className="btn-bx">
+            <button className="btn-frame n-blue icon">削除<i className="btn-arr"></i></button>
+          </div>
+        </div>
+      </div>
+  )
+}

src/styles/components/_sub.scss

@@ -210,3 +210,13 @@
   }
 }  
 
+// 매물 기본정보
+.form-flex{
+  @include flex(5px);
+  .form-bx{
+    flex: 1;
+  }
+}
+.form-btn{
+  margin-top: 12px;
+}