feat: hotdrinklist 컴포넌트 서버 컴포넌트로 변환

apps/jurumarble/src/app/main/containers/HydratedHotDrinkContainer.tsx

@@ -0,0 +1,17 @@
+import { dehydrate } from "@tanstack/query-core";
+import { getHotDrinkList } from "lib/apis/vote/getHotDrinkList";
+import getQueryClient from "src/modules/getQueryClient";
+import HydrateOnClient from "src/modules/hydrateOnClient";
+import HotDrinkContainer from "../components/HotDrinkContainer";
+import { hotDrinkListQueryKey } from "../services/queryKey";
+
+export const HydratedHotDrinkContainer = async () => {
+  const qc = getQueryClient();
+  await qc.prefetchQuery([hotDrinkListQueryKey], getHotDrinkList);
+  const dehydratedState = dehydrate(qc);
+  return (
+    <HydrateOnClient state={dehydratedState}>
+      <HotDrinkContainer />
+    </HydrateOnClient>
+  );
+};

apps/jurumarble/src/app/main/services/queryKey.ts

@@ -1 +1,2 @@
 export const hotDrinkVoteQueryKey = "hotDrinkVote";
+export const hotDrinkListQueryKey = "searchDrinkList";

apps/jurumarble/src/app/main/services/useGetHotDrinkListService.ts

@@ -1,11 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import { getHotDrinkList } from "lib/apis/drink";
 import { queryKeys } from "lib/queryKeys";
-
-const getQueryKey = () => [queryKeys.SEARCH_DRINK_LIST];
+import { hotDrinkListQueryKey } from "./queryKey";
 
 export default function useGetHotDrinkListService() {
-  const { data } = useQuery(getQueryKey(), getHotDrinkList);
+  const { data } = useQuery([hotDrinkListQueryKey], getHotDrinkList);
 
   return { data };
 }

apps/jurumarble/src/app/page.tsx

@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import { getClassNames } from "lib/styles/getClassNames";
 import styles from "./page.module.css";
 import { HydratedDrinkVoteContainer } from "./main/containers/HydratedDrinkVoteContainer";
+import { HydratedHotDrinkContainer } from "./main/containers/HydratedHotDrinkContainer";
 
 const DynamicHotDrinkContainer = dynamic(() => import("./main/components/HotDrinkContainer"), {
   ssr: false,
@@ -34,7 +35,8 @@ function MainPage() {
       <section className={cx("main-top-section")}>
         <DynamicBanner />
         <DynamicSearchInputWrapper />
-        <DynamicHotDrinkContainer />
+        {/* @ts-expect-error Server Component */}
+        <HydratedHotDrinkContainer />
       </section>
       <div className={cx("main-divide-line")} />
       <section className={cx("main-bottom-section")}>

apps/jurumarble/src/lib/apis/vote/getHotDrinkList.ts

@@ -0,0 +1,13 @@
+import { SERVER_URL } from "lib/env";
+
+export interface GetHotDrinkResponse {
+  drinkId: number;
+  name: string;
+  manufactureAddress: string;
+  image: string;
+}
+export const getHotDrinkList = async () => {
+  const res = await fetch(`${SERVER_URL}api/drinks/hot`);
+  const data = await res.json();
+  return data as GetHotDrinkResponse[];
+};