diff --git a/package.json b/package.json
index 13cd1fe..8b70a72 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"@tanstack/react-query-devtools": "^5.71.0",
"axios": "^1.8.4",
"iron-session": "^8.0.4",
+ "lucide": "^0.503.0",
"mssql": "^11.0.1",
"next": "15.2.4",
"react": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 920681e..5fbe4ba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
iron-session:
specifier: ^8.0.4
version: 8.0.4
+ lucide:
+ specifier: ^0.503.0
+ version: 0.503.0
mssql:
specifier: ^11.0.1
version: 11.0.1
@@ -1100,6 +1103,9 @@ packages:
lodash.once@4.1.1:
resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+ lucide@0.503.0:
+ resolution: {integrity: sha512-ZAVlxBU4dbSUAVidb2eT0fH3bTtKCj7M2aZNAVsFOrcnazvYJFu6I8OxFE+Fmx5XNf22Cw4Ln3NBHfBxNfoFOw==}
+
math-intrinsics@1.1.0:
resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
engines: {node: '>= 0.4'}
@@ -2319,6 +2325,8 @@ snapshots:
lodash.once@4.1.1: {}
+ lucide@0.503.0: {}
+
math-intrinsics@1.1.0: {}
micromatch@4.0.8:
diff --git a/src/app/inquiry/page.tsx b/src/app/inquiry/page.tsx
new file mode 100644
index 0000000..0393249
--- /dev/null
+++ b/src/app/inquiry/page.tsx
@@ -0,0 +1,9 @@
+import InquiryList from '@/components/inquiry/InquiryList'
+
+export default function Inquiry() {
+ return (
+
+
+
+ )
+}
diff --git a/src/app/inquiry/write/page.tsx b/src/app/inquiry/write/page.tsx
new file mode 100644
index 0000000..2d1a122
--- /dev/null
+++ b/src/app/inquiry/write/page.tsx
@@ -0,0 +1,9 @@
+import InquiryWriteForm from '@/components/inquiry/InquiryWriteForm'
+
+export default function InquiryWrite() {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/inquiry/InquiryItems.tsx b/src/components/inquiry/InquiryItems.tsx
new file mode 100644
index 0000000..a69e84b
--- /dev/null
+++ b/src/components/inquiry/InquiryItems.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+export default function InquiryItems({ inquiryData }: { inquiryData: any }) {
+ return (
+
+ {inquiryData.map((item: any) => (
+
+
{item.title}
+
{item.content}
+
{item.createdAt}
+
{item.writer}
+
{item.category}
+ {item.file &&
{item.file}
}
+
+ ))}
+
+ )
+}
diff --git a/src/components/inquiry/InquiryList.tsx b/src/components/inquiry/InquiryList.tsx
new file mode 100644
index 0000000..3a1d14e
--- /dev/null
+++ b/src/components/inquiry/InquiryList.tsx
@@ -0,0 +1,159 @@
+'use client'
+import { useState } from 'react'
+import InquiryItems from './InquiryItems'
+import InquirySearch from './InquirySearch'
+
+const inquiryDummyData = [
+ {
+ id: 1,
+ title: 'post',
+ content: 'content',
+ file: 'file.png',
+ createdAt: '2024-01-01',
+ writer: 'writer',
+ category: 'A',
+ },
+ {
+ id: 2,
+ title: 'post',
+ content: 'content',
+ file: 'file.png',
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'B',
+ },
+ {
+ id: 3,
+ title: 'post',
+ content: 'content',
+ file: null,
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'C',
+ },
+ {
+ id: 4,
+ title: 'post',
+ content: 'content',
+ file: null,
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'A',
+ },
+ {
+ id: 5,
+ title: 'post',
+ content: 'content',
+ file: null,
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'B',
+ },
+ {
+ id: 6,
+ title: 'post',
+ content: 'content',
+ file: null,
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'C',
+ },
+ {
+ id: 7,
+ title: 'post',
+ content: 'content',
+ file: 'file.png',
+ createdAt: '2024-01-01',
+ writer: 'writer',
+ category: 'A',
+ },
+ {
+ id: 8,
+ title: 'post',
+ content: 'content',
+ file: 'file.png',
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'B',
+ },
+ {
+ id: 9,
+ title: 'post',
+ content: 'content',
+ file: null,
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'C',
+ },
+
+ {
+ id: 10,
+ title: 'post',
+ content: 'content',
+ file: 'file.png',
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'A',
+ },
+ {
+ id: 11,
+ title: 'post',
+ content: 'content',
+ file: 'file.png',
+ createdAt: '2024-01-01',
+ writer: 'writer',
+ category: 'B',
+ },
+ {
+ id: 12,
+ title: 'post',
+ content: 'content',
+ file: null,
+ createdAt: '2024-01-01',
+ writer: 'writer1',
+ category: 'C',
+ },
+]
+
+export default function InquiryList() {
+ const inquiryLength = inquiryDummyData.length
+ const [visibleItems, setVisibleItems] = useState(5)
+ const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
+
+ const handleLoadMore = () => {
+ setVisibleItems((prev) => Math.min(prev + 5, inquiryLength))
+ }
+
+ const handleSearch = (e: React.ChangeEvent) => {
+ console.log(e.target.value)
+ }
+
+ const filteredData = isMyPostsOnly
+ ? inquiryDummyData.filter((item) => item.writer === 'writer')
+ : inquiryDummyData
+
+ return (
+
+
+
+ setIsMyPostsOnly(e.target.checked)}
+ />
+
+
+
+
total {inquiryDummyData.length}
+
+ {visibleItems < filteredData.length &&
}
+
+ )
+}
diff --git a/src/components/inquiry/InquirySearch.tsx b/src/components/inquiry/InquirySearch.tsx
new file mode 100644
index 0000000..b074455
--- /dev/null
+++ b/src/components/inquiry/InquirySearch.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
+export default function InquirySearch({ handleSearch }: { handleSearch: (e: React.ChangeEvent) => void }) {
+ const router = useRouter()
+ return (
+
+
Inquiry Search
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/inquiry/InquiryWriteForm.tsx b/src/components/inquiry/InquiryWriteForm.tsx
new file mode 100644
index 0000000..8d1e0a5
--- /dev/null
+++ b/src/components/inquiry/InquiryWriteForm.tsx
@@ -0,0 +1,66 @@
+'use client'
+import { useState } from 'react'
+
+export interface InquiryFormData {
+ category: string
+ title: string
+ content: string
+ file: File[]
+}
+
+export default function InquiryWriteForm() {
+ const [formData, setFormData] = useState({
+ category: 'A',
+ title: '',
+ content: '',
+ file: [],
+ })
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const files = Array.from(e.target.files || [])
+ setFormData({ ...formData, file: files })
+ }
+
+ const handleFileDelete = (fileToDelete: File) => {
+ setFormData({ ...formData, file: formData.file.filter((f) => f !== fileToDelete) })
+ }
+
+ return (
+
+ )
+}