From 8b23a2a40de73f73ef1163cd4b5d686a52983e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=84=9D=EC=A7=84=28maru=29?= <102217654+SEOKKAMONI@users.noreply.github.com> Date: Fri, 3 May 2024 07:53:15 +0900 Subject: [PATCH] =?UTF-8?q?refactor(client):=20user=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=20=EA=B4=80=EB=A6=AC=20server=20state=EB=A7=8C=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=20(#396)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/app/page.tsx | 6 ++-- .../src/components/common/Header/index.tsx | 16 ++++----- .../src/components/main/LoginBox/index.tsx | 4 +-- .../profile/DirectProfileCard/index.tsx | 4 +-- apps/client/src/hooks/api/user/useGetUser.ts | 2 +- apps/client/src/hooks/common/useUser.ts | 34 ++++++++----------- apps/client/src/stores/user/userAtom.ts | 25 -------------- 7 files changed, 29 insertions(+), 62 deletions(-) delete mode 100644 apps/client/src/stores/user/userAtom.ts diff --git a/apps/client/src/app/page.tsx b/apps/client/src/app/page.tsx index eafbf66f..319ecee2 100644 --- a/apps/client/src/app/page.tsx +++ b/apps/client/src/app/page.tsx @@ -17,7 +17,7 @@ import type { Major } from '@/types/profile'; const MainPage = () => { const router = useRouter(); - const { user, isLoading } = useUser(); + const { user, isLogin, isLoading } = useUser(); const hanldeGoProfilePage = (major: Major) => { router.push(`/profile?major=${major}`); @@ -28,7 +28,7 @@ const MainPage = () => {
{isLoading ? null - : !user.isLogin && ( + : !isLogin && ( 학교 계정으로 로그인해주세요. *아직 선생님 계정은 지원하지 않아요ㅠ @@ -62,7 +62,7 @@ const MainPage = () => { - {user.isLogin + {isLogin ? `${user.name}님의 커피챗 요청을 기다리는 선배들이에요` : '커피챗 요청을 기다리는 선배들이에요'} diff --git a/apps/client/src/components/common/Header/index.tsx b/apps/client/src/components/common/Header/index.tsx index 8e3532b4..1d8a8e5b 100644 --- a/apps/client/src/components/common/Header/index.tsx +++ b/apps/client/src/components/common/Header/index.tsx @@ -1,25 +1,25 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Button, Flex, Stack } from '@sickgyun/ui'; -import { useSetAtom } from 'jotai'; +import { useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/navigation'; import Logo from '../Logo'; import NotificationButton from '../NotificationButton'; +import { USER_QUERY_KEY } from '@/hooks/api/user/useGetUser'; import { useUser } from '@/hooks/common/useUser'; -import { RESET_USER, userAtom } from '@/stores/user/userAtom'; const Header = () => { const router = useRouter(); - const setUser = useSetAtom(userAtom); - const { user, isLoading } = useUser(); + const queryClient = useQueryClient(); + const { user, isLogin, isLoading } = useUser(); const handleLogin = () => { router.replace(process.env.NEXT_PUBLIC_GOOGLE_LOGIN_URL); }; const handleLogout = () => { - setUser(RESET_USER); localStorage.clear(); + queryClient.invalidateQueries({ queryKey: [USER_QUERY_KEY] }); router.replace('/'); }; @@ -38,10 +38,8 @@ const Header = () => { /> {!isLoading && ( - {user.isLogin && ( - - )} - {user.isLogin ? ( + {isLogin && } + {isLogin ? ( diff --git a/apps/client/src/components/main/LoginBox/index.tsx b/apps/client/src/components/main/LoginBox/index.tsx index 6767a08f..af0e67c4 100644 --- a/apps/client/src/components/main/LoginBox/index.tsx +++ b/apps/client/src/components/main/LoginBox/index.tsx @@ -10,7 +10,7 @@ import { useUser } from '@/hooks/common/useUser'; const LoginBox = () => { const router = useRouter(); - const { user, isLoading } = useUser(); + const { user, isLogin, isLoading } = useUser(); const overlay = useOverlay(); const handleLogin = () => { @@ -35,7 +35,7 @@ const LoginBox = () => { {isLoading ? ( - ) : user.isLogin ? ( + ) : isLogin ? ( diff --git a/apps/client/src/components/profile/DirectProfileCard/index.tsx b/apps/client/src/components/profile/DirectProfileCard/index.tsx index 7d126436..537e24c3 100644 --- a/apps/client/src/components/profile/DirectProfileCard/index.tsx +++ b/apps/client/src/components/profile/DirectProfileCard/index.tsx @@ -26,12 +26,12 @@ const DirectProfileCard = ({ }: DirectProfileCardProps) => { const overlay = useOverlay(); const { toast } = useToast(); - const { user } = useUser(); + const { isLogin } = useUser(); const { logClickEvent } = useLogAnalyticsEvent(); const { profile } = useGetProfile(profileId); const openProfileDetailModal = () => { - if (!user.isLogin) { + if (!isLogin) { toast.error('로그인이 필요한 서비스에요.'); return; } diff --git a/apps/client/src/hooks/api/user/useGetUser.ts b/apps/client/src/hooks/api/user/useGetUser.ts index ea08c0d4..8d7d9bdc 100644 --- a/apps/client/src/hooks/api/user/useGetUser.ts +++ b/apps/client/src/hooks/api/user/useGetUser.ts @@ -25,7 +25,7 @@ export const useGetUser = () => { }); return { - user: userQuery.data, + user: { hasNotification: userQuery.data?.hasNotification, ...userQuery.data?.user }, ...userQuery, }; }; diff --git a/apps/client/src/hooks/common/useUser.ts b/apps/client/src/hooks/common/useUser.ts index f021a71b..b3ba7560 100644 --- a/apps/client/src/hooks/common/useUser.ts +++ b/apps/client/src/hooks/common/useUser.ts @@ -1,33 +1,27 @@ -import { useAtom } from 'jotai'; import { useEffect, useState } from 'react'; -import { userAtom } from '../../stores/user/userAtom'; -import { LOCAL_STORAGE_KEY } from '@/constants/storage'; import { useGetUser } from '@/hooks/api/user/useGetUser'; import { LocalStorage } from '@/libs/api/storage'; export const useUser = () => { - const userQuery = useGetUser(); + const { user, ...userQuery } = useGetUser(); const [isLoading, setIsLoading] = useState(true); - const [user, setUser] = useAtom(userAtom); + const [isLogin, setIsLogin] = useState(false); + const accessToken = LocalStorage.getItem('siac'); useEffect(() => { - const accessToken = LocalStorage.getItem(LOCAL_STORAGE_KEY.accessToken); - - if (userQuery.data) { - const user = { - isLogin: Boolean(accessToken), - hasNotification: userQuery.data.hasNotification, - ...userQuery.data.user, - }; - setUser(user); + if (user) { + setIsLogin(Boolean(accessToken)); } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [accessToken]); - const timerId = setTimeout(() => { + useEffect(() => { + if (!userQuery.isLoading || !userQuery.isFetching) { setIsLoading(false); - }, 300); - - return () => clearTimeout(timerId); - }, [setUser, userQuery.data]); + } else { + setIsLoading(true); + } + }, [userQuery.isFetching, userQuery.isLoading]); - return { ...userQuery, isLoading, user: { ...user } }; + return { user, isLogin, ...userQuery, isLoading }; }; diff --git a/apps/client/src/stores/user/userAtom.ts b/apps/client/src/stores/user/userAtom.ts deleted file mode 100644 index 5219ec31..00000000 --- a/apps/client/src/stores/user/userAtom.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { atom } from 'jotai'; -import type { User } from '@/types/user'; - -export type UserAtom = { - hasNotification: boolean; - isLogin: boolean; -} & User; - -export const RESET_USER = { - id: 0, - name: '', - email: '', - cardinal: 0, - isGraduated: false, - hasCreatedProfile: false, - profileId: 0, - hasNotification: false, - isLogin: false, - phoneNumber: '', - instagramId: '', - kakaoId: '', - hasNotContact: true, -}; - -export const userAtom = atom(RESET_USER);