-
回答完了
+
+ {inquiryDetail?.answerYn === 'Y' ? '回答完了' : '回答待ち'}
+
@@ -25,71 +33,65 @@ export default function Detail() {
| 登録日 |
- 2025.04.10 |
+ {inquiryDetail?.regDt.split(' ')[0]} |
- | 作者 |
- Hong gi |
-
-
- | 名前 |
- Kim |
-
-
- | 番号 |
- 070-1234-5678 |
+ 顧客名 |
+
+ {session?.userNm} {session?.builderNo ? `[${session?.builderNo}]` : ''}
+ |
| 販売店 |
- interplug |
-
-
- | 施工店 |
- interplugs |
+ {inquiryDetail?.storeNm} |
| E-mail |
- Hong@interplug.co.kr |
+ {inquiryDetail?.regEmail} |
+
+
+ | 名前 |
+ {inquiryDetail?.regUserNm} |
+
+
+ | お問い合わせ |
+ {inquiryDetail?.regUserTelNo} |
- 屋根
- 適合性
- 屋根材
-
-
屋根材適合性確認依頼
-
- 入力した内容が表示されます.
-
- インストール可能であることを確認してください.
-
- 屋根の写真を添付しました.
+ {commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsLrgCd)?.name}
+ {commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsMidCd)?.name}
+ {commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsSmlCd)?.name}
+
{inquiryDetail?.qstTitle}
+
{inquiryDetail?.qstContents}
ファイル添付
- -
-
-
- -
-
-
+ {inquiryDetail?.listFile?.map((file) => (
+ -
+
+
+ ))}
- {inquiry &&
}
+ {inquiryDetail?.answerYn === 'Y' && inquiryDetail &&
}
-
diff --git a/src/components/inquiry/ListForm.tsx b/src/components/inquiry/ListForm.tsx
deleted file mode 100644
index 14f38bb..0000000
--- a/src/components/inquiry/ListForm.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client'
-import { useRouter } from 'next/navigation'
-
-export default function ListForm() {
- const router = useRouter()
- return (
- <>
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/inquiry/ListTable.tsx b/src/components/inquiry/ListTable.tsx
deleted file mode 100644
index d65fa85..0000000
--- a/src/components/inquiry/ListTable.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-'use client'
-
-import { use, useEffect, useState } from 'react'
-import LoadMoreButton from '../LoadMoreButton'
-
-const inquiryDummy = [
- { id: 1, category: '屋根', title: '屋根材適合性確認依頼', date: '2025.04.02', status: 'completed' },
- { id: 2, category: '外壁', title: '外壁仕上げ材確認', date: '2025.04.03', status: 'completed' },
- { id: 3, category: '設備', title: '換気システム図面確認', date: '2025.04.04', status: 'completed' },
- { id: 4, category: '基礎', title: '基礎配筋検査依頼', date: '2025.04.05', status: 'completed' },
- { id: 5, category: '内装', title: 'クロス仕様確認', date: '2025.04.06', status: 'waiting' },
- { id: 6, category: '構造', title: '耐震壁位置変更申請', date: '2025.04.07', status: 'completed' },
- { id: 7, category: '屋根', title: '雨樋取付方法確認', date: '2025.04.08', status: 'completed' },
- { id: 8, category: '外構', title: 'フェンス高さ変更相談', date: '2025.04.09', status: 'completed' },
- { id: 9, category: '設備', title: '給湯器設置位置確認', date: '2025.04.10', status: 'completed' },
- { id: 10, category: '外壁', title: 'タイル割付案確認依頼', date: '2025.04.11', status: 'waiting' },
- { id: 11, category: '内装', title: '照明配置図面確認', date: '2025.04.12', status: 'completed' },
- { id: 12, category: '構造', title: '梁補強案確認', date: '2025.04.13', status: 'completed' },
- { id: 13, category: '基礎', title: '杭長設計確認依頼', date: '2025.04.14', status: 'completed' },
- { id: 14, category: '屋根', title: '断熱材施工方法確認', date: '2025.04.15', status: 'completed' },
- { id: 15, category: '外構', title: '駐車場勾配図確認', date: '2025.04.16', status: 'completed' },
-]
-
-const badgeStyle = [
- {
- id: 'completed',
- label: '回答完了',
- color: 'blue',
- },
- {
- id: 'waiting',
- label: '回答待ち',
- color: 'orange',
- },
-]
-export default function ListTable() {
- const [offset, setOffset] = useState(0)
- const [hasMore, setHasMore] = useState(true)
-
- const inquiryList = inquiryDummy.slice(0, offset + 10)
-
- useEffect(() => {
- if (inquiryDummy.length > offset + 10) {
- setHasMore(true)
- } else {
- setHasMore(false)
- }
- }, [inquiryList])
-
- return (
- <>
-
-
-
-
-
-
-
-
-
- 合計 98個
-
-
- -
-
-
- 屋根
- 適合性
- 屋根材
-
-
屋根材適合性確認依頼
-
2025.04.02
-
回答待ち
-
- -
-
-
- 屋根
- 適合性
- 屋根材
-
-
設置可能ですか？
-
2025.04.02
-
回答完了
-
- -
-
-
- 屋根
- 適合性
- 屋根材
-
-
屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼
-
2025.04.02
-
回答待ち
-
- -
-
-
- 屋根
- 適合性
- 屋根材
-
-
設置可能ですか？
-
2025.04.02
-
回答完了
-
- -
-
-
-
-
- setOffset(offset + 10)} />
-
-
-
-
- )
-}
diff --git a/src/components/inquiry/RegistForm.tsx b/src/components/inquiry/RegistForm.tsx
index fc55a63..93df62f 100644
--- a/src/components/inquiry/RegistForm.tsx
+++ b/src/components/inquiry/RegistForm.tsx
@@ -1,5 +1,129 @@
'use client'
+
+import { useInquiry } from '@/hooks/useInquiry'
+import { useSessionStore } from '@/store/session'
+import { InquiryRequest } from '@/types/Inquiry'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
export default function RegistForm() {
+ const { saveInquiry, isSavingInquiry } = useInquiry()
+ const { session } = useSessionStore()
+ const router = useRouter()
+
+ const [inquiryRequest, setInquiryRequest] = useState
({
+ compCd: '5200',
+ siteTpCd: 'QC',
+ qnaClsLrgCd: '',
+ qnaClsMidCd: '',
+ qnaClsSmlCd: null,
+ title: '',
+ contents: '',
+ regId: '',
+ regUserNm: '',
+ regUserTelNo: null,
+ storeId: '',
+ qstMail: '',
+ })
+ const requiredFieldNames = [
+ { id: 'qnaClsLrgCd', name: 'お問い合わせタイプ' },
+ { id: 'qnaClsMidCd', name: 'お問い合わせタイプ' },
+ { id: 'regUserNm', name: '名前' },
+ { id: 'qstMail', name: 'E-mail' },
+ { id: 'title', name: 'お問い合わせタイトル' },
+ { id: 'contents', name: 'お問い合わせ内容' },
+ ]
+
+ useEffect(() => {
+ if (session?.isLoggedIn) {
+ setInquiryRequest({
+ ...inquiryRequest,
+ regId: session?.userId ?? '',
+ regUserNm: session?.userNm ?? '',
+ storeId: session?.storeId ?? '',
+ qstMail: session?.email ?? '',
+ })
+ }
+ }, [session])
+
+ const { commonCodeList } = useInquiry()
+
+ const [attachedFiles, setAttachedFiles] = useState([])
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const files = e.target.files
+ if (files && files.length > 0) {
+ setAttachedFiles(attachedFiles.concat(Array.from(files)))
+ }
+ e.target.value = ''
+ }
+
+ const handleRemoveFile = (index: number) => {
+ setAttachedFiles(attachedFiles.filter((_, i) => i !== index))
+ }
+
+ const focusOnRequiredField = (fieldId: string) => {
+ const element = document.getElementById(fieldId)
+ if (element) element.focus()
+ }
+
+ const handleSubmit = async () => {
+ const emptyField = requiredFieldNames.find((field) => inquiryRequest[field.id as keyof InquiryRequest] === '')
+ if (emptyField) {
+ alert(`${emptyField?.name}を入力してください。`)
+ focusOnRequiredField(emptyField?.id ?? '')
+ return
+ }
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ if (!emailRegex.test(inquiryRequest.qstMail)) {
+ alert('有効なメールアドレスを入力してください。')
+ focusOnRequiredField('qstMail')
+ return
+ }
+ if (inquiryRequest.title.length > 100) {
+ alert('お問い合わせタイトルは100文字以内で入力してください。')
+ focusOnRequiredField('title')
+ return
+ }
+ if (inquiryRequest.contents.length > 2000) {
+ alert('お問い合わせ内容は2,000文字以内で入力してください。')
+ focusOnRequiredField('contents')
+ return
+ }
+
+ const formData = new FormData()
+ attachedFiles.forEach((file) => {
+ formData.append('files', file)
+ })
+ Object.entries(inquiryRequest).forEach(([key, value]) => {
+ formData.append(key, value ?? '')
+ })
+ window.neoConfirm(
+ 'お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。',
+ async () => {
+ const res = await saveInquiry(formData)
+ alert('保存されました。')
+ router.push(`/inquiry/${res.qnaNo}`)
+ },
+ () => null,
+ )
+ }
+
+ const handlePhoneNumberChange = (e: React.ChangeEvent) => {
+ const value = e.target.value.replace(/[^\d]/g, '')
+
+ let formattedNumber = ''
+ if (value.length <= 3) {
+ formattedNumber = value
+ } else if (value.length <= 7) {
+ formattedNumber = `${value.slice(0, 3)}-${value.slice(3)}`
+ } else {
+ formattedNumber = `${value.slice(0, 3)}-${value.slice(3, 7)}-${value.slice(7, 11)}`
+ }
+
+ setInquiryRequest({ ...inquiryRequest, regUserTelNo: formattedNumber })
+ }
+
return (
<>
@@ -9,45 +133,113 @@ export default function RegistForm() {
お問い合わせタイプ *
-
-
-
-
-
-
-
+ {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd).length > 0 && (
+
+
+
+ )}
+ {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd).length > 0 && (
+
+
+
+ )}
@@ -55,15 +247,30 @@ export default function RegistForm() {
お問い合わせタイトル *