유저 정보 상태 저장

src/app/newsletter/page.tsx

@@ -10,20 +10,20 @@ import NewsCardHorizontal from '@/components/NewsCardHorizontal';
 import Suggestions from '@/components/Suggestion';
 import { articleCategory } from '@/constants/category';
 import color from '@/constants/color';
-import useGetUser from '@/hooks/useGetUser';
+import { useGetUserProfile } from '@/hooks/useGetUser';
+import useUpdateUserProfile from '@/hooks/useUpdateUser';
 import suggestionData from '@/mocks/suggestion';
 import { Article } from '@/types';
 
 import { getArticleAll, getPopularArticle } from '../api/newsletter';
-import { getUser } from '../api/user';
 
 const Page = () => {
   const [selectedTab, setSelectedTab] = useState(articleCategory[0]);
   const [articles, setArticles] = useState<Article[]>([]);
   const [popularArticles, setPopularArticles] = useState<Article[]>([]);
 
-  const user = useGetUser();
-  const [userName, setUserName] = useState<string | null>(null);
+  const userProfile = useGetUserProfile();
+  useUpdateUserProfile();
 
   useEffect(() => {
     getArticleAll().then((res) => {
@@ -42,18 +42,6 @@ const Page = () => {
     });
   }, []);
 
-  useEffect(() => {
-    if (user?.isLogin) {
-      getUser(user.token).then((res) => {
-        if (res.status) {
-          setUserName(res.data.name);
-        } else {
-          throw res.message;
-        }
-      });
-    }
-  }, [user]);
-
   return (
     <Box>
       <GradientBox sx={{ height: '150px' }} />
@@ -93,10 +81,10 @@ const Page = () => {
         <Stack direction="row" width="25%">
           <Divider flexItem orientation="vertical" sx={{ bgcolor: color.divider, opacity: 0.2 }} />
           <Stack mt={6} pl={6} spacing={6} width="100%">
-            {userName && (
+            {userProfile && (
               <>
-                <Suggestions content={suggestionData} title={`${userName}님을 위한 추천 기사`} />
-                <Suggestions content={suggestionData} title={`${userName}님과 비슷한 유형이 관심있어요!`} />
+                <Suggestions content={suggestionData} title={`${userProfile.name}님을 위한 추천 기사`} />
+                <Suggestions content={suggestionData} title={`${userProfile.name}님과 비슷한 유형이 관심있어요!`} />
               </>
             )}
             <Suggestions content={popularArticles} title="지금 인기있는 기사" />

src/components/Header.tsx

@@ -3,21 +3,18 @@
 import { useState, useEffect } from 'react';
 
 import { Avatar, Box, Button, Link, Stack, Typography } from '@mui/material';
-import { useAtomValue } from 'jotai';
 
-import { getUser } from '@/app/api/user';
 import { mainCategory } from '@/constants/category';
 import color from '@/constants/color';
-import useCurrentPath from '@/hooks/useCurrentPath';
-import useGetUser from '@/hooks/useGetUser';
-import { loginBackPathAtom } from '@/state/atom';
+import { useGetUserProfile } from '@/hooks/useGetUser';
+import useUpdateUserProfile from '@/hooks/useUpdateUser';
 
 const Header = () => {
   const [show, setShow] = useState(true);
   const [lastScrollY, setLastScrollY] = useState(0);
 
-  const user = useGetUser();
-  const [userProfile, setUserProfile] = useState<string | null>(null);
+  const userProfile = useGetUserProfile();
+  useUpdateUserProfile();
 
   useEffect(() => {
     const controlHeader = () => {
@@ -36,26 +33,6 @@ const Header = () => {
     };
   }, [lastScrollY]);
 
-  useEffect(() => {
-    if (user?.isLogin) {
-      getUser(user.token).then((res) => {
-        if (res.status) {
-          setUserProfile(res.data.profileImage);
-        } else {
-          throw res.message;
-        }
-      });
-    }
-  }, [user]);
-
-  useCurrentPath();
-
-  const loginBackPath = useAtomValue(loginBackPathAtom);
-
-  useEffect(() => {
-    console.log('loginBackPathAtom', loginBackPath);
-  }, [loginBackPath]);
-
   return (
     <>
       <Box
@@ -93,7 +70,7 @@ const Header = () => {
               </Link>
             ))}
             {userProfile ? (
-              <Avatar alt="profileImage" src={userProfile || ''} sx={{ width: 28, height: 28 }} />
+              <Avatar alt="profileImage" src={userProfile.profileImage} sx={{ width: 28, height: 28 }} />
             ) : (
               <Link href="/login" underline="none">
                 <Button color="primary" sx={{ width: '100px' }} variant="outlined">

src/hooks/useCurrentPath.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect } from 'react';
 
 import { useSetAtom } from 'jotai';

src/hooks/useGetUser.ts

@@ -2,17 +2,23 @@ import { useEffect, useState } from 'react';
 
 import { useAtomValue } from 'jotai';
 
-import { userAtom } from '@/state/atom';
+import { userAtom, userProfileAtom } from '@/state/atom';
 
-const useGetUser = () => {
-  const [isMounted, setIsMounted] = useState(false);
+export const useGetUser = () => {
   const user = useAtomValue(userAtom);
+  return user;
+};
+
+export const useGetUserProfile = () => {
+  const user = useGetUser();
+  const userProfile = useAtomValue(userProfileAtom);
+  const [result, setResult] = useState<{ name: string; profileImage: string } | null>(null);
 
   useEffect(() => {
-    setIsMounted(true);
-  }, []);
+    if (user.isLogin) {
+      setResult(userProfile);
+    }
+  }, [user, userProfile]);
 
-  return isMounted ? user : null;
+  return result;
 };
-
-export default useGetUser;

src/hooks/useUpdateUser.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { useSetAtom } from 'jotai';
+
+import { getUser } from '@/app/api/user';
+import { userProfileAtom } from '@/state/atom';
+
+import { useGetUser } from './useGetUser';
+
+const useUpdateUserProfile = () => {
+  const user = useGetUser();
+  const setUserProfile = useSetAtom(userProfileAtom);
+
+  useEffect(() => {
+    if (user.isLogin) {
+      getUser(user.token).then((res) => {
+        if (res.status) {
+          setUserProfile({
+            name: res.data.name,
+            profileImage: res.data.profileImage,
+          });
+        } else {
+          throw res.message;
+        }
+      });
+    }
+  }, [user, setUserProfile]);
+};
+
+export default useUpdateUserProfile;

src/state/atom.ts

@@ -5,4 +5,9 @@ export const userAtom = atomWithStorage('user', {
   isLogin: false,
 });
 
+export const userProfileAtom = atomWithStorage('userProfile', {
+  name: '',
+  profileImage: '',
+});
+
 export const loginBackPathAtom = atomWithStorage('loginBackPath', '/');