diff --git a/frontend/src/app/recruitment/announcement/page.tsx b/frontend/src/app/recruitment/announcement/page.tsx new file mode 100644 index 0000000..c402ac7 --- /dev/null +++ b/frontend/src/app/recruitment/announcement/page.tsx @@ -0,0 +1,87 @@ +'use client' + +import AnnouncementCard from '@/components/recruitment/announcement/AnnouncementCard' +import { AnnouncementDataType } from '@/utils/types' +import { useInfiniteQuery } from '@tanstack/react-query' +import { useEffect } from 'react' + +export default function Announcement() { + const accessToken = + typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null + const persistToken = + typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null + + const getData = async ({ pageParam = 1 }) => { + const params = new URLSearchParams() + params.set('page', String(pageParam)) + params.set('size', '12') + params.set('direction', 'ASC') + + const res = await fetch( + `${process.env.NEXT_PUBLIC_BASE_URL}/jobs?${params.toString()}`, + { + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${accessToken || persistToken}`, + }, + }, + ) + + if (!res.ok) { + const data = await res.json() + throw new Error(data.message) + } + + const data = await res.json() + return data.data + } + + const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = + useInfiniteQuery(['announcement'], getData, { + getNextPageParam: (lastPage, pages) => + lastPage.length < 12 ? undefined : pages.length + 1, + }) + + useEffect(() => { + if (!isFetchingNextPage) { + const handleScroll = () => { + if ( + window.innerHeight + document.documentElement.scrollTop !== + document.documentElement.offsetHeight + ) + return + fetchNextPage() + } + window.addEventListener('scroll', handleScroll) + } + }, [fetchNextPage, isFetchingNextPage]) + + if (status === 'loading') { + return Loading... + } + + if (status === 'error') { + return Error fetching data + } + + return ( +