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