Merge pull request #91 from DoTheZ-Team/GLUE-303-로그인-id-오류-수정

GLUE-303 로그인 아이디를 쿠키에서 활용할 수 있도록 수정

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));
     },
   });
 };

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<MyPageResponse>(initialData);
 
-  const contextValue = {
-    blogId,
-    myPageData,
-    setMyPageData,
-  };
+  const contextValue = useMemo(
+    () => ({
+      myPageData,
+      setMyPageData,
+    }),
+    [myPageData, setMyPageData],
+  );
 
   return <MyPageProvider {...contextValue}>{children}</MyPageProvider>;
 }

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<SetStateAction<MyPageResponse>>;
 }

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 (
-    <MyPageProviderWrapper initialData={data} blogId={blogId}>
-      {children}
-    </MyPageProviderWrapper>
+    <MyPageProviderWrapper initialData={data}>{children}</MyPageProviderWrapper>
   );
 }

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<MyPageResponse> }) =>
-      patchMyPageInfo(blogId, data),
+      patchMyPageInfo(Number(blogId), data),
     onSuccess: () => {
       handleSuccess('updated !');
     },

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();
 

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 (
     <div>
       <AsyncBoundaryWithQuery pendingFallback={<div>loading 중..</div>}>
         <MyPageFallback>
-          <MyPageFetcher blogId={loginId}>
+          <MyPageFetcher>
             <Title />
             <section className="flex flex-col items-center py-400">
               <div className="h-1 w-500 bg-[#979696]" />

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;