feat: Add getDetails API method and refactor data mapping in suitable API

src/api/suitable.ts

@@ -44,43 +44,48 @@ export const suitableApi = {
     return response.data
   },
 
+  getDetails: async (roofMaterial: string): Promise<Suitable[]> => {
+    const response = await axiosInstance.get<Suitable[]>(`/api/suitable/details?roof-material=${roofMaterial}`)
+    return response.data
+  },
+
   create: async () => {
     const suitableData: Suitable[] = []
 
     database.forEach((item) => {
       suitableData.push({
-        product_name: item[1],
+        product_name: item[0],
-        manufacturer: item[2],
+        manufacturer: item[1],
-        roof_material: item[3],
+        roof_material: item[2],
-        shape: item[4],
+        shape: item[3],
-        support_roof_tile: item[5],
+        support_roof_tile: item[4],
-        support_roof_tile_memo: item[6],
+        support_roof_tile_memo: item[5],
-        support_roof_bracket: item[7],
+        support_roof_bracket: item[6],
-        support_roof_bracket_memo: item[8],
+        support_roof_bracket_memo: item[7],
-        yg_anchor: item[9],
+        yg_anchor: item[8],
-        yg_anchor_memo: item[10],
+        yg_anchor_memo: item[9],
-        rg_roof_tile_part: item[11],
+        rg_roof_tile_part: item[10],
-        rg_roof_tile_part_memo: item[12],
+        rg_roof_tile_part_memo: item[11],
-        dido_hunt_support_tile_2: item[13],
+        dido_hunt_support_tile_2: item[12],
-        dido_hunt_support_tile_2_memo: item[14],
+        dido_hunt_support_tile_2_memo: item[13],
-        takashima_power_base: item[15],
+        takashima_power_base: item[14],
-        takashima_power_base_memo: item[16],
+        takashima_power_base_memo: item[15],
-        takashima_tile_bracket: item[17],
+        takashima_tile_bracket: item[16],
-        takashima_tile_bracket_memo: item[18],
+        takashima_tile_bracket_memo: item[17],
-        slate_bracket_4: item[19],
+        slate_bracket_4: item[18],
-        slate_bracket_4_memo: item[20],
+        slate_bracket_4_memo: item[19],
-        slate_single_metal_bracket: item[21],
+        slate_single_metal_bracket: item[20],
-        slate_single_metal_bracket_memo: item[22],
+        slate_single_metal_bracket_memo: item[21],
-        dido_hunt_short_rack_4: item[23],
+        dido_hunt_short_rack_4: item[22],
-        dido_hunt_short_rack_4_memo: item[24],
+        dido_hunt_short_rack_4_memo: item[23],
-        takashima_slate_bracket_slate_single: item[25],
+        takashima_slate_bracket_slate_single: item[24],
-        takashima_slate_bracket_slate_single_memo: item[26],
+        takashima_slate_bracket_slate_single_memo: item[25],
-        df_metal_bracket: item[27],
+        df_metal_bracket: item[26],
-        df_metal_bracket_memo: item[28],
+        df_metal_bracket_memo: item[27],
-        slate_metal_bracket: item[29],
+        slate_metal_bracket: item[28],
-        slate_metal_bracket_memo: item[30],
+        slate_metal_bracket_memo: item[29],
-        takashima_slate_bracket_metal_roof: item[31],
+        takashima_slate_bracket_metal_roof: item[30],
-        takashima_slate_bracket_metal_roof_memo: item[32],
+        takashima_slate_bracket_metal_roof_memo: item[31],
       })
     })
 

src/app/api/suitable/details/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const roofMaterial = searchParams.get('roof-material')
+  console.log('🚀 ~ GET ~ roof-material:', roofMaterial)
+
+  // @ts-ignore
+  const suitables = await prisma.suitable.findMany({
+    where: {
+      roof_material: roofMaterial,
+    },
+  })
+
+  return NextResponse.json(suitables)
+}

src/app/suitable/[slug]/page.tsx

@@ -0,0 +1,11 @@
+import SuitableDetails from '@/components/SuitableDetails'
+
+export default async function page({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  return (
+    <>
+      <h1>Suitable Details</h1>
+      <SuitableDetails roofMaterial={slug} />
+    </>
+  )
+}

src/app/suitable/page.tsx

@@ -1,8 +1,11 @@
 import Suitable from '@/components/Suitable'
+// import SuitableCreateBtn from '@/components/SuitableCreateBtn'
+import SuitableSearch from '@/components/SuitableSearch'
 
 export default function suitablePage() {
   return (
     <>
+      <SuitableSearch />
       <Suitable />
       {/* 최초 한번 밀어넣음 */}
       {/* <SuitableCreateBtn /> */}

src/components/SuitableDetails.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { suitableApi } from '@/api/suitable'
+import { useQuery } 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,
+  })
+
+  return (
+    <>
+      <h1 className="text-4xl font-bold">Searched Roof Material: {roofMaterial}</h1>
+      {data && data.map((item) => <div key={item.id}>{item.product_name}</div>)}
+    </>
+  )
+}

src/components/SuitableSearch.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function SuitableSearch() {
+  const router = useRouter()
+  const [selectedValue, setSelectedValue] = useState('')
+
+  return (
+    <>
+      <select onChange={(e) => setSelectedValue(e.target.value)}>
+        <option value="">선택 고고</option>
+        <option value="瓦">瓦</option>
+        <option value="スレート">スレート</option>
+        <option value="アスファルトシングル">アスファルトシングル</option>
+      </select>
+      <button onClick={() => router.push(`/suitable/${selectedValue}`)}>검색</button>
+    </>
+  )
+}