refactor: auth 정보 tanstack query를 이용해 관리하기

client/src/App.tsx

@@ -1,7 +1,6 @@
 import { Outlet } from 'react-router-dom';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
-import { AuthProvider } from './contexts/AuthProvider';
 import { ThemeProvider } from './contexts/ThemeProvider';
 
 const queryClient = new QueryClient();
@@ -10,9 +9,7 @@ function App() {
  return (
  <QueryClientProvider client={queryClient}>
  <ThemeProvider>
- <AuthProvider>
- <Outlet />
- </AuthProvider>
+ <Outlet />
  </ThemeProvider>
  </QueryClientProvider>
  );

client/src/apis/exitRoom.ts

@@ -5,5 +5,6 @@ export async function exitRoom() {
  await apiClient.post('/room/exit');
  } catch (error) {
  console.log(error);
+ throw error;
  }
 }

client/src/apis/getAuthStatus.ts

@@ -0,0 +1,10 @@
+import { apiClient } from './apiClient';
+
+export async function getAuthStatus(): Promise<boolean | undefined> {
+ try {
+ const { data }: { data: boolean } = await apiClient.get('/auth/status');
+ return data;
+ } catch (error) {
+ console.log(error);
+ }
+}

client/src/apis/getSession.ts → client/src/apis/getMyInfo.ts

@@ -2,9 +2,9 @@ import { AxiosError } from 'axios';
 import { UserSession } from '../types/UserSessionType';
 import { apiClient } from './apiClient';
 
-export async function getSession(): Promise<UserSession | undefined> {
+export async function getMyInfo(): Promise<UserSession | undefined> {
  try {
- const { data }: { data: UserSession } = await apiClient.get('/session');
+ const { data }: { data: UserSession } = await apiClient.get('/users/me');
  return data;
  } catch (error) {
  if (error instanceof AxiosError && error.response?.status === 403) {

client/src/apis/getMyRoomCode.ts

@@ -0,0 +1,12 @@
+import { apiClient } from './apiClient';
+
+// eslint-disable-next-line
+export async function getMyRoomCode(): Promise<any | undefined> {
+ try {
+ // eslint-disable-next-line
+ const { data }: { data: any } = await apiClient.get('/users/me/room-code');
+ return data.code;
+ } catch (error) {
+ console.log(error);
+ }
+}

client/src/apis/logout.ts

@@ -5,5 +5,6 @@ export async function logout() {
  await apiClient.get('/auth/logout');
  } catch (error) {
  console.log(error);
+ throw error;
  }
 }

client/src/contexts/RoomProvider.tsx

@@ -4,6 +4,8 @@ import { MessageInterface } from '../types/Message';
 import { RoomInfoType } from '../types/RoomInfoType';
 import { ProblemType } from '../types/ProblemType';
 import { useLocation, useParams } from 'react-router-dom';
+import { getMyRoomCode } from '../apis/getMyRoomCode';
+import { useQuery } from '@tanstack/react-query';
 
 export type RoomContextType = {
  isHost: boolean;
@@ -36,7 +38,14 @@ export const RoomProvider: React.FC<RoomProviderProps> = ({ children }) => {
  const location = useLocation();
 
  const isHost = location.state?.isHost;
- const roomCode = location.state?.roomCode;
+ // const roomCode = location.state?.roomCode;
+ const { data: roomCode } = useQuery({
+ queryKey: ['myRoomCode'],
+ queryFn: getMyRoomCode,
+ staleTime: Infinity,
+ });
+
+ console.log(roomCode);
  const roomId = useParams<{ roomId: string }>().roomId;
 
  const inputRef = useRef<HTMLTextAreaElement>(null);

client/src/pages/Intro/Intro.tsx

@@ -4,9 +4,6 @@ import { IoTrophyOutline } from 'react-icons/io5';
 import { MdOutlinePrivacyTip } from 'react-icons/md'; // light
 
 // import VideoPlayer from '../components/Intro/VideoPlayer';
-import { useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
-import { useAuthContext } from '../../hooks/useAuthContext';
 import { useTheme } from '../../hooks/useTheme';
 
 import LogoDefault from '../../assets/LogoDefault.svg';
@@ -15,15 +12,7 @@ import ChromeIcon from '../../assets/ChromeIcon.svg';
 import Demo from '../../assets/Demo.png';
 
 export default function Intro() {
- const { user } = useAuthContext();
  const { theme } = useTheme();
- const navigate = useNavigate();
-
- useEffect(() => {
- if (user) {
- navigate('/lobby');
- }
- }, [navigate, user]);
 
  return (
  <div className="h-full min-h-screen overscroll-none bg-bg">

client/src/pages/Lobby/LogoutButton.tsx

@@ -1,12 +1,28 @@
-import { useAuthUpdateContext } from '../../hooks/useAuthUpdateContext';
+import { useNavigate } from 'react-router-dom';
+import { logout } from '../../apis/logout';
+import { removeLoaclStorageItem } from '../../utils/localStorage';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export default function LogoutButton() {
- const { onLogout } = useAuthUpdateContext();
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+
+ const { mutate } = useMutation({
+ mutationFn: logout,
+ onSuccess: () => {
+ queryClient.setQueryData(['authStatus'], false);
+ removeLoaclStorageItem('userInfo');
+ navigate('/');
+ },
+ onError: () => {
+ alert('로그아웃에 실패했습니다.');
+ },
+ });
 
  return (
  <button
  className="my-4 rounded-lg border bg-fg/25 p-2.5 px-5 text-sm text-text_default hover:bg-fg/50"
- onClick={onLogout}>
+ onClick={() => mutate()}>
  LOGOUT
  </button>
  );

client/src/pages/Lobby/Profile.tsx

@@ -1,14 +1,19 @@
-import { useAuthContext } from '../../hooks/useAuthContext';
 import { useState } from 'react';
 import { FaCircleUser } from 'react-icons/fa6';
+import { useQuery } from '@tanstack/react-query';
 
 import {
  getLocalStorageItem,
  setLocalStorageItem,
 } from '../../utils/localStorage';
+import { getMyInfo } from '../../apis/getMyInfo';
 
 export default function Profile() {
- const { user } = useAuthContext();
+ const { data: user } = useQuery({
+ queryKey: ['user'],
+ queryFn: getMyInfo,
+ staleTime: Infinity,
+ });
  const userInfo = { provider: user?.provider, providerId: user?.providerId };
  const [imageError, setImageError] = useState(false);
 

client/src/pages/Lobby/RoomAccessPanel/RoomCreateButton.tsx

@@ -1,38 +1,34 @@
 import { useNavigate } from 'react-router-dom';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { createRoom } from '../../../apis/createRoom';
-import { useState } from 'react';
 import { RoomCreateType } from '../../../types/RoomCreateType';
 
 export default function RoomCreateButton() {
- const [isLoading, setIsLoading] = useState(false);
-
+ const queryClient = useQueryClient();
  const navigate = useNavigate();
- const onClick = async () => {
- setIsLoading(true);
- try {
- const roomInfo: RoomCreateType | undefined = await createRoom();
- if (roomInfo === undefined) {
- setIsLoading(false);
- return;
- }
- const roomCode = roomInfo.code;
+
+ const { mutate, isPending } = useMutation({
+ mutationFn: createRoom,
+ onSuccess: (roomInfo: RoomCreateType | undefined) => {
+ const roomCode = roomInfo?.code;
+ queryClient.setQueryData(['myRoomCode'], roomCode);
  navigate(`/room/${roomCode}`, {
  state: { isHost: true, roomCode: roomCode },
  });
- } catch (err) {
-  console.error(err);
- throw err;
- }
- };
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
 
  return (
  <>
- {isLoading ? (
+ {isPending ? (
  <div>loading...</div>
  ) : (
  <button
  className="flex h-[33px] w-[150px] items-center justify-center rounded-lg bg-accent font-medium text-default_white hover:opacity-80"
- onClick={onClick}>
+ onClick={() => mutate()}>
  Create room
  </button>
  )}

client/src/pages/Lobby/RoomAccessPanel/RoomJoinButton.tsx

@@ -1,14 +1,14 @@
-import { useNavigate } from 'react-router-dom';
-
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 
 import axios from 'axios';
 import { joinRoom } from '../../../apis/joinRoom';
 
 export default function RoomJoinButton() {
  const [roomCode, setRoomCode] = useState<string>('');
-
  const navigate = useNavigate();
+ const queryClient = useQueryClient();
 
  const onClick = async (
  e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -22,7 +22,7 @@ export default function RoomJoinButton() {
 
  try {
  await joinRoom(roomCode);
-
+ queryClient.setQueryData(['myRoomCode'], roomCode);
  navigate(`/room/${roomCode}`, {
  state: { roomCode: roomCode, isHost: false },
  });

client/src/pages/Lobby/ThemeSettingModal.tsx

@@ -6,12 +6,14 @@ import {
  FaXmark,
 } from 'react-icons/fa6';
 import { RxExit } from 'react-icons/rx';
+import { useQuery } from '@tanstack/react-query';
+
 import { ProblemType } from '../../types/ProblemType';
 import { getProblemButtonColor } from '../../utils/getProblemButtonColor';
 import Message from '../Room/Chat/Message';
 import { MessageInterface, ChatEvent } from '../../types/Message';
 import { useTheme } from '../../hooks/useTheme';
-import { useAuthContext } from '../../hooks/useAuthContext';
+import { getMyInfo } from '../../apis/getMyInfo';
 
 interface ThemeSettingModalProps {
  modalOverlayRef: RefObject<HTMLDivElement>;
@@ -26,7 +28,11 @@ export default function ThemeSettingModal({
 }: ThemeSettingModalProps) {
  const { theme, toggleTheme } = useTheme();
 
- const { user } = useAuthContext();
+ const { data: user } = useQuery({
+ queryKey: ['user'],
+ queryFn: getMyInfo,
+ staleTime: Infinity,
+ });
 
  const problems: ProblemType[] = [
  {

client/src/pages/Room/Chat/Chat.tsx

@@ -1,12 +1,12 @@
 import { FaArrowRight } from 'react-icons/fa6';
 import TextAreaAutoSize from 'react-textarea-autosize';
+import { useQuery } from '@tanstack/react-query';
 
 import Message from './Message';
 import {
  getLocalStorageItem,
  setLocalStorageItem,
 } from '../../../utils/localStorage';
-import { useAuthContext } from '../../../hooks/useAuthContext';
 
 import {
  ChatEvent,
@@ -15,9 +15,14 @@ import {
 } from '../../../types/Message';
 import { useRoom } from '../../../hooks/useRoom';
 import { useEffect } from 'react';
+import { getMyInfo } from '../../../apis/getMyInfo';
 
 export default function Chat() {
- const { user } = useAuthContext();
+ const { data: user } = useQuery({
+ queryKey: ['user'],
+ queryFn: getMyInfo,
+ staleTime: Infinity,
+ });
  const { roomId, messages, setMessages, inputRef, messagesRef, socketRef } =
  useRoom();