Refactor/#414-B: query 중복 코드 useWorkspaceQuery 적용

client/src/components/Sidebar/index.tsx

@@ -1,6 +1,5 @@
-import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
-import { getWorkspaceInfo } from 'src/apis/workspace';
+import { useWorkspaceQuery } from 'src/queries/useWorkspaceQuery';
 
 import Header from './Header';
 import MeetingButton from './MeetingButton';
@@ -10,10 +9,7 @@ import style from './style.module.scss';
 
 function Sidebar() {
   const { id } = useParams();
-  const { data: workspace } = useQuery({
-    queryKey: ['workspace', id],
-    queryFn: () => getWorkspaceInfo({ id }),
-  });
+  const { data: workspace } = useWorkspaceQuery(id);
 
   if (!workspace) {
     return <div className={style['sidebar-container']}></div>;

client/src/components/Workspace/index.tsx

@@ -1,17 +1,16 @@
-import { useQuery } from '@tanstack/react-query';
 import * as MomMessage from '@wabinar/api-types/mom';
 import { MOM_EVENT, WORKSPACE_EVENT } from '@wabinar/constants/socket-message';
 import Mom from 'components/Mom';
 import DefaultMom from 'components/Mom/DefaultMom';
 import Sidebar from 'components/Sidebar';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { getWorkspaceInfo } from 'src/apis/workspace';
 import MeetingMediaBar from 'src/components/MeetingMediaBar';
 import MeetingContext from 'src/contexts/meeting';
 import { SelectedMomContext } from 'src/contexts/selected-mom';
 import { SocketContext } from 'src/contexts/socket';
 import useSocket from 'src/hooks/useSocket';
+import { useWorkspaceQuery } from 'src/queries/useWorkspaceQuery';
 import { TMom } from 'src/types/mom';
 
 function Workspace() {
@@ -21,10 +20,7 @@ function Workspace() {
   const params = useParams();
   const momId = params['*'];
 
-  const { data: workspace } = useQuery({
-    queryKey: ['workspace', id],
-    queryFn: () => getWorkspaceInfo({ id }),
-  });
+  const { data: workspace } = useWorkspaceQuery(id);
 
   const [selectedMom, setSelectedMom] = useState<TMom | null>(null);
   const [isOnGoing, setIsOnGoing] = useState(false);

client/src/queries/useWorkspaceQuery.tsx

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getWorkspaceInfo } from 'src/apis/workspace';
+
+export function useWorkspaceQuery(id?: string) {
+  return useQuery({
+    queryKey: ['workspace', id],
+    queryFn: () => getWorkspaceInfo({ id }),
+  });
+}