choooz · ksmfou98 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/apps/jurumarble/package.json b/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",
@@ -41,6 +42,7 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/styled-components": "^5",
-    "typescript": "4.9.3"
+    "typescript": "4.9.3",
+    "typescript-plugin-css-modules": "^5.0.2"
   }
 }
diff --git a/apps/jurumarble/src/app/layout.tsx b/apps/jurumarble/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import StyledLayout from "components/StyledLayout";
 import { pretandard } from "lib/localFont";
 import ReactQueryProvider from "lib/ReactQueryProvider";
 import StyledComponents from "lib/styles/StyledComponents";
@@ -10,6 +9,8 @@ import AuthProcess from "components/AuthProcess";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
+import { PageLayout } from "components/layouts";
+import "lib/styles/global.css";
 
 export const metadata: Metadata = {
   title: "주루마블",
@@ -27,12 +28,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className={pretandard.className} suppressHydrationWarning={true}>
         <ReactQueryProvider>
           <StyledComponents>
-            <StyledLayout>
+            <PageLayout>
               <div id="portal" />
               <AuthProcess />
               {children}
               <ToastContainer position="top-center" autoClose={2000} hideProgressBar />
-            </StyledLayout>
+            </PageLayout>
           </StyledComponents>
         </ReactQueryProvider>
       </body>

diff --git a/apps/jurumarble/src/app/main/components/Banner.tsx b/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";

diff --git a/apps/jurumarble/src/app/main/components/HotDrinkContainer.tsx b/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";

diff --git a/apps/jurumarble/src/app/main/components/HotDrinkVoteContainer.tsx b/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();

diff --git a/apps/jurumarble/src/app/main/components/SearchInputWrapper.tsx b/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";

diff --git a/apps/jurumarble/src/app/main/components/TodayDrinkRecommendation.tsx b/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";

diff --git a/apps/jurumarble/src/app/main/containers/HydratedDrinkVoteContainer.tsx b/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>
+  );
+};
diff --git a/apps/jurumarble/src/app/main/containers/HydratedHotDrinkContainer.tsx b/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>
+  );
+};
diff --git a/apps/jurumarble/src/app/main/services/queryKey.ts b/apps/jurumarble/src/app/main/services/queryKey.ts
@@ -0,0 +1,2 @@
+export const hotDrinkVoteQueryKey = "hotDrinkVote";
+export const hotDrinkListQueryKey = "searchDrinkList";
diff --git a/apps/jurumarble/src/app/main/services/useGetHotDrinkListService.ts b/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 };
 }
diff --git a/apps/jurumarble/src/app/main/services/useGetHotDrinkVoteService.ts b/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 };
-}
+};
diff --git a/apps/jurumarble/src/app/page.module.css b/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);
+}
diff --git a/apps/jurumarble/src/app/page.tsx b/apps/jurumarble/src/app/page.tsx
@@ -1,13 +1,10 @@
-"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";
+import { HydratedHotDrinkContainer } from "./main/containers/HydratedHotDrinkContainer";
 
 const DynamicHotDrinkContainer = dynamic(() => import("./main/components/HotDrinkContainer"), {
   ssr: false,
@@ -28,41 +25,27 @@ 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>
+        {/* @ts-expect-error Server Component */}
+        <HydratedHotDrinkContainer />
+      </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;
diff --git a/apps/jurumarble/src/components/StyledLayout.tsx b/apps/jurumarble/src/components/StyledLayout.tsx
diff --git a/apps/jurumarble/src/components/index.ts b/apps/jurumarble/src/components/index.ts
@@ -7,3 +7,4 @@ export { default as FloatComponentTemplate } from "./modal/FloatComponentTemplat
 export { default as DivideLine } from "./divide/DivideLine";
 export { default as ImageUploadButton } from "./ImageUploadButton";
 export { default as LevelChip } from "./LevelChip";
+export * from "./layouts";
diff --git a/apps/jurumarble/src/components/layouts/PageLayout.tsx b/apps/jurumarble/src/components/layouts/PageLayout.tsx
@@ -0,0 +1,9 @@
+import { getClassNames } from "lib/styles/getClassNames";
+import { PropsWithChildren } from "react";
+import styles from "./styles.module.css";
+
+const cx = getClassNames(styles);
+
+export const PageLayout = ({ children }: PropsWithChildren) => {
+  return <div className={cx("rootlayout")}>{children}</div>;
+};
diff --git a/apps/jurumarble/src/components/layouts/index.ts b/apps/jurumarble/src/components/layouts/index.ts
@@ -0,0 +1 @@
+export * from "./PageLayout";
diff --git a/apps/jurumarble/src/components/layouts/styles.module.css b/apps/jurumarble/src/components/layouts/styles.module.css
@@ -0,0 +1,4 @@
+.rootlayout {
+  max-width: 720px;
+  margin: 0 auto;
+}
diff --git a/apps/jurumarble/src/lib/apis/vote.ts b/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;

diff --git a/apps/jurumarble/src/lib/apis/vote/getHotDrinkList.ts b/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[];
+};
diff --git a/apps/jurumarble/src/lib/apis/vote/getHotDrinkVote.ts b/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;
+};
diff --git a/apps/jurumarble/src/lib/env.ts b/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 || "";
diff --git a/apps/jurumarble/src/lib/styles/getClassNames.ts b/apps/jurumarble/src/lib/styles/getClassNames.ts
@@ -0,0 +1,32 @@
+import typography from "./typography.module.css";
+
+type Styles = { [key: string]: string };
+export function getClassNames<T extends Styles>(styles: T) {
+  type BooleanMap = Partial<Record<keyof T, boolean> & { [key: string]: boolean }>;
+  type ClassNames = keyof T | false | null | undefined | BooleanMap;
+  type ExtraClassName = ClassNames | Omit<string, keyof T>;
+
+  const styleUtils = {
+    ...typography,
+    ...styles,
+  } as const;
+
+  type MergedClassName = ExtraClassName | keyof typeof styleUtils;
+
+  const fn = (...classNames: MergedClassName[]) => {
+    return (classNames.filter((cn) => cn) as (keyof T)[])
+      .map((className) => {
+        if (typeof className === "object") {
+          const keys = Object.keys(className) as (keyof T)[];
+          return keys
+            .filter((key) => className[key])
+            .map((key) => styleUtils[key])
+            .join(" ");
+        }
+        return styleUtils[className] ?? className;
+      })
+      .join(" ");
+  };
+
+  return fn;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const hotDrinkVoteQueryKey = "hotDrinkVote";
		export const hotDrinkListQueryKey = "searchDrinkList";