Bug: 서버 컴포넌트 에러

src/app/(home)/_components/ContentSlider/ContentSlider.tsx

@@ -6,8 +6,12 @@ import "swiper/css";
 import IndexIndicator from "../IndexIndicator/IndexIndicator";
 import Image from "next/image";
 import { Categories } from "@/app/_utils/Categories";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { BASE_URL, getShuffledContents } from "@/app/_utils/api";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import {
+  BASE_URL,
+  getContentsCount,
+  getShuffledContents,
+} from "@/app/_utils/api";
 import { useEffect } from "react";
 import { Mousewheel } from "swiper/modules";
 import useParams from "@/app/_hooks/useParams";
@@ -18,16 +22,15 @@ import BackImage from "../BackImage/BackImage";
 import { useSearchParams } from "next/navigation";
 import ContentFallBack from "../ContentSliderFallback/ContentSliderFallback";
 
-export default function ContentSlider({
-  // initialData,
-  contentsCountData,
-}: {
-  // initialData: { pages: { content: IContentData[] }[]; pageParams: number[] };
-  contentsCountData: { count: number };
-}) {
+export default function ContentSlider() {
   const searchParams = useParams("categories").getParamsToString();
   const initialId = useSearchParams().get("id");
 
+  const { data: contentsCountData } = useQuery({
+    queryKey: ["contentsCountData", searchParams],
+    queryFn: () => getContentsCount(searchParams),
+  });
+
   const {
     data: shuffledContentsData,
     fetchNextPage,
@@ -37,12 +40,13 @@ export default function ContentSlider({
     queryKey: ["shuffledContents", searchParams],
     queryFn: ({ pageParam }) =>
       getShuffledContents(pageParam, searchParams, initialId),
-    initialPageParam: getRandomNumber([], contentsCountData),
+    initialPageParam: getRandomNumber([], contentsCountData || 1),
     getNextPageParam: (_, __, ___, allPageParams) => {
       return getRandomNumber(allPageParams, contentsCountData);
     },
     staleTime: 5 * 1000 * 60,
     gcTime: 30 * 1000 * 60,
+    enabled: !!contentsCountData,
   });
 
   // 데이터 추가 요청

src/app/(home)/_components/Home/Home.tsx

@@ -17,9 +17,9 @@ export default async function Home({
       return categories.map((category) => `categories=${category}`).join("&");
     }
   };
-  const contentsCountData = await getContentsCount(
-    arrayToQueryString(searchParams.categories)
-  );
+  // const contentsCountData = await getContentsCount(
+  //   arrayToQueryString(searchParams.categories)
+  // );
   // const randomIndex = getRandomNumber([], contentsCountData);
   // const initialContents = await getShuffledContents(
   //   randomIndex,
@@ -35,7 +35,9 @@ export default async function Home({
     <div className={styles.container}>
       <div className={styles.contentBox}>
         <div className={styles.sliderBox}>
-          <ContentSlider contentsCountData={contentsCountData} />
+          <Suspense>
+            <ContentSlider />
+          </Suspense>
         </div>
       </div>
     </div>

src/app/(home)/page.tsx

@@ -37,7 +37,6 @@ export default async function Page({
   if (code) {
     const gitTokenData = await getGitHubToken(code);
     tokenData = await login(gitTokenData?.access_token);
-    console.log("tokenData: ", tokenData);
   }
 
   return (

src/app/_components/SaveContentModal/SaveContentModal.tsx

@@ -71,7 +71,6 @@ const SaveContent = ({
         }
       }
     });
-    console.log(isSaved);
     closeSaveModal(isSaved);
   };
 

src/app/_hooks/useParams.tsx

@@ -6,7 +6,7 @@ const useParams = (queryParam: string) => {
   const searchParamsArray = useSearchParams().getAll(queryParam);
 
   // 배열의 각 요소를 '${categories}=값' 형태로 매핑하고, 결과를 '&'로 연결
-  const arrayToQueryString = (categories: string[] | null) => {
+  const arrayToQueryString = (categories: string[] | null): string => {
     if (categories == null) {
       throw new Error("queryParam is null");
     } else {
@@ -17,7 +17,7 @@ const useParams = (queryParam: string) => {
   };
 
   // 특정 서치 파라미터 문자열을 반환
-  const getParamsToString = () => {
+  const getParamsToString = (): string => {
     return arrayToQueryString(searchParamsArray);
   };
 

src/app/_utils/CheckLocalStorage.tsx

@@ -14,7 +14,6 @@ export default function CheckLocalStorage({
     // 새로운 토큰이 있을 때
     if (tokenData !== null) {
       localStorage.setItem("tokenData", JSON.stringify(tokenData));
-      console.log(tokenData);
       return true;
     } else {
       const localTokenData = localStorage.getItem("tokenData");
@@ -41,21 +40,11 @@ export default function CheckLocalStorage({
         ) {
           const tokenData = await refresh(parsedTokenData.refreshToken);
           if (tokenData) {
-            console.log(tokenData);
             localStorage.setItem("tokenData", JSON.stringify(tokenData));
             return true;
           }
         }
         // 모두 유효기간 지났을 때
-        else if (
-          accessTokenExpiresAt < localTime &&
-          refreshTokenExpiresAt < localTime
-        ) {
-          console.log("c");
-          console.log(localTime, parsedTokenData.accessTokenExpiresAt);
-        }
-      } else {
-        console.log("d");
       }
     }
   }

src/app/_utils/CheckToken.ts

@@ -30,15 +30,6 @@ const CheckToken = async () => {
       }
     }
     // 모두 유효기간 지났을 때
-    else if (
-      accessTokenExpiresAt < localTime &&
-      refreshTokenExpiresAt < localTime
-    ) {
-      console.log("c");
-      console.log(localTime, parsedTokenData.accessTokenExpiresAt);
-    }
-  } else {
-    console.log("d");
   }
   return false;
 };

src/app/_utils/firebase.ts

@@ -20,7 +20,9 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const analytics = () =>
   isSupported().then((yes) =>
-    yes ? logEvent(getAnalytics(app), "start") : () => console.log("no")
+    yes
+      ? logEvent(getAnalytics(app), "start")
+      : () => console.error("Firebase Error")
   );
 
 // const startAnalytics = () => {

src/app/layout.tsx

@@ -26,6 +26,7 @@ export default function RootLayout({
   children: React.ReactNode;
   modal: React.ReactNode;
 }>) {
+  process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
   return (
     <html lang="en">
       <body