Merge pull request 'refactor: enhance login and survey sale pages with structured layout and footer; update popup controller for zip code management' (#11) from feature/pub-yoo into dev

Reviewed-on: #11

src/app/login/page.tsx

@@ -1,7 +1,18 @@
+import Login from '@/components/Login'
+import Footer from '@/components/ui/common/Footer'
+
 export default function page() {
   return (
     <>
-      <h1>로그인</h1>
+      <div className="wrap">
+        <div className="container">
+          <div className="login-contents">
+            <h1 className="login-logo">Hanasys 現地調査</h1>
+            <Login />
+          </div>
+        </div>
+        <Footer />
+      </div>
     </>
   )
 }

src/app/survey-sale/[id]/basic-info/page.tsx

@@ -0,0 +1,28 @@
+import BasicForm from '@/components/survey-sale/detail/BasicForm'
+import Footer from '@/components/ui/common/Footer'
+import Header from '@/components/ui/common/Header'
+
+export default function page() {
+  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 act">基本情報</button>
+                  <button className="sale-detail-tab">電気 / 屋根情報</button>
+                </div>
+              </div>
+            </div>
+            <BasicForm />
+          </div>
+        </div>
+        <Footer />
+        <button className="top-btn"></button>
+      </div>
+    </>
+  )
+}

src/app/survey-sale/[id]/page.tsx

@@ -0,0 +1,30 @@
+import DataTable from '@/components/survey-sale/detail/DataTable'
+import DetailForm from '@/components/survey-sale/detail/DetailForm'
+import Footer from '@/components/ui/common/Footer'
+import Header from '@/components/ui/common/Header'
+
+export default function page() {
+  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 act">基本情報</button>
+                  <button className="sale-detail-tab">電気 / 屋根情報</button>
+                </div>
+              </div>
+            </div>
+            <DataTable />
+            <DetailForm />
+          </div>
+        </div>
+        <Footer />
+        <button className="top-btn"></button>
+      </div>
+    </>
+  )
+}

src/app/survey-sale/[id]/roof-info/page.tsx

@@ -0,0 +1,28 @@
+import RoofInfoForm from '@/components/survey-sale/detail/RoofInfoForm'
+import Footer from '@/components/ui/common/Footer'
+import Header from '@/components/ui/common/Header'
+
+export default function page() {
+  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>
+            <RoofInfoForm />
+          </div>
+        </div>
+        <Footer />
+        <button className="top-btn"></button>
+      </div>
+    </>
+  )
+}

src/app/survey-sale/page.tsx

@@ -1,7 +1,22 @@
+import ListTable from '@/components/survey-sale/list/ListTable'
+import SearchForm from '@/components/survey-sale/list/SearchForm'
+import Footer from '@/components/ui/common/Footer'
+import Header from '@/components/ui/common/Header'
+
 export default function page() {
   return (
     <>
-      <h1>조사 매물</h1>
+      <div className="wrap">
+        <Header name={'調査物件一覧'} backBtn={true} />
+        <div className="container">
+          <div className="sale-contents">
+            <SearchForm />
+            <ListTable />
+          </div>
+        </div>
+        <Footer />
+        <button className="top-btn"></button>
+      </div>
     </>
   )
 }

src/components/Login.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Login() {
+  const [pwShow, setPwShow] = useState(false) //비밀번호 보이기 숨기기
+
+  return (
+    <>
+      <div className="login-form-wrap">
+        <div className="login-form mb15">
+          <div className="login-input id">
+            <input type="text" className="login-frame" placeholder="Input Frame ID" />
+            <button className="login-icon">
+              <i className="del-icon"></i>
+            </button>
+          </div>
+        </div>
+        <div className="login-form">
+          <div className="login-input pw">
+            <input type={`${pwShow ? 'text' : 'password'}`} className="login-frame" placeholder="Input Frame PW" />
+            <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
+              <i className="show-icon"></i>
+            </button>
+          </div>
+        </div>
+        <div className="login-check-warp">
+          <div className="check-form-box">
+            <input type="checkbox" id="ch01" />
+            <label htmlFor="ch01">ID Save</label>
+          </div>
+          <div className="toggle-form">
+            <label className="toggle-btn">
+              <input type="checkbox" />
+              <span className="slider"></span>
+            </label>
+            <div className="toggle-name">Q.PARTNERS</div>
+          </div>
+        </div>
+        <div className="login-btn-wrap">
+          <button className="btn-frame icon login">
+            お問い合わせ <i className="btn-arr"></i>
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/popup/MemberInfomationPopup.tsx

@@ -1,4 +1,10 @@
+'use client'
+
+import { usePopupController } from '@/store/popupController'
+
 export default function MemberInfomationPopup() {
+  const popupController = usePopupController()
+
   return (
     <div className="modal-popup">
       <div className="modal-dialog">
@@ -11,7 +17,7 @@ export default function MemberInfomationPopup() {
                 </div>
                 <div className="modal-name">会員情報</div>
               </div>
-              <button className="modal-close"></button>
+              <button className="modal-close" onClick={() => popupController.setMemberInfomationPopup({ memberInfomationPopup: false })}></button>
             </div>
           </div>
           <div className="modal-body">

src/components/popup/ZipCodePopup.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { usePopupController } from '@/store/popupController'
+import { useState } from 'react'
+
+export default function ZipCodePopup() {
+  const [searchValue, setSearchValue] = useState('') //search 데이터 유무
+
+  //search 데이터 value 추가
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value)
+  }
+
+  const popupController = usePopupController()
+
+  return (
+    <>
+      <div className="modal-popup">
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <div className="modal-header-inner">
+                <div className="modal-name-wrap">
+                  <div className="modal-img">
+                    <img src="/assets/images/layout/modal_header_icon02.svg" alt="" />
+                  </div>
+                  <div className="modal-name">住所検索</div>
+                </div>
+                <button className="modal-close" onClick={() => popupController.setZipCodePopup({ zipCodePopup: false })}></button>
+              </div>
+            </div>
+            <div className="modal-body">
+              <div className="zip-code-search-wrap">
+                <div className="zip-code-search-input">
+                  <div className="search-input">
+                    <input type="text" className="search-frame" value={searchValue} onChange={handleChange} placeholder="Search" />
+                    {/*input에 데이터 있으면 삭제버튼 보임 */}
+                    {searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
+                    <button className="search-icon"></button>
+                  </div>
+                </div>
+                <div className="zip-code-table-wrap">
+                  <div className="zip-code-table-tit">名前</div>
+                  <table className="zip-code-table">
+                    <thead>
+                      <tr>
+                        <th>都道府県</th>
+                        <th>市区町村</th>
+                        <th>市区町村以下</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>東京都</td>
+                        <td>浜松</td>
+                        <td>浜松町</td>
+                      </tr>
+                      <tr>
+                        <td>東京都</td>
+                        <td>浜松</td>
+                        <td>浜松町</td>
+                      </tr>
+                      <tr>
+                        <td>東京都</td>
+                        <td>浜松</td>
+                        <td>浜松町</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <div className="btn-flex-wrap">
+                    <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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/survey-sale/detail/BasicForm.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+export default function BasicForm() {
+  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>
+
+      <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/survey-sale/detail/DataTable.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+export default function DataTable() {
+  return (
+    <>
+      <div className="sale-frame">
+        <table className="sale-data-table">
+          <colgroup>
+            <col style={{ width: '80px' }} />
+            <col />
+          </colgroup>
+          <tbody>
+            <tr>
+              <th>登録番号</th>
+              <td>0000000020</td>
+            </tr>
+            <tr>
+              <th>登録日</th>
+              <td>2025.04.11</td>
+            </tr>
+            <tr>
+              <th>更新日時</th>
+              <td>2025.04.11 15:06:29</td>
+            </tr>
+            <tr>
+              <th>提出可否</th>
+              <td>2025.04.12 10:00:00 (INTERPLUG –販売店)</td>
+            </tr>
+            <tr>
+              <th>ダウンロード</th>
+              <td>
+                <button className="data-down">
+                  HWJ現地調査票確認<i className="down-icon"></i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </>
+  )
+}

src/components/survey-sale/detail/DetailForm.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { usePopupController } from '@/store/popupController'
+
+export default function DetailForm() {
+  const popupController = usePopupController()
+
+  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={'HG'} />
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">販売店</div>
+            <input type="text" className="input-frame" disabled defaultValue={'HWJ(T01)'} />
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">施工店</div>
+            <input type="text" className="input-frame" disabled defaultValue={'施工点名表示'} />
+          </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" onClick={() => popupController.setMemberInfomationPopup({ memberInfomationPopup: true })}>
+              修正<i className="btn-arr"></i>
+            </button>
+          </div>
+          <div className="btn-bx">
+            <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup({ zipCodePopup: true })}>
+              削除<i className="btn-arr"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/survey-sale/detail/RoofInfoForm.tsx

@@ -0,0 +1,361 @@
+'use client'
+
+export default function RoofInfoForm() {
+  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'} />
+            </div>
+            <div className="data-input">
+              <select className="select-form" name="" id="">
+                <option value="">kVA</option>
+                <option value="">kVA</option>
+                <option value="">kVA</option>
+                <option value="">kVA</option>
+                <option value="">kVA</option>
+              </select>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">電気小売会社</div>
+            <input type="text" className="input-frame" defaultValue={'HWJ Electric'} />
+          </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" />
+                <label htmlFor="ch01">エコキュート</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch02" />
+                <label htmlFor="ch02">エネパーム</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch03" />
+                <label htmlFor="ch03">蓄電池システム</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch04" />
+                <label htmlFor="ch04">太陽光発電</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch05" />
+                <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 red-f">設置希望システム</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">
+              <input type="text" className="input-frame" defaultValue={''} disabled />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <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 red-f">建築研修</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 flex">
+              <input type="text" className="input-frame" defaultValue={''} 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" />
+                <label htmlFor="ch01">スレート</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch02" />
+                <label htmlFor="ch02">アスファルトシングル</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch03" />
+                <label htmlFor="ch03">瓦</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch04" />
+                <label htmlFor="ch04">金属屋根</label>
+              </div>
+              <div className="check-form-box">
+                <input type="checkbox" id="ch05" />
+                <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">
+              <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">
+              <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'} />
+              <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" />
+              <label htmlFor="ra01">木製</label>
+            </div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio01" id="ra02" />
+              <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" />
+                <label htmlFor="ra03">木製</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio02" id="ra04" />
+                <label htmlFor="ra04">強制</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio02" id="ra05" />
+                <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 red-f">垂木サイズ</div>
+            <div className="data-input mb5">
+              <select className="select-form" name="" id="">
+                <option value="">幅35mm以上×高さ48mm以上</option>
+                <option value="">幅35mm以上×高さ48mm以上</option>
+                <option value="">幅35mm以上×高さ48mm以上</option>
+                <option value="">幅35mm以上×高さ48mm以上</option>
+                <option value="">幅35mm以上×高さ48mm以上</option>
+              </select>
+            </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 red-f">垂木サイズ</div>
+            <div className="data-input mb5">
+              <select className="select-form" name="" id="">
+                <option value="">455mm以下</option>
+                <option value="">455mm以下</option>
+                <option value="">455mm以下</option>
+                <option value="">455mm以下</option>
+                <option value="">455mm以下</option>
+              </select>
+            </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 red-f">垂木の方向</div>
+            <div className="data-check-wrap mb0">
+              <div className="radio-form-box">
+                <input type="radio" name="radio03" id="ra06" />
+                <label htmlFor="ra06">垂直垂木</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio03" id="ra07" />
+                <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">
+              <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">
+              <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'} />
+              <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" />
+                <label htmlFor="ra08">あり</label>
+              </div>
+              <div className="radio-form-box">
+                <input type="radio" name="radio04" id="ra09" />
+                <label htmlFor="ra09">なし</label>
+              </div>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit red-f">住宅構造</div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio05" id="ra10" />
+              <label htmlFor="ra10">アスファルト屋根940（22kg以上）</label>
+            </div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio05" id="ra11" />
+              <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 red-f">断熱材の有無</div>
+            <div className="radio-form-box mb10">
+              <input type="radio" name="radio06" id="ra12" />
+              <label htmlFor="ra12">あり</label>
+            </div>
+            <div className="data-input mb10">
+              <input type="text" className="input-frame" defaultValue={''} />
+            </div>
+            <div className="radio-form-box">
+              <input type="radio" name="radio06" id="ra13" />
+              <label htmlFor="ra13">なし</label>
+            </div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit red-f">路地板の種類</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">
+              <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">
+              <input type="text" className="input-frame" defaultValue={'高島'} />
+            </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/components/survey-sale/list/ListTable.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+export default function ListTable() {
+  return (
+    <>
+      <div className="sale-frame">
+        <ul className="sale-list-wrap">
+          {Array.from({ length: 4 }).map((_, idx) => (
+            <li className="sale-list-item" key={idx}>
+              <div className="sale-item-bx">
+                <div className="sale-item-date-bx">
+                  <div className="sale-item-num">0000000021</div>
+                  <div className="sale-item-date">2025.04.22</div>
+                </div>
+                <div className="sale-item-tit">Hanwha Building</div>
+                <div className="sale-item-customer">Gil dong</div>
+                <div className="sale-item-update-bx">
+                  <div className="sale-item-name">Hong Gildong</div>
+                  <div className="sale-item-update">2025.04.22 10:00:21</div>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <div className="sale-edit-btn">
+          <button className="btn-frame n-blue icon">
+            もっと見る<i className="btn-edit"></i>
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/survey-sale/list/SearchForm.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+export default function SearchForm() {
+  return (
+    <div className="sale-frame">
+      <div className="sale-form-bx">
+        <button className="btn-frame n-blue icon">
+          新規売買登録<i className="btn-arr"></i>
+        </button>
+      </div>
+      <div className="sale-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 className="sale-form-bx">
+        <div className="search-input">
+          <input type="text" className="search-frame" placeholder="タイトルを入力してください. (2文字以上)" />
+          <button className="search-icon"></button>
+        </div>
+      </div>
+      <div className="sale-form-bx">
+        <div className="check-form-box">
+          <input type="checkbox" id="ch01" />
+          <label htmlFor="ch01">私が書いた物件</label>
+        </div>
+      </div>
+      <div className="sale-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>
+  )
+}

src/components/ui/PopupController.tsx

@@ -2,9 +2,15 @@
 
 import { usePopupController } from '@/store/popupController'
 import MemberInfomationPopup from '../popup/MemberInfomationPopup'
+import ZipCodePopup from '../popup/ZipCodePopup'
 
 export default function PopupController() {
   const popupController = usePopupController()
 
-  return <>{popupController.memberInfomationPopup && <MemberInfomationPopup />}</>
+  return (
+    <>
+      {popupController.memberInfomationPopup && <MemberInfomationPopup />}
+      {popupController.zipCodePopup && <ZipCodePopup />}
+    </>
+  )
 }

src/store/popupController.ts

@@ -1,19 +1,33 @@
 import { create } from 'zustand'
 
+type MemberInfomationPopupState = {
+  memberInfomationPopup: boolean
+}
+
+type ZipCodePopupState = {
+  zipCodePopup: boolean
+}
+
 type PoupControllerState = {
   memberInfomationPopup: boolean
-  setMemberInfomationPopup: (MemberInfomationPopupState: boolean) => void
+  zipCodePopup: boolean
+  setMemberInfomationPopup: (MemberInfomationPopupState: MemberInfomationPopupState) => void
+  setZipCodePopup: (ZipCodePopupState: ZipCodePopupState) => void
 }
 
 type InitialState = {
   memberInfomationPopup: boolean
+  zipCodePopup: boolean
 }
 
 const initialState: InitialState = {
   memberInfomationPopup: false,
+  zipCodePopup: false,
 }
 
 export const usePopupController = create<PoupControllerState>((set) => ({
   ...initialState,
-  setMemberInfomationPopup: (memberInfomationPopupState: boolean) => set((state) => ({ ...state, memberInfomationPopupState })),
+  setMemberInfomationPopup: ({ memberInfomationPopup }) => set((state) => ({ ...state, memberInfomationPopup })),
+  setZipCodePopup: ({ zipCodePopup }) => set((state) => ({ ...state, zipCodePopup })),
+  reset: () => set(initialState),
 }))