From 4befe5699a7f4d0de501dcd290cb12fbd46a1339 Mon Sep 17 00:00:00 2001 From: Collection50 Date: Wed, 12 Jun 2024 14:27:27 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EB=94=94=EB=A5=BC=20=EC=BF=A0=ED=82=A4=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=ED=99=9C=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(auth)/auth/api/queries.ts | 7 ++----- .../MyPageContext/MyPageProviderWrapper.tsx | 16 ++++++++-------- .../MyPageFetcher/MyPageContext/index.tsx | 1 - .../mypage/components/MyPageFetcher/index.tsx | 11 +++-------- .../mypage/components/MyPageFetcher/queries.ts | 17 ++++++++++++----- src/app/mypage/components/hooks/useSave.tsx | 4 ++-- src/app/mypage/page.tsx | 5 +---- src/constants/api.ts | 1 + 8 files changed, 29 insertions(+), 33 deletions(-) diff --git a/src/app/(auth)/auth/api/queries.ts b/src/app/(auth)/auth/api/queries.ts index ff6555d..851ae11 100644 --- a/src/app/(auth)/auth/api/queries.ts +++ b/src/app/(auth)/auth/api/queries.ts @@ -1,19 +1,16 @@ import { useMutation } from '@tanstack/react-query'; -import { ACCESS_TOKEN } from '@/constants'; +import { ACCESS_TOKEN, BLOG_ID } from '@/constants'; import Cookies from 'js-cookie'; -import { useUserContext } from '@/components/Common'; import { postLogin } from '.'; export const usePostLogin = (code: string) => { - const { setLoginId } = useUserContext(); - return useMutation({ mutationKey: ['login'], mutationFn: () => postLogin({ code }), onSuccess: ({ result: { accessToken, blogId } }) => { Cookies.set(ACCESS_TOKEN, accessToken); - setLoginId(blogId); + Cookies.set(BLOG_ID, String(blogId)); }, }); }; diff --git a/src/app/mypage/components/MyPageFetcher/MyPageContext/MyPageProviderWrapper.tsx b/src/app/mypage/components/MyPageFetcher/MyPageContext/MyPageProviderWrapper.tsx index d7fccb2..4b438f5 100644 --- a/src/app/mypage/components/MyPageFetcher/MyPageContext/MyPageProviderWrapper.tsx +++ b/src/app/mypage/components/MyPageFetcher/MyPageContext/MyPageProviderWrapper.tsx @@ -1,25 +1,25 @@ 'use client'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { MyPageResponse } from '../types'; import { MyPageProvider } from './index'; export function MyPageProviderWrapper({ children, initialData, - blogId, }: { children: React.ReactNode; initialData: MyPageResponse; - blogId: number; }) { const [myPageData, setMyPageData] = useState(initialData); - const contextValue = { - blogId, - myPageData, - setMyPageData, - }; + const contextValue = useMemo( + () => ({ + myPageData, + setMyPageData, + }), + [myPageData, setMyPageData], + ); return {children}; } diff --git a/src/app/mypage/components/MyPageFetcher/MyPageContext/index.tsx b/src/app/mypage/components/MyPageFetcher/MyPageContext/index.tsx index 8fad82e..62008e3 100644 --- a/src/app/mypage/components/MyPageFetcher/MyPageContext/index.tsx +++ b/src/app/mypage/components/MyPageFetcher/MyPageContext/index.tsx @@ -3,7 +3,6 @@ import { generateContext } from '@/react-utils'; import { MyPageResponse } from '../types'; interface MyPageContextProps { - blogId: number; myPageData: MyPageResponse; setMyPageData: Dispatch>; } diff --git a/src/app/mypage/components/MyPageFetcher/index.tsx b/src/app/mypage/components/MyPageFetcher/index.tsx index 76e58fe..661bfc0 100644 --- a/src/app/mypage/components/MyPageFetcher/index.tsx +++ b/src/app/mypage/components/MyPageFetcher/index.tsx @@ -4,15 +4,10 @@ import { StrictPropsWithChildren } from '@/types'; import { useMyPageInfo } from './queries'; import { MyPageProviderWrapper } from './MyPageContext/MyPageProviderWrapper'; -export default function MyPageFetcher({ - children, - blogId, -}: StrictPropsWithChildren & { blogId: number }) { - const { data } = useMyPageInfo(blogId); +export default function MyPageFetcher({ children }: StrictPropsWithChildren) { + const { data } = useMyPageInfo(); return ( - - {children} - + {children} ); } diff --git a/src/app/mypage/components/MyPageFetcher/queries.ts b/src/app/mypage/components/MyPageFetcher/queries.ts index a7f88d8..dc886e7 100644 --- a/src/app/mypage/components/MyPageFetcher/queries.ts +++ b/src/app/mypage/components/MyPageFetcher/queries.ts @@ -1,15 +1,20 @@ import { useMutation, useSuspenseQuery } from '@tanstack/react-query'; import { postImage } from '@/api'; import { useToastContext } from '@/components/Common/Toast/ToastProvider'; +import Cookies from 'js-cookie'; +import { BLOG_ID } from '@/constants'; import { getMyPageInfo, patchMyPageInfo } from './api'; import { MyPageResponse } from './types'; -export const useMyPageInfo = (blogId: number) => - useSuspenseQuery({ +export const useMyPageInfo = () => { + const blogId = Cookies.get(BLOG_ID) as string; + + return useSuspenseQuery({ queryKey: ['mypage-info', blogId], - queryFn: () => getMyPageInfo(blogId), + queryFn: () => getMyPageInfo(Number(blogId)), select: (data) => data.result, }); +}; export const usePostImage = () => useMutation({ @@ -21,12 +26,14 @@ export const usePostImage = () => }, }); -export const usePatchMyPage = (blogId: number) => { +export const usePatchMyPage = () => { const { handleSuccess } = useToastContext(); + const blogId = Cookies.get(BLOG_ID) as string; + return useMutation({ mutationKey: ['patch-mypage', blogId], mutationFn: ({ data }: { data: Partial }) => - patchMyPageInfo(blogId, data), + patchMyPageInfo(Number(blogId), data), onSuccess: () => { handleSuccess('updated !'); }, diff --git a/src/app/mypage/components/hooks/useSave.tsx b/src/app/mypage/components/hooks/useSave.tsx index 9a595f4..afbc8d5 100644 --- a/src/app/mypage/components/hooks/useSave.tsx +++ b/src/app/mypage/components/hooks/useSave.tsx @@ -4,8 +4,8 @@ import { usePatchMyPage, usePostImage } from '../MyPageFetcher/queries'; import { useMyPageContext } from '../MyPageFetcher/MyPageContext'; export default function useSave() { - const { myPageData, setMyPageData, blogId } = useMyPageContext(); - const { mutate } = usePatchMyPage(blogId); + const { myPageData, setMyPageData } = useMyPageContext(); + const { mutate } = usePatchMyPage(); const { mutateAsync } = usePostImage(); const { handleError } = useToastContext(); diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index 0d5082c..e42f274 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -1,6 +1,5 @@ 'use client'; -import { useUserContext } from '@/components/Common'; import { AsyncBoundaryWithQuery } from '@/react-utils'; import Profile from './components/Profile'; import Title from './components/Title'; @@ -10,13 +9,11 @@ import MyPageFallback from './components/MyPageFallback'; import MyPageFetcher from './components/MyPageFetcher'; export default function Page() { - const { loginId } = useUserContext(); - return (
loading 중..
}> - + <section className="flex flex-col items-center py-400"> <div className="h-1 w-500 bg-[#979696]" /> diff --git a/src/constants/api.ts b/src/constants/api.ts index 73f9e28..941ca16 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -13,3 +13,4 @@ export const HTTP_METHODS: Record< export const ACCESS_TOKEN = 'accessToken' as const; export const REFRESH_TOKEN = 'refreshToken' as const; +export const BLOG_ID = 'blogId' as const;