refactor: bottomsheet, toast, page 단에서 컴포넌트 분리

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;

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;

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>
   );
 };

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';

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}
+    </>
+  );
+}

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>
   );
 }