From 0ae2457e411b60bb064d22391669bfb646f6d906 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, 22 Apr 2025 15:59:41 +0900
Subject: [PATCH] =?UTF-8?q?layout=20header=20=EB=A9=94=EB=89=B4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=201:1=EB=AC=B8=EC=9D=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/sub/oneonone_profile_icon.svg      |   4 +
 src/app/community/notice/page.jsx             |   2 +-
 src/app/community/oneononeinquiry/page.jsx    |  50 +++++
 src/components/layout/Header.jsx              |   7 +
 src/components/publishpage/PublishPage.jsx    |  15 +-
 .../oneononeinqury/OneOnOneDetailPop.jsx      |  62 ++++++
 .../oneononeinqury/OneOnOneEditPop.jsx        |  91 ++++++++
 .../oneononeinqury/OneOnOneInquiryTable.jsx   | 136 ++++++++++++
 src/styles/_contents.scss                     |  40 ++--
 src/styles/_reset.scss                        |  19 ++
 src/styles/_submodal.scss                     | 200 ++++++++++++++----
 11 files changed, 561 insertions(+), 65 deletions(-)
 create mode 100644 public/static/images/sub/oneonone_profile_icon.svg
 create mode 100644 src/app/community/oneononeinquiry/page.jsx
 create mode 100644 src/components/sub/community/oneononeinqury/OneOnOneDetailPop.jsx
 create mode 100644 src/components/sub/community/oneononeinqury/OneOnOneEditPop.jsx
 create mode 100644 src/components/sub/community/oneononeinqury/OneOnOneInquiryTable.jsx

diff --git a/public/static/images/sub/oneonone_profile_icon.svg b/public/static/images/sub/oneonone_profile_icon.svg
new file mode 100644
index 0000000..f1c3d92
--- /dev/null
+++ b/public/static/images/sub/oneonone_profile_icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="#101010" stroke-width="1.5"/>
+<path d="M7.94995 16.5C10.0485 14.302 13.9289 14.1986 16.05 16.5M14.2455 9.75C14.2455 10.9926 13.2367 12 11.9923 12C10.7479 12 9.73912 10.9926 9.73912 9.75C9.73912 8.50736 10.7479 7.5 11.9923 7.5C13.2367 7.5 14.2455 8.50736 14.2455 9.75Z" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/app/community/notice/page.jsx b/src/app/community/notice/page.jsx
index 87bbbd4..626b967 100644
--- a/src/app/community/notice/page.jsx
+++ b/src/app/community/notice/page.jsx
@@ -42,7 +42,7 @@ export default function NoticePage(){
             <Footer/>
 
             {/* 공지사항 상세 */}
-            {/* <NoticeDetailPop/> */}
+            <NoticeDetailPop/>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/app/community/oneononeinquiry/page.jsx b/src/app/community/oneononeinquiry/page.jsx
new file mode 100644
index 0000000..3c407e9
--- /dev/null
+++ b/src/app/community/oneononeinquiry/page.jsx
@@ -0,0 +1,50 @@
+import Footer from "@/components/layout/Footer";
+import Header from "@/components/layout/Header";
+import Image from "next/image";
+import Link from "next/link";
+import '@/styles/contents.scss';
+import OneOnOneInquiryTable from "@/components/sub/community/oneononeinqury/OneOnOneInquiryTable";
+import OneOnOneEditPop from "@/components/sub/community/oneononeinqury/OneOnOneEditPop";
+import OneOnOneDetailPop from "@/components/sub/community/oneononeinqury/OneOnOneDetailPop";
+
+export default function OneOnOneInquiryPage(){
+    return(
+        <div className="wrap">
+            <Header/>
+            <div className="content">
+                <div className="sub-header">
+                    <div className="sub-header-inner">
+                        <ul className="sub-header-title-wrap">
+                            <li className='title-item'>
+                                <Link className='sub-header-title' href={'#'}>1:1お問い合わせ</Link>
+                            </li>
+                        </ul>
+                        <ul className="sub-header-location">
+                            <li className="location-item">
+                                <span className="home">
+                                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                                </span>
+                            </li>
+                            <li className="location-item">
+                                <span>物品及び図面管理</span>
+                            </li>
+                            <li className="location-item">
+                                <span>新規物件登録</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="sub-content">
+                    <div className="sub-content-inner">
+                        <OneOnOneInquiryTable/>
+                    </div>
+                </div>
+            </div>
+            <Footer/>
+
+            {/* 1:1문의 등록 */}
+            <OneOnOneEditPop/>
+            <OneOnOneDetailPop/>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index a5e2342..8fac172 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -75,6 +75,13 @@ export default function Header() {
                                     ><Link href={'#'}>素材のダウンロード</Link></li>
                                 </ul>
                             </li>
+                            <li 
+                            className="nav-item " 
+                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
+                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
+                            >
+                                <Link href={'#'}>1:1お問い合わせ</Link>
+                            </li>
                         </ul>
                     </nav>  
                 </div>
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx
index 8dc60eb..132a243 100644
--- a/src/components/publishpage/PublishPage.jsx
+++ b/src/components/publishpage/PublishPage.jsx
@@ -456,7 +456,7 @@ export default function PublishPage() {
                 <td className="t-center">2024-10-11</td>
               </tr>
               <tr>
-                <td className="t-center" rowSpan={3}>
+                <td className="t-center" rowSpan={4}>
                   <strong>커뮤니티</strong>
                 </td>
                 <td>
@@ -507,6 +507,19 @@ export default function PublishPage() {
                 <td className='red al-c'></td>
                 <td className="t-center">2024-10-14</td>
               </tr>
+              <tr>
+                <td>
+                  <strong className="title">1:1 문의</strong>
+                </td>
+                <td>
+                  <Link href="/community/oneononeinquiry" target="_blank">
+                    OneOnOneInquiryPage
+                  </Link>
+                </td>
+                <td className="coding_stat_web"></td>
+                <td className='red al-c'></td>
+                <td className="t-center">2025-04-21</td>
+              </tr>
             </tbody>
           </table>
         </div>
diff --git a/src/components/sub/community/oneononeinqury/OneOnOneDetailPop.jsx b/src/components/sub/community/oneononeinqury/OneOnOneDetailPop.jsx
new file mode 100644
index 0000000..2274f46
--- /dev/null
+++ b/src/components/sub/community/oneononeinqury/OneOnOneDetailPop.jsx
@@ -0,0 +1,62 @@
+export default function OneOnOneDetailPop(){
+    return(
+        <div className="modal-popup community">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <button className="modal-close">닫기</button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="oneonone-header-wrap">
+                            <div className="oneonone-title">[お問い合わせ区分] Q.ORDER Q.MUSUBIで登録したタイトル</div>
+                            <div className="oneonone-infor">
+                                <div className="profile">佐藤一貴</div>
+                                <div className="date">2025.04.20</div>
+                            </div>
+                        </div>
+                        <div className="oneonone-detail">
+                            <dl className="community_detail-file-wrap">
+                                <dt>添付ファイル一覧</dt>
+                                <dd><button className="down">ファイルネーミング.pdf</button></dd>
+                                <dd><button className="down">ファイルネーミング.png</button></dd>
+                                <dd><button className="down">ファイルネーミング.jpeg</button></dd>
+                            </dl>
+                            <div className="community_detail-inner">
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                            </div>
+                        </div>
+                        <div className="oneonone-answer">
+                            <div className="answer-title-wrap">
+                                <div className="answer-title">Hanwha Japan 回答</div>
+                                <div className="oneonone-infor">
+                                    <div className="profile">佐藤一貴</div>
+                                    <div className="date">2025.04.20</div>
+                                </div>
+                            </div>
+                            <div className="community_detail-inner">
+                                質問<br/>
+                                Q.READYの配線で、一次側接続と二次側接続の違いは何ですか？<br/>
+                                質問<br/>
+                                Q.READYの配線で、一次側接続と二次側接続の違いは何ですか？<br/>
+                                質問<br/>
+                                Q.READYの配線で、一次側接続と二次側接続の違いは何ですか？<br/>
+                            </div>
+                            <dl className="community_detail-file-wrap">
+                                <dt>添付ファイル一覧</dt>
+                                <dd><button className="down">ファイルネーミング.pdf</button></dd>
+                                <dd><button className="down">ファイルネーミング.png</button></dd>
+                                <dd><button className="down">ファイルネーミング.jpeg</button></dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/sub/community/oneononeinqury/OneOnOneEditPop.jsx b/src/components/sub/community/oneononeinqury/OneOnOneEditPop.jsx
new file mode 100644
index 0000000..77d9b39
--- /dev/null
+++ b/src/components/sub/community/oneononeinqury/OneOnOneEditPop.jsx
@@ -0,0 +1,91 @@
+'use client'
+
+import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
+
+export default function OneOnOneEditPop(){
+    return(
+        <div className="modal-popup">
+            <div className="modal-dialog big">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="title">1:1お問い合わせ</h1>
+                        <button className="modal-close">닫기</button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="modal-body-inner">
+                            <div className="design-request-table">
+                                <div className="common-table">
+                                    <table>
+                                        <colgroup>
+                                            <col style={{width : '150px'}}/>
+                                            <col />
+                                            <col style={{width : '150px'}}/>
+                                            <col />
+                                        </colgroup>
+                                        <tbody>
+                                            <tr>
+                                                <th>登録者</th>
+                                                <td>佐藤一貴</td>
+                                                <th>お問い合わせ登録日</th>
+                                                <td>2025.04.21</td>
+                                            </tr>
+                                            <tr>
+                                                <th>E-Mail</th>
+                                                <td colSpan={3}>test@test.co.kr</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                            <div className="design-request-grid">
+                                <div className="design-request-count">
+                                    <div className="design-request-grid-tit">お問い合わせ区分、お問い合わせタイトル <span className="red">*</span></div>
+                                </div>
+                                <div className="flx-box one-on-one">
+                                    <div className="select-wrap mr5" >
+                                        <select className="select-light" name="" id="">
+                                            <option>お問い合わせ区分の選択</option>
+                                        </select>
+                                    </div>
+                                    <div className="input-wrap">
+                                        <input type="text" className="input-light"/>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="design-request-grid mt15">
+                                <div className="design-request-count">
+                                    <div className="design-request-grid-tit">お問い合わせ内容 <span className="red">*</span></div>
+                                </div>
+                                <div>
+                                    <textarea className="textarea-form" name="" id=""></textarea>
+                                </div>
+                            </div>
+                            <div className="design-request-grid mt15">
+                                <div className="design-request-count">
+                                    <div className="design-request-grid-tit">ファイル添付</div>
+                                    <div className="btn-area one-on-one">
+                                        <label className="file-upload" htmlFor="img">Attach File</label>
+                                        <input type="file" name="" id="img" style={{display: 'none'}}/>
+                                    </div>
+                                </div>
+                                <div className="drag-file-box one-on-one">
+                                    <div className="drag-file-area">
+                                        <p>Drag file here</p>
+                                        <ul className="file-list">
+                                            <li className="file-item"><span>選択したファイル名.pdf <button className="delete"></button></span></li>
+                                            <li className="file-item"><span>選択したファイル名.jpg <button className="delete"></button></span></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="footer-btn-wrap">
+                            <button className="btn-origin grey mr5">閉じる</button>
+                            <button className="btn-origin navy ">選択の適用</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/sub/community/oneononeinqury/OneOnOneInquiryTable.jsx b/src/components/sub/community/oneononeinqury/OneOnOneInquiryTable.jsx
new file mode 100644
index 0000000..133f6f9
--- /dev/null
+++ b/src/components/sub/community/oneononeinqury/OneOnOneInquiryTable.jsx
@@ -0,0 +1,136 @@
+import Pagination from "@/components/common/grid/Pagination";
+
+export default function OneOnOneInquiryTable(){
+    return(
+        <div className="sub-table-box">
+            <div className="community-search-warp">
+                <div className="community-search-box">
+                    <input type="text" className="community-input" />
+                    <button className="community-search-ico"></button>
+                </div>
+                <div className="community-search-keyword"><span>qpeak</span> について銃 <span>5</span> 提案 投稿が検索されました.</div>
+            </div>
+            <div className="table-box-title-wrap">
+                <div className="title-wrap">
+                    <h3>1：1お問い合わせリスト</h3>
+                    <ul className="info-wrap">
+                        <li>全体 <span className="red">6</span></li>
+                    </ul>
+                </div>
+                <div className="left-unit-box">
+                    <div>
+                        <button className="btn-origin navy mr10">1：1お問い合わせ</button>
+                    </div>
+                    <div className="select-box" style={{width : '80px'}}>
+                        <select className="select-light black" name="" id="">
+                            <option>100</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div className="community-table">
+                <table>
+                    <colgroup>
+                        <col width={100}/>
+                        <col width={150}/>
+                        <col />
+                        <col width={150}/>
+                        <col width={150}/>
+                    </colgroup>
+                    <tbody>
+                        <tr>
+                            <td className="al-c">99</td>
+                            <td className="al-c">未回答</td>
+                            <td>
+                                <div className="mb5">[문의구분]</div>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">佐藤一貴</td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">98</td>
+                            <td className="al-c">未回答</td>
+                            <td>
+                                <div className="mb5">[문의구분]</div>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">佐藤一貴</td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">97</td>
+                            <td className="al-c">未回答</td>
+                            <td>
+                                <div className="mb5">[문의구분]</div>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">佐藤一貴</td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">96</td>
+                            <td className="al-c">回答完了</td>
+                            <td>
+                                <div className="mb5">[문의구분]</div>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">佐藤一貴</td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">96</td>
+                            <td className="al-c">回答完了</td>
+                            <td>
+                                <div className="mb5">[문의구분]</div>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">佐藤一貴</td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">96</td>
+                            <td className="al-c">回答完了</td>
+                            <td>
+                                <div className="mb5">[문의구분]</div>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">佐藤一貴</td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">96</td>
+                            <td className="al-c">回答完了</td>
+                            <td>
+                                <div className="mb5">[문의구분]</div>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">佐藤一貴</td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <Pagination/>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index bfd7b1f..58f9a3c 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -806,28 +806,28 @@
     color: #45576F;
     margin-left: 5px;
 }
-.drag-file-box{
-    padding: 10px;
-    .btn-area{
-        padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
-        .file-upload{
-            display: inline-block;
-            height: 30px;
-            background-color: #94A0AD;
-            padding: 0 10px;
-            border-radius: 2px;
-            font-size: 13px;
-            line-height: 30px;
-            color: #fff;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background .15s ease-in-out;
-            &:hover{
-                background-color: #607F9A;
-            }
+.btn-area{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ECF0F4;
+    .file-upload{
+        display: inline-block;
+        height: 30px;
+        background-color: #94A0AD;
+        padding: 0 10px;
+        border-radius: 2px;
+        font-size: 13px;
+        line-height: 30px;
+        color: #fff;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background .15s ease-in-out;
+        &:hover{
+            background-color: #607F9A;
         }
     }
+}
+.drag-file-box{
+    padding: 10px;
     .drag-file-area{
         position: relative;
         margin-top: 15px;
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index ac0d2f7..deafc8c 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1023,4 +1023,23 @@ input:checked + .slider {
 // alert z-index 
 .swal2-container{
     z-index: 120000;
+}
+
+// textarea
+.textarea-form{
+    width: 100%;
+    outline: none;
+    resize: none;
+    border: none;
+    border: 1px solid #eee;
+    min-height: 150px;
+    padding: 10px;
+    font-size: 13px;
+    color: #45576F;
+    border-radius: 2px;
+    font-family: "Noto Sans JP", sans-serif;
+    transition: border .15s ease-in-out;
+    &:focus{
+        border-color: #94a0ad;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
index de53d58..40beae5 100644
--- a/src/styles/_submodal.scss
+++ b/src/styles/_submodal.scss
@@ -288,55 +288,56 @@
 }
 
 // 커뮤니티
-.community_detail{
-    .community_detail-tit{
-        font-size: 16px;
-        color: #101010;
-        font-weight: 600;
-        padding-bottom: 14px;
-        border-bottom: 2px solid #101010;
-    }
-    .community_detail-file-wrap{
-        padding: 24px 0;
-        border-bottom: 1px solid #E5E5E5;
-        dt{
-            font-size: 13px;
-            color: #101010;
-            font-weight: 500;
-            margin-bottom: 15px;
-        }
-        dd{
-            font-size: 12px;
-            font-weight: 400;
-            margin-bottom: 3px;
-            color: #344356;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .community_detail-inner{
-        max-height: 300px;
-        overflow-y: auto;
-        margin-top: 20px;
-        margin-bottom: 20px;
+.community_detail-tit{
+    font-size: 16px;
+    color: #101010;
+    font-weight: 600;
+    padding-bottom: 14px;
+    border-bottom: 2px solid #101010;
+}
+.community_detail-file-wrap{
+    padding: 24px 0;
+    border-bottom: 1px solid #E5E5E5;
+    dt{
         font-size: 13px;
+        color: #101010;
+        font-weight: 500;
+    }
+    dd{
+        font-size: 12px;
         font-weight: 400;
-        color: #45576F;
-        line-height: 26px;
-        word-break: keep-all;
-        &::-webkit-scrollbar {
-            width: 4px;
-            background-color: transparent;
+        margin-bottom: 3px;
+        color: #344356;
+        &:nth-child(2){
+            margin-top: 15px;
         }
-        &::-webkit-scrollbar-thumb {
-            background-color: #C1CCD7;
-        }
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
+        &:last-child{
+            margin-bottom: 0;
         }
     }
 }
+.community_detail-inner{
+    max-height: 300px;
+    overflow-y: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #45576F;
+    line-height: 26px;
+    word-break: keep-all;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #C1CCD7;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+
 
 // 견적 복사
 .estimate-copy-info-item{
@@ -368,4 +369,117 @@
             color: #999;
         }
     }
+}
+
+// 1:1문의
+.one-on-one{
+    .select-wrap{
+        width: 250px;
+    }
+    .input-wrap{
+        flex: 1 1 auto;
+    }
+    &.btn-area{
+        padding-bottom: 0;
+        border: none;
+        margin-left: 10px;
+    }
+    &.drag-file-box{
+        border: 1px solid #eee;
+        .drag-file-area{
+            margin-top: 0;
+        }
+    }
+}
+
+.oneonone-header-wrap{
+    padding-bottom: 14px;
+    border-bottom: 2px solid #101010;
+    .oneonone-title{
+        font-size: 16px;
+        color: #101010;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+}
+.oneonone-infor{
+    display: flex;
+    align-items: center;
+    .profile{
+        position: relative;
+        padding-left: 26px;
+        padding-right: 8px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+        &::before{
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            width: 24px;
+            height: 24px;
+            background: url(./../../public/static/images/sub/oneonone_profile_icon.svg)no-repeat center;
+        }
+        &::after{
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 1px;
+            height: 8px;
+            background-color: #CCCCCC;
+        }
+    }
+    .date{
+        padding-left: 8px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+    }
+}
+.oneonone-detail{
+    padding: 20px;
+    border: 1px solid #101010;
+    border-top: none;
+    .community_detail-file-wrap{
+        padding-top: 0;
+    }
+    .community_detail-inner{
+        max-height: 110px;
+        margin-top: 24px;
+        margin-bottom: 0;
+    }
+}
+
+.oneonone-answer{
+    margin-top: 8px;
+    padding: 20px;
+    border: 1px solid #101010;
+    .community_detail-inner{
+        max-height: 110px;
+        
+    }
+    .community_detail-file-wrap{
+        border-top: 1px solid #D4DCE7;
+        padding: 16px 0 0 0;
+        border-bottom: none;
+    }
+}
+
+.answer-title-wrap{
+    display: flex;
+    align-items: center;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #D4DCE7;
+    .answer-title{
+        font-size: 14px;
+        color: #101010;
+        font-weight: 600;
+    }
+    .oneonone-infor{
+        margin-left: auto;
+    }
 }
\ No newline at end of file