From a4c026b25b86d56c0b710a4a5f42f77a1f24797d 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: Wed, 30 Apr 2025 10:07:33 +0900
Subject: [PATCH] =?UTF-8?q?1:1=20=EB=AC=B8=EC=9D=98=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/inquirylist/page.tsx                  | 20 ++++++
 src/components/PublishList/PublishList.tsx    | 12 ++++
 .../inquiry/inquirylist/InquiryForm.tsx       | 15 ++++
 .../inquiry/inquirylist/InquiryTable.tsx      | 63 ++++++++++++++++
 src/styles/components/_sub.scss               | 71 +++++++++++++++++++
 5 files changed, 181 insertions(+)
 create mode 100644 src/app/inquirylist/page.tsx
 create mode 100644 src/components/inquiry/inquirylist/InquiryForm.tsx
 create mode 100644 src/components/inquiry/inquirylist/InquiryTable.tsx

diff --git a/src/app/inquirylist/page.tsx b/src/app/inquirylist/page.tsx
new file mode 100644
index 0000000..4983bf1
--- /dev/null
+++ b/src/app/inquirylist/page.tsx
@@ -0,0 +1,20 @@
+import InquiryForm from "@/components/inquiry/inquirylist/InquiryForm";
+import InquiryTable from "@/components/inquiry/inquirylist/InquiryTable";
+import Footer from "@/components/layouts/Footer";
+import Header from "@/components/layouts/Header";
+
+export default function InquiryListPage (){
+  return(
+    <div className="wrap">
+      <Header name={"1:1お問い合わせ"} backBtn={true}/>
+      <div className="container">
+        <div className="sale-contents">
+          <InquiryForm/>
+          <InquiryTable/>
+        </div>
+      </div>
+      <Footer/>
+      <button className="top-btn"></button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/PublishList/PublishList.tsx b/src/components/PublishList/PublishList.tsx
index 7fc8869..eaa4c11 100644
--- a/src/components/PublishList/PublishList.tsx
+++ b/src/components/PublishList/PublishList.tsx
@@ -131,6 +131,18 @@ export default function PublishList (){
                     </td>
                     <td className='c red'>2025/04/29</td>
                   </tr>
+                  <tr>
+                    <td rowSpan={3}>1:1 문의</td>
+                    <td>1:1 문의 목록</td>
+                    <td>
+                      <Link href={'inquirylist'}>InquiryListPage.tsx</Link>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c'>
+                    </td>
+                    <td className='c red'>2025/04/30</td>
+                  </tr>
                 </tbody>
               </table>
             </div>
diff --git a/src/components/inquiry/inquirylist/InquiryForm.tsx b/src/components/inquiry/inquirylist/InquiryForm.tsx
new file mode 100644
index 0000000..7546d6d
--- /dev/null
+++ b/src/components/inquiry/inquirylist/InquiryForm.tsx
@@ -0,0 +1,15 @@
+export default function InquiryForm(){
+  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">
+        <div className="search-input">
+          <input type="text" className="search-frame" placeholder="タイトルを入力してください. (2文字以上)"/>
+          <button className="search-icon"></button>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/inquiry/inquirylist/InquiryTable.tsx b/src/components/inquiry/inquirylist/InquiryTable.tsx
new file mode 100644
index 0000000..4ce86f6
--- /dev/null
+++ b/src/components/inquiry/inquirylist/InquiryTable.tsx
@@ -0,0 +1,63 @@
+export default function InquiryTable(){
+  return(
+    <div className="sale-frame">
+      <div className="inquiry-table-filter">
+        <div className="filter-check">
+          <div className="check-form-box">
+            <input type="checkbox" id="ch01"/>
+            <label htmlFor="ch01">私が書いたお問い合わせ</label>
+          </div>
+        </div>
+        <div className="filter-select">
+          <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="inquiry-list-wrap">
+        <div className="inquiry-list-tit">合計 <span>98</span>個</div>
+        <ul className="inquiry-list">
+          <li className="inquiry-item">
+            <div className="inquiry-item-bx">
+              <div className="inquiry-item-category">屋根</div>
+              <div className="inquiry-item-tit">屋根材適合性確認依頼</div>
+              <div className="inquiry-item-date">2025.04.02</div>
+              <div className="inquiry-badge badge blue">回答待ち</div>
+            </div>
+          </li>
+          <li className="inquiry-item">
+            <div className="inquiry-item-bx">
+              <div className="inquiry-item-category">設計</div>
+              <div className="inquiry-item-tit">設置可能ですか？</div>
+              <div className="inquiry-item-date">2025.04.02</div>
+              <div className="inquiry-badge badge orange">回答完了</div>
+            </div>
+          </li>
+          <li className="inquiry-item">
+            <div className="inquiry-item-bx">
+              <div className="inquiry-item-category">屋根</div>
+              <div className="inquiry-item-tit">屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼</div>
+              <div className="inquiry-item-date">2025.04.02</div>
+              <div className="inquiry-badge badge blue">回答待ち</div>
+            </div>
+          </li>
+          <li className="inquiry-item">
+            <div className="inquiry-item-bx">
+              <div className="inquiry-item-category">設計</div>
+              <div className="inquiry-item-tit">設置可能ですか？</div>
+              <div className="inquiry-item-date">2025.04.02</div>
+              <div className="inquiry-badge badge orange">回答完了</div>
+            </div>
+          </li>
+        </ul>
+        <div className="sale-edit-btn">
+          <button className="btn-frame n-blue icon">もっと見る<i className="btn-edit"></i></button>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss
index e9cec63..ae172eb 100644
--- a/src/styles/components/_sub.scss
+++ b/src/styles/components/_sub.scss
@@ -144,6 +144,7 @@
   }
   .sale-item-tit{
     @include defaultFont($font-s-15, $font-w-500, $font-c);
+    @include ellipsis(1);
     margin-bottom: 9px;
   }
   .sale-item-customer{
@@ -258,4 +259,74 @@
       @include defaultFont($font-s-13, $font-w-400, $font-c);
     }
   }
+}
+
+// 1:1 문의 목록
+.inquiry-table-filter{
+  margin-bottom: 24px;
+  .filter-check{
+    margin-bottom: 12px;
+  }
+}
+.inquiry-list-tit{
+  padding-bottom: 10px;
+  border-bottom: 1px solid #2E3A59;
+  @include defaultFont($font-s-13, $font-w-400, $font-c);
+  span{
+    font-weight: $font-w-500;
+  }
+}
+.badge{
+  min-width: 60px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px;
+  border-radius: 60px;
+  text-align: center;
+  font-size: $font-s-12;
+  font-weight: $font-w-500;
+  &.blue{
+    color: #5497E9;
+    background-color: #ECF5FF;
+  }
+  &.orange{
+    color: #F86A56;
+    background-color: #FFEFED;
+  }
+  &.block{
+    width: 100%;
+    
+  }
+}
+.inquiry-list{
+  .inquiry-item{
+    padding: 10px 0;
+    cursor: pointer;
+    border-bottom: 1px solid #ECECEC;
+    &:last-child{
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+    .inquiry-item-bx{
+      position: relative;
+      padding-right: 70px;
+      .inquiry-item-category{
+        @include defaultFont($font-s-13, $font-w-400, $font-c);
+        margin-bottom: 5px;
+      }
+      .inquiry-item-tit{
+        @include defaultFont($font-s-15, $font-w-500, $font-c);
+        @include ellipsis(1);
+        margin-bottom: 5px;
+      }
+      .inquiry-item-date{
+        @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+      }
+      .inquiry-badge{
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
 }
\ No newline at end of file