feat: implemnet Inquiry list & detail page's events

src/app/inquiry/[id]/page.tsx

@@ -0,0 +1,9 @@
+import InquiryDetail from '@/components/inquiry/InquiryDetail'
+
+export default function InquiryDetails() {
+  return (
+    <div>
+      <InquiryDetail />
+    </div>
+  )
+}

src/components/inquiry/InquiryDetail.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+
+export default function InquiryDetail() {
+  const params = useParams()
+  const id = params.id
+  return (
+    <div>
+      <h1>InquiryDetail</h1>
+      <p>{id}</p>
+    </div>
+  )
+}

src/components/inquiry/InquiryItems.tsx

@@ -1,10 +1,13 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+
 export default function InquiryItems({ inquiryData }: { inquiryData: any }) {
+  const router = useRouter()
   return (
     <div>
       {inquiryData.map((item: any) => (
-        <div key={item.id}>
+        <div key={item.id} onClick={() => router.push(`/inquiry/${item.id}`)}>
           <div>{item.title}</div>
           <div>{item.content}</div>
           <div>{item.createdAt}</div>

src/components/inquiry/InquiryList.tsx

@@ -116,44 +116,49 @@ const inquiryDummyData = [
 ]
 
 export default function InquiryList() {
-  const inquiryLength = inquiryDummyData.length
   const [visibleItems, setVisibleItems] = useState(5)
   const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
+  const [category, setCategory] = useState('')
+  const [search, setSearch] = useState('')
+
+  const inquriyData = () => {
+    if (isMyPostsOnly) {
+      return inquiryDummyData.filter((item) => item.writer === 'writer')
+    }
+    if (category.trim().length > 0) {
+      return inquiryDummyData.filter((item) => item.category === category)
+    }
+    if (search.trim().length > 0) {
+      return inquiryDummyData.filter((item) => item.title.includes(search))
+    }
+    return inquiryDummyData
+  }
 
   const handleLoadMore = () => {
-    setVisibleItems((prev) => Math.min(prev + 5, inquiryLength))
+    setVisibleItems((prev) => Math.min(prev + 5, inquriyData().length))
   }
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    console.log(e.target.value)
+    setSearch(e.target.value)
   }
 
-  const filteredData = isMyPostsOnly 
-    ? inquiryDummyData.filter((item) => item.writer === 'writer')
-    : inquiryDummyData
-
   return (
     <div className="flex flex-col gap-2">
       <InquirySearch handleSearch={handleSearch} />
       <div className="flex items-center gap-2">
-        <input 
-          type="checkbox" 
-          id="myPosts"
-          checked={isMyPostsOnly}
-          onChange={(e) => setIsMyPostsOnly(e.target.checked)} 
-        />
-        <label htmlFor="myPosts">
-            my posts
-        </label>
+        <input type="checkbox" id="myPosts" checked={isMyPostsOnly} onChange={(e) => setIsMyPostsOnly(e.target.checked)} />
+        <label htmlFor="myPosts">my posts</label>
       </div>
-      <select>
+      <select onChange={(e) => setCategory(e.target.value)}>
+        <option value="">All</option>
         <option value="A">A</option>
         <option value="B">B</option>
         <option value="C">C</option>
       </select>
-      <span>total {inquiryDummyData.length}</span>
-      <InquiryItems inquiryData={filteredData.slice(0, visibleItems)} />
-      {visibleItems < filteredData.length && <button onClick={handleLoadMore}>more</button>}
+      <span>total {inquriyData().length}</span>
+      <InquiryItems inquiryData={inquriyData().slice(0, visibleItems)} />
+      {visibleItems < inquriyData().length && <button onClick={handleLoadMore}>more</button>}
     </div>
   )
 }
+

src/components/inquiry/InquirySearch.tsx

@@ -7,7 +7,6 @@ export default function InquirySearch({ handleSearch }: { handleSearch: (e: Reac
   const router = useRouter()
   return (
     <div>
-      <h1>Inquiry Search</h1>
       <button onClick={() => router.push('/inquiry/write')}>write 1:1 Inquiry {'>'}</button>
       <div className="flex items-center gap-2">
         <input type="text" placeholder="Search" onChange={handleSearch} />

src/components/inquiry/InquiryWriteForm.tsx

@@ -1,5 +1,7 @@
 'use client'
+
 import { useState } from 'react'
+import { useRouter } from 'next/navigation'
 
 export interface InquiryFormData {
   category: string
@@ -9,6 +11,7 @@ export interface InquiryFormData {
 }
 
 export default function InquiryWriteForm() {
+  const router = useRouter()
   const [formData, setFormData] = useState<InquiryFormData>({
     category: 'A',
     title: '',
@@ -17,17 +20,23 @@ export default function InquiryWriteForm() {
   })
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || [])
-    setFormData({ ...formData, file: files })
+    const file = Array.from(e.target.files || [])
+    setFormData({ ...formData, file: [...formData.file, ...file] })
   }
 
   const handleFileDelete = (fileToDelete: File) => {
     setFormData({ ...formData, file: formData.file.filter((f) => f !== fileToDelete) })
   }
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    console.log('submit: ', formData)
+    router.push(`/inquiry`)
+  }
+
   return (
     <div>
-      <form>
+      <form onSubmit={handleSubmit}>
         <div>
           <label htmlFor="category">category</label>
           <select id="category" onChange={(e) => setFormData({ ...formData, category: e.target.value })}>