Merge branch 'main' into feature/ISSUE-104

Gyeongdan · Jul 21, 2024 · 2cd4204 · 2cd4204
2 parents d4f94a8 + d34a8f3
commit 2cd4204
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 44 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -11,6 +11,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'wimg.mk.co.kr',
       },
+      {
+        protocol: 'https',
+        hostname: 'pimg.mk.co.kr',
+      },
       {
         protocol: 'https',
         hostname: 'img.hankyung.com',

diff --git a/src/app/newsletter/page.tsx b/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="지금 인기있는 기사" />

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -4,17 +4,17 @@ import { useState, useEffect } from 'react';
 
 import { Avatar, Box, Button, Link, Stack, Typography } from '@mui/material';
 
-import { getUser } from '@/app/api/user';
 import { mainCategory } from '@/constants/category';
 import color from '@/constants/color';
-import useGetUser from '@/hooks/useGetUser';
+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 = () => {
@@ -33,18 +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]);
-
   return (
     <>
       <Box
@@ -82,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">

diff --git a/src/hooks/useCurrentPath.ts b/src/hooks/useCurrentPath.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+import { useSetAtom } from 'jotai';
+
+import { loginBackPathAtom } from '@/state/atom';
+
+const useCurrentPath = () => {
+  const setCurrentPath = useSetAtom(loginBackPathAtom);
+
+  useEffect(() => {
+    const excludedPaths = ['/login', '/login/oauth2/code/kakao'];
+    if (excludedPaths.includes(window.location.pathname)) {
+      return;
+    }
+    console.log('useCurrentPath', window.location.pathname);
+
+    setCurrentPath(window.location.pathname);
+  }, [setCurrentPath]);
+};
+
+export default useCurrentPath;
diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts
@@ -2,17 +2,28 @@ 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>(
+    userProfile.name === '' && userProfile.profileImage === '' ? null : userProfile,
+  );
 
   useEffect(() => {
-    setIsMounted(true);
-  }, []);
+    if (user.isLogin) {
+      setResult(userProfile);
+    } else {
+      setResult(null);
+    }
+  }, [user, userProfile]);
 
-  return isMounted ? user : null;
+  return result;
 };
-
-export default useGetUser;
diff --git a/src/hooks/useUpdateUser.ts b/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;
diff --git a/src/state/atom.ts b/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', '/');