Merge pull request #148 from Step3-kakao-tech-campus/feat/#138

feat: 홈화면 파일 명칭 변경(homeswiper -> home)
Step3-kakao-tech-campus · Oct 30, 2023 · 6b0d4e6 · 6b0d4e6
2 parents 73b112e + 4092b46
commit 6b0d4e6
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 224 deletions.
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -38,10 +38,17 @@ const Home = () => {
       };
 
       const shortFormData = data.shortForms;
+      const handleReachEnd = () => {
+        if (pageData.hasNext) {
+          setCurrentPage(currentPage + 1);
+          console.log('마지막');
+        }
+      };
 
       const homeProps: HomeProps = {
         pageProps: pageData,
         shortFormProps: shortFormData,
+        handleReachEnd,
       };
 
       setShortForm(homeProps);

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -1,12 +1,12 @@
 import GNB from 'layouts/GNB';
 import Home from './Home';
-import HomeSwiper from './HomeSwiper';
 
 const HomePage = () => {
   return (
     <div>
       <GNB />
-      <HomeSwiper />
+      {/* gnb가 감싸게 하기 */}
+      <Home />
     </div>
   );
 };

diff --git a/src/pages/home/HomeSwiper.tsx b/src/pages/home/HomeSwiper.tsx
diff --git a/src/pages/home/VHome.tsx b/src/pages/home/VHome.tsx
@@ -1,4 +1,16 @@
-import ProfileCard from 'pages/profileList/ProfileCard';
+import {
+  Pagination,
+  A11y,
+  Autoplay,
+  Mousewheel,
+  Keyboard,
+} from 'swiper/modules';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/pagination';
 
 export interface PageProps {
   hasNext: boolean;
@@ -23,35 +35,93 @@ export interface ShortFormProps {
 export interface HomeProps {
   pageProps: PageProps;
   shortFormProps: ShortFormProps;
+  handleReachEnd: any;
 }
 
-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 whitespace-nowrap"></h2>
-    <div className="flex flex-col items-center max-w-[500px] max-h-[500px] gap-2">
-      {homeProps.shortFormProps.map((shortForm, index) => (
-        <div key={index} className="flex flex-col">
+const VHome = (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-[75vh] w-fit items-center">
+        <Swiper
+          className="flex w-full items-center justify-center"
+          modules={[Pagination, A11y, Autoplay, Mousewheel, Keyboard]}
+          spaceBetween={10}
+          slidesPerView={1}
+          grabCursor={true}
+          loop={true}
+          mousewheel={{
+            thresholdTime: 1,
+            sensitivity: 100,
+          }}
+          longSwipes={false}
+          pagination={{ clickable: true }}
+          onSlideChange={() => console.log('스와이프')}
+          autoHeight={true}
+          direction={'vertical'}
+          keyboard={{ enabled: true, pageUpDown: true, onlyInViewport: true }}
+          onReachEnd={homeProps.handleReachEnd}
+        >
+          {homeProps.shortFormProps.map((shortForm, index) => {
+            return (
+              <SwiperSlide
+                className="flex  slide-item items-center"
+                key={index}
+              >
+                <a href={`/pet/${shortForm.petId}`}>
+                  <div className="flex h-5/6 items-center justify-center justify-items-center">
+                    <video
+                      autoPlay
+                      loop
+                      src={shortForm.profileShortFormUrl}
+                      className=" w-full h-full"
+                    />
+                  </div>
+                  <div className="flex flex-row 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-fit text-end">
+                      <div className=" text-blue-700 font-semibold whitespace-pre-wrap">
+                        {shortForm.adoptionStatus}
+                      </div>
+                      <div className="text-gray-500 whitespace-nowrap">
+                        {shortForm.shelterName}
+                      </div>
+                    </div>
+                  </div>
+                </a>
+              </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">
-              <div className="text-lg text-neutral-950">
-                {homeProps.shortFormProps.name}
-              </div>
-              <div className="h-10 w-10">
-                {homeProps.shortFormProps.adoptionStatus}
-                {homeProps.shortFormProps.shelterName}
+            <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>
-  </div>
-);
+  );
+};
 
 export default VHome;
diff --git a/src/pages/home/VHomeSwiper.tsx b/src/pages/home/VHomeSwiper.tsx