From f8c441b521b5587f14d8f33271928e0a6acea11d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Tue, 29 Apr 2025 10:51:40 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A7=A4=EB=AC=BC=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/images/common/btn_edit.svg      |   4 +
 src/app/inputcommon/page.tsx                  |   1 +
 src/app/main/page.tsx                         |   1 +
 src/app/saledetail/page.tsx                   |  16 +++
 src/app/salelist/page.tsx                     |  19 ++++
 src/components/PublishList/PublishList.tsx    |  51 ++++++---
 src/components/sale/salelist/SaleListForm.tsx |  39 +++++++
 .../sale/salelist/SaleListTable.tsx           |  27 +++++
 src/styles/base/_button.scss                  |   8 ++
 src/styles/components/_index.scss             |   3 +-
 src/styles/components/_sub.scss               | 107 ++++++++++++++++++
 11 files changed, 262 insertions(+), 14 deletions(-)
 create mode 100644 public/assets/images/common/btn_edit.svg
 create mode 100644 src/app/saledetail/page.tsx
 create mode 100644 src/app/salelist/page.tsx
 create mode 100644 src/components/sale/salelist/SaleListForm.tsx
 create mode 100644 src/components/sale/salelist/SaleListTable.tsx
 create mode 100644 src/styles/components/_sub.scss

diff --git a/public/assets/images/common/btn_edit.svg b/public/assets/images/common/btn_edit.svg
new file mode 100644
index 0000000..c2db46c
--- /dev/null
+++ b/public/assets/images/common/btn_edit.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="2" height="10" rx="1" transform="matrix(0 -1 -1 0 10 6)" fill="white"/>
+<rect x="4" width="2" height="10" rx="1" fill="white"/>
+</svg>
diff --git a/src/app/inputcommon/page.tsx b/src/app/inputcommon/page.tsx
index 8e680fc..0de8310 100644
--- a/src/app/inputcommon/page.tsx
+++ b/src/app/inputcommon/page.tsx
@@ -50,6 +50,7 @@ export default function InputCommonPage() {
           <button className="btn-frame red">Block Button</button>
           <button className="btn-frame d-blue icon">Block Icon Button<i className="btn-arr"></i></button>
           <button className="btn-frame n-blue icon">Block Icon Button<i className="btn-arr"></i></button>
+          <button className="btn-frame n-blue icon">Block Icon Button<i className="btn-edit"></i></button>
           <button className="btn-frame red icon">Block Icon Button<i className="btn-arr"></i></button>
           <button className="btn-frame l-blue icon"><i className="btn-clip"></i>Block Icon Button</button>
           <button className="btn-frame icon login">Block Big Button <i className="btn-arr"></i></button>
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index 1394195..26ce6d3 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -13,6 +13,7 @@ export default function MainPage(){
       </div>
       <Footer/>
     </div>
+    {/* 회원정보 팝업 */}
     <MemberInformationPop/>
     </>
   )
diff --git a/src/app/saledetail/page.tsx b/src/app/saledetail/page.tsx
new file mode 100644
index 0000000..c07ea1e
--- /dev/null
+++ b/src/app/saledetail/page.tsx
@@ -0,0 +1,16 @@
+import Footer from "@/components/layouts/Footer";
+import Header from "@/components/layouts/Header";
+
+export default function SaleDetailPage(){
+  return(
+    <div className="wrap">
+      <Header name={"調査物件一覧"} backBtn={true}/>
+      <div className="container">
+        <div className="sale-contents">
+
+        </div>
+      </div>
+      <Footer/>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/app/salelist/page.tsx b/src/app/salelist/page.tsx
new file mode 100644
index 0000000..1785fa6
--- /dev/null
+++ b/src/app/salelist/page.tsx
@@ -0,0 +1,19 @@
+import Footer from "@/components/layouts/Footer";
+import Header from "@/components/layouts/Header";
+import SaleListForm from "@/components/sale/salelist/SaleListForm";
+import SaleListTable from "@/components/sale/salelist/SaleListTable";
+
+export default function SaleListPage() {
+  return (
+    <div className="wrap">
+      <Header name={"調査物件一覧"} backBtn={true}/>
+      <div className="container">
+        <div className="sale-contents">
+          <SaleListForm/>
+          <SaleListTable/>
+        </div>
+      </div>
+      <Footer/>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/PublishList/PublishList.tsx b/src/components/PublishList/PublishList.tsx
index d78154f..3c616c2 100644
--- a/src/components/PublishList/PublishList.tsx
+++ b/src/components/PublishList/PublishList.tsx
@@ -49,19 +49,7 @@ export default function PublishList (){
                     <td>Login</td>
                     <td>Login Page</td>
                     <td>
-                      <Link href={'login'}>Login.tsx</Link>
-                    </td>
-                    <td></td>
-                    <td className='c'>
-                      
-                    </td>
-                    <td className='c red'></td>
-                  </tr>
-                  <tr>
-                    <td>Main</td>
-                    <td>Main Page</td>
-                    <td>
-                      <Link href={'main'}>Main.tsx</Link>
+                      <Link href={'login'}>LoginPage.tsx</Link>
                     </td>
                     <td></td>
                     <td className='c'>
@@ -69,6 +57,43 @@ export default function PublishList (){
                     </td>
                     <td className='c red'>2025/04/28</td>
                   </tr>
+                  <tr>
+                    <td>Main</td>
+                    <td>Main Page</td>
+                    <td>
+                      <Link href={'main'}>MainPage.tsx</Link>
+                    </td>
+                    <td className='c'>
+                      회원정보 팝업 포함
+                    </td>
+                    <td className='c'>
+                      
+                    </td>
+                    <td className='c red'>2025/04/29</td>
+                  </tr>
+                  <tr>
+                    <td rowSpan={3}>매물</td>
+                    <td>매물 목록</td>
+                    <td>
+                      <Link href={'salelist'}>SaleListPage.tsx</Link>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c red'>2025/04/29</td>
+                  </tr>
+                  <tr>
+                    <td>매물 상세</td>
+                    <td>
+                      <Link href={'saledetail'}>SaleDetailPage.tsx</Link>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c red'>2025/04/29</td>
+                  </tr>
                 </tbody>
               </table>
             </div>
diff --git a/src/components/sale/salelist/SaleListForm.tsx b/src/components/sale/salelist/SaleListForm.tsx
new file mode 100644
index 0000000..c79d1c4
--- /dev/null
+++ b/src/components/sale/salelist/SaleListForm.tsx
@@ -0,0 +1,39 @@
+export default function SaleListForm(){
+  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>
+  )
+}
\ No newline at end of file
diff --git a/src/components/sale/salelist/SaleListTable.tsx b/src/components/sale/salelist/SaleListTable.tsx
new file mode 100644
index 0000000..9da33f3
--- /dev/null
+++ b/src/components/sale/salelist/SaleListTable.tsx
@@ -0,0 +1,27 @@
+export default function SaleListTable(){
+  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>
+  )
+}
\ No newline at end of file
diff --git a/src/styles/base/_button.scss b/src/styles/base/_button.scss
index 42dc8e9..c486c13 100644
--- a/src/styles/base/_button.scss
+++ b/src/styles/base/_button.scss
@@ -49,6 +49,14 @@
     background-size: cover;
     margin-left: 12px;
   }
+  .btn-edit{
+    display: block;
+    width: 10px;
+    height: 10px;
+    background: url(/assets/images/common/btn_edit.svg)no-repeat center;
+    background-size: cover;
+    margin-left: 12px;
+  }
   .btn-clip{
     display: block;
     width: 18px;
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index b531da7..4ebdd02 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -1,3 +1,4 @@
 @forward 'main';
 @forward 'login';
-@forward 'pop-contents';
\ No newline at end of file
+@forward 'pop-contents';
+@forward 'sub';
\ No newline at end of file
diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss
new file mode 100644
index 0000000..7d9a449
--- /dev/null
+++ b/src/styles/components/_sub.scss
@@ -0,0 +1,107 @@
+@use "../abstracts" as *;
+
+.sale-contents{
+  width: 100%;
+  background-color: #F5F5F5;
+  .sale-frame{
+    padding: 0 20px;
+    border-top: 1px solid #ECECEC;
+    border-bottom: 1px solid #ECECEC;
+    margin-bottom: 10px;
+    padding-bottom: 24px;
+    padding-top: 24px;
+    background-color: $white-fff;
+    &:first-child{
+      padding-top: 0;
+      border-top: none;
+    }
+    &:last-child{
+      padding-bottom: 0;
+      border-bottom: none;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.sale-form-bx{
+  margin-bottom: 14px;
+  &:last-child{
+    margin-bottom: 0;
+  }
+} 
+
+.sale-list-wrap{
+  .sale-list-item{
+    padding-top: 14px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #ECECEC; 
+    cursor: pointer;
+    &:first-child{
+      padding-top: 0;
+    }
+    &:last-child{
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+  }
+}
+.sale-item-bx{
+  .sale-item-date-bx{
+    @include flex(0px);
+    align-items: center;
+    margin-bottom: 9px;
+    .sale-item-num{
+      position: relative;
+      @include defaultFont($font-s-13, $font-w-400, $font-c);
+      padding-right: 6px;
+      &::after{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 10px;
+        background-color: #A2ABB8;
+      }
+    }
+    .sale-item-date{
+      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+      padding-left: 6px;
+    }
+  }
+  .sale-item-tit{
+    @include defaultFont($font-s-15, $font-w-500, $font-c);
+    margin-bottom: 9px;
+  }
+  .sale-item-customer{
+    @include defaultFont($font-s-13, $font-w-400, $font-c);
+    margin-bottom: 9px;
+  }
+  .sale-item-update-bx{
+    @include flex(0px);
+    align-items: center;
+    .sale-item-name{
+      position: relative;
+      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+      padding-right: 6px;
+      &::after{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 10px;
+        background-color: #A2ABB8;
+      }
+    }
+    .sale-item-update{
+      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+      padding-left: 6px;
+    }
+  }
+}
+.sale-edit-btn{
+  margin-top: 24px;
+}
\ No newline at end of file