next.config.ts

@@ -7,10 +7,31 @@ const nextConfig: NextConfig = {
     includePaths: [path.join(__dirname, './src/styles')],
   },
   async rewrites() {
+    return [
+      {
+        source: '/:path*',
+        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`,
+      },
+    ]
+  },
+  async headers() {
     return [
       {
         source: '/api/:path*',
-        destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
+        headers: [
+          {
+            key: 'Access-Control-Allow-Origin',
+            value: '*',
+          },
+          {
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET, POST, PUT, DELETE, OPTIONS',
+          },
+          {
+            key: 'Access-Control-Allow-Headers',
+            value: 'Content-Type, Authorization',
+          },
+        ],
       },
     ]
   },

src/api/surveySales.ts

@@ -64,8 +64,4 @@ 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
-  },
 }

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

@@ -1,5 +1,4 @@
 import { NextResponse } from 'next/server'
-import { prisma } from '@/libs/prisma'
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)

src/app/api/survey-sales/route.ts

@@ -11,25 +11,3 @@ 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' })
-}

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

@@ -2,7 +2,6 @@ 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>

src/components/Suitable.tsx

@@ -9,7 +9,6 @@ export default function Suitable() {
   const router = useRouter()
   const queryClient = useQueryClient()
   const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
-
   const handleItemClick = (item: SuitableType) => {
     if (!item.id) return // 초기 데이터 import 때문에 Suitable.id가 optional 타입이라서 방어 처리 추가
     selectedItems.some((selected) => selected.id === item.id) ? removeSelectedItem(item.id) : addSelectedItem(item)
@@ -24,7 +23,7 @@ export default function Suitable() {
     enabled: false,
   })
 
-  if (isLoading || !suitableList || suitableList.length === 0) {
+  if (isLoading || !suitableList) {
     return <div>Loading...</div>
   }
 

src/components/SuitableDetails.tsx

@@ -2,70 +2,19 @@
 
 import { suitableApi } from '@/api/suitable'
 import { useQuery } from '@tanstack/react-query'
-import generatePDF, { usePDF, Options } from 'react-to-pdf'
-import PDFContent from './SuitablePdf'
-
-const pdfOptions: Options = {
-  filename: 'page.pdf',
-  method: 'save',
-  page: { format: 'a4', margin: 10 },
-  overrides: {
-    pdf: {
-      compress: true,
-    },
-  },
-}
 
 export default function SuitableDetails({ roofMaterial }: { roofMaterial: string }) {
-  const { data, isLoading } = useQuery({
+  console.log('🚀 ~ SuitableDetails ~ roofMaterial:', roofMaterial)
+  const { data, error, isPending } = useQuery({
     queryKey: ['suitable-details'],
     queryFn: () => suitableApi.getDetails(roofMaterial),
     staleTime: 0,
-    enabled: !!roofMaterial,
   })
 
-  const { toPDF, targetRef } = usePDF({ ...pdfOptions, method: 'open' })
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
   return (
     <>
-      <button className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => toPDF()}>
+      <h1 className="text-4xl font-bold">Searched Roof Material: {roofMaterial}</h1>
-        OPEN PDF
+      {data && data.map((item) => <div key={item.id}>{item.product_name}</div>)}
-      </button>
-      <button
-        className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-        onClick={() => generatePDF(targetRef, pdfOptions)}
-      >
-        SAVE PDF
-      </button>
-      {/* <button onClick={handleDownloadPDF}>Download PDF</button> */}
-      {/* <div ref={targetRef} className="pdf-content"> */}
-      <div>
-        <h1 className="text-4xl font-bold">Searched Roof Material: {decodeURIComponent(roofMaterial as string)}</h1>
-        {data &&
-          data.map((item) => (
-            <div key={item.id}>
-              <br />
-              <div>product_name: {item.product_name}</div>
-              <div>manufacturer: {item.manufacturer}</div>
-              <div>roof_material: {item.roof_material}</div>
-              <div>shape: {item.shape}</div>
-              <div>support_roof_tile: {item.support_roof_tile}</div>
-              <div>support_roof_bracket: {item.support_roof_bracket}</div>
-              <div>yg_anchor: {item.yg_anchor}</div>
-            </div>
-          ))}
-      </div>
-      {/* <div style={{ display: 'none' }}> */}
-      <div>
-        <div ref={targetRef}>
-          <h1 className="text-4xl font-bold">PDF 내용 나와라</h1>
-          <PDFContent data={data ?? []} />
-        </div>
-      </div>
     </>
   )
 }

src/components/SuitablePdf.tsx

@@ -1,116 +0,0 @@
-import { Suitable } from '@/api/suitable'
-
-interface StatusInfo {
-  statusIcon: string
-  statusText: string
-}
-
-interface FittingItem {
-  name: string
-  value: string
-  memo: string
-}
-
-function getStatusInfo(value: string): StatusInfo | null {
-  const val = value?.trim()?.replace(/ー|－/g, '-') || ''
-
-  if (['○', '〇'].includes(val)) {
-    return {
-      statusIcon: '✅',
-      statusText: '設置可',
-    }
-  }
-
-  if (['×', '✕'].includes(val)) {
-    return {
-      statusIcon: '❌',
-      statusText: '設置不可',
-    }
-  }
-
-  if (['-', '－', 'ー'].includes(val)) {
-    return {
-      statusIcon: '❓',
-      statusText: 'お問い合わせください',
-    }
-  }
-
-  if (val === '') return null
-
-  return {
-    statusIcon: '✅',
-    statusText: `${val} で設置可`,
-  }
-}
-
-function getFittingItems(item: Suitable): FittingItem[] {
-  return [
-    { name: '屋根瓦用支持金具', value: item.support_roof_tile, memo: item.support_roof_tile_memo },
-    { name: '屋根ブラケット用支持金具', value: item.support_roof_bracket, memo: item.support_roof_bracket_memo },
-    { name: 'YGアンカー', value: item.yg_anchor, memo: item.yg_anchor_memo },
-    { name: 'RG屋根瓦パーツ', value: item.rg_roof_tile_part, memo: item.rg_roof_tile_part_memo },
-    { name: 'DIDOハント支持瓦2', value: item.dido_hunt_support_tile_2, memo: item.dido_hunt_support_tile_2_memo },
-    { name: '高島パワーベース', value: item.takashima_power_base, memo: item.takashima_power_base_memo },
-    { name: '高島瓦ブラケット', value: item.takashima_tile_bracket, memo: item.takashima_tile_bracket_memo },
-    { name: 'スレートブラケット4', value: item.slate_bracket_4, memo: item.slate_bracket_4_memo },
-    { name: 'スレートシングルメタルブラケット', value: item.slate_single_metal_bracket, memo: item.slate_single_metal_bracket_memo },
-    { name: 'DIDOハントショートラック4', value: item.dido_hunt_short_rack_4, memo: item.dido_hunt_short_rack_4_memo },
-    {
-      name: '高島スレートブラケットスレートシングル',
-      value: item.takashima_slate_bracket_slate_single,
-      memo: item.takashima_slate_bracket_slate_single_memo,
-    },
-    { name: 'DFメタルブラケット', value: item.df_metal_bracket, memo: item.df_metal_bracket_memo },
-    { name: 'スレートメタルブラケット', value: item.slate_metal_bracket, memo: item.slate_metal_bracket_memo },
-    { name: '高島スレートブラケットメタル屋根', value: item.takashima_slate_bracket_metal_roof, memo: item.takashima_slate_bracket_metal_roof_memo },
-  ]
-}
-
-function FittingItem({ fitting }: { fitting: FittingItem }) {
-  const statusInfo = getStatusInfo(fitting.value)
-  if (!statusInfo) return null
-
-  return (
-    <li>
-      <span>{statusInfo.statusIcon}</span>
-      <span>
-        <strong>{fitting.name}</strong>：{statusInfo.statusText}
-      </span>
-      {fitting.memo && (
-        <span>
-          <strong>備考：</strong>
-          {fitting.memo}
-        </span>
-      )}
-    </li>
-  )
-}
-
-export default function PDFContent({ data }: { data: Suitable[] }) {
-  return (
-    <div className="pdf-content">
-      <style jsx global>{`
-        .pdf-content,
-        .pdf-content * {
-          color: black !important;
-          -webkit-print-color-adjust: exact !important;
-          print-color-adjust: exact !important;
-        }
-      `}</style>
-      <h1>適合結果 (적합결과)</h1>
-      {data.map((item) => (
-        <div key={item.id}>
-          <br />
-          <h2>
-            {item.product_name}（{item.manufacturer} / {item.roof_material} / {item.shape}）
-          </h2>
-          <ul>
-            {getFittingItems(item).map((fitting, index) => (
-              <FittingItem key={index} fitting={fitting} />
-            ))}
-          </ul>
-        </div>
-      ))}
-    </div>
-  )
-}

src/components/SuitableSearch.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query'
 import { useSuitable } from '@/hooks/useSuitable'
-import Link from 'next/link'
 
 export default function SuitableSearch() {
   const router = useRouter()
@@ -75,9 +74,7 @@ export default function SuitableSearch() {
             </option>
           ))}
         </select>
-        <Link href={`/suitable/${selectedCategory}`} className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <button onClick={() => router.push(`/suitable/${selectedCategory}`)}> 지붕재 종류 상세보기 페이지 이동</button>
-          지붕재 종류 상세보기 페이지 이동
-        </Link>
       </div>
       <div>
         <input type="text" placeholder="검색어를 입력하세요" onChange={(e) => setSearchValue(e.target.value)} />

src/components/SurveySales.tsx

@@ -1,12 +1,9 @@
 'use client'
 
-import { surveySalesApi, SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales'
+import { surveySalesApi, SurveySalesBasicInfo } from '@/api/surveySales'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useState } from 'react'
 
 export default function SurveySales() {
-  const [isSearch, setIsSearch] = useState(false)
-
   const queryClient = useQueryClient()
 
   const {
@@ -37,68 +34,6 @@ 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">
@@ -106,22 +41,13 @@ 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" onClick={() => setIsSearch(true)}>
+          <button className="bg-blue-500 text-white px-4 py-2 rounded-md">조회</button>
-            조회
-          </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>
     </>
   )
 }