Merge pull request #97 from EmploymentRescueTeam/feature/#94

Feat: ssr test

src/app/main/page.tsx

@@ -1,9 +1,12 @@
 import MainPage from '@/templates/main/mainPage';
+import { getProducts } from '@/api/service';
+
+export default async function Main() {
+  const data = await getProducts();
 
-export default function Main() {
   return (
     <>
-      <MainPage />
+      <MainPage data={data} />
     </>
   );
 }

src/templates/main/mainPage.tsx

@@ -1,39 +1,24 @@
 'use client';
 
-import { getProducts } from '@/api/service';
 import Header from '@/components/header';
 import ProductList from '@/components/productList';
-import { AXIOSResponse, IProduct } from '@/types/interface';
 import '@/styles/templates/main/main.scss';
 import AddBtn from './addBtn';
 import { AiOutlineSearch } from 'react-icons/ai';
 import { RxHamburgerMenu } from 'react-icons/rx';
 import Navbar from '@/components/navbar';
-import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useSearchParams } from 'next/navigation';
+interface MainPageProps {
+  data: any[]; // Use a more specific type based on your data structure
+}
 
-export default function MainPage() {
-  const [data, setData] = useState<IProduct[]>([]);
+export default function MainPage({ data }: MainPageProps) {
   const categoryParams = useSearchParams();
   const category = categoryParams.get('category') || undefined;
 
   const router = useRouter();
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const res: AXIOSResponse<IProduct[]> = await getProducts(
-        undefined,
-        category,
-      );
-      if (res.statusCode === 200) {
-        setData(res.data);
-      }
-    };
-
-    fetchData();
-  }, [category]);
-
   return (
     <div id="mainPage">
       <header>