From 6cb64b09982c180f0b1a801750013e3661135e16 Mon Sep 17 00:00:00 2001 From: six-standard Date: Fri, 28 Feb 2025 23:16:20 +0900 Subject: [PATCH 1/4] =?UTF-8?q?modify:=20=EC=BA=90=EC=8B=9C=20=EC=B6=A9?= =?UTF-8?q?=EB=8F=8C=20=EA=B4=80=EB=A0=A8=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(with-tracker)/(login)/Content.tsx | 6 ++++++ src/components/auth-required/header/index.tsx | 12 ++++-------- src/utils/revalidateUtil.ts | 9 +++++++++ 3 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 src/utils/revalidateUtil.ts diff --git a/src/app/(with-tracker)/(login)/Content.tsx b/src/app/(with-tracker)/(login)/Content.tsx index 8c63710..3ea96a0 100644 --- a/src/app/(with-tracker)/(login)/Content.tsx +++ b/src/app/(with-tracker)/(login)/Content.tsx @@ -4,10 +4,12 @@ import { useRouter } from 'next/navigation'; import { useForm } from 'react-hook-form'; import Image from 'next/image'; import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useEffect } from 'react'; import { Input, Button } from '@/components'; import { LoginVo } from '@/types'; import { login, sampleLogin } from '@/apis'; import { trackUserEvent, MessageEnum } from '@/utils/trackUtil'; +import { PATHS } from '@/constants'; const responsiveStyle = "flex items-center gap-5 max-MBI:before:inline-block max-MBI:before:bg-[url('/favicon.png')] max-MBI:before:[background-size:_100%_100%] max-MBI:before:w-16 max-MBI:before:h-16"; @@ -16,6 +18,10 @@ export const Content = () => { const { replace } = useRouter(); const client = useQueryClient(); + useEffect(() => { + if (client.getQueryData([PATHS.ME])) client.removeQueries(); + }, []); + const { register, handleSubmit, diff --git a/src/components/auth-required/header/index.tsx b/src/components/auth-required/header/index.tsx index 6984f7b..d78d879 100644 --- a/src/components/auth-required/header/index.tsx +++ b/src/components/auth-required/header/index.tsx @@ -3,12 +3,13 @@ import { useEffect, useRef, useState } from 'react'; import { usePathname, useRouter } from 'next/navigation'; import Image from 'next/image'; -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useMutation, useQuery } from '@tanstack/react-query'; import { PATHS, SCREENS } from '@/constants'; import { NameType } from '@/components'; import { useResponsive } from '@/hooks'; import { logout, me } from '@/apis'; import { trackUserEvent, MessageEnum } from '@/utils/trackUtil'; +import { revalidate } from '@/utils/revalidateUtil'; import { defaultStyle, Section, textStyle } from './Section'; const PARAMS = { @@ -33,18 +34,13 @@ export const Header = () => { const router = useRouter(); const width = useResponsive(); const barWidth = width < SCREENS.MBI ? 65 : 180; - const client = useQueryClient(); const { mutate: out } = useMutation({ mutationFn: logout, - onMutate: () => router.replace('/'), - onSuccess: () => client.removeQueries(), + onSuccess: revalidate, }); - const { data: profiles } = useQuery({ - queryKey: [PATHS.ME], - queryFn: me, - }); + const { data: profiles } = useQuery({ queryKey: [PATHS.ME], queryFn: me }); useEffect(() => { const handleClickOutside = (e: MouseEvent) => diff --git a/src/utils/revalidateUtil.ts b/src/utils/revalidateUtil.ts new file mode 100644 index 0000000..375a030 --- /dev/null +++ b/src/utils/revalidateUtil.ts @@ -0,0 +1,9 @@ +'use server'; + +import { revalidatePath } from 'next/cache'; +import { redirect } from 'next/navigation'; + +export async function revalidate() { + revalidatePath('/', 'layout'); + redirect('/'); +} From 5ad21d3f9dd45661b6b2b3dd15d578b5181d9b81 Mon Sep 17 00:00:00 2001 From: six-standard Date: Thu, 6 Mar 2025 09:19:37 +0900 Subject: [PATCH 2/4] =?UTF-8?q?modify:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=8B=9C=EC=97=90=EB=8F=84=20=EC=BA=90=EC=8B=9C=20?= =?UTF-8?q?=EC=9E=94=EC=A1=B4=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(with-tracker)/(login)/Content.tsx | 10 +--------- src/components/auth-required/header/index.tsx | 18 +++++++++++++++--- .../auth-required/main/Section/index.tsx | 15 +++++---------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/app/(with-tracker)/(login)/Content.tsx b/src/app/(with-tracker)/(login)/Content.tsx index 3ea96a0..bad17fb 100644 --- a/src/app/(with-tracker)/(login)/Content.tsx +++ b/src/app/(with-tracker)/(login)/Content.tsx @@ -3,24 +3,17 @@ import { useRouter } from 'next/navigation'; import { useForm } from 'react-hook-form'; import Image from 'next/image'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { useEffect } from 'react'; +import { useMutation } from '@tanstack/react-query'; import { Input, Button } from '@/components'; import { LoginVo } from '@/types'; import { login, sampleLogin } from '@/apis'; import { trackUserEvent, MessageEnum } from '@/utils/trackUtil'; -import { PATHS } from '@/constants'; const responsiveStyle = "flex items-center gap-5 max-MBI:before:inline-block max-MBI:before:bg-[url('/favicon.png')] max-MBI:before:[background-size:_100%_100%] max-MBI:before:w-16 max-MBI:before:h-16"; export const Content = () => { const { replace } = useRouter(); - const client = useQueryClient(); - - useEffect(() => { - if (client.getQueryData([PATHS.ME])) client.removeQueries(); - }, []); const { register, @@ -29,7 +22,6 @@ export const Content = () => { } = useForm({ mode: 'all' }); const onSuccess = () => { - client.clear(); trackUserEvent(MessageEnum.LOGIN); replace('/main?asc=false&sort='); }; diff --git a/src/components/auth-required/header/index.tsx b/src/components/auth-required/header/index.tsx index d78d879..530a488 100644 --- a/src/components/auth-required/header/index.tsx +++ b/src/components/auth-required/header/index.tsx @@ -3,13 +3,14 @@ import { useEffect, useRef, useState } from 'react'; import { usePathname, useRouter } from 'next/navigation'; import Image from 'next/image'; -import { useMutation, useQuery } from '@tanstack/react-query'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { PATHS, SCREENS } from '@/constants'; import { NameType } from '@/components'; import { useResponsive } from '@/hooks'; import { logout, me } from '@/apis'; import { trackUserEvent, MessageEnum } from '@/utils/trackUtil'; import { revalidate } from '@/utils/revalidateUtil'; + import { defaultStyle, Section, textStyle } from './Section'; const PARAMS = { @@ -34,13 +35,24 @@ export const Header = () => { const router = useRouter(); const width = useResponsive(); const barWidth = width < SCREENS.MBI ? 65 : 180; + const client = useQueryClient(); const { mutate: out } = useMutation({ mutationFn: logout, - onSuccess: revalidate, + onSuccess: async () => { + await revalidate(); + client.clear(); + router.replace('/'); + }, }); - const { data: profiles } = useQuery({ queryKey: [PATHS.ME], queryFn: me }); + const { data: profiles } = useQuery({ + queryKey: [PATHS.ME], + queryFn: me, + enabled: !!client.getQueryData([PATHS.ME]), + // 로그아웃 후 리렌더링되어 다시 fetch되는 경우 해결 + // 어차피 prefetch를 통해 데이터를 불러온 상태에서 렌더하기 때문에, 캐시 여부만 판단하면 됨 + }); useEffect(() => { const handleClickOutside = (e: MouseEvent) => diff --git a/src/components/auth-required/main/Section/index.tsx b/src/components/auth-required/main/Section/index.tsx index 91ce6dc..bdb1c45 100644 --- a/src/components/auth-required/main/Section/index.tsx +++ b/src/components/auth-required/main/Section/index.tsx @@ -1,27 +1,22 @@ 'use client'; -import { useQueryClient } from '@tanstack/react-query'; import { useState } from 'react'; -import { UserNameNotFoundError } from '@/errors'; import { trackUserEvent, MessageEnum } from '@/utils/trackUtil'; import { parseNumber } from '@/utils/numberUtil'; import { COLORS, env, PATHS } from '@/constants'; import { PostType, UserDto } from '@/types'; import { Icon } from '@/components'; +import { getQueryClient } from '@/utils/queryUtil'; import { Graph } from './Graph'; export const Section = (p: PostType) => { const [open, setOpen] = useState(false); - const client = useQueryClient(); - const { username } = client.getQueryData([PATHS.ME]) as UserDto; - const URL = env.VELOG_URL; + const username = ( + getQueryClient().getQueryData([PATHS.ME]) as Partial + )?.username; - if (!username) { - throw new UserNameNotFoundError(); - } - - const url = `${URL}/@${username}/${p.slug}`; + const url = `${env.VELOG_URL}/@${username}/${p.slug}`; return (
From 8898550b841f258756d58fc65b140173bbadc34b Mon Sep 17 00:00:00 2001 From: six-standard Date: Thu, 6 Mar 2025 09:19:40 +0900 Subject: [PATCH 3/4] =?UTF-8?q?modify:=20=EC=82=AC=EC=86=8C=ED=95=9C=20?= =?UTF-8?q?=ED=9C=B4=EB=A8=BC=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/instance.request.ts | 2 +- src/utils/queryUtil.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/apis/instance.request.ts b/src/apis/instance.request.ts index 05ba80b..521bffa 100644 --- a/src/apis/instance.request.ts +++ b/src/apis/instance.request.ts @@ -75,7 +75,7 @@ export const instance = async ( return (data.body as unknown as SuccessType).data; } catch (err: unknown) { const context = err as Response; - if (location && !context.ok && context.status === 403) { + if (location && !context.ok && context.status === 401) { window.location.replace('/'); } //context.status === 401 || diff --git a/src/utils/queryUtil.ts b/src/utils/queryUtil.ts index 9e40e0a..ad54707 100644 --- a/src/utils/queryUtil.ts +++ b/src/utils/queryUtil.ts @@ -3,7 +3,7 @@ import { toast } from 'react-toastify'; let localQueryClient: QueryClient | undefined; const STALE_TIME = 1000 * 60 * 3; -const GC_TIME = 1000; +const GC_TIME = 1000 * 60 * 20; const createQueryClient = () => new QueryClient({ From ba04d998159b3bbcd531f255e31a5ba286681ad1 Mon Sep 17 00:00:00 2001 From: six-standard Date: Thu, 6 Mar 2025 09:20:21 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/instance.request.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/apis/instance.request.ts b/src/apis/instance.request.ts index 521bffa..613fd03 100644 --- a/src/apis/instance.request.ts +++ b/src/apis/instance.request.ts @@ -78,7 +78,6 @@ export const instance = async ( if (location && !context.ok && context.status === 401) { window.location.replace('/'); } - //context.status === 401 || setContext('Request', { path: context.url, status: context.status,