✨ 렌더링 및 패치 방식 변경

team-nabi · Nov 29, 2023 · 8fe3b38 · 8fe3b38
1 parent 4438059
commit 8fe3b38
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 49 deletions.
diff --git a/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx b/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx
@@ -26,11 +26,12 @@ const RouteCallback = ({ tokenResponse }: RouteCallbackProps) => {
 
   useEffect(() => {
     if (tokenResponse?.data) {
+      let inHour = new Date(new Date().getTime() + 60 * 60 * 1000)
       Cookies.set(
         Environment.tokenName(),
         tokenResponse?.data?.token?.accessToken,
         {
-          expires: 60 * 60 * 24 * 7,
+          expires: inHour,
         },
       )
       window.location.href = AppPath.home()

diff --git a/src/app/(root)/(routes)/(home)/components/CategorySection.tsx b/src/app/(root)/(routes)/(home)/components/CategorySection.tsx
@@ -1,35 +1,25 @@
-'use client'
-
 import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import Button from '@/components/ui/button'
+import Link from 'next/link'
 import AppPath from '@/config/appPath'
 import { CATEGORY_BUTTON_LIST } from '@/constants/card'
 import { TYPOGRAPHY } from '@/styles/sizes'
 
 const CategorySection = () => {
-  const router = useRouter()
-
-  const handleClick = (name: string) => {
-    if (name === 'ALL_CARD') {
-      router.push(`${AppPath.cards()}`)
-    } else {
-      router.push(`${AppPath.cards()}?category=${name}`)
-    }
-  }
   return (
     <div className="grid items-center w-full grid-cols-5 gap-y-4">
       {CATEGORY_BUTTON_LIST.map((v) => (
-        <Button
+        <Link
           key={v.key}
-          variant={null}
-          size={'icon_md'}
-          className="flex flex-col gap-2 h-[61px] w-auto"
-          onClick={() => handleClick(v.key)}
+          className="flex flex-col gap-2 h-[61px] w-auto justify-center items-center"
+          href={
+            v.key === 'ALL_CARD'
+              ? `${AppPath.cards()}`
+              : `${AppPath.cards()}?category=${v.key}`
+          }
         >
-          <Image className="w-8 h-8" alt={'category-image'} src={v.image} />
+          <Image className="w-8 h-8" alt={`category-${v.key}`} src={v.image} />
           <p className={` w-max ${TYPOGRAPHY.description}`}>{v.value}</p>
-        </Button>
+        </Link>
       ))}
     </div>
   )

diff --git a/src/components/domain/header/sections/RightSide.tsx b/src/components/domain/header/sections/RightSide.tsx
@@ -1,42 +1,42 @@
+'use client'
+
 import React from 'react'
 import Link from 'next/link'
 import Button from '@/components/ui/button'
-import ApiEndPoint from '@/config/apiEndPoint'
 import AppPath from '@/config/appPath'
-import apiClient from '@/services/apiClient'
+import useNotificationCountQuery from '@/hooks/api/queries/useNotificationCountQuery'
 import { User } from '@/types/user'
-import { getServerCookie } from '@/utils/getServerCookie'
 import { AvatarWithDropdown, NotificationButton } from '../components'
 
 type RightSideProps = {
   isLoggedIn: boolean
   currentUser: User | null
 }
 
-const getUserNotificationCount = async () => {
-  try {
-    const token = getServerCookie()
-    const res = await apiClient.get(
-      ApiEndPoint.getNotificationCount(),
-      {
-        next: { revalidate: 60 },
-      },
-      {
-        Authorization: `${token}`,
-      },
-    )
-    return res.data.unReadCount
-  } catch (e) {
-    return 0
-  }
-}
+// const getUserNotificationCount = async () => {
+//   try {
+//     const token = getServerCookie()
+//     const res = await apiClient.get(
+//       ApiEndPoint.getNotificationCount(),
+//       {
+//         cache: 'no-store',
+//       },
+//       {
+//         Authorization: `${token}`,
+//       },
+//     )
+//     return res.data.unReadCount
+//   } catch (e) {
+//     return 0
+//   }
+// }
 
-const RightSide = async ({ isLoggedIn, currentUser }: RightSideProps) => {
-  const count = await getUserNotificationCount()
+const RightSide = ({ isLoggedIn, currentUser }: RightSideProps) => {
+  const { data } = useNotificationCountQuery({ isLoggedIn })
 
   return isLoggedIn ? (
     <>
-      <NotificationButton notificationCounts={count} />
+      <NotificationButton notificationCounts={data?.data.unReadCount ?? 0} />
       <AvatarWithDropdown imageUrl={currentUser?.imageUrl} />
     </>
   ) : (

diff --git a/src/hooks/api/queries/useNotificationCountQuery.ts b/src/hooks/api/queries/useNotificationCountQuery.ts
@@ -1,13 +1,15 @@
 import { useQuery } from '@tanstack/react-query'
 import { getNotificationCount } from '@/services/notification/notification'
 
-const useNotificationCountQuery = () => {
+const useNotificationCountQuery = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
   return useQuery({
     queryKey: ['notificationCount'] as const,
     queryFn: () => {
       const res = getNotificationCount()
       return res
     },
+    refetchInterval: 1000 * 60 * 3,
+    enabled: isLoggedIn,
   })
 }
 

diff --git a/src/hooks/useValidate.ts b/src/hooks/useValidate.ts
@@ -27,19 +27,18 @@ const useValidate = () => {
       const res = await getValidateUser()
       return res
     },
-    retry: 3,
+    retry: 1,
     enabled: !!token,
+    throwOnError: false,
   })
 
   useEffect(() => {
     if (isError) {
       Cookies.remove(Environment.tokenName())
-      setIsLoggedIn(() => false)
-      setCurrentUser(() => null)
       router.push(AppPath.login(), { scroll: false })
       toast({
         title: '인증 에러',
-        description: '인증에 실패하였습니다. 다시 시도하거나 로그인해주세요.',
+        description: '만료되거나 잘못된 토큰입니다. 다시 로그인해주세요.',
         variant: 'destructive',
         duration: 3000,
       })