✨ feat: skeleton ui 적용

src/app/template.tsx

@@ -9,6 +9,7 @@ import { CategoryBottomSheet } from './toks-main/components/CategoryBottomSheet'
 export default function Template({ children }: StrictPropsWithChildren) {
   // TODO: useAuth hook 구현
   // TODO: useLogin Modal hook 구현
+  // TODO: GlobalPortal 제거
   const pathName = usePathname();
 
   return (

src/app/toks-main/components/MainPageSlider/SkeletonSlider.tsx

@@ -1,3 +1,5 @@
 export const SkeletonSlider = () => {
-  return <div></div>;
+  return (
+    <div className="aspect-w-3 aspect-h-1 z-0 h-130px w-full animate-pulse rounded-12px bg-gray-110"></div>
+  );
 };

src/app/toks-main/components/MainPageSlider/index.tsx

@@ -1,13 +1,17 @@
-'use client';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { NoticeSlider } from '@/common';
 
+import { SkeletonSlider } from './SkeletonSlider';
 import { QUERY_KEYS } from '../../constants/queryKeys';
 import { getNotices } from '../../remotes/notice';
 
 export const MainPageSlider = () => {
-  const { data: notices } = useSuspenseQuery({
+  const {
+    data: notices,
+    isLoading,
+    isSuccess,
+  } = useQuery({
     queryKey: [QUERY_KEYS.GET_NOTICES],
     queryFn: async () => {
       try {
@@ -18,9 +22,16 @@ export const MainPageSlider = () => {
     },
   });
 
-  const imageInfo = notices.bottomBanners.map((el) => {
-    return { imageUrl: el.imageUrl, landingUrl: el.landingUrl };
-  });
+  if (isLoading) {
+    return <SkeletonSlider />;
+  }
+
+  if (isSuccess) {
+    const imageInfo = notices.bottomBanners.map((el) => {
+      return { imageUrl: el.imageUrl, landingUrl: el.landingUrl };
+    });
+    return <NoticeSlider images={imageInfo} />;
+  }
 
-  return <NoticeSlider images={imageInfo} />;
+  return null;
 };

src/app/toks-main/page.tsx

@@ -2,14 +2,13 @@
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
-import { FloatingButton, SSRSuspense, Toast, ToastProps } from '@/common';
+import { FloatingButton, Toast, ToastProps } from '@/common';
 import { useToast } from '@/common/hooks';
 import { isVisibleFloatingButtonBottomSheetAtom } from '@/store';
 
 import { CardList } from './components/CardList';
 import { MainPageBottomSheet } from './components/MainPageBottomSheet';
 import { MainPageSlider } from './components/MainPageSlider';
-import { SkeletonSlider } from './components/MainPageSlider/SkeletonSlider';
 
 function ToksMainPage() {
   const { getSavedToastInfo, clearSavedToast } = useToast();
@@ -34,9 +33,7 @@ function ToksMainPage() {
           title={toastData.title}
         />
       )}
-      <SSRSuspense fallback={<SkeletonSlider />}>
-        <MainPageSlider />
-      </SSRSuspense>
+      <MainPageSlider />
       <div className="h-24px" />
       <CardList />