fix: fix data not loading error when navigating PDF pages without not login

- 로그인 하지 않고 pdf 링크로 이동 시 데이터 로드 되지 않는 문제 해결
- 로그인 하지 않았을 때 pdf 다운로드 이후 메인 페이지로 이동하도록 수정

README.md

@@ -18,7 +18,7 @@ Next.js와 TypeScript로 구축된 현장 조사용 모바일 애플리케이션
 
 ### 필수 요구사항
 
-- Node.js (LTS 버전)
+- Node.js (LTS 버전) 22.16.0 권장
 - npm 또는 yarn 또는 pnpm 또는 burn
 - Prisma CLI
 
@@ -52,7 +52,9 @@ npm start
 
 ## 프로젝트 구조
 
-[프로젝트 구조 Diagram](./diagram/mermaid.md)
+[컴포넌트 간 관계 Diagram](./diagram/mermaid.md)
+
+[페이지 컴포넌트 간 관례 Diagram](./diagram/mermaid3.md)
 
 ```
 ├── app/              # Next.js 앱 디렉토리
@@ -63,6 +65,12 @@ npm start
 └── public/          # 정적 자산
 ```
 
+## 로그인
+
+[로그인 Sequence Diagram](./diagram/mermaid2.md)
+
+[로그인 컴포넌트 Diagram](./diagram/Login.md)
+
 ## 참고
 
 ### prisma 연결

src/api/auth.ts

@@ -1,22 +0,0 @@
-'use server'
-
-import { sessionOptions } from '@/libs/session'
-import type { SessionData } from '@/types/Auth'
-import { getIronSession } from 'iron-session'
-import { cookies } from 'next/headers'
-import { redirect } from 'next/navigation'
-
-export const logout = async () => {
-  const cookieStore = await cookies()
-  const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
-
-  session.destroy()
-  return redirect('/login')
-}
-
-export const getSession = async () => {
-  const cookieStore = await cookies()
-  const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
-
-  return session
-}

src/api/suitable.ts

@@ -1,107 +0,0 @@
-import { database } from '@/data'
-import { axiosInstance } from '@/libs/axios'
-
-export interface Suitable {
-  id?: number
-  product_name: string
-  manufacturer: string
-  roof_material: string
-  shape: string
-  support_roof_tile: string
-  support_roof_tile_memo: string
-  support_roof_bracket: string
-  support_roof_bracket_memo: string
-  yg_anchor: string
-  yg_anchor_memo: string
-  rg_roof_tile_part: string
-  rg_roof_tile_part_memo: string
-  dido_hunt_support_tile_2: string
-  dido_hunt_support_tile_2_memo: string
-  takashima_power_base: string
-  takashima_power_base_memo: string
-  takashima_tile_bracket: string
-  takashima_tile_bracket_memo: string
-  slate_bracket_4: string
-  slate_bracket_4_memo: string
-  slate_single_metal_bracket: string
-  slate_single_metal_bracket_memo: string
-  dido_hunt_short_rack_4: string
-  dido_hunt_short_rack_4_memo: string
-  takashima_slate_bracket_slate_single: string
-  takashima_slate_bracket_slate_single_memo: string
-  df_metal_bracket: string
-  df_metal_bracket_memo: string
-  slate_metal_bracket: string
-  slate_metal_bracket_memo: string
-  takashima_slate_bracket_metal_roof: string
-  takashima_slate_bracket_metal_roof_memo: string
-}
-
-export const suitableApi = {
-  // getList: async (category?: string, keyword?: string): Promise<Suitable[]> => {
-  //   let condition: any = {}
-  //   if (category) {
-  //     condition['category'] = category
-  //   }
-  //   if (keyword) {
-  //     condition['keyword'] = {
-  //       contains: keyword,
-  //     }
-  //   }
-  //   console.log('🚀 ~ getList: ~ condition:', condition)
-  //   const response = await axiosInstance(null).get<Suitable[]>('/api/suitable/list', { params: condition })
-  //   console.log('🚀 ~ getList: ~ response:', response)
-  //   return response.data
-  // },
-  // getCategory: async (): Promise<Suitable[]> => {
-  //   const response = await axiosInstance(null).get<Suitable[]>('/api/suitable/category')
-  //   console.log('🚀 ~ getCategory: ~ response:', response)
-  //   return response.data
-  // },
-  // getDetails: async (roofMaterial: string): Promise<Suitable[]> => {
-  //   const response = await axiosInstance(null).get<Suitable[]>(`/api/suitable/details?roof-material=${roofMaterial}`)
-  //   console.log('🚀 ~ getDetails: ~ response:', response)
-  //   return response.data
-  // },
-  // create: async () => {
-  //   const suitableData: Suitable[] = []
-  //   database.forEach((item) => {
-  //     suitableData.push({
-  //       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],
-  //     })
-  //   })
-  //   const response = await axiosInstance(null).post<Suitable[]>('/api/suitable', suitableData)
-  //   return response.data
-  // },
-}

src/api/surveySales.ts

@@ -1,127 +0,0 @@
-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
-  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
-}
-
-export const surveySalesApi = {
-  create: async (data: SurveySalesBasicInfo): Promise<number> => {
-    try {
-      const response = await axiosInstance(null).post<SurveySalesBasicInfo>('/api/survey-sales', data)
-      return response.data.id ?? 0
-    } catch (error) {
-      console.error(error)
-      return 0
-    }
-  },
-  getList: async (): Promise<SurveySalesBasicInfo[] | []> => {
-    try {
-      const response = await axiosInstance(null).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(null).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(null).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(null).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(null).post<SurveySalesDetailInfo>(`/api/survey-sales/${surveyId}`, data)
-      return true
-    } catch (error) {
-      throw error
-    }
-  },
-  confirm: async (id: number): Promise<boolean> => {
-    try {
-      await axiosInstance(null).patch<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
-      return true
-    } catch (error) {
-      throw error
-    }
-  },
-  // update: async (data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo> => {
-  //   const response = await axiosInstance.put<SurveySalesBasicInfo>(`/api/survey-sales`, data)
-  //   return response.data
-  // },
-}

src/api/user.ts

@@ -1,37 +0,0 @@
-import { axiosInstance } from '@/libs/axios'
-
-export interface UserData {
-  username: string
-  email: string
-  password: string
-}
-
-export interface User {
-  id: number
-  username: string
-  email: string
-  created_at: string
-  updated_at: string
-}
-
-export interface LoginData {
-  username: string
-  password: string
-}
-
-export const userApi = {
-  create: async (data: UserData): Promise<User> => {
-    const response = await axiosInstance(null).post<User>('/api/user/create', data)
-    return response.data
-  },
-
-  getList: async (): Promise<User[]> => {
-    const response = await axiosInstance(null).get<User[]>('/api/user/list')
-    return response.data
-  },
-
-  getUser: async (data: LoginData): Promise<User> => {
-    const response = await axiosInstance(null).post<User>(`/api/user`, data)
-    return response.data
-  },
-}

src/app/api/survey-sales/[id]/route.ts

@@ -15,6 +15,7 @@ interface SessionParams {
   storeId: string | null
   builderId: string | null
   isLoggedIn: string | null
+  isPdf: boolean | null
 }
 
 const checkT01Role = (survey: Survey): boolean => survey.SRL_NO !== '一時保存'
@@ -74,6 +75,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
       storeId: searchParams.get('storeId'),
       builderId: searchParams.get('builderId'),
       isLoggedIn: searchParams.get('isLoggedIn'),
+      isPdf: searchParams.get('isPdf') === 'true' ? true : false,
     }
     // @ts-ignore
     const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findFirst({
@@ -84,7 +86,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         DETAIL_INFO: true,
       },
     })
-    if (checkRole(survey, sessionParams)) {
+    if (sessionParams.isPdf || checkRole(survey, sessionParams)) {
       return NextResponse.json(survey)
     } else {
       return NextResponse.json({ error: '該当物件の照会権限がありません。' }, { status: 403 })

src/components/pdf/SurveySaleDownloadPdf.tsx

@@ -6,20 +6,27 @@ import { useParams, useRouter } from 'next/navigation'
 import { useSurvey } from '@/hooks/useSurvey'
 import { radioEtcData, roofMaterial, selectBoxOptions, supplementaryFacilities } from '../survey-sale/detail/RoofForm'
 import { useSpinnerStore } from '@/store/spinnerStore'
+import { useSessionStore } from '@/store/session'
 
 export default function SurveySaleDownloadPdf() {
   const params = useParams()
   const id = params.id
   const router = useRouter()
 
-  const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))
+  const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id), true)
   const { setIsShow } = useSpinnerStore()
+  const { session } = useSessionStore()
 
   const targetRef = useRef<HTMLDivElement>(null)
   const isGeneratedRef = useRef(false)
 
   useEffect(() => {
-    if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
+    if (isLoadingSurveyDetail || isGeneratedRef.current) return
+    if (surveyDetail === null) {
+      alert('データが見つかりません。')
+      router.replace('/')
+      return
+    }
     isGeneratedRef.current = true
     handleDownPdf()
   }, [surveyDetail?.id, isLoadingSurveyDetail])
@@ -48,11 +55,19 @@ export default function SurveySaleDownloadPdf() {
       },
     }
 
-    generatePDF(targetRef, options).then(() => {
+    generatePDF(targetRef, options)
-      setIsShow(false)
+      .then(() => {
-      router.replace(`/survey-sale/${id}`)
+        setIsShow(false)
-      alert('PDFの生成が完了しました。 ポップアップウィンドウからダウンロードしてください。')
+        if (session?.isLoggedIn) {
-    })
+          router.replace(`/survey-sale/${id}`)
+        } else {
+          router.replace('/')
+        }
+        alert('PDFの生成が完了しました。 ポップアップウィンドウからダウンロードしてください。')
+      })
+      .catch((error: any) => {
+        console.error('error', error)
+      })
   }
 
   return (

src/components/survey-sale/detail/DataTable.tsx

@@ -4,15 +4,12 @@ import { useSurvey } from '@/hooks/useSurvey'
 import { useParams, useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import DetailForm from './DetailForm'
-import { useSessionStore } from '@/store/session'
 
 export default function DataTable() {
   const params = useParams()
   const id = params.id
   const router = useRouter()
 
-  const { session } = useSessionStore()
-
   useEffect(() => {
     if (Number.isNaN(Number(id))) {
       alert('間違ったアプローチです。')

src/components/survey-sale/detail/DetailForm.tsx

@@ -74,7 +74,7 @@ export default function DetailForm() {
   const modeset = Number(routeId) ? 'READ' : idParam ? 'EDIT' : 'CREATE'
   const id = Number(routeId) ? Number(routeId) : Number(idParam)
 
-  const { surveyDetail, isLoadingSurveyDetail, validateSurveyDetail } = useSurvey(Number(id))
+  const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))
   const { session } = useSessionStore()
 
   const [mode, setMode] = useState<Mode>(modeset)
@@ -103,9 +103,8 @@ export default function DetailForm() {
     }))
   }, [session?.isLoggedIn])
 
-  // 설문 데이터 로딩 및 업데이트
   useEffect(() => {
-    if (isLoadingSurveyDetail || !session?.isLoggedIn) return
+    if (isLoadingSurveyDetail) return
     if (surveyDetail && (mode === 'EDIT' || mode === 'READ')) {
       const { id, uptDt, regDt, detailInfo, ...rest } = surveyDetail
       setBasicInfoData((prev) => ({
@@ -116,12 +115,9 @@ export default function DetailForm() {
       if (detailInfo) {
         const { id, uptDt, regDt, basicInfoId, ...rest } = detailInfo
         setRoofInfoData(rest)
-        if (validateSurveyDetail(rest).trim() !== '') {
-          // validation logic here if needed
-        }
       }
     }
-  }, [mode, session?.isLoggedIn, isLoadingSurveyDetail])
+  }, [mode, isLoadingSurveyDetail, surveyDetail])
 
   const data = {
     basic: basicInfoData,

src/components/survey-sale/list/ListTable.tsx

@@ -27,12 +27,7 @@ export default function ListTable() {
   }, [pathname])
 
   useEffect(() => {
-    if (!session.isLoggedIn || isLoadingSurveyList) return
+    if (isLoadingSurveyList) return
-    // if ('status' in surveyList && surveyList.status === 403) {
-    //   alert('権限がありません。')
-    //   router.push('/survey-sale')
-    //   return
-    // }
     if ('count' in surveyList && surveyList.count > 0) {
       if (offset > 0) {
         setHeldSurveyList((prev) => [...prev, ...surveyList.data])
@@ -44,7 +39,7 @@ export default function ListTable() {
       setHeldSurveyList([])
       setHasMore(false)
     }
-  }, [surveyList, offset, session.isLoggedIn])
+  }, [surveyList, offset, isLoadingSurveyList])
 
   const handleDetailClick = (id: number) => {
     router.push(`/survey-sale/${id}`)

src/hooks/useSurvey.ts

@@ -55,7 +55,10 @@ type ZipCode = {
   kana3: string
 }
 
-export function useSurvey(id?: number): {
+export function useSurvey(
+  id?: number,
+  isPdf?: boolean,
+): {
   surveyList: { data: SurveyBasicInfo[]; count: number } | {}
   surveyDetail: SurveyBasicInfo | null
   isLoadingSurveyList: boolean
@@ -102,6 +105,9 @@ export function useSurvey(id?: number): {
           return false
       }
     }
+    if (isPdf) {
+      return true
+    }
     alert('ログインしていません。')
     return false
   }
@@ -114,7 +120,7 @@ export function useSurvey(id?: number): {
     queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, offset, session?.storeNm, session?.builderId, session?.role],
     queryFn: async () => {
       if (!checkSession()) {
-        router.replace('/')
+        router.replace('/login')
         return { data: [], count: 0 }
       }
       const resp = await axiosInstance(null).get<{ data: SurveyBasicInfo[]; count: number }>('/api/survey-sales', {
@@ -131,7 +137,6 @@ export function useSurvey(id?: number): {
       })
       return resp.data
     },
-    enabled: session?.isLoggedIn,
   })
   const surveyData = useMemo(() => {
     if (!surveyListData) return { count: 0, data: [] }
@@ -144,7 +149,7 @@ export function useSurvey(id?: number): {
     queryKey: ['survey', id],
     queryFn: async () => {
       if (!checkSession()) {
-        router.replace('/survey-sale')
+        router.replace('/login')
         return null
       }
       if (id === 0 || id === undefined) return null
@@ -155,6 +160,7 @@ export function useSurvey(id?: number): {
             storeId: session?.storeId,
             builderId: session?.builderId,
             isLoggedIn: session?.isLoggedIn,
+            isPdf: isPdf,
           },
         })
         return resp.data
@@ -164,7 +170,7 @@ export function useSurvey(id?: number): {
         return null
       }
     },
-    enabled: id !== 0 && id !== undefined && session?.isLoggedIn,
+    enabled: id !== 0 && id !== undefined,
   })
 
   const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({