refactor(client): user 상태 관리 server state만 사용하여 리팩토링 (#396)

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 = () => {
       <Header />
       {isLoading
         ? null
-        : !user.isLogin && (
+        : !isLogin && (
             <InlineBanner>
               학교 계정으로 로그인해주세요. *아직 선생님 계정은 지원하지 않아요ㅠ
             </InlineBanner>
@@ -62,7 +62,7 @@ const MainPage = () => {
           <Spacer height={64} />
           <Stack spacing={18}>
             <Text fontType="h4">
-              {user.isLogin
+              {isLogin
                 ? `${user.name}님의 커피챗 요청을 기다리는 선배들이에요`
                 : '커피챗 요청을 기다리는 선배들이에요'}
             </Text>

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 && (
           <Stack direction="horizontal" align="center" spacing={12}>
-            {user.isLogin && (
-              <NotificationButton hasNotification={user.hasNotification} />
-            )}
-            {user.isLogin ? (
+            {isLogin && <NotificationButton hasNotification={user.hasNotification} />}
+            {isLogin ? (
               <Button onClick={handleLogout} styleType="ghost" size="small">
                 로그아웃
               </Button>

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 = () => {
     <StyledLoginBox>
       {isLoading ? (
         <Spinner />
-      ) : user.isLogin ? (
+      ) : isLogin ? (
         <StyledLoginSuccessBox>
           <Stack spacing={6}>
             <Stack direction="horizontal" align="center" spacing={2}>

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

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

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