diff --git a/src/api/surveySales.ts b/src/api/surveySales.ts
index 3d9d727..e54f856 100644
--- a/src/api/surveySales.ts
+++ b/src/api/surveySales.ts
@@ -64,4 +64,8 @@ export const surveySalesApi = {
     const response = await axiosInstance.get<SurveySalesBasicInfo[]>('/api/survey-sales')
     return response.data
   },
+  update: async (data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo> => {
+    const response = await axiosInstance.put<SurveySalesBasicInfo>(`/api/survey-sales`, data)
+    return response.data
+  },
 }
diff --git a/src/app/api/survey-sales/route.ts b/src/app/api/survey-sales/route.ts
index decd3a3..7662111 100644
--- a/src/app/api/survey-sales/route.ts
+++ b/src/app/api/survey-sales/route.ts
@@ -11,3 +11,25 @@ export async function POST(request: Request) {
 
   return NextResponse.json({ message: 'Survey sales created successfully' })
 }
+
+export async function GET(request: Request) {
+  // @ts-ignore
+  const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.findMany({
+    include: {
+      detail_info: true,
+    },
+  })
+  return NextResponse.json(res)
+}
+
+export async function PUT(request: Request) {
+  const body = await request.json()
+  console.log('🚀 ~ PUT ~ body:', body)
+  const detailInfo = { ...body.detail_info, basic_info_id: body.id }
+  console.log('🚀 ~ PUT ~ detailInfo:', detailInfo)
+  // @ts-ignore
+  const res = await prisma.SD_SERVEY_SALES_DETAIL_INFO.create({
+    data: detailInfo,
+  })
+  return NextResponse.json({ message: 'Survey sales updated successfully' })
+}
diff --git a/src/app/suitable/[slug]/page.tsx b/src/app/suitable/[slug]/page.tsx
index 6a4f8a0..6c1959a 100644
--- a/src/app/suitable/[slug]/page.tsx
+++ b/src/app/suitable/[slug]/page.tsx
@@ -2,6 +2,7 @@ import SuitableDetails from '@/components/SuitableDetails'
 
 export default async function page({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
+  console.log('🚀 ~ page ~ slug:', slug)
   return (
     <>
       <h1>Suitable Details</h1>
diff --git a/src/components/SuitableDetails.tsx b/src/components/SuitableDetails.tsx
index 3d698d7..795fcdc 100644
--- a/src/components/SuitableDetails.tsx
+++ b/src/components/SuitableDetails.tsx
@@ -1,15 +1,18 @@
 'use client'
 
-import { suitableApi } from '@/api/suitable'
-import { useQuery } from '@tanstack/react-query'
+import { Suitable, suitableApi } from '@/api/suitable'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 export default function SuitableDetails({ roofMaterial }: { roofMaterial: string }) {
   console.log('🚀 ~ SuitableDetails ~ roofMaterial:', roofMaterial)
-  const { data, error, isPending } = useQuery({
-    queryKey: ['suitable-details'],
-    queryFn: () => suitableApi.getDetails(roofMaterial),
-    staleTime: 0,
-  })
+  // const { data, error, isPending } = useQuery({
+  //   queryKey: ['suitable-details'],
+  //   queryFn: () => suitableApi.getDetails(roofMaterial),
+  //   staleTime: 0,
+  // })
+  const cache = useQueryClient()
+  const listData = cache.getQueryData(['suitable-list']) as Suitable[]
+  const data = listData.filter((item) => item.roof_material === roofMaterial)
 
   return (
     <>
diff --git a/src/components/SurveySales.tsx b/src/components/SurveySales.tsx
index 387b7cd..f0dba94 100644
--- a/src/components/SurveySales.tsx
+++ b/src/components/SurveySales.tsx
@@ -1,9 +1,12 @@
 'use client'
 
-import { surveySalesApi, SurveySalesBasicInfo } from '@/api/surveySales'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { surveySalesApi, SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useState } from 'react'
 
 export default function SurveySales() {
+  const [isSearch, setIsSearch] = useState(false)
+
   const queryClient = useQueryClient()
 
   const {
@@ -34,6 +37,68 @@ export default function SurveySales() {
     createSurveySales(data)
   }
 
+  const { data, error: errorList } = useQuery({
+    queryKey: ['survey-sales', 'list'],
+    queryFn: surveySalesApi.getList,
+    enabled: isSearch,
+  })
+
+  const { mutate: updateSurveySales } = useMutation({
+    mutationFn: surveySalesApi.update,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['survey-sales', 'list'] })
+    },
+  })
+
+  const handleUpdateSurveySales = () => {
+    const detailData: SurveySalesDetailInfo = {
+      contract_capacity: '1100',
+      retail_company: 'test company',
+      supplementary_facilities: 1,
+      supplementary_facilities_etc: '',
+      installation_system: 3,
+      installation_system_etc: '',
+      construction_year: 4,
+      construction_year_etc: '',
+      roof_material: 1,
+      roof_material_etc: '',
+      roof_shape: 2,
+      roof_shape_etc: '',
+      roof_slope: '4.5',
+      house_structure: 1,
+      house_structure_etc: '',
+      rafter_material: 5,
+      rafter_material_etc: 'test message',
+      rafter_size: 3,
+      rafter_size_etc: '',
+      rafter_pitch: 2,
+      rafter_pitch_etc: '',
+      rafter_direction: 3,
+      open_field_plate_kind: 3,
+      open_field_plate_kind_etc: '',
+      open_field_plate_thickness: '',
+      leak_trace: false,
+      waterproof_material: 2,
+      waterproof_material_etc: '',
+      insulation_presence: 3,
+      insulation_presence_etc: '',
+      structure_order: 2,
+      structure_order_etc: '',
+      installation_availability: 1,
+      installation_availability_etc: '',
+      memo: 'test memo',
+    }
+
+    if (!data) return
+
+    const surveySalesData: SurveySalesBasicInfo = {
+      ...data[0],
+      detail_info: { ...detailData },
+    }
+
+    updateSurveySales(surveySalesData)
+  }
+
   return (
     <>
       <div className="flex items-center justify-center">
@@ -41,13 +106,22 @@ export default function SurveySales() {
           <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleSurveySales}>
             신규 등록
           </button>
-          <button className="bg-blue-500 text-white px-4 py-2 rounded-md">조회</button>
+          <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={() => setIsSearch(true)}>
+            조회
+          </button>
+          <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleUpdateSurveySales}>
+            수정 (detail info add)
+          </button>
         </div>
       </div>
       {/* <div className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 m-4" role="alert">
         <p className="font-bold">Be Warned</p>
         <p>기본 데이터 세팅 되어있습니다.</p>
       </div> */}
+      <div>
+        {errorList && <div>Error: {errorList.message}</div>}
+        {data && data.map((item) => <div key={item.id}>{JSON.stringify(item)}</div>)}
+      </div>
     </>
   )
 }