From a684a3e5be5ccb2efa656e630ddc35033c4a3334 Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Wed, 23 Apr 2025 11:15:10 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20Inquiry=20sample=20page=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문의 목록 페이지
- 문의 작성 페이지
---
 package.json                                |   1 +
 pnpm-lock.yaml                              |   8 +
 src/app/inquiry/page.tsx                    |   9 ++
 src/app/inquiry/write/page.tsx              |   9 ++
 src/components/inquiry/InquiryItems.tsx     |  18 +++
 src/components/inquiry/InquiryList.tsx      | 159 ++++++++++++++++++++
 src/components/inquiry/InquirySearch.tsx    |  20 +++
 src/components/inquiry/InquiryWriteForm.tsx |  66 ++++++++
 8 files changed, 290 insertions(+)
 create mode 100644 src/app/inquiry/page.tsx
 create mode 100644 src/app/inquiry/write/page.tsx
 create mode 100644 src/components/inquiry/InquiryItems.tsx
 create mode 100644 src/components/inquiry/InquiryList.tsx
 create mode 100644 src/components/inquiry/InquirySearch.tsx
 create mode 100644 src/components/inquiry/InquiryWriteForm.tsx

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 (
+    <div>
+      <InquiryList />
+    </div>
+  )
+}
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 (
+    <div>
+      <InquiryWriteForm />
+    </div>
+  )
+}
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 (
+    <div>
+      {inquiryData.map((item: any) => (
+        <div key={item.id}>
+          <div>{item.title}</div>
+          <div>{item.content}</div>
+          <div>{item.createdAt}</div>
+          <div>{item.writer}</div>
+          <div>{item.category}</div>
+          {item.file && <div>{item.file}</div>}
+        </div>
+      ))}
+    </div>
+  )
+}
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<HTMLInputElement>) => {
+    console.log(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>
+      </div>
+      <select>
+        <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>}
+    </div>
+  )
+}
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<HTMLInputElement>) => void }) {
+  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} />
+        <button>
+          <Search />
+        </button>
+      </div>
+    </div>
+  )
+}
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<InquiryFormData>({
+    category: 'A',
+    title: '',
+    content: '',
+    file: [],
+  })
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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 (
+    <div>
+      <form>
+        <div>
+          <label htmlFor="category">category</label>
+          <select id="category" onChange={(e) => setFormData({ ...formData, category: e.target.value })}>
+            <option value="A">A</option>
+            <option value="B">B</option>
+            <option value="C">C</option>
+          </select>
+        </div>
+        <div>
+          <label htmlFor="title">title</label>
+          <input type="text" id="title" onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
+        </div>
+        <div>
+          <label htmlFor="content">content</label>
+          <textarea id="content" onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
+        </div>
+        <div>
+          <label htmlFor="file">file</label>
+          <input type="file" id="file" accept="image/*" capture="environment" onChange={handleFileChange} />
+          <div>
+            <p>file count: {formData.file.length}</p>
+            {formData.file.map((f) => (
+              <div key={f.name}>
+                <div>{f.name}</div>
+                <div>
+                  <button onClick={() => handleFileDelete(f)}>delete</button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <button type="submit">submit</button>
+      </form>
+    </div>
+  )
+}
-- 
2.47.2


From ab1e89f5d62db6c3aede634bb3cec43afaeb64ac Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Fri, 25 Apr 2025 11:00:09 +0900
Subject: [PATCH 2/6] feat: implemnet Inquiry list & detail page's events

---
 src/app/inquiry/[id]/page.tsx               |  9 +++++
 src/components/inquiry/InquiryDetail.tsx    | 14 +++++++
 src/components/inquiry/InquiryItems.tsx     |  5 ++-
 src/components/inquiry/InquiryList.tsx      | 45 ++++++++++++---------
 src/components/inquiry/InquirySearch.tsx    |  1 -
 src/components/inquiry/InquiryWriteForm.tsx | 15 +++++--
 6 files changed, 64 insertions(+), 25 deletions(-)
 create mode 100644 src/app/inquiry/[id]/page.tsx
 create mode 100644 src/components/inquiry/InquiryDetail.tsx

diff --git a/src/app/inquiry/[id]/page.tsx b/src/app/inquiry/[id]/page.tsx
new file mode 100644
index 0000000..60271a3
--- /dev/null
+++ b/src/app/inquiry/[id]/page.tsx
@@ -0,0 +1,9 @@
+import InquiryDetail from '@/components/inquiry/InquiryDetail'
+
+export default function InquiryDetails() {
+  return (
+    <div>
+      <InquiryDetail />
+    </div>
+  )
+}
diff --git a/src/components/inquiry/InquiryDetail.tsx b/src/components/inquiry/InquiryDetail.tsx
new file mode 100644
index 0000000..dc1b325
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/inquiry/InquiryItems.tsx b/src/components/inquiry/InquiryItems.tsx
index a69e84b..bc38ad6 100644
--- a/src/components/inquiry/InquiryItems.tsx
+++ b/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>
diff --git a/src/components/inquiry/InquiryList.tsx b/src/components/inquiry/InquiryList.tsx
index 3a1d14e..b70ffd0 100644
--- a/src/components/inquiry/InquiryList.tsx
+++ b/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>
   )
 }
+
diff --git a/src/components/inquiry/InquirySearch.tsx b/src/components/inquiry/InquirySearch.tsx
index b074455..894962f 100644
--- a/src/components/inquiry/InquirySearch.tsx
+++ b/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} />
diff --git a/src/components/inquiry/InquiryWriteForm.tsx b/src/components/inquiry/InquiryWriteForm.tsx
index 8d1e0a5..c2db5e7 100644
--- a/src/components/inquiry/InquiryWriteForm.tsx
+++ b/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 })}>
-- 
2.47.2


From 37a40989ddbeace1122512287069c8f9cd531cab Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Fri, 25 Apr 2025 16:29:59 +0900
Subject: [PATCH 3/6] feat: Add scroll to top button at InquiryList page

---
 src/components/inquiry/InquiryDetail.tsx | 59 ++++++++++++++++++++++++
 src/components/inquiry/InquiryList.tsx   | 10 +++-
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/src/components/inquiry/InquiryDetail.tsx b/src/components/inquiry/InquiryDetail.tsx
index dc1b325..b153f35 100644
--- a/src/components/inquiry/InquiryDetail.tsx
+++ b/src/components/inquiry/InquiryDetail.tsx
@@ -2,6 +2,24 @@
 
 import { useParams } from 'next/navigation'
 
+const inquiryDummyData = {
+  writer: {
+    name: 'writer',
+    email: 'writer@example.com',
+  },
+  title: 'title',
+  content: 'content',
+  files: ['file1.jpg', 'file2.jpg', 'file3.jpg'],
+  createdAt: '2021-01-01',
+  answer: {
+    writer: '佐藤一貴',
+    content:
+      '一次側接続は、自動切替開閉器と住宅分電盤主幹ブレーカの間に蓄電システムブレーカを配線する方法です。\n二次側接続は、住宅分電盤主幹ブレ―カの二次側に蓄電システムブレーカを接続する',
+    createdAt: '2021-01-01 12:00:00',
+    files: ['file4.jpg', 'file5.jpg', 'file6.jpg'],
+  },
+}
+
 export default function InquiryDetail() {
   const params = useParams()
   const id = params.id
@@ -9,6 +27,47 @@ export default function InquiryDetail() {
     <div>
       <h1>InquiryDetail</h1>
       <p>{id}</p>
+      <div className="mt-5">
+        <div className="grid grid-cols-2 gap-4">
+          <p>writer</p>
+          <p>{inquiryDummyData.writer.name}</p>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <p>email</p>
+          <p>{inquiryDummyData.writer.email}</p>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <p>title</p>
+          <p>{inquiryDummyData.title}</p>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <p>content</p>
+          <p>{inquiryDummyData.content}</p>
+        </div>
+        <div>
+          <p>files</p>
+          <div className="flex flex-col gap-2">
+            {inquiryDummyData.files.map((file) => (
+              <span key={file}>{file}</span>
+            ))}
+          </div>
+        </div>
+        {inquiryDummyData.answer && (
+          <div className="mt-4">
+            <h1>Reply: Hanwha Japan</h1>
+            <div>
+              <p>{inquiryDummyData.answer.writer}</p>
+              <p>{inquiryDummyData.answer.createdAt}</p>
+              <p>{inquiryDummyData.answer.content}</p>
+              <div className="flex flex-col gap-2">
+                {inquiryDummyData.answer.files.map((file) => (
+                  <span key={file}>{file}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/src/components/inquiry/InquiryList.tsx b/src/components/inquiry/InquiryList.tsx
index b70ffd0..ec886a9 100644
--- a/src/components/inquiry/InquiryList.tsx
+++ b/src/components/inquiry/InquiryList.tsx
@@ -142,6 +142,10 @@ export default function InquiryList() {
     setSearch(e.target.value)
   }
 
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
   return (
     <div className="flex flex-col gap-2">
       <InquirySearch handleSearch={handleSearch} />
@@ -157,7 +161,11 @@ export default function InquiryList() {
       </select>
       <span>total {inquriyData().length}</span>
       <InquiryItems inquiryData={inquriyData().slice(0, visibleItems)} />
-      {visibleItems < inquriyData().length && <button onClick={handleLoadMore}>more</button>}
+      {visibleItems < inquriyData().length ? (
+        <button onClick={handleLoadMore}>more</button>
+      ) : (
+        <button onClick={handleScrollToTop}>top</button>
+      )}
     </div>
   )
 }
-- 
2.47.2


From 08d99fb4e725b489950b6d031b963dd042b7e5df Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Tue, 29 Apr 2025 10:52:49 +0900
Subject: [PATCH 4/6] feat: Implement survey-sale, inquiry UI base components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 조사매물, 1:1 문의 목록 더보기 버튼 구현
- 조사매물, 1:1 문의 목록, 상세 페이지, 작성 페이지 샘플 구현
---
 src/api/survey.ts                             | 66 +++++++++++++
 src/app/api/survey/[id]/route.ts              | 28 ++++++
 src/app/api/survey/route.ts                   | 16 +++
 src/app/survey/[id]/page.tsx                  |  9 ++
 src/app/survey/page.tsx                       | 10 ++
 src/app/survey/write/page.tsx                 |  9 ++
 src/components/LoadMoreButton.tsx             | 11 +++
 .../{InquirySearch.tsx => InquiryFilter.tsx}  |  3 +-
 src/components/inquiry/InquiryList.tsx        | 17 ++--
 src/components/inquiry/InquiryWriteForm.tsx   | 65 ++++++-------
 src/components/survey/SurveyFilter.tsx        | 20 ++++
 src/components/survey/SurveySaleDetail.tsx    |  4 +
 src/components/survey/SurveySaleList.tsx      | 54 +++++++++++
 src/components/survey/SurveySaleWriteForm.tsx | 97 +++++++++++++++++++
 src/hooks/useSurvey.ts                        | 51 ++++++++++
 15 files changed, 416 insertions(+), 44 deletions(-)
 create mode 100644 src/api/survey.ts
 create mode 100644 src/app/api/survey/[id]/route.ts
 create mode 100644 src/app/api/survey/route.ts
 create mode 100644 src/app/survey/[id]/page.tsx
 create mode 100644 src/app/survey/page.tsx
 create mode 100644 src/app/survey/write/page.tsx
 create mode 100644 src/components/LoadMoreButton.tsx
 rename src/components/inquiry/{InquirySearch.tsx => InquiryFilter.tsx} (88%)
 create mode 100644 src/components/survey/SurveyFilter.tsx
 create mode 100644 src/components/survey/SurveySaleDetail.tsx
 create mode 100644 src/components/survey/SurveySaleList.tsx
 create mode 100644 src/components/survey/SurveySaleWriteForm.tsx
 create mode 100644 src/hooks/useSurvey.ts

diff --git a/src/api/survey.ts b/src/api/survey.ts
new file mode 100644
index 0000000..e004930
--- /dev/null
+++ b/src/api/survey.ts
@@ -0,0 +1,66 @@
+import { axiosInstance } from '@/libs/axios'
+
+export interface Survey {
+  id: number
+  title: string
+  content: string
+  created_at: string
+  updated_at: string
+  checked: string[]
+  otherText: string
+}
+
+export const surveyApi = {
+  create: async (data: Survey): Promise<Survey> => {
+    try {
+      const response = await axiosInstance.post<Survey>('/api/survey', data)
+      return response.data
+    } catch (error) {
+      console.error('Error creating survey:', error)
+      throw error
+    }
+  },
+
+  getList: async (): Promise<Survey[]> => {
+    try {
+      const response = await axiosInstance.get<Survey[]>('/api/survey')
+      return response.data
+    } catch (error) {
+      console.error('Error fetching survey list:', error)
+      return []
+    }
+  },
+
+  getDetail: async (id?: number): Promise<Survey> => {
+    try {
+      if (id) {
+        const response = await axiosInstance.get<Survey>(`/api/survey/${id}`)
+        return response.data
+      } else {
+        return {} as Survey
+      }
+    } catch (error) {
+      console.error('Error fetching survey detail:', error)
+      throw error
+    }
+  },
+
+  update: async (id: number, data: Survey): Promise<Survey> => {
+    try {
+      const response = await axiosInstance.put<Survey>(`/api/survey/${id}`, data)
+      return response.data
+    } catch (error) {
+      console.error('Error updating survey:', error)
+      throw error
+    }
+  },
+
+  delete: async (id: number): Promise<void> => {
+    try {
+      await axiosInstance.delete(`/api/survey/${id}`)
+    } catch (error) {
+      console.error('Error deleting survey:', error)
+      throw error
+    }
+  },
+}
diff --git a/src/app/api/survey/[id]/route.ts b/src/app/api/survey/[id]/route.ts
new file mode 100644
index 0000000..b8a989a
--- /dev/null
+++ b/src/app/api/survey/[id]/route.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request, { params }: { params: { id: string } }) {
+  const { id } = params
+  // @ts-ignore
+  const survey = await prisma.SD_SERVEY_SALES.findUnique({
+    where: { id: parseInt(id) },
+  })
+  return NextResponse.json(survey)
+}
+
+export async function PUT(request: Request, { params }: { params: { id: string } }) {
+  const { id } = params
+  const body = await request.json()
+  // @ts-ignore
+  const survey = await prisma.SD_SERVEY_SALES.update({
+    where: { id: parseInt(id) },
+    data: body,
+  })
+  return NextResponse.json(survey)
+}
+
+export async function DELETE(request: Request, { params }: { params: { id: string } }) {
+  const { id } = params
+  // @ts-ignore
+  await prisma.SD_SERVEY_SALES.delete({ where: { id: parseInt(id) } })
+  return NextResponse.json({ message: 'Survey deleted successfully' })
+}
diff --git a/src/app/api/survey/route.ts b/src/app/api/survey/route.ts
new file mode 100644
index 0000000..a8b6b7e
--- /dev/null
+++ b/src/app/api/survey/route.ts
@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  // @ts-ignore
+  const surveys = await prisma.SD_SERVEY_SALES.findMany()
+  return NextResponse.json(surveys)
+}
+
+export async function POST(request: Request) {
+    const body = await request.json()
+  // @ts-ignore
+  const survey = await prisma.SD_SERVEY_SALES.create({
+    data: body,
+  })
+  return NextResponse.json(survey)
+}
diff --git a/src/app/survey/[id]/page.tsx b/src/app/survey/[id]/page.tsx
new file mode 100644
index 0000000..234ee63
--- /dev/null
+++ b/src/app/survey/[id]/page.tsx
@@ -0,0 +1,9 @@
+import SurveySaleDetail from '@/components/survey/SurveySaleDetail'
+
+export default function SurveyDetailPage() {
+  return (
+    <div>
+      <SurveySaleDetail />
+    </div>
+  )
+}
diff --git a/src/app/survey/page.tsx b/src/app/survey/page.tsx
new file mode 100644
index 0000000..d716d96
--- /dev/null
+++ b/src/app/survey/page.tsx
@@ -0,0 +1,10 @@
+import SurveySaleList from '@/components/survey/SurveySaleList'
+
+export default function SurveyPage() {
+  return (
+    <div>
+      <SurveySaleList />
+    </div>
+  )
+}
+
diff --git a/src/app/survey/write/page.tsx b/src/app/survey/write/page.tsx
new file mode 100644
index 0000000..925b622
--- /dev/null
+++ b/src/app/survey/write/page.tsx
@@ -0,0 +1,9 @@
+import SurveySaleWriteForm from '@/components/survey/SurveySaleWriteForm'
+
+export default function SurveyWritePage() {
+  return (
+    <div>
+      <SurveySaleWriteForm />
+    </div>
+  )
+}
diff --git a/src/components/LoadMoreButton.tsx b/src/components/LoadMoreButton.tsx
new file mode 100644
index 0000000..0a92e1b
--- /dev/null
+++ b/src/components/LoadMoreButton.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+interface LoadMoreButtonProps {
+  hasMore: boolean
+  onLoadMore: () => void
+  onScrollToTop: () => void
+}
+
+export default function LoadMoreButton({ hasMore, onLoadMore, onScrollToTop }: LoadMoreButtonProps) {
+  return <div>{hasMore ? <button onClick={onLoadMore}>Load More</button> : <button onClick={onScrollToTop}>Scroll to Top</button>}</div>
+}
diff --git a/src/components/inquiry/InquirySearch.tsx b/src/components/inquiry/InquiryFilter.tsx
similarity index 88%
rename from src/components/inquiry/InquirySearch.tsx
rename to src/components/inquiry/InquiryFilter.tsx
index 894962f..c3911a2 100644
--- a/src/components/inquiry/InquirySearch.tsx
+++ b/src/components/inquiry/InquiryFilter.tsx
@@ -3,7 +3,8 @@
 import { Search } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 
-export default function InquirySearch({ handleSearch }: { handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void }) {
+
+export default function InquiryFilter({ handleSearch }: { handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void }) {
   const router = useRouter()
   return (
     <div>
diff --git a/src/components/inquiry/InquiryList.tsx b/src/components/inquiry/InquiryList.tsx
index ec886a9..f65478b 100644
--- a/src/components/inquiry/InquiryList.tsx
+++ b/src/components/inquiry/InquiryList.tsx
@@ -1,7 +1,8 @@
 'use client'
 import { useState } from 'react'
 import InquiryItems from './InquiryItems'
-import InquirySearch from './InquirySearch'
+import InquiryFilter from './InquiryFilter'
+import LoadMoreButton from '../LoadMoreButton'
 
 const inquiryDummyData = [
   {
@@ -120,6 +121,7 @@ export default function InquiryList() {
   const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
   const [category, setCategory] = useState('')
   const [search, setSearch] = useState('')
+  const [hasMore, setHasMore] = useState(inquiryDummyData.length > 5)
 
   const inquriyData = () => {
     if (isMyPostsOnly) {
@@ -135,7 +137,9 @@ export default function InquiryList() {
   }
 
   const handleLoadMore = () => {
-    setVisibleItems((prev) => Math.min(prev + 5, inquriyData().length))
+    const newVisibleItems = Math.min(visibleItems + 5, inquriyData().length)
+    setVisibleItems(newVisibleItems)
+    setHasMore(newVisibleItems < inquriyData().length)
   }
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -148,7 +152,7 @@ export default function InquiryList() {
 
   return (
     <div className="flex flex-col gap-2">
-      <InquirySearch handleSearch={handleSearch} />
+      <InquiryFilter 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>
@@ -161,12 +165,7 @@ export default function InquiryList() {
       </select>
       <span>total {inquriyData().length}</span>
       <InquiryItems inquiryData={inquriyData().slice(0, visibleItems)} />
-      {visibleItems < inquriyData().length ? (
-        <button onClick={handleLoadMore}>more</button>
-      ) : (
-        <button onClick={handleScrollToTop}>top</button>
-      )}
+      <LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
     </div>
   )
 }
-
diff --git a/src/components/inquiry/InquiryWriteForm.tsx b/src/components/inquiry/InquiryWriteForm.tsx
index c2db5e7..047e4d0 100644
--- a/src/components/inquiry/InquiryWriteForm.tsx
+++ b/src/components/inquiry/InquiryWriteForm.tsx
@@ -28,48 +28,45 @@ export default function InquiryWriteForm() {
     setFormData({ ...formData, file: formData.file.filter((f) => f !== fileToDelete) })
   }
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+  const handleSubmit = () => {
     console.log('submit: ', formData)
-    router.push(`/inquiry`)
+    // router.push(`/inquiry`)
   }
 
   return (
     <div>
-      <form onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="category">category</label>
+        <select id="category" onChange={(e) => setFormData({ ...formData, category: e.target.value })}>
+          <option value="A">A</option>
+          <option value="B">B</option>
+          <option value="C">C</option>
+        </select>
+      </div>
+      <div>
+        <label htmlFor="title">title</label>
+        <input type="text" id="title" onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
+      </div>
+      <div>
+        <label htmlFor="content">content</label>
+        <textarea id="content" onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
+      </div>
+      <div>
+        <label htmlFor="file">file</label>
+        <input type="file" id="file" accept="image/*" capture="environment" onChange={handleFileChange} />
         <div>
-          <label htmlFor="category">category</label>
-          <select id="category" onChange={(e) => setFormData({ ...formData, category: e.target.value })}>
-            <option value="A">A</option>
-            <option value="B">B</option>
-            <option value="C">C</option>
-          </select>
-        </div>
-        <div>
-          <label htmlFor="title">title</label>
-          <input type="text" id="title" onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
-        </div>
-        <div>
-          <label htmlFor="content">content</label>
-          <textarea id="content" onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
-        </div>
-        <div>
-          <label htmlFor="file">file</label>
-          <input type="file" id="file" accept="image/*" capture="environment" onChange={handleFileChange} />
-          <div>
-            <p>file count: {formData.file.length}</p>
-            {formData.file.map((f) => (
-              <div key={f.name}>
-                <div>{f.name}</div>
-                <div>
-                  <button onClick={() => handleFileDelete(f)}>delete</button>
-                </div>
+          <p>file count: {formData.file.length}</p>
+          {formData.file.map((f) => (
+            <div key={f.name}>
+              <div>{f.name}</div>
+              <div>
+                <button onClick={() => handleFileDelete(f)}>delete</button>
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
-        <button type="submit">submit</button>
-      </form>
+      </div>
+      <button onClick={handleSubmit}>submit</button>
     </div>
   )
 }
diff --git a/src/components/survey/SurveyFilter.tsx b/src/components/survey/SurveyFilter.tsx
new file mode 100644
index 0000000..8b03add
--- /dev/null
+++ b/src/components/survey/SurveyFilter.tsx
@@ -0,0 +1,20 @@
+import { Search } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
+export default function SurveyFilter({ handleSearch, handleMyPosts }: { handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void, handleMyPosts: () => void }) {
+  const router = useRouter()
+  return (
+    <div>
+      <button onClick={() => router.push('/survey/write')}>write survey {'>'}</button>
+      <div className="flex items-center gap-2">
+        <input type="text" placeholder="Search" onChange={handleSearch} />
+        <button>
+          <Search />
+        </button>
+      </div>
+      <div className="flex items-center gap-2">
+        <button onClick={handleMyPosts}>my posts</button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/survey/SurveySaleDetail.tsx b/src/components/survey/SurveySaleDetail.tsx
new file mode 100644
index 0000000..63c7f32
--- /dev/null
+++ b/src/components/survey/SurveySaleDetail.tsx
@@ -0,0 +1,4 @@
+export default function SurveySaleDetail() {
+  return <div>SurveySaleDetail</div>
+}
+
diff --git a/src/components/survey/SurveySaleList.tsx b/src/components/survey/SurveySaleList.tsx
new file mode 100644
index 0000000..f9c909f
--- /dev/null
+++ b/src/components/survey/SurveySaleList.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { useServey } from '@/hooks/useSurvey'
+import LoadMoreButton from '@/components/LoadMoreButton'
+import { useState } from 'react'
+import SurveyFilter from './SurveyFilter'
+
+export default function SurveySaleList() {
+  const { surveyList, isLoadingSurveyList } = useServey()
+  const [search, setSearch] = useState('')
+  const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
+  const [hasMore, setHasMore] = useState(surveyList.length > 5)
+  const [visibleItems, setVisibleItems] = useState(5)
+
+  const surveyData = () => {
+    if (search.trim().length > 0) {
+      return surveyList.filter((survey) => survey.title.includes(search))
+    }
+    return surveyList
+  }
+
+  const handleLoadMore = () => {
+    const newVisibleItems = Math.min(visibleItems + 5, surveyData().length)
+    setVisibleItems(newVisibleItems)
+    setHasMore(newVisibleItems < surveyData().length)
+  }
+
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value)
+  }
+
+  if (isLoadingSurveyList) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div>
+      <SurveyFilter handleSearch={handleSearch} handleMyPosts={() => setIsMyPostsOnly(!isMyPostsOnly)} />
+      {surveyList.slice(0, visibleItems).map((survey) => (
+        <div key={survey.id}>
+          <h2>{survey.title}</h2>
+          <p>{survey.content}</p>
+          <p>{survey.created_at}</p>
+          <p>{survey.updated_at}</p>
+        </div>
+      ))}
+      <LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
+    </div>
+  )
+}
diff --git a/src/components/survey/SurveySaleWriteForm.tsx b/src/components/survey/SurveySaleWriteForm.tsx
new file mode 100644
index 0000000..1394c64
--- /dev/null
+++ b/src/components/survey/SurveySaleWriteForm.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { Survey } from '@/api/survey'
+import { useState } from 'react'
+import { useServey } from '@/hooks/useSurvey'
+import { useRouter } from 'next/navigation'
+
+export default function SurveySaleWriteForm() {
+  const router = useRouter()
+  const { createSurvey, isCreatingSurvey } = useServey()
+
+  const [formData, setFormData] = useState<Survey>({
+    id: 0,
+    title: '',
+    content: '',
+    created_at: '',
+    updated_at: '',
+    checked: [],
+    otherText: '',
+  })
+
+  const checkboxOptions = ['A', 'B', 'C', 'D', '기타']
+
+  const handleSubmit = () => {
+    console.log('form:: ', formData)
+    // createSurvey(formData)
+    // router.push('/survey')
+  }
+
+  const handleCheckboxChange = (option: string) => {
+    if (formData.checked.includes(option)) {
+      setFormData({
+        ...formData,
+        checked: formData.checked.filter((item) => item !== option),
+        ...(option === '기타' ? { otherText: '' } : {}),
+      })
+    } else {
+      setFormData({
+        ...formData,
+        checked: [...formData.checked, option],
+      })
+    }
+  }
+
+  const handleOtherTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      otherText: e.target.value,
+      checked: formData.checked.includes('기타') ? formData.checked : [...formData.checked, '기타'],
+    })
+  }
+
+  if (isCreatingSurvey) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div>
+      <div>
+        <label htmlFor="title">title</label>
+        <input type="text" id="title" value={formData.title} onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
+      </div>
+      <div>
+        <label htmlFor="content">content</label>
+        <textarea id="content" value={formData.content} onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
+      </div>
+      <div>
+        {checkboxOptions.map((option) => (
+          <div key={option}>
+            <input
+              type="checkbox"
+              id={option}
+              checked={formData.checked.includes(option)}
+              onChange={() => handleCheckboxChange(option)}
+              tabIndex={0}
+              aria-label={option}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') handleCheckboxChange(option)
+              }}
+            />
+            <label htmlFor={option} className="cursor-pointer">
+              {option}
+            </label>
+            {option === '기타' && formData.checked.includes('기타') && (
+              <input type="text" value={formData.otherText || ''} onChange={handleOtherTextChange} placeholder="기타 입력" aria-label="기타 입력" />
+            )}
+          </div>
+        ))}
+      </div>
+      <div>
+        <button onClick={handleSubmit} className="cursor-pointer">
+          save
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/hooks/useSurvey.ts b/src/hooks/useSurvey.ts
new file mode 100644
index 0000000..f3931f4
--- /dev/null
+++ b/src/hooks/useSurvey.ts
@@ -0,0 +1,51 @@
+import { Survey, surveyApi } from '@/api/survey'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+export function useServey(id?: number) {
+  const queryClient = useQueryClient()
+
+  const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
+    queryKey: ['survey', 'list'],
+    queryFn: () => surveyApi.getList(),
+  })
+
+  const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
+    queryKey: ['survey', id],
+    queryFn: () => surveyApi.getDetail(id),
+    enabled: !!id,
+  })
+
+  const { mutate: createSurvey, isPending: isCreatingSurvey } = useMutation({
+    mutationFn: (survey: Survey) => surveyApi.create(survey),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+    },
+  })
+
+  const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
+    mutationFn: (survey: Survey) => surveyApi.update(survey.id, survey),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+    },
+  })
+
+  const { mutate: deleteSurvey, isPending: isDeletingSurvey } = useMutation({
+    mutationFn: (id: number) => surveyApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+    },
+  })
+
+  return {
+    surveyList: surveyList ?? [],
+    surveyDetail: surveyDetail ?? {},
+    isLoadingSurveyList,
+    isLoadingSurveyDetail,
+    isCreatingSurvey,
+    isUpdatingSurvey,
+    isDeletingSurvey,
+    createSurvey,
+    updateSurvey,
+    deleteSurvey,
+  }
+}
-- 
2.47.2


From 818ecb724b413eced02d6665dd3d4efe0d8bc452 Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Wed, 30 Apr 2025 16:22:08 +0900
Subject: [PATCH 5/6] feat: implement Survey Sale CRUD function

- Survey-sale Create with base information and electronic, roof information
- Survey-sale Update
- Survey-sale Read by filtering
---
 prisma/schema.prisma                          |   2 +-
 src/api/survey.ts                             |  66 -------
 src/api/surveySales.ts                        | 160 +++++++++++------
 src/app/api/survey-sales/[id]/route.ts        |  72 ++++++++
 src/app/api/survey-sales/route.ts             |  14 +-
 src/app/api/survey/[id]/route.ts              |  28 ---
 src/app/api/survey/route.ts                   |  16 --
 src/app/survey-sales/[id]/page.tsx            |   6 +
 src/app/survey-sales/page.tsx                 |   4 +-
 src/app/survey-sales/write/page.tsx           |   9 +
 src/app/survey/[id]/page.tsx                  |   9 -
 src/app/survey/page.tsx                       |  10 --
 src/app/survey/write/page.tsx                 |   9 -
 src/components/survey-sales/EtcCheckbox.tsx   |  68 ++++++++
 src/components/survey-sales/SurveyDetail.tsx  |  61 +++++++
 .../{survey => survey-sales}/SurveyFilter.tsx |   6 +-
 .../survey-sales/SurveySaleList.tsx           |  90 ++++++++++
 .../write-survey-sales/BasicWriteForm.tsx     |  86 +++++++++
 .../write-survey-sales/DetailWriteForm.tsx    | 157 +++++++++++++++++
 .../write-survey-sales/MainSurveyForm.tsx     | 165 ++++++++++++++++++
 src/components/survey/SurveySaleDetail.tsx    |   4 -
 src/components/survey/SurveySaleList.tsx      |  54 ------
 src/components/survey/SurveySaleWriteForm.tsx |  97 ----------
 src/hooks/useSurvey.ts                        |  72 ++++++--
 24 files changed, 900 insertions(+), 365 deletions(-)
 delete mode 100644 src/api/survey.ts
 create mode 100644 src/app/api/survey-sales/[id]/route.ts
 delete mode 100644 src/app/api/survey/[id]/route.ts
 delete mode 100644 src/app/api/survey/route.ts
 create mode 100644 src/app/survey-sales/[id]/page.tsx
 create mode 100644 src/app/survey-sales/write/page.tsx
 delete mode 100644 src/app/survey/[id]/page.tsx
 delete mode 100644 src/app/survey/page.tsx
 delete mode 100644 src/app/survey/write/page.tsx
 create mode 100644 src/components/survey-sales/EtcCheckbox.tsx
 create mode 100644 src/components/survey-sales/SurveyDetail.tsx
 rename src/components/{survey => survey-sales}/SurveyFilter.tsx (74%)
 create mode 100644 src/components/survey-sales/SurveySaleList.tsx
 create mode 100644 src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx
 create mode 100644 src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx
 create mode 100644 src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx
 delete mode 100644 src/components/survey/SurveySaleDetail.tsx
 delete mode 100644 src/components/survey/SurveySaleList.tsx
 delete mode 100644 src/components/survey/SurveySaleWriteForm.tsx

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index a58b277..f2a45c6 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -3,7 +3,7 @@ generator client {
 }
 
 datasource db {
-  provider = "sqlserver"
+  provider = "mysql"
   url      = env("DATABASE_URL")
 }
 
diff --git a/src/api/survey.ts b/src/api/survey.ts
deleted file mode 100644
index e004930..0000000
--- a/src/api/survey.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { axiosInstance } from '@/libs/axios'
-
-export interface Survey {
-  id: number
-  title: string
-  content: string
-  created_at: string
-  updated_at: string
-  checked: string[]
-  otherText: string
-}
-
-export const surveyApi = {
-  create: async (data: Survey): Promise<Survey> => {
-    try {
-      const response = await axiosInstance.post<Survey>('/api/survey', data)
-      return response.data
-    } catch (error) {
-      console.error('Error creating survey:', error)
-      throw error
-    }
-  },
-
-  getList: async (): Promise<Survey[]> => {
-    try {
-      const response = await axiosInstance.get<Survey[]>('/api/survey')
-      return response.data
-    } catch (error) {
-      console.error('Error fetching survey list:', error)
-      return []
-    }
-  },
-
-  getDetail: async (id?: number): Promise<Survey> => {
-    try {
-      if (id) {
-        const response = await axiosInstance.get<Survey>(`/api/survey/${id}`)
-        return response.data
-      } else {
-        return {} as Survey
-      }
-    } catch (error) {
-      console.error('Error fetching survey detail:', error)
-      throw error
-    }
-  },
-
-  update: async (id: number, data: Survey): Promise<Survey> => {
-    try {
-      const response = await axiosInstance.put<Survey>(`/api/survey/${id}`, data)
-      return response.data
-    } catch (error) {
-      console.error('Error updating survey:', error)
-      throw error
-    }
-  },
-
-  delete: async (id: number): Promise<void> => {
-    try {
-      await axiosInstance.delete(`/api/survey/${id}`)
-    } catch (error) {
-      console.error('Error deleting survey:', error)
-      throw error
-    }
-  },
-}
diff --git a/src/api/surveySales.ts b/src/api/surveySales.ts
index 3d9d727..4ecff63 100644
--- a/src/api/surveySales.ts
+++ b/src/api/surveySales.ts
@@ -2,66 +2,122 @@ import { axiosInstance } from '@/libs/axios'
 
 export interface SurveySalesBasicInfo {
   id?: number
-  representative: String
-  store: String | null
-  construction_point: String | null
-  investigation_date: String | null
-  building_name: String | null
-  customer_name: String | null
-  post_code: String | null
-  address: String | null
-  address_detail: String | null
-  submission_status: Boolean
-  submission_date?: String | null
+  representative: string
+  store: string | null
+  construction_point: string | null
+  investigation_date: string | null
+  building_name: string | null
+  customer_name: string | null
+  post_code: string | null
+  address: string | null
+  address_detail: string | null
+  submission_status: boolean
+  submission_date?: string | null
   detail_info?: SurveySalesDetailInfo | null
 }
 
 export interface SurveySalesDetailInfo {
   id?: number
-  contract_capacity: String | null
-  retail_company: String | null
-  supplementary_facilities: Number | null
-  supplementary_facilities_etc: String | null
-  installation_system: Number | null
-  installation_system_etc: String | null
-  construction_year: Number | null
-  construction_year_etc: String | null
-  roof_material: Number | null
-  roof_material_etc: String | null
-  roof_shape: Number | null
-  roof_shape_etc: String | null
-  roof_slope: String | null
-  house_structure: Number | null
-  house_structure_etc: String | null
-  rafter_material: Number | null
-  rafter_material_etc: String | null
-  rafter_size: Number | null
-  rafter_size_etc: String | null
-  rafter_pitch: Number | null
-  rafter_pitch_etc: String | null
-  rafter_direction: Number | null
-  open_field_plate_kind: Number | null
-  open_field_plate_kind_etc: String | null
-  open_field_plate_thickness: String | null
-  leak_trace: Boolean | null
-  waterproof_material: Number | null
-  waterproof_material_etc: String | null
-  insulation_presence: Number | null
-  insulation_presence_etc: String | null
-  structure_order: Number | null
-  structure_order_etc: String | null
-  installation_availability: Number | null
-  installation_availability_etc: String | null
-  memo: String | null
+  contract_capacity: string | null
+  retail_company: string | null
+  supplementary_facilities: number | null
+  supplementary_facilities_etc: string | null
+  installation_system: number | null
+  installation_system_etc: string | null
+  construction_year: number | null
+  construction_year_etc: string | null
+  roof_material: number | null
+  roof_material_etc: string | null
+  roof_shape: number | null
+  roof_shape_etc: string | null
+  roof_slope: string | null
+  house_structure: number | null
+  house_structure_etc: string | null
+  rafter_material: number | null
+  rafter_material_etc: string | null
+  rafter_size: number | null
+  rafter_size_etc: string | null
+  rafter_pitch: number | null
+  rafter_pitch_etc: string | null
+  rafter_direction: number | null
+  open_field_plate_kind: number | null
+  open_field_plate_kind_etc: string | null
+  open_field_plate_thickness: string | null
+  leak_trace: boolean | null
+  waterproof_material: number | null
+  waterproof_material_etc: string | null
+  insulation_presence: number | null
+  insulation_presence_etc: string | null
+  structure_order: number | null
+  structure_order_etc: string | null
+  installation_availability: number | null
+  installation_availability_etc: string | null
+  memo: string | null
 }
 
 export const surveySalesApi = {
-  create: async (data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo> => {
-    const response = await axiosInstance.post<SurveySalesBasicInfo>('/api/survey-sales', data)
-    return response.data
+  create: async (data: SurveySalesBasicInfo): Promise<number> => {
+    try {
+      const response = await axiosInstance.post<SurveySalesBasicInfo>('/api/survey-sales', data)
+      return response.data.id ?? 0
+    } catch (error) {
+      console.error(error)
+      return 0
+    }
   },
-  getList: async (): Promise<SurveySalesBasicInfo[]> => {
-    const response = await axiosInstance.get<SurveySalesBasicInfo[]>('/api/survey-sales')
-    return response.data
+  getList: async (): Promise<SurveySalesBasicInfo[] | []> => {
+    try {
+      const response = await axiosInstance.get<SurveySalesBasicInfo[]>('/api/survey-sales')
+      return response.data
+    } catch (error) {
+      console.error(error)
+      return []
+    }
+  },
+  getDetail: async (id: number): Promise<SurveySalesBasicInfo | null> => {
+    try {
+      const response = await axiosInstance.get<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
+      return response.data
+    } catch (error) {
+      console.error(error)
+      return null
+    }
+  },
+  update: async (id: number, data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo | null> => {
+    try {
+      const response = await axiosInstance.put<SurveySalesBasicInfo>(`/api/survey-sales/${id}`, data)
+      return response.data
+    } catch (error) {
+      console.error(error)
+      return null
+    }
+  },
+  delete: async (id: number, isDetail: boolean = false): Promise<boolean> => {
+    try {
+      await axiosInstance.delete(`/api/survey-sales/${id}`, {
+        params: {
+          detail_id: isDetail ? id : undefined,
+        },
+      })
+      return true
+    } catch (error) {
+      throw error
+    }
+  },
+  createDetail: async (surveyId: number, data: SurveySalesDetailInfo): Promise<boolean> => {
+    try {
+      await axiosInstance.post<SurveySalesDetailInfo>(`/api/survey-sales/${surveyId}`, data)
+      return true
+    } catch (error) {
+      throw error
+    }
+  },
+  confirm: async (id: number): Promise<boolean> => {
+    try {
+      await axiosInstance.patch<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
+      return true
+    } catch (error) {
+      throw error
+    }
   },
 }
diff --git a/src/app/api/survey-sales/[id]/route.ts b/src/app/api/survey-sales/[id]/route.ts
new file mode 100644
index 0000000..bf5afe4
--- /dev/null
+++ b/src/app/api/survey-sales/[id]/route.ts
@@ -0,0 +1,72 @@
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request, context: { params: { id: string } }) {
+  const body = await request.json()
+  const { id } = await context.params
+
+  // @ts-ignore
+  const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
+    where: { id: Number(id) },
+    data: {
+      detail_info: {
+        create: body,
+      },
+    },
+  })
+  return NextResponse.json({ message: 'Survey detail created successfully' })
+}
+export async function GET(request: Request, context: { params: { id: string } }) {
+  const { id } = await context.params
+  // @ts-ignore
+  const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.findUnique({
+    where: { id: Number(id) },
+    include: {
+      detail_info: true,
+    },
+  })
+  return NextResponse.json(survey)
+}
+
+export async function PUT(request: Request, context: { params: { id: string } }) {
+  const { id } = await context.params
+  const body = await request.json()
+  // @ts-ignore
+  const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
+    where: { id: Number(id) },
+    data: {
+      ...body,
+      detail_info: {
+        update: body.detail_info,
+      },
+    },
+  })
+  return NextResponse.json(survey)
+}
+
+export async function DELETE(request: Request, context: { params: { id: string; detail_id: string } }) {
+  const { id, detail_id } = await context.params
+  if (detail_id) {
+    // @ts-ignore
+    const survey = await prisma.SD_SERVEY_SALES_DETAIL_INFO.delete({
+      where: { id: Number(detail_id) },
+    })
+  } else {
+    // @ts-ignore
+    const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.delete({
+      where: { id: Number(id) },
+    })
+  }
+  return NextResponse.json({ message: 'Survey deleted successfully' })
+}
+
+export async function PATCH(request: Request, context: { params: { id: string } }) {
+  const { id } = await context.params
+  // @ts-ignore
+  const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
+    where: { id: Number(id) },
+    data: {
+      submission_status: true,
+    },
+  })
+  return NextResponse.json({ message: 'Survey confirmed successfully' })
+}
diff --git a/src/app/api/survey-sales/route.ts b/src/app/api/survey-sales/route.ts
index decd3a3..aebff14 100644
--- a/src/app/api/survey-sales/route.ts
+++ b/src/app/api/survey-sales/route.ts
@@ -3,11 +3,19 @@ import { prisma } from '@/libs/prisma'
 
 export async function POST(request: Request) {
   const body = await request.json()
-
   // @ts-ignore
   const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.create({
     data: body,
   })
-
-  return NextResponse.json({ message: 'Survey sales created successfully' })
+  return NextResponse.json(res)
+}
+
+export async function GET() {
+  try {
+    // @ts-ignore
+    const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.findMany()
+    return NextResponse.json(res)
+  } catch (error) {
+    console.error(error)
+  }
 }
diff --git a/src/app/api/survey/[id]/route.ts b/src/app/api/survey/[id]/route.ts
deleted file mode 100644
index b8a989a..0000000
--- a/src/app/api/survey/[id]/route.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { NextResponse } from 'next/server'
-
-export async function GET(request: Request, { params }: { params: { id: string } }) {
-  const { id } = params
-  // @ts-ignore
-  const survey = await prisma.SD_SERVEY_SALES.findUnique({
-    where: { id: parseInt(id) },
-  })
-  return NextResponse.json(survey)
-}
-
-export async function PUT(request: Request, { params }: { params: { id: string } }) {
-  const { id } = params
-  const body = await request.json()
-  // @ts-ignore
-  const survey = await prisma.SD_SERVEY_SALES.update({
-    where: { id: parseInt(id) },
-    data: body,
-  })
-  return NextResponse.json(survey)
-}
-
-export async function DELETE(request: Request, { params }: { params: { id: string } }) {
-  const { id } = params
-  // @ts-ignore
-  await prisma.SD_SERVEY_SALES.delete({ where: { id: parseInt(id) } })
-  return NextResponse.json({ message: 'Survey deleted successfully' })
-}
diff --git a/src/app/api/survey/route.ts b/src/app/api/survey/route.ts
deleted file mode 100644
index a8b6b7e..0000000
--- a/src/app/api/survey/route.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NextResponse } from 'next/server'
-
-export async function GET() {
-  // @ts-ignore
-  const surveys = await prisma.SD_SERVEY_SALES.findMany()
-  return NextResponse.json(surveys)
-}
-
-export async function POST(request: Request) {
-    const body = await request.json()
-  // @ts-ignore
-  const survey = await prisma.SD_SERVEY_SALES.create({
-    data: body,
-  })
-  return NextResponse.json(survey)
-}
diff --git a/src/app/survey-sales/[id]/page.tsx b/src/app/survey-sales/[id]/page.tsx
new file mode 100644
index 0000000..eb6685c
--- /dev/null
+++ b/src/app/survey-sales/[id]/page.tsx
@@ -0,0 +1,6 @@
+import SurveyDetail from '@/components/survey-sales/SurveyDetail'
+
+export default function SurveySalesDetailPage() {
+  return <SurveyDetail />
+}
+
diff --git a/src/app/survey-sales/page.tsx b/src/app/survey-sales/page.tsx
index 6671ce4..b04c6c1 100644
--- a/src/app/survey-sales/page.tsx
+++ b/src/app/survey-sales/page.tsx
@@ -1,10 +1,12 @@
 import SurveySales from '@/components/SurveySales'
+import SurveySaleList from '@/components/survey-sales/SurveySaleList'
 
 export default function page() {
   return (
     <>
       <h1 className="text-2xl font-bold my-4 flex justify-center">조사 매물 정보</h1>
-      <SurveySales />
+      {/* <SurveySales /> */}
+      <SurveySaleList />
     </>
   )
 }
diff --git a/src/app/survey-sales/write/page.tsx b/src/app/survey-sales/write/page.tsx
new file mode 100644
index 0000000..5d7b38f
--- /dev/null
+++ b/src/app/survey-sales/write/page.tsx
@@ -0,0 +1,9 @@
+import MainSurveyForm from '@/components/survey-sales/write-survey-sales/MainSurveyForm'
+
+export default function SurveyWritePage() {
+  return (
+    <div>
+      <MainSurveyForm />
+    </div>
+  )
+}
diff --git a/src/app/survey/[id]/page.tsx b/src/app/survey/[id]/page.tsx
deleted file mode 100644
index 234ee63..0000000
--- a/src/app/survey/[id]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import SurveySaleDetail from '@/components/survey/SurveySaleDetail'
-
-export default function SurveyDetailPage() {
-  return (
-    <div>
-      <SurveySaleDetail />
-    </div>
-  )
-}
diff --git a/src/app/survey/page.tsx b/src/app/survey/page.tsx
deleted file mode 100644
index d716d96..0000000
--- a/src/app/survey/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import SurveySaleList from '@/components/survey/SurveySaleList'
-
-export default function SurveyPage() {
-  return (
-    <div>
-      <SurveySaleList />
-    </div>
-  )
-}
-
diff --git a/src/app/survey/write/page.tsx b/src/app/survey/write/page.tsx
deleted file mode 100644
index 925b622..0000000
--- a/src/app/survey/write/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import SurveySaleWriteForm from '@/components/survey/SurveySaleWriteForm'
-
-export default function SurveyWritePage() {
-  return (
-    <div>
-      <SurveySaleWriteForm />
-    </div>
-  )
-}
diff --git a/src/components/survey-sales/EtcCheckbox.tsx b/src/components/survey-sales/EtcCheckbox.tsx
new file mode 100644
index 0000000..6e4a866
--- /dev/null
+++ b/src/components/survey-sales/EtcCheckbox.tsx
@@ -0,0 +1,68 @@
+'use client'
+import { useState } from "react"
+import { SurveySalesDetailInfo } from "@/api/surveySales"
+
+interface EtcCheckboxProps {
+  formName: keyof SurveySalesDetailInfo
+  label: string
+  detailInfoForm: SurveySalesDetailInfo
+  setDetailInfoForm: (form: SurveySalesDetailInfo) => void
+}
+
+export default function EtcCheckbox({ formName, label, detailInfoForm, setDetailInfoForm }: EtcCheckboxProps) {
+  const [showEtcInput, setShowEtcInput] = useState(false)
+  const etcFieldName = `${formName}_etc` as keyof SurveySalesDetailInfo
+
+  return (
+    <div className="space-y-2">
+      <label htmlFor={formName} className="block font-medium">{label}</label>
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id={formName}
+            checked={detailInfoForm[formName] === 1}
+            onChange={(e) => setDetailInfoForm({ 
+              ...detailInfoForm, 
+              [formName]: e.target.checked ? 1 : 0 
+            })}
+          />
+          <label htmlFor={formName}>있음</label>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id={`${formName}_etc_check`}
+            checked={showEtcInput}
+            onChange={(e) => {
+              setShowEtcInput(e.target.checked)
+              if (!e.target.checked) {
+                setDetailInfoForm({
+                  ...detailInfoForm,
+                  [etcFieldName]: ''
+                })
+              }
+            }}
+          />
+          <label htmlFor={`${formName}_etc_check`}>기타</label>
+          
+          {showEtcInput && (
+            <input
+              type="text"
+              id={`${formName}_etc`}
+              value={(detailInfoForm[etcFieldName] as string | null) ?? ''}
+              placeholder="기타 사항을 입력하세요"
+              onChange={(e) => setDetailInfoForm({
+                ...detailInfoForm,
+                [etcFieldName]: e.target.value
+              })}
+              className="border rounded px-2 py-1 ml-2"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/src/components/survey-sales/SurveyDetail.tsx b/src/components/survey-sales/SurveyDetail.tsx
new file mode 100644
index 0000000..20145a3
--- /dev/null
+++ b/src/components/survey-sales/SurveyDetail.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useServey } from '@/hooks/useSurvey'
+import { SurveySalesBasicInfo } from '@/api/surveySales'
+import { useParams, useRouter } from 'next/navigation'
+
+export default function SurveyDetail() {
+  const params = useParams()
+  const id = params.id
+  const router = useRouter()
+
+  const { surveyDetail, deleteSurvey, isDeletingSurvey, confirmSurvey } = useServey(Number(id))
+
+  console.log('surveyDetail:: ', surveyDetail)
+
+  const handleDelete = async () => {
+    if (confirm('delete?')) {
+      if (surveyDetail?.representative) {
+        if (surveyDetail.detail_info?.id) {
+          await deleteSurvey({ id: Number(surveyDetail.detail_info.id), isDetail: true })
+        }
+        await deleteSurvey({ id: Number(id), isDetail: false })
+      }
+      alert('delete success')
+      router.push('/survey-sales')
+    }
+  }
+  const handleSubmit = () => {
+    if (confirm('submit?')) {
+      confirmSurvey(Number(id))
+    }
+    alert('submit success')
+    router.push('/survey-sales')
+  }
+
+  if (isDeletingSurvey) {
+    return <div>Deleting...</div>
+  }
+
+  return (
+    <div>
+      <h1>SurveyDetail</h1>
+      <p>{id}</p>
+      <p>{surveyDetail?.representative}</p>
+      <div className="flex gap-3">
+        <button className="bg-blue-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={() => router.push('/survey-sales/write?id=' + id)}>
+          edit
+        </button>
+        <button className="bg-blue-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={handleSubmit}>
+          submit
+        </button>
+        <button className="bg-red-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={handleDelete}>
+          delete
+        </button>
+        <button className="bg-gray-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={() => router.back()}>
+          back
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/survey/SurveyFilter.tsx b/src/components/survey-sales/SurveyFilter.tsx
similarity index 74%
rename from src/components/survey/SurveyFilter.tsx
rename to src/components/survey-sales/SurveyFilter.tsx
index 8b03add..2249186 100644
--- a/src/components/survey/SurveyFilter.tsx
+++ b/src/components/survey-sales/SurveyFilter.tsx
@@ -5,7 +5,7 @@ export default function SurveyFilter({ handleSearch, handleMyPosts }: { handleSe
   const router = useRouter()
   return (
     <div>
-      <button onClick={() => router.push('/survey/write')}>write survey {'>'}</button>
+      <button onClick={() => router.push('/survey-sales/write')}>write survey {'>'}</button>
       <div className="flex items-center gap-2">
         <input type="text" placeholder="Search" onChange={handleSearch} />
         <button>
@@ -13,7 +13,9 @@ export default function SurveyFilter({ handleSearch, handleMyPosts }: { handleSe
         </button>
       </div>
       <div className="flex items-center gap-2">
-        <button onClick={handleMyPosts}>my posts</button>
+        <button onClick={handleMyPosts} className="cursor-pointer">
+          my posts
+        </button>
       </div>
     </div>
   )
diff --git a/src/components/survey-sales/SurveySaleList.tsx b/src/components/survey-sales/SurveySaleList.tsx
new file mode 100644
index 0000000..92b9ece
--- /dev/null
+++ b/src/components/survey-sales/SurveySaleList.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { useServey } from '@/hooks/useSurvey'
+import LoadMoreButton from '@/components/LoadMoreButton'
+import { useState } from 'react'
+import SurveyFilter from './SurveyFilter'
+import { useRouter } from 'next/navigation'
+
+export default function SurveySaleList() {
+  const { surveyList, isLoadingSurveyList } = useServey()
+  const [search, setSearch] = useState('')
+  const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
+  const [hasMore, setHasMore] = useState(surveyList.length > 5)
+  const [visibleItems, setVisibleItems] = useState(5)
+
+  const router = useRouter()
+
+  // TEMP USERNAME
+  const username = 'test'
+
+  const surveyData = () => {
+    if (search.trim().length > 0) {
+      return surveyList.filter((survey) => survey.building_name?.includes(search))
+    }
+    if (isMyPostsOnly) {
+      return surveyList.filter((survey) => survey.representative === username)
+    }
+    return surveyList
+  }
+
+  const handleLoadMore = () => {
+    const newVisibleItems = Math.min(visibleItems + 5, surveyData().length)
+    setVisibleItems(newVisibleItems)
+    setHasMore(newVisibleItems < surveyData().length)
+  }
+
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value)
+  }
+
+  const handleDetail = (id: number | undefined) => {
+    if (id === undefined) throw new Error('id is required')
+    router.push(`/survey-sales/${id}`)
+  }
+
+  if (isLoadingSurveyList) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <SurveyFilter handleSearch={handleSearch} handleMyPosts={() => setIsMyPostsOnly(!isMyPostsOnly)} />
+
+      <div className="grid gap-4 mt-6">
+        {surveyData().slice(0, visibleItems).map((survey) => (
+          <div
+            key={survey.id}
+            onClick={() => handleDetail(survey.id)}
+            className="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow cursor-pointer border border-gray-200"
+          >
+            <div className="flex justify-between items-start">
+              <div className="space-y-2">
+                <h2 className="text-lg font-semibold text-gray-900">{survey.id}</h2>
+                <div className="space-y-1 text-sm text-gray-600">
+                  <p>담당자: {survey.representative || '-'}</p>
+                  <p>판매점: {survey.store || '-'}</p>
+                </div>
+              </div>
+              <span
+                className={`px-3 py-1 rounded-full text-sm ${
+                  survey.submission_status ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                }`}
+              >
+                {survey.submission_status ? '제출' : '미제출'}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6">
+        <LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx b/src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx
new file mode 100644
index 0000000..bf73338
--- /dev/null
+++ b/src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import { SurveySalesBasicInfo } from '@/api/surveySales'
+
+export default function BasicWriteForm({
+  basicInfoData,
+  setBasicInfoData,
+}: {
+  basicInfoData: SurveySalesBasicInfo
+  setBasicInfoData: (basicInfoData: SurveySalesBasicInfo) => void
+}) {
+  const handleChange = (key: keyof SurveySalesBasicInfo, value: string) => {
+    setBasicInfoData({ ...basicInfoData, [key]: value.toString() })
+  }
+
+  return (
+    <div>
+      <div>
+        <label htmlFor="representative">담당자명</label>
+        <input
+          type="text"
+          id="representative"
+          value={basicInfoData.representative}
+          onChange={(e) => handleChange('representative', e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="store">판매점</label>
+        <input type="text" id="store" value={basicInfoData.store ?? ''} onChange={(e) => handleChange('store', e.target.value)} />
+      </div>
+      <div>
+        <label htmlFor="construction_point">시공점</label>
+        <input
+          type="text"
+          id="construction_point"
+          value={basicInfoData.construction_point ?? ''}
+          onChange={(e) => handleChange('construction_point', e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="investigation_date">현재 조사일</label>
+        <input
+          type="date"
+          id="investigation_date"
+          value={basicInfoData.investigation_date ?? ''}
+          onChange={(e) => handleChange('investigation_date', e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="building_name">건물명</label>
+        <input
+          type="text"
+          id="building_name"
+          value={basicInfoData.building_name ?? ''}
+          onChange={(e) => handleChange('building_name', e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="customer_name">고객명</label>
+        <input
+          type="text"
+          id="customer_name"
+          value={basicInfoData.customer_name ?? ''}
+          onChange={(e) => handleChange('customer_name', e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="post_code">우편번호</label>
+        <input type="text" id="post_code" value={basicInfoData.post_code ?? ''} onChange={(e) => handleChange('post_code', e.target.value)} />
+      </div>
+      <div>
+        <label htmlFor="address">주소</label>
+        <input type="text" id="address" value={basicInfoData.address ?? ''} onChange={(e) => handleChange('address', e.target.value)} />
+      </div>
+      <div>
+        <label htmlFor="address_detail">상세주소</label>
+        <input
+          type="text"
+          id="address_detail"
+          value={basicInfoData.address_detail ?? ''}
+          onChange={(e) => handleChange('address_detail', e.target.value)}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx b/src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx
new file mode 100644
index 0000000..488f046
--- /dev/null
+++ b/src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx
@@ -0,0 +1,157 @@
+'use client'
+import React from 'react'
+import EtcCheckbox from '../EtcCheckbox'
+import { SurveySalesDetailInfo } from '@/api/surveySales'
+
+interface DetailWriteFormProps {
+  detailInfoForm: SurveySalesDetailInfo
+  setDetailInfoForm: (form: SurveySalesDetailInfo) => void
+}
+
+export default function DetailWriteForm({ detailInfoForm, setDetailInfoForm }: DetailWriteFormProps) {
+  const handleNumberInput = (field: keyof SurveySalesDetailInfo, value: string) => {
+    const numberValue = value === '' ? null : Number(value)
+    setDetailInfoForm({ ...detailInfoForm, [field]: numberValue })
+  }
+
+  const handleTextInput = (field: keyof SurveySalesDetailInfo, value: string) => {
+    setDetailInfoForm({ ...detailInfoForm, [field]: value || null })
+  }
+
+  const handleBooleanInput = (field: keyof SurveySalesDetailInfo, checked: boolean) => {
+    setDetailInfoForm({ ...detailInfoForm, [field]: checked })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="contract_capacity">계약용량</label>
+        <input
+          type="text"
+          id="contract_capacity"
+          value={detailInfoForm.contract_capacity ?? ''}
+          onChange={(e) => handleTextInput('contract_capacity', e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="retail_company">소매회사</label>
+        <input
+          type="text"
+          id="retail_company"
+          value={detailInfoForm.retail_company ?? ''}
+          onChange={(e) => handleTextInput('retail_company', e.target.value)}
+        />
+      </div>
+
+      <EtcCheckbox 
+        formName="supplementary_facilities"
+        label="부대설비"
+        detailInfoForm={detailInfoForm}
+        setDetailInfoForm={setDetailInfoForm}
+      />
+
+      <div>
+        <EtcCheckbox formName="installation_system" label="설치시스템" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="construction_year" label="건축년도" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="roof_material" label="지붕재료" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="roof_shape" label="지붕형태" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <label htmlFor="roof_slope">지붕 경사도</label>
+        <input
+          type="text"
+          id="roof_slope"
+          value={detailInfoForm.roof_slope ?? ''}
+          onChange={(e) => handleTextInput('roof_slope', e.target.value)}
+        />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="house_structure" label="주택 구조" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="rafter_material" label="주탑재료" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="rafter_size" label="주탑 크기" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="rafter_pitch" label="주탑 경사도" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <label htmlFor="rafter_direction">오픈필드 판형</label>
+        <input
+          type="text"
+          id="rafter_direction"
+          value={detailInfoForm.rafter_direction ?? ''}
+          onChange={(e) => handleTextInput('rafter_direction', e.target.value)}
+        />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="open_field_plate_kind" label="노지판 형태" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <label htmlFor="open_field_plate_thickness">노지판 두께</label>
+        <input
+          type="text"
+          id="open_field_plate_thickness"
+          value={detailInfoForm.open_field_plate_thickness ?? ''}
+          onChange={(e) => handleTextInput('open_field_plate_thickness', e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="leak_trace">누수 흔적</label>
+        <input
+          type="checkbox"
+          id="leak_trace"
+          checked={detailInfoForm.leak_trace ?? false}
+          onChange={(e) => handleBooleanInput('leak_trace', e.target.checked)}
+        />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="waterproof_material" label="방수재료" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="insulation_presence" label="보증금 존재" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="structure_order" label="구조체계" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <EtcCheckbox formName="installation_availability" label="설치가능" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+      </div>
+
+      <div>
+        <label htmlFor="memo">메모</label>
+        <textarea
+          id="memo"
+          value={detailInfoForm.memo ?? ''}
+          onChange={(e) => handleTextInput('memo', e.target.value)}
+          className="w-full"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx b/src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx
new file mode 100644
index 0000000..f51aa2b
--- /dev/null
+++ b/src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx
@@ -0,0 +1,165 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import BasicWriteForm from './BasicWriteForm'
+import DetailWriteForm from './DetailWriteForm'
+import { SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useServey } from '@/hooks/useSurvey'
+
+type TabType = 'basic' | 'detail'
+
+const defaultDetailInfoForm: SurveySalesDetailInfo = {
+  contract_capacity: null,
+  retail_company: null,
+  supplementary_facilities: null,
+  supplementary_facilities_etc: null,
+  installation_system: null,
+  installation_system_etc: null,
+  construction_year: null,
+  construction_year_etc: null,
+  roof_material: null,
+  roof_material_etc: null,
+  roof_shape: null,
+  roof_shape_etc: null,
+  roof_slope: null,
+  house_structure: null,
+  house_structure_etc: null,
+  rafter_material: null,
+  rafter_material_etc: null,
+  rafter_size: null,
+  rafter_size_etc: null,
+  rafter_pitch: null,
+  rafter_pitch_etc: null,
+  rafter_direction: null,
+  open_field_plate_kind: null,
+  open_field_plate_kind_etc: null,
+  open_field_plate_thickness: null,
+  leak_trace: false,
+  waterproof_material: null,
+  waterproof_material_etc: null,
+  structure_order: null,
+  structure_order_etc: null,
+  insulation_presence: null,
+  insulation_presence_etc: null,
+  installation_availability: null,
+  installation_availability_etc: null,
+  memo: null,
+}
+
+const defaultBasicInfoForm: SurveySalesBasicInfo = {
+  representative: '',
+  store: null,
+  construction_point: null,
+  investigation_date: null,
+  building_name: null,
+  customer_name: null,
+  post_code: null,
+  address: null,
+  address_detail: null,
+  submission_status: false,
+}
+
+export default function MainSurveyForm() {
+  const searchParams = useSearchParams()
+
+  const id = searchParams.get('id')
+
+  const [activeTab, setActiveTab] = useState<TabType>('basic')
+
+  const handleTabClick = (tab: TabType) => {
+    setActiveTab(tab)
+  }
+
+  const router = useRouter()
+  const { createSurvey, isCreatingSurvey, createSurveyDetail, surveyDetail, updateSurvey } = useServey(Number(id))
+
+  const [detailInfoForm, setDetailInfoForm] = useState<SurveySalesDetailInfo>(defaultDetailInfoForm)
+  const [basicInfoData, setBasicInfoData] = useState<SurveySalesBasicInfo>(defaultBasicInfoForm)
+
+  useEffect(() => {
+    if (surveyDetail) {
+      setBasicInfoData({
+        ...defaultBasicInfoForm,
+        ...(({ id, ...rest }) => rest)(surveyDetail),
+      })
+      setDetailInfoForm({
+        ...defaultDetailInfoForm,
+        ...(surveyDetail.detail_info ? (({ id, basic_info_id, updated_at, ...rest }) => rest)(surveyDetail.detail_info as any) : {}),
+      })
+    }
+  }, [surveyDetail])
+
+  const handleSave = async (isSubmit: boolean = false) => {
+    if (id) {
+      updateSurvey({
+        ...basicInfoData,
+        detail_info: detailInfoForm,
+        submission_status: isSubmit,
+      })
+      router.push('/survey-sales')
+      return
+    }
+
+    const surveyId = await createSurvey(basicInfoData)
+    if (surveyId && surveyId !== 0) {
+      createSurveyDetail({
+        surveyId,
+        surveyDetail: detailInfoForm,
+      })
+      router.push('/survey-sales')
+      return
+    }
+    throw new Error('‼️Survey creation failed')
+  }
+  if (isCreatingSurvey) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div>
+      {/* TAB BUTTONS */}
+      <div>
+        <button
+          onClick={() => handleTabClick('basic')}
+          className={`flex-1 px-4 py-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 
+            ${activeTab === 'basic' ? 'border-b-2 border-blue-500 font-semibold text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+          aria-selected={activeTab === 'basic'}
+          role="tab"
+        >
+          Basic Info
+        </button>
+        <button
+          onClick={() => handleTabClick('detail')}
+          className={`flex-1 px-4 py-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500
+            ${activeTab === 'detail' ? 'border-b-2 border-blue-500 font-semibold text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+          aria-selected={activeTab === 'detail'}
+          role="tab"
+        >
+          Detail Info
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      <div className="mt-6">
+        {activeTab === 'basic' && (
+          <div className="rounded-lg border p-4">
+            <h2 className="text-lg font-semibold">Basic Information</h2>
+            <BasicWriteForm basicInfoData={basicInfoData} setBasicInfoData={setBasicInfoData} />
+          </div>
+        )}
+        {activeTab === 'detail' && (
+          <div className="rounded-lg border p-4">
+            <h2 className="text-lg font-semibold">Detail Information</h2>
+            <DetailWriteForm detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
+          </div>
+        )}
+      </div>
+      <div className="flex justify-start gap-4">
+        <button onClick={() => handleSave(false)}>save</button>
+        <button onClick={() => handleSave(true)}>submit</button>
+        <button onClick={() => router.push('/survey-sales')}>cancel</button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/survey/SurveySaleDetail.tsx b/src/components/survey/SurveySaleDetail.tsx
deleted file mode 100644
index 63c7f32..0000000
--- a/src/components/survey/SurveySaleDetail.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export default function SurveySaleDetail() {
-  return <div>SurveySaleDetail</div>
-}
-
diff --git a/src/components/survey/SurveySaleList.tsx b/src/components/survey/SurveySaleList.tsx
deleted file mode 100644
index f9c909f..0000000
--- a/src/components/survey/SurveySaleList.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import { useServey } from '@/hooks/useSurvey'
-import LoadMoreButton from '@/components/LoadMoreButton'
-import { useState } from 'react'
-import SurveyFilter from './SurveyFilter'
-
-export default function SurveySaleList() {
-  const { surveyList, isLoadingSurveyList } = useServey()
-  const [search, setSearch] = useState('')
-  const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
-  const [hasMore, setHasMore] = useState(surveyList.length > 5)
-  const [visibleItems, setVisibleItems] = useState(5)
-
-  const surveyData = () => {
-    if (search.trim().length > 0) {
-      return surveyList.filter((survey) => survey.title.includes(search))
-    }
-    return surveyList
-  }
-
-  const handleLoadMore = () => {
-    const newVisibleItems = Math.min(visibleItems + 5, surveyData().length)
-    setVisibleItems(newVisibleItems)
-    setHasMore(newVisibleItems < surveyData().length)
-  }
-
-  const handleScrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value)
-  }
-
-  if (isLoadingSurveyList) {
-    return <div>Loading...</div>
-  }
-
-  return (
-    <div>
-      <SurveyFilter handleSearch={handleSearch} handleMyPosts={() => setIsMyPostsOnly(!isMyPostsOnly)} />
-      {surveyList.slice(0, visibleItems).map((survey) => (
-        <div key={survey.id}>
-          <h2>{survey.title}</h2>
-          <p>{survey.content}</p>
-          <p>{survey.created_at}</p>
-          <p>{survey.updated_at}</p>
-        </div>
-      ))}
-      <LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
-    </div>
-  )
-}
diff --git a/src/components/survey/SurveySaleWriteForm.tsx b/src/components/survey/SurveySaleWriteForm.tsx
deleted file mode 100644
index 1394c64..0000000
--- a/src/components/survey/SurveySaleWriteForm.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { Survey } from '@/api/survey'
-import { useState } from 'react'
-import { useServey } from '@/hooks/useSurvey'
-import { useRouter } from 'next/navigation'
-
-export default function SurveySaleWriteForm() {
-  const router = useRouter()
-  const { createSurvey, isCreatingSurvey } = useServey()
-
-  const [formData, setFormData] = useState<Survey>({
-    id: 0,
-    title: '',
-    content: '',
-    created_at: '',
-    updated_at: '',
-    checked: [],
-    otherText: '',
-  })
-
-  const checkboxOptions = ['A', 'B', 'C', 'D', '기타']
-
-  const handleSubmit = () => {
-    console.log('form:: ', formData)
-    // createSurvey(formData)
-    // router.push('/survey')
-  }
-
-  const handleCheckboxChange = (option: string) => {
-    if (formData.checked.includes(option)) {
-      setFormData({
-        ...formData,
-        checked: formData.checked.filter((item) => item !== option),
-        ...(option === '기타' ? { otherText: '' } : {}),
-      })
-    } else {
-      setFormData({
-        ...formData,
-        checked: [...formData.checked, option],
-      })
-    }
-  }
-
-  const handleOtherTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData({
-      ...formData,
-      otherText: e.target.value,
-      checked: formData.checked.includes('기타') ? formData.checked : [...formData.checked, '기타'],
-    })
-  }
-
-  if (isCreatingSurvey) {
-    return <div>Loading...</div>
-  }
-
-  return (
-    <div>
-      <div>
-        <label htmlFor="title">title</label>
-        <input type="text" id="title" value={formData.title} onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
-      </div>
-      <div>
-        <label htmlFor="content">content</label>
-        <textarea id="content" value={formData.content} onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
-      </div>
-      <div>
-        {checkboxOptions.map((option) => (
-          <div key={option}>
-            <input
-              type="checkbox"
-              id={option}
-              checked={formData.checked.includes(option)}
-              onChange={() => handleCheckboxChange(option)}
-              tabIndex={0}
-              aria-label={option}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') handleCheckboxChange(option)
-              }}
-            />
-            <label htmlFor={option} className="cursor-pointer">
-              {option}
-            </label>
-            {option === '기타' && formData.checked.includes('기타') && (
-              <input type="text" value={formData.otherText || ''} onChange={handleOtherTextChange} placeholder="기타 입력" aria-label="기타 입력" />
-            )}
-          </div>
-        ))}
-      </div>
-      <div>
-        <button onClick={handleSubmit} className="cursor-pointer">
-          save
-        </button>
-      </div>
-    </div>
-  )
-}
diff --git a/src/hooks/useSurvey.ts b/src/hooks/useSurvey.ts
index f3931f4..45f1259 100644
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@@ -1,44 +1,88 @@
-import { Survey, surveyApi } from '@/api/survey'
+import { SurveySalesBasicInfo, surveySalesApi, SurveySalesDetailInfo } from '@/api/surveySales'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
-export function useServey(id?: number) {
+export function useServey(id?: number): {
+  surveyList: SurveySalesBasicInfo[] | []
+  surveyDetail: SurveySalesBasicInfo | null
+  isLoadingSurveyList: boolean
+  isLoadingSurveyDetail: boolean
+  isCreatingSurvey: boolean
+  isUpdatingSurvey: boolean
+  isDeletingSurvey: boolean
+  createSurvey: (survey: SurveySalesBasicInfo) => Promise<number>
+  createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveySalesDetailInfo }) => void
+  updateSurvey: (survey: SurveySalesBasicInfo) => void
+  deleteSurvey: (params: { id: number; isDetail: boolean }) => void
+  confirmSurvey: (id: number) => void
+} {
   const queryClient = useQueryClient()
 
   const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
     queryKey: ['survey', 'list'],
-    queryFn: () => surveyApi.getList(),
+    queryFn: () => surveySalesApi.getList(),
   })
 
   const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
     queryKey: ['survey', id],
-    queryFn: () => surveyApi.getDetail(id),
-    enabled: !!id,
+    queryFn: () => {
+      if (id === undefined) throw new Error('id is required')
+      if (id === null) return null
+      return surveySalesApi.getDetail(id)
+    },
+    enabled: id !== undefined,
   })
 
-  const { mutate: createSurvey, isPending: isCreatingSurvey } = useMutation({
-    mutationFn: (survey: Survey) => surveyApi.create(survey),
-    onSuccess: () => {
+  const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
+    mutationFn: (survey: SurveySalesBasicInfo) => surveySalesApi.create(survey),
+    onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+      return data
     },
   })
 
   const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
-    mutationFn: (survey: Survey) => surveyApi.update(survey.id, survey),
+    mutationFn: (survey: SurveySalesBasicInfo) => {
+      if (id === undefined) throw new Error('id is required')
+      return surveySalesApi.update(id, survey)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['survey', id] })
+      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+    },
+  })
+
+  const { mutateAsync: deleteSurvey, isPending: isDeletingSurvey } = useMutation({
+    mutationFn: ({ id, isDetail }: { id: number; isDetail: boolean }) => {
+      if (id === undefined) throw new Error('id is required')
+      return surveySalesApi.delete(id, isDetail)
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
     },
   })
 
-  const { mutate: deleteSurvey, isPending: isDeletingSurvey } = useMutation({
-    mutationFn: (id: number) => surveyApi.delete(id),
+  const { mutate: createSurveyDetail } = useMutation({
+    mutationFn: ({ surveyId, surveyDetail }: { surveyId: number; surveyDetail: SurveySalesDetailInfo }) =>
+      surveySalesApi.createDetail(surveyId, surveyDetail),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
     },
   })
 
+  const { mutate: confirmSurvey, isPending: isConfirmingSurvey } = useMutation({
+    mutationFn: (id: number) => {
+      if (id === undefined) throw new Error('id is required')
+      return surveySalesApi.confirm(id)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+      queryClient.invalidateQueries({ queryKey: ['survey', id] })
+    },
+  })
+
   return {
-    surveyList: surveyList ?? [],
-    surveyDetail: surveyDetail ?? {},
+    surveyList: surveyList || [],
+    surveyDetail: surveyDetail || null,
     isLoadingSurveyList,
     isLoadingSurveyDetail,
     isCreatingSurvey,
@@ -47,5 +91,7 @@ export function useServey(id?: number) {
     createSurvey,
     updateSurvey,
     deleteSurvey,
+    createSurveyDetail,
+    confirmSurvey,
   }
 }
-- 
2.47.2


From 9334773023f7c8fdbcc74a3b8351931f872c9f24 Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Wed, 30 Apr 2025 16:31:27 +0900
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20prisma=20db=20provider=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 prisma/schema.prisma | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index f2a45c6..a58b277 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -3,7 +3,7 @@ generator client {
 }
 
 datasource db {
-  provider = "mysql"
+  provider = "sqlserver"
   url      = env("DATABASE_URL")
 }
 
-- 
2.47.2