feat: 홈 api 연결 및 비디오 재생 여부 확인

src/App.tsx

@@ -1,7 +1,6 @@
 import './App.css';
 import { RecoilRoot } from 'recoil';
 import { Routes, Route, BrowserRouter } from 'react-router-dom';
-import Home from 'pages/home/Home';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import DetailPetPage from 'pages/detailPet/DetailPetPage';
 import ProfileListPage from 'pages/profileList/ProfileListPage';
@@ -13,6 +12,7 @@ import ShelterInfoPage from 'pages/shelterInfo/ShelterInfoPage';
 import SignupPage from 'pages/signUp/SignupPage';
 import UrgentListPage from 'pages/profileList/urgentList/UrgentListPage';
 import UpdatePage from 'pages/update/UpdatePage';
+import HomePage from 'pages/home/HomePage';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -26,10 +26,10 @@ function App() {
       <RecoilRoot>
         <BrowserRouter>
           <Routes>
-            <Route path="/" element={<Home />} />
+            <Route path="/" element={<HomePage />} />
             <Route path="/pet/:id" element={<DetailPetPage />} />
             <Route path="/profile" element={<ProfileListPage />} />
-            <Route path="/shelter/:id" element={<ShelterInfoPage />} />
+            <Route path="/shelter/:id/:page" element={<ShelterInfoPage />} />
             <Route path="/profile/urgent/:page" element={<UrgentListPage />} />
             <Route path="/profile/new/:page" element={<NewListPage />} />
             <Route path="/register" element={<RegisterPage />} />

src/pages/home/Home.tsx

@@ -1,12 +1,66 @@
-import GNB from 'layouts/GNB';
-
-const HomePage = () => {
-  return (
-    <div>
-      <GNB />
-      <h1>Home</h1>
-    </div>
-  );
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import VHome, { HomeProps } from './VHome';
+
+const Home = () => {
+  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
+  const [shortForm, setShortForm] = useState<HomeProps | null>(null);
+
+  const getShortForm = async () => {
+    const response = await fetch(
+      `${process.env.REACT_APP_URI}/short-forms/home?page=${currentPage}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const json = await response.json();
+    return json.response;
+  };
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['home', currentPage],
+    queryFn: getShortForm,
+  });
+  console.log(data);
+
+  useEffect(() => {
+    if (!isLoading && !isError && data) {
+      const pageData = {
+        hasNext: data.hasNext,
+      };
+
+      const shortFormData = data.shortForms;
+
+      const homeProps: HomeProps = {
+        pageProps: pageData,
+        shortFormProps: shortFormData,
+      };
+
+      setShortForm(homeProps);
+    }
+  }, [data, isLoading, isError]);
+
+  if (isLoading) {
+    return <div className=" justify-center">로딩중</div>;
+  }
+
+  if (isError) {
+    return <div>Error: {isError}</div>;
+  }
+
+  if (shortForm) {
+    return <VHome {...shortForm} />;
+  }
+
+  return null;
 };
 
-export default HomePage;
+export default Home;

src/pages/home/HomePage.tsx

@@ -0,0 +1,13 @@
+import GNB from 'layouts/GNB';
+import Home from './Home';
+
+const HomePage = () => {
+  return (
+    <div>
+      <GNB />
+      <Home />
+    </div>
+  );
+};
+
+export default HomePage;

src/pages/home/VHome.tsx

@@ -0,0 +1,57 @@
+import ProfileCard from 'pages/profileList/ProfileCard';
+
+export interface PageProps {
+  hasNext: boolean;
+}
+
+export interface ShortFormProps {
+  map(
+    arg0: (
+      shortForm: any,
+      index: any,
+    ) => import('react/jsx-runtime').JSX.Element,
+  ): import('react').ReactNode;
+  petId: number;
+  name: string;
+  age: string;
+  shelterId: number;
+  shelterName: string;
+  profileShortFormUrl: string;
+  adoptionStatus: string;
+}
+
+export interface HomeProps {
+  pageProps: PageProps;
+  shortFormProps: ShortFormProps;
+}
+
+const VHome = (homeProps: HomeProps) => (
+  <div className="flex flex-col mx-16 sm:mx-40 lg:mx-64 my-14">
+    <h2 className="flex w-full font-bold text-xl sm:text-2xl items-center whitespace-nowrap"></h2>
+    <div className="flex flex-col">
+      {homeProps.shortFormProps.map((shortForm, index) => (
+        <div key={index} className="flex">
+          <a
+            href={`/pet/${shortForm.petId}`}
+            className="flex flex-col items-center justify-center gap-6"
+          >
+            <video muted autoPlay loop>
+              <source src={shortForm.profileShortFormUrl} type="video/mp4" />
+            </video>
+            <div className="flex flex-row w-full h-20">
+              <div className="text-lg text-neutral-950">
+                {homeProps.shortFormProps.name}
+              </div>
+              <div className="h-10 w-10">
+                {homeProps.shortFormProps.adoptionStatus}
+                {homeProps.shortFormProps.shelterName}
+              </div>
+            </div>
+          </a>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export default VHome;