feat: modify inquriy create parameter

- 문의 등록 시 이메일 파라미터 추가

src/app/api/qna/file/route.ts

@@ -6,10 +6,19 @@ export async function GET(request: Request) {
   const encodeFileNo = searchParams.get('encodeFileNo')
 
   if (!encodeFileNo) {
-    return NextResponse.json({ error: 'fileNo is required' }, { status: 400 })
+    return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 })
   }
-  const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile?encodeFileNo=${encodeFileNo}`)
+  try {
-  console.log('response.data:: ', response.data)
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile`, {
+      params: {
+        encodeFileNo,
+      },
+    })
+    console.log('response.data:: ', response.data)
 
-  return NextResponse.json(response.data)
+    return NextResponse.json(response.data)
+  } catch (error: any) {
+    console.error(error.response)
+    return NextResponse.json({ error: error.response.data }, { status: 500 })
+  }
 }

src/app/api/qna/list/route.ts

@@ -21,7 +21,6 @@ export async function GET(request: Request) {
     if (response.status === 200) {
       return NextResponse.json(response.data)
     }
-
     return NextResponse.json({ error: 'Failed to fetch qna list' }, { status: response.status })
   } catch (error: any) {
     console.error('Error fetching qna list:', error.response.data)

src/app/api/qna/save/route.ts

@@ -4,12 +4,9 @@ import { NextResponse } from 'next/server'
 export async function POST(request: Request) {
   const formData = await request.formData()
   console.log('formData:: ', formData)
-  // const body = await request.json()
-  // console.log('body:: ', body)
 
   try {
     const response = await axios.post(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/qna/save`, formData)
-    console.log('response.data:: ', response.data)
 
     if (response.status === 200) {
       return NextResponse.json(response.data)

src/app/inquiry/list/page.tsx

@@ -1,11 +1,9 @@
-import ListForm from '@/components/inquiry/list/ListForm'
 import ListTable from '@/components/inquiry/list/ListTable'
 
 export default function page() {
   return (
     <>
       <div className="sale-contents">
-        <ListForm />
         <ListTable />
       </div>
     </>

src/components/inquiry/Detail.tsx

@@ -3,19 +3,13 @@
 import Answer from './Answer'
 import { useInquiry } from '@/hooks/useInquiry'
 import { useParams, useRouter } from 'next/navigation'
-import { useState } from 'react'
 
 export default function Detail() {
-  //todo: 답변 완료 표시를 위해 임시로 추가 해 놓은 state
-  // 추후에 api 작업 완료후 삭제
-  // 답변 완료 클래스 & 하단 답변내용 출력도
-
   const params = useParams()
   const id = params.id
 
   const { inquiryDetail, downloadFile } = useInquiry(Number(id), '5200')
   const router = useRouter()
-  const [inquiry, setInquiry] = useState<Boolean>(true)
 
   return (
     <>
@@ -39,15 +33,7 @@ export default function Detail() {
                 </tr>
                 <tr>
                   <th>作者</th>
-                  <td>Hong gi</td>
+                  <td>{inquiryDetail?.regNm}</td>
-                </tr>
-                <tr>
-                  <th>名前</th>
-                  <td>Kim</td>
-                </tr>
-                <tr>
-                  <th>番号</th>
-                  <td>070-1234-5678</td>
                 </tr>
                 <tr>
                   <th>販売店</th>
@@ -66,17 +52,9 @@ export default function Detail() {
           </div>
           <div className="inquiry-detail-data">
             <div className="inquiry-detail-category">
-              <span>屋根</span>
+              <span>{inquiryDetail?.qnaClsLrgCd}</span>
-              <span>適合性</span>
+              <span>{inquiryDetail?.qnaClsMidCd}</span>
-              <span>屋根材</span>
+              <span>{inquiryDetail?.qnaClsSmlCd}</span>
-            </div>
-            <div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
-            <div className="inquiry-detail-txt">
-              入力した内容が表示されます.
-              <br />
-              インストール可能であることを確認してください.
-              <br />
-              屋根の写真を添付しました.
             </div>
             <div className="inquiry-detail-tit">{inquiryDetail?.qstTitle}</div>
             <div className="inquiry-detail-txt">{inquiryDetail?.qstContents}</div>
@@ -91,6 +69,11 @@ export default function Detail() {
                   </button>
                 </li>
               ))}
+              <li className="file-item">
+                <button className="file-item-bx" onClick={() => downloadFile(Number(1))}>
+                  <div className="file-item-name">Test File</div>
+                </button>
+              </li>
             </ul>
           </div>
         </div>

src/components/inquiry/RegistForm.tsx

@@ -4,7 +4,7 @@ import { useInquiry } from '@/hooks/useInquiry'
 import { useSessionStore } from '@/store/session'
 import { InquiryRequest } from '@/types/Inquiry'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 export default function RegistForm() {
   const { saveInquiry, isSavingInquiry } = useInquiry()
@@ -20,14 +20,15 @@ export default function RegistForm() {
     compCd: '5200',
     siteTpCd: 'QC',
     qnaClsLrgCd: '',
-    qnaClsMidCd: 'B02',
+    qnaClsMidCd: '',
     qnaClsSmlCd: null,
     title: '',
-    contents: null,
+    contents: '',
     regId: 'X112',
     regUserNm: 'TEST',
     regUserTelNo: null,
-    storeId: null,
+    storeId: 'X112',
+    qstMail: '',
   })
 
   const [attachedFiles, setAttachedFiles] = useState<File[]>([])
@@ -45,12 +46,30 @@ export default function RegistForm() {
   }
 
   const handleSubmit = async () => {
-    if (confirm('お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。')) {
+    const formData = new FormData()
-      const res = await saveInquiry({ inquiryRequest, files: attachedFiles })
+    attachedFiles.forEach((file) => {
-      alert('保存されました。')
+      formData.append('files', file)
-      router.push(`/inquiry/${res.qnaNo}`)
+    })
-    }
+    Object.entries(inquiryRequest).forEach(([key, value]) => {
-    return
+      formData.append(key, value ?? '')
+    })
+
+    // FormData를 객체로 변환하여 확인
+    const formDataObj: Record<string, any> = {}
+    formData.forEach((value, key) => {
+      formDataObj[key] = value
+    })
+    console.log('formData contents:', formDataObj)
+
+    window.neoConfirm(
+      'お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。',
+      async () => {
+        const res = await saveInquiry(formData)
+        alert('保存されました。')
+        router.push(`/inquiry/${res.qnaNo}`)
+      },
+      () => null,
+    )
   }
 
   return (
@@ -62,30 +81,42 @@ export default function RegistForm() {
               お問い合わせタイプ <i className="import">*</i>
             </div>
             <div className="data-input">
-              <select className="select-form" name="" id="">
+              <select
-                <option value="">屋根適合</option>
+                className="select-form"
-                <option value="">屋根適合</option>
+                name=""
-                <option value="">屋根適合</option>
+                id="qnaClsLrgCd"
-                <option value="">屋根適合</option>
+                value={inquiryRequest.qnaClsLrgCd}
-                <option value="">屋根適合</option>
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsLrgCd: e.target.value })}
+              >
+                <option value="">選択してください</option>
+                <option value="A01">A01</option>
+                <option value="A01">屋根適合</option>
               </select>
             </div>
             <div className="data-input mt5">
-              <select className="select-form" name="" id="">
+              <select
-                <option value="">屋根適合</option>
+                className="select-form"
-                <option value="">屋根適合</option>
+                name=""
-                <option value="">屋根適合</option>
+                id="qnaClsMidCd"
-                <option value="">屋根適合</option>
+                value={inquiryRequest.qnaClsMidCd}
-                <option value="">屋根適合</option>
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
+              >
+                <option value="">選択してください</option>
+                <option value="B02">B02</option>
+                <option value="B02">屋根適合</option>
               </select>
             </div>
             <div className="data-input mt5">
-              <select className="select-form" name="" id="">
+              <select
-                <option value="">屋根適合</option>
+                className="select-form"
-                <option value="">屋根適合</option>
+                name=""
-                <option value="">屋根適合</option>
+                id="qnaClsSmlCd"
-                <option value="">屋根適合</option>
+                value={inquiryRequest.qnaClsSmlCd ?? ''}
-                <option value="">屋根適合</option>
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
+              >
+                <option value="">選択してください</option>
+                <option value="C05">C05</option>
+                <option value="C05">屋根適合</option>
               </select>
             </div>
           </div>
@@ -94,27 +125,36 @@ export default function RegistForm() {
               名前 <i className="import">*</i>
             </div>
             <div className="data-input">
-              <input className="input-frame" type="text" placeholder="名前を書いてください" />
+              <input
+                className="input-frame"
+                type="text"
+                placeholder="名前を書いてください"
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserNm: e.target.value })}
+              />
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">電話番号</div>
             <div className="data-input">
-              <input className="input-frame" type="text" placeholder="電話番号を書き留めてください" />
+              <input
+                className="input-frame"
+                type="text"
+                placeholder="電話番号を書き留めてください"
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserTelNo: e.target.value })}
+              />
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">
-              名前 <i className="import">*</i>
+              E-mail <i className="import">*</i>
             </div>
             <div className="data-input">
-              <input className="input-frame" type="text" placeholder="名前を書いてください" />
+              <input
-            </div>
+                className="input-frame"
-          </div>
+                type="text"
-          <div className="data-input-form-bx">
+                placeholder="E-mailを書いてください"
-            <div className="data-input-form-tit">電話番号</div>
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })}
-            <div className="data-input">
+              />
-              <input className="input-frame" type="text" placeholder="電話番号を書き留めてください" />
             </div>
           </div>
           <div className="data-input-form-bx">
@@ -122,7 +162,12 @@ export default function RegistForm() {
               お問い合わせタイトル <i className="import">*</i>
             </div>
             <div className="data-input">
-              <input className="input-frame" type="text" placeholder="お問い合わせタイトルを記入してください" />
+              <input
+                className="input-frame"
+                type="text"
+                placeholder="お問い合わせタイトルを記入してください"
+                onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })}
+              />
             </div>
           </div>
           <div className="data-input-form-bx">

src/components/inquiry/list/ListForm.tsx

@@ -5,8 +5,8 @@ import { useState } from 'react'
 
 export default function ListForm() {
   const router = useRouter()
-  const [searchKeyword, setSearchKeyword] = useState('')
   const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore()
+  const [searchKeyword, setSearchKeyword] = useState(inquiryListRequest.schTitle ?? '')
 
   const handleSearch = () => {
     if (searchKeyword.length >= 2) {

src/components/inquiry/list/ListTable.tsx

@@ -7,6 +7,7 @@ import { InquiryList } from '@/types/Inquiry'
 import { useRouter } from 'next/navigation'
 import { useInquiryFilterStore } from '@/store/inquiryFilterStore'
 import { useSessionStore } from '@/store/session'
+import ListForm from './ListForm'
 
 const badgeStyle = [
   {
@@ -29,14 +30,23 @@ export default function ListTable() {
   const { inquiryList } = useInquiry()
   const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore()
 
+  const [heldInquiryList, setHeldInquiryList] = useState<typeof inquiryList>([])
+
   const { session } = useSessionStore()
 
   useEffect(() => {
-    if (inquiryList.length !== 0) {
+    if (inquiryList.length > 0) {
-      const hasMoreItems = inquiryList[0].totCnt > offset + 10
+      if (offset === 0) {
-      setHasMore(hasMoreItems)
+        setHeldInquiryList(inquiryList)
+      } else {
+        const remainingList = heldInquiryList.slice(offset, offset + 10)
+        if (JSON.stringify(remainingList) !== JSON.stringify(inquiryList)) {
+          setHeldInquiryList((prev) => [...prev, ...inquiryList])
+        }
+      }
+      setHasMore(inquiryList.length > offset + 10)
     } else {
-      setHasMore(false)
+      setHeldInquiryList([])
     }
   }, [inquiryList, offset])
 
@@ -49,8 +59,19 @@ export default function ListTable() {
     setInquiryListRequest({ ...inquiryListRequest, startRow: offset, endRow: offset + 10 })
   }
 
+  const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    console.log(e.target.value)
+    setHeldInquiryList(inquiryList.filter((inquiry: InquiryList) => inquiry.answerYn === e.target.value))
+    if (e.target.value === '') {
+      setHeldInquiryList(inquiryList)
+    }
+  }
+
+  console.log('heldInquiryList:: ', heldInquiryList)
+
   return (
     <>
+      <ListForm />
       <div className="sale-frame">
         <div className="inquiry-table-filter">
           <div className="filter-check">
@@ -60,7 +81,7 @@ export default function ListTable() {
             </div>
           </div>
           <div className="filter-select">
-            <select className="select-form" name="" id="">
+            <select className="select-form" name="" id="" onChange={(e) => handleFilter(e)}>
               <option value="">全体</option>
               <option value="N">回答待ち</option>
               <option value="Y">回答完了</option>
@@ -69,11 +90,11 @@ export default function ListTable() {
         </div>
         <div className="inquiry-list-wrap">
           <div className="inquiry-list-tit">
-            合計 <span>{inquiryList.length}</span>個
+            合計 <span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>個
           </div>
           <ul className="inquiry-list">
-            {inquiryList.length > 0 &&
+            {heldInquiryList.length > 0 &&
-              inquiryList.map((inquiry: InquiryList) => (
+              heldInquiryList.map((inquiry: InquiryList) => (
                 <li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
                   <div className="inquiry-item-bx">
                     <div className="inquiry-item-category">{inquiry.qnaClsLrgCd}</div>

src/hooks/useInquiry.ts

@@ -12,10 +12,10 @@ export function useInquiry(
   inquiryDetail: Inquiry | null
   isLoadingInquiryDetail: boolean
   isSavingInquiry: boolean
-  saveInquiry: (params: { inquiryRequest: InquiryRequest; files: File[] }) => Promise<InquirySaveResponse>
+  saveInquiry: (formData: FormData) => Promise<InquirySaveResponse>
   downloadFile: (encodeFileNo: number) => Promise<File>
 } {
-  const { session } = useSessionStore()
+  // const { session } = useSessionStore()
   const queryClient = useQueryClient()
   const { inquiryListRequest } = useInquiryFilterStore()
 
@@ -41,6 +41,7 @@ export function useInquiry(
         const resp = await axiosInstance(null).get<{ data: Inquiry }>(`/api/qna/detail`, {
           params: { qnoNo, compCd, langCd: 'JA', loginId: 'x112' },
         })
+        console.log('resp.data.data:: ', resp.data.data)
         return resp.data.data
       } catch (error: any) {
         console.error(error.response)
@@ -51,15 +52,7 @@ export function useInquiry(
   })
 
   const { mutateAsync: saveInquiry, isPending: isSavingInquiry } = useMutation({
-    mutationFn: async ({ inquiryRequest, files }: { inquiryRequest: InquiryRequest; files: File[] }) => {
+    mutationFn: async (formData: FormData) => {
-      const formData = new FormData()
-      Object.entries(inquiryRequest).forEach(([key, value]) => {
-        formData.append(key, value ?? '')
-      })
-      files.forEach((file) => {
-        formData.append('files', file)
-      })
-
       const resp = await axiosInstance(null).post<{ data: InquirySaveResponse }>('/api/qna/save', formData)
       return resp.data.data
     },

src/types/Inquiry.ts

@@ -75,11 +75,12 @@ export type InquiryRequest = {
   qnaClsMidCd: string //qna CLS Mid Code
   qnaClsSmlCd: string | null //qna CLS Small Code
   title: string //title
-  contents: string | null //contents
+  contents: string //contents
   regId: string //registration Userid
-  storeId: string | null //store id
+  storeId: string //store id
   regUserNm: string //registration User name
   regUserTelNo: string | null //registration User tel number
+  qstMail: string //mail
 }
 
 export type InquirySaveResponse = {