qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout header 메뉴 추가 및 1:1문의 추가

Browse Source
This commit is contained in:
김창수 2025-04-22 15:59:41 +09:00
parent cc98403655
commit 0ae2457e41
11 changed files with 561 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/sub/oneonone_profile_icon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 474 B

2
src/app/community/notice/page.jsx
View File

@ -42,7 +42,7 @@ export default function NoticePage(){
<Footer/>
{/* 공지사항 상세 */}
{/* <NoticeDetailPop/> */}
<NoticeDetailPop/>
</div>
)
}

50
src/app/community/oneononeinquiry/page.jsx Normal file
View File

@ -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>
)
}

7
src/components/layout/Header.jsx
View File

@ -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>

15
src/components/publishpage/PublishPage.jsx
View File

@ -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>

62
src/components/sub/community/oneononeinqury/OneOnOneDetailPop.jsx Normal file
View File

@ -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>
)
}

91
src/components/sub/community/oneononeinqury/OneOnOneEditPop.jsx Normal file
View File

@ -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>
)
}

136
src/components/sub/community/oneononeinqury/OneOnOneInquiryTable.jsx Normal file
View File

@ -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>
)
}

40
src/styles/_contents.scss
View File

@ -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;

19
src/styles/_reset.scss
View File

@ -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;
}
}

200
src/styles/_submodal.scss
View File

@ -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;
}
}