From 4e9d028f215910a23a2083b9956a2607a88e2cb4 Mon Sep 17 00:00:00 2001
From: dohun31 <dohun31@naver.com>
Date: Fri, 18 Aug 2023 14:30:24 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20query=20=EC=A4=91=EB=B3=B5=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20useWorkspacQuery=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Sidebar/index.tsx   | 8 ++------
 client/src/components/Workspace/index.tsx | 8 ++------
 client/src/queries/useWorkspaceQuery.tsx  | 9 +++++++++
 3 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 client/src/queries/useWorkspaceQuery.tsx

diff --git a/client/src/components/Sidebar/index.tsx b/client/src/components/Sidebar/index.tsx
index fd0be935..50f03d56 100644
--- a/client/src/components/Sidebar/index.tsx
+++ b/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>;
diff --git a/client/src/components/Workspace/index.tsx b/client/src/components/Workspace/index.tsx
index 54a8961e..26c3e650 100644
--- a/client/src/components/Workspace/index.tsx
+++ b/client/src/components/Workspace/index.tsx
@@ -1,4 +1,3 @@
-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';
@@ -6,12 +5,12 @@ 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);
diff --git a/client/src/queries/useWorkspaceQuery.tsx b/client/src/queries/useWorkspaceQuery.tsx
new file mode 100644
index 00000000..47e37fc5
--- /dev/null
+++ b/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 }),
+  });
+}