feat: hotdrinkvote 서버에서 fetch 하도록 변경

apps/jurumarble/package.json

@@ -18,6 +18,7 @@
     "@monorepo/ui": "workspace:*",
     "@next/bundle-analyzer": "13.3.5-canary.9",
     "@react-hookz/web": "^23.1.0",
+    "@tanstack/query-core": "^4.36.1",
     "@tanstack/react-query": "^4.33.0",
     "@tanstack/react-query-devtools": "^4.33.0",
     "axios": "^1.5.0",

apps/jurumarble/src/app/main/components/Banner.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import styled, { css } from "styled-components";
 import Image from "next/image";
 import { MainBannerImage } from "public/images";

apps/jurumarble/src/app/main/components/HotDrinkContainer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import styled, { css } from "styled-components";
 import useGetHotDrinkListService from "../services/useGetHotDrinkListService";
 import Carousel from "./Carousel";

apps/jurumarble/src/app/main/components/HotDrinkVoteContainer.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 import Path from "lib/Path";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import styled, { css } from "styled-components";
-import useGetHotDrinkVoteService from "../services/useGetHotDrinkVoteService";
+import { useGetHotDrinkVoteService } from "../services/useGetHotDrinkVoteService";
 
 function HotDrinkVoteContainer() {
   const router = useRouter();

apps/jurumarble/src/app/main/components/SearchInputWrapper.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import SearchInput from "components/SearchInput";
 import useInput from "hooks/useInput";
 import Path from "lib/Path";

apps/jurumarble/src/app/main/components/TodayDrinkRecommendation.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { SvgStamp } from "src/assets/icons/components";
 import styled, { css, useTheme } from "styled-components";

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

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

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

@@ -0,0 +1 @@
+export const hotDrinkVoteQueryKey = "hotDrinkVote";

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

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
-import { getHotDrinkVote } from "lib/apis/vote";
-import { queryKeys } from "lib/queryKeys";
-
-const getQueryKey = () => [queryKeys.HOT_DRINK_VOTE];
-
-export default function useGetHotDrinkVoteService() {
-  const { data: hotDrinkVote } = useQuery(getQueryKey(), getHotDrinkVote);
+import { getHotDrinkVote } from "lib/apis/vote/getHotDrinkVote";
+import { hotDrinkVoteQueryKey } from "./queryKey";
 
+export const useGetHotDrinkVoteService = () => {
+  const { data: hotDrinkVote } = useQuery({
+    queryKey: [hotDrinkVoteQueryKey],
+    queryFn: getHotDrinkVote,
+  });
   return { hotDrinkVote };
-}
+};

apps/jurumarble/src/app/page.module.css

@@ -0,0 +1,15 @@
+.main-top-section {
+  padding: 0 20px;
+}
+
+.main-bottom-section {
+  padding: 0 20px 96px;
+  margin-top: 8px;
+  overflow: auto;
+}
+
+.main-divide-line {
+  height: 8px;
+  margin: 40px 0 8px 0;
+  background-color: var(--bg_01);
+}

apps/jurumarble/src/app/page.tsx

@@ -1,13 +1,9 @@
-"use client";
-
 import BottomBar from "components/BottomBar";
 import Header from "components/Header";
-import styled, { css } from "styled-components";
 import dynamic from "next/dynamic";
-
-const DynamicHotDrinkVoteContainer = dynamic(
-  () => import("./main/components/HotDrinkVoteContainer"),
-);
+import { getClassNames } from "lib/styles/getClassNames";
+import styles from "./page.module.css";
+import { HydratedDrinkVoteContainer } from "./main/containers/HydratedDrinkVoteContainer";
 
 const DynamicHotDrinkContainer = dynamic(() => import("./main/components/HotDrinkContainer"), {
   ssr: false,
@@ -28,41 +24,26 @@ const DynamicSearchInputWrapper = dynamic(() => import("./main/components/Search
 
 const DynamicBanner = dynamic(() => import("./main/components/Banner"));
 
+const cx = getClassNames(styles);
+
 function MainPage() {
   return (
     <>
       <Header />
       <DynamicTodayDrinkRecommendation />
-      <TopSection>
+      <section className={cx("main-top-section")}>
         <DynamicBanner />
         <DynamicSearchInputWrapper />
         <DynamicHotDrinkContainer />
-      </TopSection>
-      <DivideLine />
-      <BottomSection>
-        <DynamicHotDrinkVoteContainer />
-      </BottomSection>
+      </section>
+      <div className={cx("main-divide-line")} />
+      <section className={cx("main-bottom-section")}>
+        {/* @ts-expect-error Server Component */}
+        <HydratedDrinkVoteContainer />
+      </section>
       <BottomBar />
     </>
   );
 }
 
-const TopSection = styled.section`
-  padding: 0 20px;
-`;
-
-const BottomSection = styled.section`
-  padding: 0 20px 96px; // 64(BottomBar height) + 32(margin) = 96
-  margin-top: 8px;
-  overflow: auto;
-`;
-
-const DivideLine = styled.div`
-  ${({ theme }) => css`
-    background-color: ${theme.colors.bg_01};
-    height: 8px;
-    margin: 40px 0 8px 0;
-  `}
-`;
-
 export default MainPage;

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

@@ -163,18 +163,6 @@ export const getVotingCheck = async (voteId: number) => {
   return response.data;
 };
 
-interface GetHotDrinkVoteResponse {
-  voteId: number;
-  voteTitle: string;
-  drinkAImage: string;
-  drinkBImage: string;
-}
-
-export const getHotDrinkVote = async () => {
-  const response = await baseApi.get<GetHotDrinkVoteResponse>("api/votes/drinks/hot");
-  return response.data;
-};
-
 export const deleteVote = async (voteId: number) => {
   const response = await http.delete(`api/votes/${voteId}/`);
   return response.data;

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

@@ -0,0 +1,14 @@
+import { SERVER_URL } from "lib/env";
+
+interface GetHotDrinkVoteResponse {
+  voteId: number;
+  voteTitle: string;
+  drinkAImage: string;
+  drinkBImage: string;
+}
+
+export const getHotDrinkVote = async () => {
+  const res = await fetch(`${SERVER_URL}api/votes/drinks/hot`);
+  const data = await res.json();
+  return data as GetHotDrinkVoteResponse;
+};

apps/jurumarble/src/lib/env.ts

@@ -0,0 +1,19 @@
+import Path from "./Path";
+
+export const CLIENT_URL = process.env.NEXT_PUBLIC_CLIENT_URL || "";
+export const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || "";
+
+export const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID || "";
+export const NAVER_CLIENT_ID = process.env.NEXT_PUBLIC_NAVER_CLIENT_ID || "";
+
+export const KAKAO_MAP_API_KEY = process.env.NEXT_PUBLIC_KAKAO_MAP_API_KEY || "";
+export const KAKAO_LOGIN_REDIRECT_URL =
+  process.env.NODE_ENV === "development"
+    ? `http://localhost:3000/${Path.KAKAO_LOGIN_PROCESS}`
+    : `${CLIENT_URL}${Path.KAKAO_LOGIN_PROCESS}`;
+export const NAVER_LOGIN_REDIRECT_URL =
+  process.env.NODE_ENV === "development"
+    ? `http://localhost:3000${Path.NAVER_LOGIN_PROCESS}`
+    : `${CLIENT_URL}${Path.NAVER_LOGIN_PROCESS}`;
+
+export const DATA_GO_API_KEY = process.env.NEXT_PUBLIC_DATA_GO_API_KEY || "";

apps/jurumarble/src/modules/getQueryClient.tsx

@@ -0,0 +1,5 @@
+import { QueryClient } from "@tanstack/query-core";
+import { cache } from "react";
+
+const getQueryClient = cache(() => new QueryClient());
+export default getQueryClient;

apps/jurumarble/src/modules/hydrateOnClient.tsx

@@ -0,0 +1,4 @@
+"use client";
+
+import { Hydrate as HydrateOnClient } from "@tanstack/react-query";
+export default HydrateOnClient;

yarn.lock

@@ -1634,6 +1634,7 @@ __metadata:
     "@svgr/core": ^8.0.0
     "@svgr/plugin-jsx": ^8.0.1
     "@svgr/plugin-prettier": ^8.0.1
+    "@tanstack/query-core": ^4.36.1
     "@tanstack/react-query": ^4.33.0
     "@tanstack/react-query-devtools": ^4.33.0
     "@types/node": 20.5.7
@@ -2312,6 +2313,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:^4.36.1":
+  version: 4.36.1
+  resolution: "@tanstack/query-core@npm:4.36.1"
+  checksum: 47672094da20d89402d9fe03bb7b0462be73a76ff9ca715169738bc600a719d064d106d083a8eedae22a2c22de22f87d5eb5d31ef447aba771d9190f2117ed10
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-query-devtools@npm:^4.20.4, @tanstack/react-query-devtools@npm:^4.33.0":
   version: 4.33.0
   resolution: "@tanstack/react-query-devtools@npm:4.33.0"