From 7e09c616b6b2266340e040e7221015c820ccb820 Mon Sep 17 00:00:00 2001 From: yeonddori Date: Sun, 21 Jul 2024 23:02:16 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20userProfileAtom=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #114 --- src/state/atom.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/state/atom.ts b/src/state/atom.ts index 1c53811..860fef1 100644 --- 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', '/'); From 597af7ac521e93b6e5db5269d3f1372b8f4470f7 Mon Sep 17 00:00:00 2001 From: yeonddori Date: Sun, 21 Jul 2024 23:02:39 +0900 Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20'use=20client';=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #114 --- src/hooks/useCurrentPath.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/hooks/useCurrentPath.ts b/src/hooks/useCurrentPath.ts index 1ef70f0..81848c1 100644 --- a/src/hooks/useCurrentPath.ts +++ b/src/hooks/useCurrentPath.ts @@ -1,5 +1,3 @@ -'use client'; - import { useEffect } from 'react'; import { useSetAtom } from 'jotai'; From 3230bec93cdaba57dc8482e9772060a8857784ad Mon Sep 17 00:00:00 2001 From: yeonddori Date: Sun, 21 Jul 2024 23:04:35 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20useGetUser=20=ED=9B=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20useGetUserProfile=20=ED=9B=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #114 --- src/hooks/useGetUser.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts index a7b18ae..8fad51b 100644 --- a/src/hooks/useGetUser.ts +++ b/src/hooks/useGetUser.ts @@ -1,18 +1,13 @@ -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); - - useEffect(() => { - setIsMounted(true); - }, []); - - return isMounted ? user : null; + return user; }; -export default useGetUser; +export const useGetUserProfile = () => { + const userProfile = useAtomValue(userProfileAtom); + return userProfile; +}; From b44651f1893fd057788538512c1b027b6cb8dc68 Mon Sep 17 00:00:00 2001 From: yeonddori Date: Sun, 21 Jul 2024 23:23:15 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20useUpdateUser=20=ED=9B=85=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #114 --- src/hooks/useUpdateUser.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/hooks/useUpdateUser.ts diff --git a/src/hooks/useUpdateUser.ts b/src/hooks/useUpdateUser.ts new file mode 100644 index 0000000..57e5ba7 --- /dev/null +++ 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; From 07e8c7f509cdb0e9091dbfd803f5ad486771ddaf Mon Sep 17 00:00:00 2001 From: yeonddori Date: Sun, 21 Jul 2024 23:34:23 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20useGetUserProfile=20=ED=9B=85=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=83=81=ED=83=9C=EC=9D=BC=20?= =?UTF-8?q?=EB=95=8C=EB=A7=8C=20=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #114 --- src/app/newsletter/page.tsx | 2 +- src/hooks/useGetUser.ts | 8 +++++++- src/hooks/useUpdateUser.ts | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/newsletter/page.tsx b/src/app/newsletter/page.tsx index ce609d7..cd35b74 100644 --- a/src/app/newsletter/page.tsx +++ b/src/app/newsletter/page.tsx @@ -43,7 +43,7 @@ const Page = () => { }, []); useEffect(() => { - if (user?.isLogin) { + if (user.isLogin) { getUser(user.token).then((res) => { if (res.status) { setUserName(res.data.name); diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts index 8fad51b..7a39ab0 100644 --- a/src/hooks/useGetUser.ts +++ b/src/hooks/useGetUser.ts @@ -8,6 +8,12 @@ export const useGetUser = () => { }; export const useGetUserProfile = () => { + const user = useGetUser(); const userProfile = useAtomValue(userProfileAtom); - return userProfile; + + if (user.isLogin) { + return userProfile; + } + + return null; }; diff --git a/src/hooks/useUpdateUser.ts b/src/hooks/useUpdateUser.ts index 57e5ba7..9892407 100644 --- a/src/hooks/useUpdateUser.ts +++ b/src/hooks/useUpdateUser.ts @@ -12,7 +12,7 @@ const useUpdateUserProfile = () => { const setUserProfile = useSetAtom(userProfileAtom); useEffect(() => { - if (user?.isLogin) { + if (user.isLogin) { getUser(user.token).then((res) => { if (res.status) { setUserProfile({ From 477f163c6e78111875be7058353d9f7084004ef1 Mon Sep 17 00:00:00 2001 From: yeonddori Date: Sun, 21 Jul 2024 23:39:54 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20useGetUserProfile=20=ED=9B=85=20use?= =?UTF-8?q?Effect=20=EC=9D=B4=EC=9A=A9=ED=95=98=EC=97=AC=20user=20?= =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #114 --- src/hooks/useGetUser.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts index 7a39ab0..e2d2031 100644 --- a/src/hooks/useGetUser.ts +++ b/src/hooks/useGetUser.ts @@ -1,3 +1,5 @@ +import { useEffect, useState } from 'react'; + import { useAtomValue } from 'jotai'; import { userAtom, userProfileAtom } from '@/state/atom'; @@ -10,10 +12,13 @@ export const useGetUser = () => { export const useGetUserProfile = () => { const user = useGetUser(); const userProfile = useAtomValue(userProfileAtom); + const [result, setResult] = useState<{ name: string; profileImage: string } | null>(null); - if (user.isLogin) { - return userProfile; - } + useEffect(() => { + if (user.isLogin) { + setResult(userProfile); + } + }, [user, userProfile]); - return null; + return result; }; From 7d46afb029bd5fc48c9ffabc7500c27f7b9fbfe7 Mon Sep 17 00:00:00 2001 From: yeonddori Date: Sun, 21 Jul 2024 23:41:26 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=ED=9B=85=EC=9D=84=20=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #114 --- src/components/Header.tsx | 33 +++++---------------------------- 1 file changed, 5 insertions(+), 28 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d9f141c..b6ac862 100644 --- a/src/components/Header.tsx +++ b/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(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 ( <> { ))} {userProfile ? ( - + ) : (