Step3-kakao-tech-campus · LimSumi · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,8 +17,10 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
     "react-spinners": "^0.13.8",
     "recoil": "^0.7.7",
+    "swiper": "^11.0.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "yup": "^1.3.2"

diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,11 @@
       type="text/javascript"
       src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_KEY%"
     ></script>
+    <link rel="stylesheet" type="text/css" href="/plugin/slick/slick.css"/>
+    <link rel="stylesheet" type="text/css" href="/plugin/slick/slick-theme.css"/>
+
+    <script type="text/javascript" src="/js/jquery.js"></script>
+    <script type="text/javascript" src="/plugin/slick/slick.js"></script>
     <title>애니모리</title>
   </head>
   <body>

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -1,11 +1,12 @@
 import GNB from 'layouts/GNB';
 import Home from './Home';
+import HomeSwiper from './HomeSwiper';
 
 const HomePage = () => {
   return (
     <div>
       <GNB />
-      <Home />
+      <HomeSwiper />
     </div>
   );
 };

diff --git a/src/pages/home/HomeSwiper.tsx b/src/pages/home/HomeSwiper.tsx
@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import VHome, { HomeProps } from './VHomeSwiper';
+
+const HomeSwiper = () => {
+  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 HomeSwiper;
diff --git a/src/pages/home/VHomeSwiper.tsx b/src/pages/home/VHomeSwiper.tsx
@@ -0,0 +1,139 @@
+import ProfileCard from 'pages/profileList/ProfileCard';
+
+import {
+  Navigation,
+  Pagination,
+  Scrollbar,
+  A11y,
+  Autoplay,
+  Mousewheel,
+  Keyboard,
+} from 'swiper/modules';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+
+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 VHomeSwiper = (homeProps: HomeProps) => {
+  return (
+    <div className="flex flex-col sm:mx-40 lg:mx-64 my-14">
+      <h2 className="flex w-60 font-bold text-xl sm:text-2xl items-center whitespace-nowrap"></h2>
+      <div className="flex flex-col h-screen w-auto items-center">
+        <Swiper
+          // install Swiper modules
+          className="flex w-full items-center justify-center"
+          modules={[
+            Navigation,
+            Pagination,
+            Scrollbar,
+            A11y,
+            Autoplay,
+            Mousewheel,
+            Keyboard,
+          ]}
+          spaceBetween={10}
+          slidesPerView={1}
+          grabCursor={true}
+          loop={true}
+          mousewheel={{
+            invert: false,
+            thresholdTime: 1,
+            sensitivity: 100,
+          }}
+          longSwipes={false}
+          pagination={{ clickable: true }}
+          scrollbar={{ draggable: true }}
+          onSlideChange={() => console.log('스와이프')}
+          autoHeight={true}
+          direction={'vertical'}
+          keyboard={{ enabled: true, pageUpDown: true, onlyInViewport: true }}
+        >
+          {homeProps.shortFormProps.map((shortForm, index) => {
+            return (
+              <SwiperSlide className="flex slide-item items-center" key={index}>
+                <div className="flex h-5/6 items-center bg-black justify-center justify-items-center">
+                  <video
+                    muted
+                    autoPlay
+                    loop
+                    src={shortForm.profileShortFormUrl}
+                    className=" w-full h-full"
+                  />
+                </div>
+                <div className="flex flex-row w-5/6 h-20 px-6 pe-5 py-2 justify-between">
+                  <div className="text-lg text-neutral-950">
+                    {shortForm.name}
+                  </div>
+                  <div className="flex flex-col h-10 w-10 justify-end">
+                    <text className=" text-blue-700 font-semibold whitespace-nowrap">
+                      {shortForm.adoptionStatus}{' '}
+                    </text>
+                    <text className="text-gray-500 whitespace-nowrap">
+                      {' '}
+                      {shortForm.shelterName}{' '}
+                    </text>
+                  </div>
+                </div>
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+        {/* {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 justify-between">
+              <div className="text-lg text-neutral-950">{shortForm.name}</div>
+              <div className="flex flex-col h-10 w-10 items-center">
+                <text className=" text-blue-700 font-semibold whitespace-nowrap">
+                  {shortForm.adoptionStatus}{' '}
+                </text>
+                <text className="text-gray-500 whitespace-nowrap">
+                  {' '}
+                  {shortForm.shelterName}{' '}
+                </text>
+              </div>
+            </div>
+          </a>
+        </div>
+      ))} */}
+      </div>
+    </div>
+  );
+};
+
+export default VHomeSwiper;