From 3b2025d8a47d2298a5224e4357cf0544478d5784 Mon Sep 17 00:00:00 2001
From: JaeguJaegu <118053865+SunwooJaeho@users.noreply.github.com>
Date: Tue, 17 Dec 2024 02:53:07 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20react-query=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?(professor)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../member/professor/professor-service.ts     | 11 ++++++++
 .../src/apis/member/professor/queries.ts      | 14 ++++++++++
 .../src/app/member/professor/page.tsx         | 27 +++++++++++--------
 .../src/app/member/professor/remote.ts        | 17 ------------
 apps/community/src/types/professor.ts         | 10 +++++++
 5 files changed, 51 insertions(+), 28 deletions(-)
 create mode 100644 apps/community/src/apis/member/professor/professor-service.ts
 create mode 100644 apps/community/src/apis/member/professor/queries.ts
 delete mode 100644 apps/community/src/app/member/professor/remote.ts
 create mode 100644 apps/community/src/types/professor.ts

diff --git a/apps/community/src/apis/member/professor/professor-service.ts b/apps/community/src/apis/member/professor/professor-service.ts
new file mode 100644
index 0000000..01a770e
--- /dev/null
+++ b/apps/community/src/apis/member/professor/professor-service.ts
@@ -0,0 +1,11 @@
+import { MOCK_END_POINT } from '~/constants/api';
+import type { Professor } from '~/types/professor';
+import { http } from '~/utils/http';
+
+class ProfessorService {
+  getProfessors() {
+    return http.get<Professor[]>(MOCK_END_POINT.PROFESSORS);
+  }
+}
+
+export default new ProfessorService();
diff --git a/apps/community/src/apis/member/professor/queries.ts b/apps/community/src/apis/member/professor/queries.ts
new file mode 100644
index 0000000..c94db1f
--- /dev/null
+++ b/apps/community/src/apis/member/professor/queries.ts
@@ -0,0 +1,14 @@
+import ProfessorService from './professor-service';
+
+const queryKeys = {
+  all: ['contacts'] as const,
+};
+
+const professorQueryOptions = {
+  all: () => ({
+    queryKey: queryKeys.all,
+    queryFn: () => ProfessorService.getProfessors(),
+  }),
+};
+
+export { professorQueryOptions };
diff --git a/apps/community/src/app/member/professor/page.tsx b/apps/community/src/app/member/professor/page.tsx
index 87d1454..8324a54 100644
--- a/apps/community/src/app/member/professor/page.tsx
+++ b/apps/community/src/app/member/professor/page.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from 'next';
 
+import { professorQueryOptions } from '~/apis/member/professor/queries';
+import { Hydrate, getDehydratedQuery } from '~/utils/react-query';
+
 import { ProfessorCard } from '~/components/member/professor/professor-card';
 import { PageHeader } from '~/components/page-header';
 
-import { getProfessors } from './remote';
-
 import * as styles from '~/app/member/professor/page.css';
 
 export const metadata: Metadata = {
@@ -16,7 +17,9 @@ export const metadata: Metadata = {
 export const dynamic = 'force-dynamic';
 
 export default async function ProfessorPage() {
-  const { data } = await getProfessors();
+  const { queryKey, queryFn } = professorQueryOptions.all();
+  const query = await getDehydratedQuery({ queryKey, queryFn });
+  const { data } = query.state.data ?? {};
 
   return (
     <section>
@@ -25,14 +28,16 @@ export default async function ProfessorPage() {
         description="경기대학교 AI컴퓨터공학부의 교수진을 소개해요"
       />
 
-      <div className={styles.professorListWrapper}>
-        {data.map((professor) => (
-          <ProfessorCard
-            key={`professor-${professor.id}`}
-            professor={professor}
-          />
-        ))}
-      </div>
+      <Hydrate state={{ query }}>
+        <div className={styles.professorListWrapper}>
+          {data?.map((professor) => (
+            <ProfessorCard
+              key={`professor-${professor.id}`}
+              professor={professor}
+            />
+          ))}
+        </div>
+      </Hydrate>
     </section>
   );
 }
diff --git a/apps/community/src/app/member/professor/remote.ts b/apps/community/src/app/member/professor/remote.ts
deleted file mode 100644
index 757e454..0000000
--- a/apps/community/src/app/member/professor/remote.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { MOCK_END_POINT } from '~/constants/api';
-import { http } from '~/utils/http';
-
-interface Professor {
-  id: number;
-  name: string;
-  img?: string;
-  type: string;
-  contact: string;
-  email: string;
-}
-
-function getProfessors() {
-  return http.get<Professor[]>(MOCK_END_POINT.PROFESSORS);
-}
-
-export { type Professor, getProfessors };
diff --git a/apps/community/src/types/professor.ts b/apps/community/src/types/professor.ts
new file mode 100644
index 0000000..77d6920
--- /dev/null
+++ b/apps/community/src/types/professor.ts
@@ -0,0 +1,10 @@
+interface Professor {
+  id: number;
+  name: string;
+  img?: string;
+  type: string;
+  contact: string;
+  email: string;
+}
+
+export type { Professor };