From 113d83890e6da8f5309542608702f5190d99a975 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Wed, 23 Apr 2025 15:59:28 +0900 Subject: [PATCH] feat: Add getDetails API method and refactor data mapping in suitable API --- src/api/suitable.ts | 69 ++++++++++++++------------- src/app/api/suitable/details/route.ts | 16 +++++++ src/app/suitable/[slug]/page.tsx | 11 +++++ src/app/suitable/page.tsx | 3 ++ src/components/SuitableDetails.tsx | 20 ++++++++ src/components/SuitableSearch.tsx | 21 ++++++++ 6 files changed, 108 insertions(+), 32 deletions(-) create mode 100644 src/app/api/suitable/details/route.ts create mode 100644 src/app/suitable/[slug]/page.tsx create mode 100644 src/components/SuitableDetails.tsx create mode 100644 src/components/SuitableSearch.tsx diff --git a/src/api/suitable.ts b/src/api/suitable.ts index 1fee42b..e8458c4 100644 --- a/src/api/suitable.ts +++ b/src/api/suitable.ts @@ -44,43 +44,48 @@ export const suitableApi = { return response.data }, + getDetails: async (roofMaterial: string): Promise => { + const response = await axiosInstance.get(`/api/suitable/details?roof-material=${roofMaterial}`) + return response.data + }, + create: async () => { const suitableData: Suitable[] = [] database.forEach((item) => { suitableData.push({ - product_name: item[1], - manufacturer: item[2], - roof_material: item[3], - shape: item[4], - support_roof_tile: item[5], - support_roof_tile_memo: item[6], - support_roof_bracket: item[7], - support_roof_bracket_memo: item[8], - yg_anchor: item[9], - yg_anchor_memo: item[10], - rg_roof_tile_part: item[11], - rg_roof_tile_part_memo: item[12], - dido_hunt_support_tile_2: item[13], - dido_hunt_support_tile_2_memo: item[14], - takashima_power_base: item[15], - takashima_power_base_memo: item[16], - takashima_tile_bracket: item[17], - takashima_tile_bracket_memo: item[18], - slate_bracket_4: item[19], - slate_bracket_4_memo: item[20], - slate_single_metal_bracket: item[21], - slate_single_metal_bracket_memo: item[22], - dido_hunt_short_rack_4: item[23], - dido_hunt_short_rack_4_memo: item[24], - takashima_slate_bracket_slate_single: item[25], - takashima_slate_bracket_slate_single_memo: item[26], - df_metal_bracket: item[27], - df_metal_bracket_memo: item[28], - slate_metal_bracket: item[29], - slate_metal_bracket_memo: item[30], - takashima_slate_bracket_metal_roof: item[31], - takashima_slate_bracket_metal_roof_memo: item[32], + product_name: item[0], + manufacturer: item[1], + roof_material: item[2], + shape: item[3], + support_roof_tile: item[4], + support_roof_tile_memo: item[5], + support_roof_bracket: item[6], + support_roof_bracket_memo: item[7], + yg_anchor: item[8], + yg_anchor_memo: item[9], + rg_roof_tile_part: item[10], + rg_roof_tile_part_memo: item[11], + dido_hunt_support_tile_2: item[12], + dido_hunt_support_tile_2_memo: item[13], + takashima_power_base: item[14], + takashima_power_base_memo: item[15], + takashima_tile_bracket: item[16], + takashima_tile_bracket_memo: item[17], + slate_bracket_4: item[18], + slate_bracket_4_memo: item[19], + slate_single_metal_bracket: item[20], + slate_single_metal_bracket_memo: item[21], + dido_hunt_short_rack_4: item[22], + dido_hunt_short_rack_4_memo: item[23], + takashima_slate_bracket_slate_single: item[24], + takashima_slate_bracket_slate_single_memo: item[25], + df_metal_bracket: item[26], + df_metal_bracket_memo: item[27], + slate_metal_bracket: item[28], + slate_metal_bracket_memo: item[29], + takashima_slate_bracket_metal_roof: item[30], + takashima_slate_bracket_metal_roof_memo: item[31], }) }) diff --git a/src/app/api/suitable/details/route.ts b/src/app/api/suitable/details/route.ts new file mode 100644 index 0000000..5f70d09 --- /dev/null +++ b/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) +} diff --git a/src/app/suitable/[slug]/page.tsx b/src/app/suitable/[slug]/page.tsx new file mode 100644 index 0000000..6a4f8a0 --- /dev/null +++ b/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 ( + <> +

Suitable Details

+ + + ) +} diff --git a/src/app/suitable/page.tsx b/src/app/suitable/page.tsx index c35b0bb..50e6a33 100644 --- a/src/app/suitable/page.tsx +++ b/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 ( <> + {/* 졜초 ν•œλ²ˆ λ°€μ–΄λ„£μŒ */} {/* */} diff --git a/src/components/SuitableDetails.tsx b/src/components/SuitableDetails.tsx new file mode 100644 index 0000000..3d698d7 --- /dev/null +++ b/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 ( + <> +

Searched Roof Material: {roofMaterial}

+ {data && data.map((item) =>
{item.product_name}
)} + + ) +} diff --git a/src/components/SuitableSearch.tsx b/src/components/SuitableSearch.tsx new file mode 100644 index 0000000..9583ede --- /dev/null +++ b/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 ( + <> + + + + ) +}