From 8adde8babc27eef84c3acb7066f3a3019b22a87e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Tue, 29 Apr 2025 15:29:14 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9A=B0=ED=8E=B8=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EC=B0=BE=EA=B8=B0=20=ED=8C=9D=EC=97=85=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/common/search_del_icon.svg | 3 + .../images/layout/modal_header_icon02.svg | 6 ++ src/app/saledefault/page.tsx | 31 ++++--- src/components/PublishList/PublishList.tsx | 1 + .../sale/saledefault/SaleZipCodePop.tsx | 80 +++++++++++++++++++ src/styles/base/_inputs.scss | 8 ++ src/styles/components/_pop-contents.scss | 30 +++++++ src/styles/layout/_pop-common.scss | 2 +- 8 files changed, 147 insertions(+), 14 deletions(-) create mode 100644 public/assets/images/common/search_del_icon.svg create mode 100644 public/assets/images/layout/modal_header_icon02.svg create mode 100644 src/components/sale/saledefault/SaleZipCodePop.tsx diff --git a/public/assets/images/common/search_del_icon.svg b/public/assets/images/common/search_del_icon.svg new file mode 100644 index 0000000..b6e044e --- /dev/null +++ b/public/assets/images/common/search_del_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/layout/modal_header_icon02.svg b/public/assets/images/layout/modal_header_icon02.svg new file mode 100644 index 0000000..2bd5c0f --- /dev/null +++ b/public/assets/images/layout/modal_header_icon02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/saledefault/page.tsx b/src/app/saledefault/page.tsx index 4afcf79..c95ab7c 100644 --- a/src/app/saledefault/page.tsx +++ b/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( -
-
-
-
-
-
- - + <> +
+
+
+
+
+
+ + +
+ +
- -
+
+
-
- -
+ {/* 우편번호 팝업 */} + + ) } \ No newline at end of file diff --git a/src/components/PublishList/PublishList.tsx b/src/components/PublishList/PublishList.tsx index d900d32..ad5bf99 100644 --- a/src/components/PublishList/PublishList.tsx +++ b/src/components/PublishList/PublishList.tsx @@ -100,6 +100,7 @@ export default function PublishList (){ SaleDefaultPage.tsx + 우편번호 찾기 팝업 포함 diff --git a/src/components/sale/saledefault/SaleZipCodePop.tsx b/src/components/sale/saledefault/SaleZipCodePop.tsx new file mode 100644 index 0000000..058636f --- /dev/null +++ b/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) => { + setSearchValue(e.target.value); + }; + + return( +
+
+
+
+
+
+
+ +
+
住所検索
+
+ +
+
+
+
+
+
+ + {/*input에 데이터 있으면 삭제버튼 보임 */} + {searchValue && } + +
+
+
+
名前
+ + + + + + + + + + + + + + + + + + + + + + + + + +
都道府県市区町村市区町村以下
東京都浜松浜松町
東京都浜松浜松町
東京都浜松浜松町
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/styles/base/_inputs.scss b/src/styles/base/_inputs.scss index 22f7ff9..c8cf32d 100644 --- a/src/styles/base/_inputs.scss +++ b/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; diff --git a/src/styles/components/_pop-contents.scss b/src/styles/components/_pop-contents.scss index 2fdf017..88180a2 100644 --- a/src/styles/components/_pop-contents.scss +++ b/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; + } } \ No newline at end of file diff --git a/src/styles/layout/_pop-common.scss b/src/styles/layout/_pop-common.scss index 5efcb2d..9fd8d22 100644 --- a/src/styles/layout/_pop-common.scss +++ b/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;