From ff3bef44e2251b543930f1ff174067996f6e79ee Mon Sep 17 00:00:00 2001
From: minsgy <alstjrchl97@likelion.org>
Date: Sun, 14 Jan 2024 11:40:08 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20bottomsheet,=20toast,=20page=20?=
 =?UTF-8?q?=EB=8B=A8=EC=97=90=EC=84=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../toks-main/@bottomSheet/page.tsx           | 27 ++++++++++++++
 .../(AppBarHeader)/toks-main/@toast/page.tsx  | 32 ++++++++++++++++
 .../toks-main/_components/CardList.tsx        |  8 ++++
 .../OnboardingCarousel.tsx                    |  1 +
 .../_components/QuizListServerComponent.tsx   | 32 ----------------
 src/app/(AppBarHeader)/toks-main/layout.tsx   | 20 ++++++++++
 src/app/(AppBarHeader)/toks-main/page.tsx     | 37 -------------------
 7 files changed, 88 insertions(+), 69 deletions(-)
 create mode 100644 src/app/(AppBarHeader)/toks-main/@bottomSheet/page.tsx
 create mode 100644 src/app/(AppBarHeader)/toks-main/@toast/page.tsx
 delete mode 100644 src/app/(AppBarHeader)/toks-main/_components/QuizListServerComponent.tsx
 create mode 100644 src/app/(AppBarHeader)/toks-main/layout.tsx

diff --git a/src/app/(AppBarHeader)/toks-main/@bottomSheet/page.tsx b/src/app/(AppBarHeader)/toks-main/@bottomSheet/page.tsx
new file mode 100644
index 00000000..9bbe11bd
--- /dev/null
+++ b/src/app/(AppBarHeader)/toks-main/@bottomSheet/page.tsx
@@ -0,0 +1,27 @@
+'use client';
+import React from 'react';
+import { useRecoilState } from 'recoil';
+
+import { FloatingButton } from '@/common/components/FloatingButton';
+import { isVisibleFloatingButtonBottomSheetAtom } from '@/store';
+
+import { MainPageBottomSheet } from '../_components/MainPageBottomSheet';
+
+const BottomSheet = () => {
+  const [isOpenFloatingButtonBottomSheet, setIsOpenFloatingButtonBottomSheet] =
+    useRecoilState(isVisibleFloatingButtonBottomSheetAtom);
+
+  return (
+    <>
+      <FloatingButton
+        onClick={() => setIsOpenFloatingButtonBottomSheet(true)}
+      />
+      <MainPageBottomSheet
+        onClose={() => setIsOpenFloatingButtonBottomSheet(false)}
+        isShow={isOpenFloatingButtonBottomSheet}
+      />
+    </>
+  );
+};
+
+export default BottomSheet;
diff --git a/src/app/(AppBarHeader)/toks-main/@toast/page.tsx b/src/app/(AppBarHeader)/toks-main/@toast/page.tsx
new file mode 100644
index 00000000..ff73d10e
--- /dev/null
+++ b/src/app/(AppBarHeader)/toks-main/@toast/page.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { useToast } from '@/common';
+import { Toast as ToastComponent, ToastProps } from '@/common/components/Toast';
+
+const Toast = () => {
+  const { getSavedToastInfo, clearSavedToast } = useToast();
+  const [toastData, setToastData] = useState<ToastProps | null>(null);
+
+  useEffect(() => {
+    setToastData(getSavedToastInfo());
+    clearSavedToast();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!toastData) {
+    return null;
+  }
+
+  return (
+    <ToastComponent
+      isShow={toastData.isShow}
+      type={toastData.type}
+      direction={toastData.direction}
+      title={toastData.title}
+    />
+  );
+};
+
+export default Toast;
diff --git a/src/app/(AppBarHeader)/toks-main/_components/CardList.tsx b/src/app/(AppBarHeader)/toks-main/_components/CardList.tsx
index 1257e328..1f81f2ba 100644
--- a/src/app/(AppBarHeader)/toks-main/_components/CardList.tsx
+++ b/src/app/(AppBarHeader)/toks-main/_components/CardList.tsx
@@ -8,6 +8,7 @@ import { useIntersectionObserver } from '@/common/hooks';
 import { useQuizListInfinityQuery } from '@/queries/useQuizListInfinityQuery';
 
 import { QuizNotice } from './QuizNotice';
+import { SkeletonCardList } from './SkeletonCard';
 import { CARD_LIST_QUERY_DEFAULT } from '../constants';
 
 export const CardList = () => {
@@ -18,6 +19,7 @@ export const CardList = () => {
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
+    isLoading,
   } = useQuizListInfinityQuery();
 
   useIntersectionObserver({
@@ -28,6 +30,11 @@ export const CardList = () => {
 
   const { pages: quizList } = data;
 
+  // TODO: Suspense fallback
+  if (isLoading) {
+    return <SkeletonCardList />;
+  }
+
   return (
     <div className="flex h-full flex-col gap-8px">
       {quizList?.length === 0 && (
@@ -46,6 +53,7 @@ export const CardList = () => {
         />
       ))}
       <div ref={observeBox} />
+      {isFetchingNextPage && <SkeletonCardList />}
     </div>
   );
 };
diff --git a/src/app/(AppBarHeader)/toks-main/_components/OnboardingBottomsheet/OnboardingCarousel.tsx b/src/app/(AppBarHeader)/toks-main/_components/OnboardingBottomsheet/OnboardingCarousel.tsx
index 8eb6a7e3..3807202b 100644
--- a/src/app/(AppBarHeader)/toks-main/_components/OnboardingBottomsheet/OnboardingCarousel.tsx
+++ b/src/app/(AppBarHeader)/toks-main/_components/OnboardingBottomsheet/OnboardingCarousel.tsx
@@ -1,3 +1,4 @@
+'use client';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useRef, useState } from 'react';
diff --git a/src/app/(AppBarHeader)/toks-main/_components/QuizListServerComponent.tsx b/src/app/(AppBarHeader)/toks-main/_components/QuizListServerComponent.tsx
deleted file mode 100644
index e98862c1..00000000
--- a/src/app/(AppBarHeader)/toks-main/_components/QuizListServerComponent.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  HydrationBoundary,
-  QueryClient,
-  dehydrate,
-} from '@tanstack/react-query';
-import React from 'react';
-
-import { CardList } from './CardList';
-import { getQuizList } from '../_lib/remotes/quiz';
-
-const QuizListServerComponent = async () => {
-  const queryClient = new QueryClient();
-  await queryClient.prefetchInfiniteQuery({
-    queryKey: ['posts', 'recommends'],
-    queryFn: ({ pageParams }) =>
-      getQuizList({
-        page: pageParams,
-        size: 10,
-        categoryIds: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-      }),
-    initialPageParam: 0,
-  });
-  const dehydratedState = dehydrate(queryClient);
-
-  return (
-    <HydrationBoundary state={dehydratedState}>
-      <CardList />
-    </HydrationBoundary>
-  );
-};
-
-export default QuizListServerComponent;
diff --git a/src/app/(AppBarHeader)/toks-main/layout.tsx b/src/app/(AppBarHeader)/toks-main/layout.tsx
new file mode 100644
index 00000000..fafda66d
--- /dev/null
+++ b/src/app/(AppBarHeader)/toks-main/layout.tsx
@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+
+type Props = {
+  toast: React.ReactNode;
+  bottomSheet: React.ReactNode;
+};
+
+export default function ToksMainLayout({
+  children,
+  toast,
+  bottomSheet,
+}: PropsWithChildren<Props>) {
+  return (
+    <>
+      {children}
+      {toast}
+      {bottomSheet}
+    </>
+  );
+}
diff --git a/src/app/(AppBarHeader)/toks-main/page.tsx b/src/app/(AppBarHeader)/toks-main/page.tsx
index 45b4134b..97b13109 100644
--- a/src/app/(AppBarHeader)/toks-main/page.tsx
+++ b/src/app/(AppBarHeader)/toks-main/page.tsx
@@ -1,46 +1,9 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
-
-import { FloatingButton } from '@/common/components/FloatingButton';
-import { Toast, ToastProps } from '@/common/components/Toast';
-import { useToast } from '@/common/hooks';
-import { isVisibleFloatingButtonBottomSheetAtom } from '@/store';
-
 import { CardList } from './_components/CardList';
-import { MainPageBottomSheet } from './_components/MainPageBottomSheet';
 
 function ToksMainPage() {
-  const { getSavedToastInfo, clearSavedToast } = useToast();
-  const [toastData, setToastData] = useState<ToastProps | null>(null);
-
-  const [isOpenFloatingButtonBottomSheet, setIsOpenFloatingButtonBottomSheet] =
-    useRecoilState(isVisibleFloatingButtonBottomSheetAtom);
-
-  useEffect(() => {
-    setToastData(getSavedToastInfo());
-    clearSavedToast();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <div className="flex-col">
-      {toastData && (
-        <Toast
-          isShow={toastData.isShow}
-          type={toastData.type}
-          direction={toastData.direction}
-          title={toastData.title}
-        />
-      )}
       <CardList />
-      <FloatingButton
-        onClick={() => setIsOpenFloatingButtonBottomSheet(true)}
-      />
-      <MainPageBottomSheet
-        onClose={() => setIsOpenFloatingButtonBottomSheet(false)}
-        isShow={isOpenFloatingButtonBottomSheet}
-      />
     </div>
   );
 }