chore: 메인페이지 rsc suspense 적용

client/src/app/(home)/components/PostsBox/index.tsx

@@ -6,8 +6,12 @@ import { IPostInformation } from '@/types';
 import { PostSummary } from '@/components/Post';
 import { LoadingIcon } from '@/components';
 
-function PostsBox() {
-  const { datas, hasNextPage } = useScroll();
+interface PostsBoxProps {
+  initialData?: { data: IPostInformation[]; nextPageParms?: string };
+}
+
+function PostsBox({ initialData }: PostsBoxProps) {
+  const { datas, hasNextPage } = useScroll({ initialData });
 
   return (
     <>

client/src/app/(home)/components/index.tsx

@@ -1,3 +1,2 @@
-export { default as Loading } from './Loading';
 export { default as PostsBox } from './PostsBox';
 export { default as WritePostButton } from './WritePostButton';

client/src/app/(home)/hooks/useScroll.ts

@@ -1,11 +1,17 @@
 'use client';
 
 import getAllPosts from '@/service/post/getAllPosts';
+import { IPostInformation } from '@/types';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 
-function useScroll() {
+function useScroll({
+  initialData,
+}: {
+  initialData?: { data: IPostInformation[]; nextPageParms?: string };
+}) {
   const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
+    ...(!!initialData && initialData),
     queryKey: ['projects'],
     queryFn: getAllPosts,
     getNextPageParam: (lastPage) => lastPage?.nextPageParms,

client/src/app/(home)/components/Loading/index.tsx → client/src/app/(home)/loading.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import Skeleton from '../../../../components/Skeleton';
+import { Skeleton } from '@/components';
 
 function Loading() {
   return (

client/src/app/(home)/page.tsx

@@ -1,19 +1,23 @@
 //core
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 //components
 import { Advertisement } from '@/components';
+import Loading from './loading';
 
 //third party
-import { Loading, PostsBox, WritePostButton } from './components';
+import { PostsBox, WritePostButton } from './components';
+import getAllPosts from '@/service/post/getAllPosts';
+
+export default async function Home() {
+  const data = await getAllPosts({});
 
-export default function Home() {
   return (
     <div className="flex justify-between max-w-5xl mx-auto">
       <div className="flex flex-col w-full gap-3 md:w-8/12">
         <WritePostButton />
         <Suspense fallback={<Loading />}>
-          <PostsBox />
+          <PostsBox initialData={data} />
         </Suspense>
       </div>
       <Advertisement />

client/src/app/board/components/Loading/index.tsx → client/src/app/board/[id]/loading.tsx

@@ -1,5 +1,5 @@
+import { Skeleton } from '@/components';
 import React from 'react';
-import Skeleton from '../../../../components/Skeleton';
 
 function Loading() {
   return (

client/src/app/board/[id]/page.tsx

@@ -2,7 +2,8 @@
 import React, { Suspense } from 'react';
 
 //components
-import { Loading, PostContent } from '@/app/board/components';
+import { PostContent } from '@/app/board/components';
+import Loading from './loading';
 
 //types
 import { postManager } from '@/service/post';

client/src/app/board/components/index.tsx

@@ -1,3 +1,2 @@
 export { default as PostContent } from './PostContent';
-export { default as Loading } from './Loading';
 export { default as PostDetail } from './PostDetail';