Merge pull request 'refactor: remove inquiry page component and enhance navigation in Main and Header components with router integration' (#20) from feature/pub-yoo into dev
Reviewed-on: #20
This commit is contained in:
commit
38055365a5
5
src/app/inquiry/[id]/page.tsx
Normal file
5
src/app/inquiry/[id]/page.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import Detail from '@/components/inquiry/Detail'
|
||||
|
||||
export default function page() {
|
||||
return <Detail />
|
||||
}
|
||||
3
src/app/inquiry/layout.tsx
Normal file
3
src/app/inquiry/layout.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function layout({ children }: { children: React.ReactNode }) {
|
||||
return <div className="container">{children}</div>
|
||||
}
|
||||
13
src/app/inquiry/list/page.tsx
Normal file
13
src/app/inquiry/list/page.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import ListForm from '@/components/inquiry/ListForm'
|
||||
import ListTable from '@/components/inquiry/ListTable'
|
||||
|
||||
export default function page() {
|
||||
return (
|
||||
<>
|
||||
<div className="sale-contents">
|
||||
<ListForm />
|
||||
<ListTable />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
export default function page() {
|
||||
return (
|
||||
<>
|
||||
<h1>1:1 문의</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
9
src/app/inquiry/regist/page.tsx
Normal file
9
src/app/inquiry/regist/page.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import RegistForm from '@/components/inquiry/RegistForm'
|
||||
|
||||
export default function page() {
|
||||
return (
|
||||
<>
|
||||
<RegistForm />
|
||||
</>
|
||||
)
|
||||
}
|
||||
38
src/components/inquiry/Answer.tsx
Normal file
38
src/components/inquiry/Answer.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
'use client'
|
||||
|
||||
export default function Answer() {
|
||||
return (
|
||||
<>
|
||||
<div className="inquiry-answer-wrap">
|
||||
<div className="inquiry-answer-header">
|
||||
<div className="inquiry-answer-tit">Hanwha Japan 回答</div>
|
||||
<div className="inquiry-answer-date">
|
||||
<span>佐藤一貴</span>/ <span>2025.04.02 16:54:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inquiry-detail-data">
|
||||
<div className="inquiry-detail-category">回答</div>
|
||||
<div className="inquiry-detail-txt">
|
||||
一次側接続は, 自動切替開閉器と住宅分電盤昼間遮断器との間に蓄電システム遮断器を配線する方法です. 二次側接続は,
|
||||
住宅分電盤週間ブレーカの二次側に蓄電システムブレーカを接続する
|
||||
</div>
|
||||
</div>
|
||||
<div className="file-list-wrap">
|
||||
<div className="file-list-tit">ファイル添付</div>
|
||||
<ul className="file-list">
|
||||
<li className="file-item">
|
||||
<button className="file-item-bx">
|
||||
<div className="file-item-name">添付ファイル名.jpg </div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="file-item">
|
||||
<button className="file-item-bx">
|
||||
<div className="file-item-name">添付ファイル名.jpg </div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
87
src/components/inquiry/Detail.tsx
Normal file
87
src/components/inquiry/Detail.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Answer from './Answer'
|
||||
|
||||
export default function Detail() {
|
||||
//todo: 답변 완료 표시를 위해 임시로 추가 해 놓은 state
|
||||
// 추후에 api 작업 완료후 삭제
|
||||
// 답변 완료 클래스 & 하단 답변내용 출력도
|
||||
const [inquiry, setInquiry] = useState<Boolean>(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inquiry-frame">
|
||||
<div className="inquiry-detail-wrap">
|
||||
<div className="inquiry-detail-badge">
|
||||
<div className={`badge ${inquiry ? 'orange' : 'blue'} block`}>回答完了</div>
|
||||
</div>
|
||||
<div className="inquiry-detail-data-table">
|
||||
<table className="sale-data-table">
|
||||
<colgroup>
|
||||
<col style={{ width: '80px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>登録日</th>
|
||||
<td>2025.04.10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>作者</th>
|
||||
<td>Hong gi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>販売店</th>
|
||||
<td>interplug</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>施工店</th>
|
||||
<td>interplugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>E-mail</th>
|
||||
<td>Hong@interplug.co.kr</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="inquiry-detail-data">
|
||||
<div className="inquiry-detail-category">屋根適合</div>
|
||||
<div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
|
||||
<div className="inquiry-detail-txt">
|
||||
入力した内容が表示されます.
|
||||
<br />
|
||||
インストール可能であることを確認してください.
|
||||
<br />
|
||||
屋根の写真を添付しました.
|
||||
</div>
|
||||
</div>
|
||||
<div className="file-list-wrap">
|
||||
<div className="file-list-tit">ファイル添付</div>
|
||||
<ul className="file-list">
|
||||
<li className="file-item">
|
||||
<button className="file-item-bx">
|
||||
<div className="file-item-name">添付ファイル名.jpg </div>
|
||||
</button>
|
||||
</li>
|
||||
<li className="file-item">
|
||||
<button className="file-item-bx">
|
||||
<div className="file-item-name">添付ファイル名.jpg </div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{inquiry && <Answer />}
|
||||
|
||||
<div className="sale-edit-btn">
|
||||
<button className="btn-frame n-blue icon">
|
||||
リスト<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
20
src/components/inquiry/ListForm.tsx
Normal file
20
src/components/inquiry/ListForm.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
'use client'
|
||||
export default function ListForm() {
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
70
src/components/inquiry/ListTable.tsx
Normal file
70
src/components/inquiry/ListTable.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
'use client'
|
||||
export default function ListTable() {
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
79
src/components/inquiry/RegistForm.tsx
Normal file
79
src/components/inquiry/RegistForm.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
'use client'
|
||||
export default function RegistForm() {
|
||||
return (
|
||||
<>
|
||||
<div className="inquiry-frame">
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
お問い合わせタイプ <i className="import">*</i>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<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="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
お問い合わせタイトル <i className="import">*</i>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<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="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
お問い合わせタイプ <i className="import">*</i>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<textarea className="textarea-form" rows={6} name="" id="" placeholder="TextArea Filed"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inquiry-file-wrap">
|
||||
<div className="filebox">
|
||||
<label className="btn-frame l-blue icon" htmlFor="file">
|
||||
<i className="btn-clip"></i>Attach ファイル
|
||||
</label>
|
||||
<input type="file" id="file" />
|
||||
</div>
|
||||
<div className="file-list-wrap">
|
||||
<div className="file-list-tit">
|
||||
添付ファイル<span>2</span>個
|
||||
</div>
|
||||
<ul className="file-list">
|
||||
<li className="file-item">
|
||||
<div className="file-item-bx">
|
||||
<div className="file-item-name">添付ファイル名.jpg </div>
|
||||
<button className="file-del"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li className="file-item">
|
||||
<div className="file-item-bx">
|
||||
<div className="file-item-name">添付ファイル名.jpg </div>
|
||||
<button className="file-del"></button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="sale-edit-btn">
|
||||
<button className="btn-frame n-blue icon">
|
||||
登録<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,10 +1,13 @@
|
||||
'use client'
|
||||
|
||||
import { useHeaderStore } from '@/store/header'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export default function Main() {
|
||||
const router = useRouter()
|
||||
const { setBackBtn } = useHeaderStore()
|
||||
|
||||
useEffect(() => {
|
||||
setBackBtn(false)
|
||||
}, [])
|
||||
@ -27,7 +30,7 @@ export default function Main() {
|
||||
<div className="main-bx-icon">
|
||||
<img src="/assets/images/main/main_icon01.svg" alt="" />
|
||||
</div>
|
||||
<button className="main-bx-arr"></button>
|
||||
<button className="main-bx-arr" onClick={() => router.push('/survey-sale')}></button>
|
||||
</div>
|
||||
<div className="grid-bx-body">
|
||||
<div className="grid-bx-body-tit">調査物件一覧</div>
|
||||
@ -39,7 +42,7 @@ export default function Main() {
|
||||
<div className="main-bx-icon">
|
||||
<img src="/assets/images/main/main_icon02.svg" alt="" />
|
||||
</div>
|
||||
<button className="main-bx-arr"></button>
|
||||
<button className="main-bx-arr" onClick={() => router.push('/survey-sale/basic-info')}></button>
|
||||
</div>
|
||||
<div className="grid-bx-body">
|
||||
<div className="grid-bx-body-tit">調査物件登録</div>
|
||||
@ -51,7 +54,7 @@ export default function Main() {
|
||||
<div className="main-bx-icon">
|
||||
<img src="/assets/images/main/main_icon03.svg" alt="" />
|
||||
</div>
|
||||
<button className="main-bx-arr"></button>
|
||||
<button className="main-bx-arr" onClick={() => router.push('/inquiry/list')}></button>
|
||||
</div>
|
||||
<div className="grid-bx-body">
|
||||
<div className="grid-bx-body-tit">1:1お問い合わせ リスト</div>
|
||||
@ -63,7 +66,7 @@ export default function Main() {
|
||||
<div className="main-bx-icon">
|
||||
<img src="/assets/images/main/main_icon04.svg" alt="" />
|
||||
</div>
|
||||
<button className="main-bx-arr"></button>
|
||||
<button className="main-bx-arr" onClick={() => router.push('/inquiry/regist')}></button>
|
||||
</div>
|
||||
<div className="grid-bx-body">
|
||||
<div className="grid-bx-body-tit">1:1問い合わせ登録</div>
|
||||
|
||||
@ -90,16 +90,16 @@ export default function Header({ name }: HeaderProps) {
|
||||
<nav className="side-nav-wrap">
|
||||
<ul className="side-nav-list">
|
||||
<li className="side-nav-item">
|
||||
<button>調査物件一覧</button>
|
||||
<button onClick={() => router.push('/survey-sale')}>調査物件一覧</button>
|
||||
</li>
|
||||
<li className="side-nav-item">
|
||||
<button>調査物件登録</button>
|
||||
<button onClick={() => router.push('/survey-sale/basic-info')}>調査物件登録</button>
|
||||
</li>
|
||||
<li className="side-nav-item">
|
||||
<button>1:1お問い合わせ</button>
|
||||
<button onClick={() => router.push('/inquiry/list')}>1:1お問い合わせ</button>
|
||||
</li>
|
||||
<li className="side-nav-item">
|
||||
<button>1:1お問い合わせ登録</button>
|
||||
<button onClick={() => router.push('/inquiry/regist')}>1:1お問い合わせ登録</button>
|
||||
</li>
|
||||
<li className="side-nav-item">
|
||||
<button>パスワードリセット</button>
|
||||
@ -115,7 +115,7 @@ export default function Header({ name }: HeaderProps) {
|
||||
<button>Jynoadmin</button>
|
||||
</li>
|
||||
<li className="side-footer-item">
|
||||
<button>HOME</button>
|
||||
<button onClick={() => router.push('/')}>HOME</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user