우편번호 찾기 팝업 생성

public/assets/images/common/search_del_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 10.4178 4.46919 8.87103 5.34825 7.55544C6.2273 6.23985 7.47672 5.21447 8.93853 4.60897C10.4003 4.00347 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5822 20 12 20C10.9492 20.0009 9.90846 19.7946 8.93744 19.3929C7.96642 18.9912 7.08415 18.402 6.34109 17.6589C5.59804 16.9159 5.0088 16.0336 4.60709 15.0626C4.20538 14.0915 3.99908 13.0508 4 12ZM12 10.872L14.072 8.8L15.2 9.928L13.128 12L15.2 14.072L14.072 15.2L12 13.128L9.928 15.2L8.8 14.072L10.872 12L8.8 9.928L9.928 8.8L12 10.872Z" fill="#D9E1EC"/>
+</svg>

public/assets/images/layout/modal_header_icon02.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4498 1.90001H9.54985C5.51941 1.90001 3.50419 1.90001 2.2521 3.15213C1 4.40424 1 6.4195 1 10.45C1 14.4805 1 16.4958 2.2521 17.7479C3.50419 19 5.51941 19 9.54985 19C13.5803 19 15.5955 19 16.8476 17.7479C18.0997 16.4958 18.0997 14.4805 18.0997 10.45V9.55001" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M18.9996 4.15C18.9996 5.8897 17.5893 7.3 15.8497 7.3C14.11 7.3 12.6997 5.8897 12.6997 4.15C12.6997 2.4103 14.11 1 15.8497 1C17.5893 1 18.9996 2.4103 18.9996 4.15Z" stroke="white" stroke-width="1.5"/>
+<path d="M5.5 9.1H9.09994" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 13.6H12.6999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/saledefault/page.tsx

@@ -2,25 +2,30 @@ 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-wrap">
-            <div className="sale-detail-tab-inner">
-              <button className="sale-detail-tab act">基本情報</button>
-              <button className="sale-detail-tab">電気 / 屋根情報</button>
+    <>
+      <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>
-          <SaleDefaultForm/>
-          <SaleDefaultForm02/>
         </div>
+        <Footer/>
+        <button className="top-btn"></button>
       </div>
-      <Footer/>
-      <button className="top-btn"></button>
-    </div>
+      {/* 우편번호 팝업 */}
+      <SaleZipCodePop/>
+    </>
   )
 }

src/components/PublishList/PublishList.tsx

@@ -100,6 +100,7 @@ export default function PublishList (){
                       <Link href={'saledefault'}>SaleDefaultPage.tsx</Link>
                     </td>
                     <td className='c'>
+                      우편번호 찾기 팝업 포함
                     </td>
                     <td className='c'>
                     </td>

src/components/sale/saledefault/SaleZipCodePop.tsx

@@ -0,0 +1,80 @@
+'use client'
+import { useState } from "react"
+
+export default function SaleZipCodePop() {
+  const [searchValue, setSearchValue] = useState(''); //search 데이터 유무
+
+  //search 데이터 value 추가
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { 
+    setSearchValue(e.target.value);
+  };
+
+  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"></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/styles/base/_inputs.scss

@@ -106,6 +106,14 @@ input::-webkit-inner-spin-button {
     background-size: cover;
     margin-left: 5px;
   }
+  .del-icon{
+    flex: none;
+    width: 24px;
+    height: 24px;
+    background: url(/assets/images/common/search_del_icon.svg)no-repeat center;
+    background-size: cover;
+    margin-left: 5px;
+  }
 }
 .date-input{
   padding-left: 0;

src/styles/components/_pop-contents.scss

@@ -3,4 +3,34 @@
 // 회원정보 팝업
 .member-infor-form-wrap{
   margin-bottom: 20px;
+}
+
+// 우편번호 찾기 팝업
+.zip-code-search-input{
+  margin-bottom: 18px;
+}
+.zip-code-table-wrap{
+  .zip-code-table-tit{
+    @include defaultFont($font-s-13, $font-w-500, $font-c);
+    margin-bottom: 10px;
+  }
+  .zip-code-table{
+    width: 100%;
+    table-layout: fixed;
+    border-top: 2px solid #2E3A59;
+    th{
+      @include defaultFont($font-s-13, $font-w-500, $font-c);
+      padding: 10px;
+      border-bottom: 1px solid #2E3A59;
+      text-align: center;
+    }
+    td{
+      @include defaultFont($font-s-13, $font-w-400, $font-c);
+      padding: 10px;
+      border-bottom: 1px solid #ECECEC;
+    }
+  }
+  .btn-flex-wrap{
+    margin-top: 20px;
+  }
 }

src/styles/layout/_pop-common.scss

@@ -38,7 +38,7 @@
         position: relative;
         -ms-flex: 1 1 auto;
         flex: 1 1 auto;
-        padding: 32px 20px 20px;
+        padding: 32px 20px;
       }
       .modal-footer {
         display: -ms-flexbox;