[REFACTOR] 메인 페이지 구조 개선

src/apis/message.ts

@@ -1,39 +1,33 @@
 import { client } from './client'
 
 export const getMessages = async (page: number, size: number) => {
-  try {
-    const {
-      data: { data },
-    } = await client.get('/mainPage/letter', {
-      params: {
-        page,
-        size,
-      },
-    })
-    return data
-  } catch (error) {
-    if (error instanceof Error) {
-      console.error(error.message)
-    }
+  const {
+    data: { data },
+  } = await client.get('/mainPage/letter', {
+    params: {
+      page,
+      size,
+    },
+  })
+  if (!data) {
+    throw new Error('No messages received from server')
   }
+  return data
 }
 
 export const getMainData = async () => {
-  try {
-    const {
-      data: { data },
-    } = await client.get('/mainPage', {
-      params: {
-        page: 0,
-        size: 1,
-      },
-    })
-    return data
-  } catch (error) {
-    if (error instanceof Error) {
-      console.error(error.message)
-    }
+  const {
+    data: { data },
+  } = await client.get('/mainPage', {
+    params: {
+      page: 0,
+      size: 1,
+    },
+  })
+  if (!data) {
+    throw new Error('No main data received from server')
   }
+  return data
 }
 
 export const getSearchResult = async (keyword: string, target: string) => {

src/constants/cache.ts

@@ -0,0 +1,2 @@
+export const CACHE_TIME = 1000 * 60 * 60 // 1시간
+export const STALE_TIME = 1000 * 60 * 5 // 5분

src/hooks/useMainData.ts

@@ -1,11 +1,12 @@
 import { getMainData } from '@/apis/message'
+import { CACHE_TIME, STALE_TIME } from '@/constants/cache'
 import { useQuery } from '@tanstack/react-query'
 
 export const useMainData = () => {
   return useQuery({
     queryKey: ['main-data'],
     queryFn: () => getMainData(),
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 60, // 1시간
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
   })
 }

src/hooks/useMessage.ts

@@ -1,4 +1,5 @@
 import { getMessages, getMyMessageDetail, getMyMessages } from '@/apis/message'
+import { CACHE_TIME, STALE_TIME } from '@/constants/cache'
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 
 const MESSAGE_SIZE = 10
@@ -14,26 +15,26 @@ export const useGetMessages = () => {
       return allPages.length
     },
     initialPageParam: 0,
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 60, // 1시간
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
   })
 }
 
 export const useGetMyMessages = () => {
   return useQuery({
     queryKey: ['my-messages'],
     queryFn: () => getMyMessages(),
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 60, // 1시간
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
   })
 }
 
 export const useGetMyMessageDetail = (id: string) => {
   return useQuery({
     queryKey: ['my-message-detail', id],
     queryFn: () => getMyMessageDetail(id),
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 60, // 1시간
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
     retry: 0,
   })
 }

src/hooks/useNews.tsx

@@ -1,4 +1,5 @@
 import { getNews } from '@/apis/news'
+import { CACHE_TIME, STALE_TIME } from '@/constants/cache'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 const NEWS_SIZE = 10
@@ -14,7 +15,7 @@ export const useGetNews = () => {
       return allPages.length
     },
     initialPageParam: 0,
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 60, // 1시간
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
   })
 }

src/hooks/useNotices.ts

@@ -1,4 +1,5 @@
 import { getNoticeById, getNotices } from '@/apis/notice'
+import { CACHE_TIME, STALE_TIME } from '@/constants/cache'
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 
 export const useGetNotices = (size: number) => {
@@ -12,16 +13,16 @@ export const useGetNotices = (size: number) => {
       return allPages.length // 다음 페이지 번호
     },
     initialPageParam: 0,
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 60, // 1시간
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
   })
 }
 
 export const useGetNoticeById = (id: string) => {
   return useQuery({
     queryKey: ['notice', id],
     queryFn: () => getNoticeById(id),
-    staleTime: 1000 * 60 * 60, // 1시간
-    gcTime: 1000 * 60 * 60 * 2, // 2시간
+    staleTime: CACHE_TIME,
+    gcTime: CACHE_TIME * 2,
   })
 }

src/hooks/useScrollFade.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export const useScrollFade = (targetPosition: number = 430) => {
+  const [showFade, setShowFade] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY
+      setShowFade(scrollPosition > targetPosition)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [targetPosition])
+
+  return showFade
+}

src/hooks/useShare..ts

@@ -1,11 +1,12 @@
 import { getSharing } from '@/apis/share'
+import { CACHE_TIME, STALE_TIME } from '@/constants/cache'
 import { useQuery } from '@tanstack/react-query'
 
 export const useGetSharing = () => {
   return useQuery({
     queryKey: ['sharing'],
     queryFn: () => getSharing(),
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 60, // 1시간
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
   })
 }

src/main.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import App from '@/App'
 import '@/styles/index.css'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as Sentry from '@sentry/react'
 import { browserTracingIntegration, replayIntegration } from '@sentry/react'
 
@@ -16,7 +16,36 @@ Sentry.init({
   tracePropagationTargets: ['localhost', import.meta.env.VITE_API_URL],
 })
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+  queryCache: new QueryCache({
+    onError: (error) => {
+      if (error instanceof Error) {
+        Sentry.captureException(error)
+      } else {
+        Sentry.captureMessage('Unknown Query Error', {
+          extra: { error },
+        })
+      }
+    },
+  }),
+  mutationCache: new MutationCache({
+    onError: (error) => {
+      if (error instanceof Error) {
+        Sentry.captureException(error)
+      } else {
+        Sentry.captureMessage('Unknown Mutation Error', {
+          extra: { error },
+        })
+      }
+    },
+  }),
+})
 
 createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>

src/pages/AuthCallback/index.tsx

@@ -17,7 +17,7 @@ export default function AuthCallback() {
 
   if (error) {
     return (
-      <main className="main-container content-padding">
+      <main className="main-container content-padding justify-between">
         <p className="mb-4 text-red-500">{error}</p>
         <Link to="/">
           <SolidButton variant="primary" size="medium" className="rounded-full">

src/pages/Login/index.tsx

@@ -22,9 +22,9 @@ export default function LoginPage() {
   return (
     <>
       <NonLoginModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
-      <main className="main-container content-padding">
-        <div className="fixed top-0 left-0 z-0 w-full bg-center bg-cover h-1/2 bg-star-top" />
-        <div className="fixed bottom-0 left-0 z-0 w-full bg-center bg-cover h-1/2 bg-star-bottom" />
+      <main className="main-container content-padding justify-between">
+        <div className="fixed left-0 top-0 z-0 h-1/2 w-full bg-star-top bg-cover bg-center" />
+        <div className="fixed bottom-0 left-0 z-0 h-1/2 w-full bg-star-bottom bg-cover bg-center" />
         <LoginHeader />
         <LoginActions
           onKakaoLoginClick={() => {