refactor: react-query 적용 (professor)

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

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

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

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