Step3-kakao-tech-campus · LimSumi · Nov 5, 2023 · Nov 5, 2023 · Nov 5, 2023 · Nov 5, 2023
diff --git a/src/commons/Input.tsx b/src/commons/Input.tsx
@@ -7,6 +7,7 @@ const Input = ({
   placeholder,
   onChange,
   autocomplete,
+  defaultValue,
 }: InputGroupProps) => {
   return (
     <input
@@ -17,6 +18,7 @@ const Input = ({
       placeholder={placeholder}
       onChange={onChange}
       autoComplete={autocomplete}
+      defaultValue={defaultValue}
     />
   );
 };

diff --git a/src/commons/InputGroup.tsx b/src/commons/InputGroup.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Container from 'commons/Container';
 import Input from 'commons/Input';
 
@@ -7,7 +8,8 @@ export interface InputGroupProps {
   type: string;
   placeholder: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  autocomplete: string;
+  autocomplete?: string;
+  defaultValue?: string;
 }
 
 const InputGroup = ({
@@ -17,6 +19,7 @@ const InputGroup = ({
   placeholder,
   onChange,
   autocomplete,
+  defaultValue,
 }: InputGroupProps) => {
   return (
     <Container className={'flex flex-col gap-1'}>
@@ -30,6 +33,7 @@ const InputGroup = ({
         placeholder={placeholder}
         onChange={onChange}
         autocomplete={autocomplete}
+        defaultValue={defaultValue}
       />
     </Container>
   );

diff --git a/src/commons/modals/CategoryModal.tsx b/src/commons/modals/CategoryModal.tsx
@@ -5,6 +5,7 @@ import CategoryModalList, {
   CategoryModalType,
   VCategoryModalListProps,
 } from 'commons/modals/VCategoryModalList';
+import { redirect, useNavigate } from 'react-router-dom';
 
 export interface CategoryModalProps {
   handleModalCloseClick: () => void;
@@ -19,16 +20,17 @@ const CategoryModal = ({
   speciesOrRegion,
   setSpeciesOrRegion,
 }: CategoryModalProps) => {
-  const [, setSpecies] = useRecoilState(speciesState);
-  const [, setRegion] = useRecoilState(regionState);
+  const [species, setSpecies] = useRecoilState(speciesState);
+  const [region, setRegion] = useRecoilState(regionState);
+  const navigate = useNavigate();
 
   const speciesList: SpeciesType[] = ['강아지', '고양이', '기타', '전체'];
   const regionList: RegionType[] = [
     '전국',
     '서울',
     '경기',
     '인천',
-    '강원',
+    '제주특별자치도',
     '충북',
     '충남',
     '대전',
@@ -40,17 +42,19 @@ const CategoryModal = ({
     '전북',
     '전남',
     '광주',
-    '제주',
-    '세종',
+    '강원특별자치도',
+    '세종특별자치시',
   ];
 
-  const handleSpeciesClick = (species: SpeciesType) => {
-    setSpecies(species);
+  const handleSpeciesClick = (speciess: SpeciesType) => {
+    setSpecies(speciess);
     setSpeciesOrRegion('region');
   };
-  const handleRegionClick = (region: RegionType) => {
-    setRegion(region);
+  const handleRegionClick = (regions: RegionType) => {
+    setRegion(regions);
     handleModalCloseClick();
+    navigate(`/`);
+    // ?type=${species}?area=${region}?page=${1}
   };
 
   const categoryModalListProps: VCategoryModalListProps = {

diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -1,22 +1,44 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
+import speciesState, { SpeciesType } from 'recoil/speciesState';
+import regionState, { RegionType } from 'recoil/regionState';
+import { useRecoilState } from 'recoil';
 import VHome, { HomeProps } from './VHome';
 
 const Home = () => {
-  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
+  const [currentPage, setCurrentPage] = useState(1);
   const [shortForm, setShortForm] = useState<HomeProps | null>(null);
+  const [region, setRegion] = useRecoilState<RegionType>(regionState);
+  const [species, setSpecies] = useRecoilState<SpeciesType>(speciesState);
 
-  const getShortForm = async () => {
-    const response = await fetch(
-      `${process.env.REACT_APP_URI}/short-forms/home?page=${currentPage}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+  const fetchShortForm = async (page: number) => {
+    let type = '';
+    if (species === '강아지') {
+      type = 'DOG';
+    } else if (species === '고양이') {
+      type = 'CAT';
+    } else if (species === '기타') {
+      type = 'ETC';
+    } else {
+      type = '';
+    }
+    let area = '';
+    if (region === '전국') {
+      area = '';
+    } else {
+      area = region;
+    }
+    const apiUrl =
+      type !== '' || area !== ''
+        ? `${process.env.REACT_APP_URI}/short-forms?type=${type}&area=${area}&page=${page}&size=10`
+        : `${process.env.REACT_APP_URI}/short-forms/home?page=${page}`;
+    const response = await fetch(apiUrl, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
       },
-    );
-
+    });
+    console.log(apiUrl);
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
@@ -26,10 +48,9 @@ const Home = () => {
   };
 
   const { data, isLoading, isError } = useQuery({
-    queryKey: ['home', currentPage],
-    queryFn: getShortForm,
+    queryKey: ['home', currentPage, species, region],
+    queryFn: () => fetchShortForm(currentPage),
   });
-  console.log(data);
 
   useEffect(() => {
     if (!isLoading && !isError && data) {
@@ -42,6 +63,8 @@ const Home = () => {
         if (pageData.hasNext) {
           setCurrentPage(currentPage + 1);
           console.log('마지막');
+        } else {
+          setCurrentPage(1);
         }
       };
 
@@ -53,18 +76,54 @@ const Home = () => {
 
       setShortForm(homeProps);
     }
-  }, [data, isLoading, isError]);
+  }, [data, isLoading, isError, species, region]);
+
+  const handleRemoveFilter = (string: string) => {
+    if (string === species) {
+      setSpecies('전체');
+      setCurrentPage(1);
+    } else setRegion('전국');
+    setCurrentPage(1);
+    console.log('수정');
+  };
 
   if (isLoading) {
-    return <div className=" justify-center">로딩중</div>;
+    return <div className="justify-center">로딩중</div>;
   }
 
   if (isError) {
     return <div>Error: {isError}</div>;
   }
 
   if (shortForm) {
-    return <VHome {...shortForm} />;
+    return species !== '전체' || region !== '전국' ? (
+      <div>
+        {/* 카테고리 선택 UI 요소를 추가 */}
+        <div className="flex justify-center gap-7 items-center">
+          <text className=" text-orange-400 text-lg font-semibold">
+            카테고리
+          </text>
+          <button
+            className="flex bg-orange-400 rounded-full px-5 py-2 text-white"
+            onClick={() => handleRemoveFilter(species)}
+          >
+            {species} x
+          </button>
+          <button
+            className="flex bg-orange-400 rounded-full px-5 py-2 text-white"
+            onClick={() => handleRemoveFilter(region)}
+          >
+            {region} x
+          </button>
+          <text className="text-lg font-semibold"> 친구들 </text>
+        </div>
+        <VHome {...shortForm} />
+      </div>
+    ) : (
+      <div>
+        <VHome {...shortForm} />
+      </div>
+    );
   }
 
   return null;

diff --git a/src/pages/home/VHome.tsx b/src/pages/home/VHome.tsx
@@ -1,16 +1,11 @@
-import {
-  Pagination,
-  A11y,
-  Autoplay,
-  Mousewheel,
-  Keyboard,
-} from 'swiper/modules';
+import { A11y, Autoplay, Mousewheel, Keyboard } from 'swiper/modules';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 // Import Swiper styles
 import 'swiper/css';
 import 'swiper/css/pagination';
+import { useState } from 'react';
 
 export interface PageProps {
   hasNext: boolean;
@@ -19,8 +14,8 @@ export interface PageProps {
 export interface ShortFormProps {
   map(
     arg0: (
-      shortForm: any,
-      index: any,
+      shortForm: ShortFormProps,
+      index: number,
     ) => import('react/jsx-runtime').JSX.Element,
   ): import('react').ReactNode;
   petId: number;
@@ -39,13 +34,19 @@ export interface HomeProps {
 }
 
 const VHome = (homeProps: HomeProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const isCurrentSlideMuted = (index: number) => {
+    return index !== currentIndex - 1;
+    // 일단 이전 페이지 소리가 나오게 해놨습니다
+  };
+
   return (
-    <div className="flex flex-col sm:mx-40 lg:mx-64 my-14">
+    <div className="flex flex-col sm:mx-40 lg:mx-64 my-5">
       <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]}
+          modules={[A11y, Autoplay, Mousewheel, Keyboard]}
           spaceBetween={10}
           slidesPerView={1}
           grabCursor={true}
@@ -54,9 +55,10 @@ const VHome = (homeProps: HomeProps) => {
             thresholdTime: 1,
             sensitivity: 100,
           }}
-          longSwipes={false}
-          pagination={{ clickable: true }}
-          onSlideChange={() => console.log('스와이프')}
+          onSlideChange={(swiper: any) => {
+            setCurrentIndex(swiper.realIndex);
+            console.log(`현재 슬라이드: ${currentIndex}`);
+          }}
           autoHeight={true}
           direction={'vertical'}
           keyboard={{ enabled: true, pageUpDown: true, onlyInViewport: true }}
@@ -68,14 +70,23 @@ const VHome = (homeProps: HomeProps) => {
                 className="flex  slide-item items-center"
                 key={index}
               >
-                <a href={`/pet/${shortForm.petId}`}>
+                <a>
                   <div className="flex h-5/6 items-center justify-center justify-items-center">
                     <video
+                      muted={isCurrentSlideMuted(index)}
+                      id="short-form"
                       autoPlay
                       loop
-                      src={shortForm.profileShortFormUrl}
                       className=" w-full h-full"
-                    />
+                      // onClick={() => {
+                      //   setSound(false);
+                      // }}
+                    >
+                      <source
+                        src={shortForm.profileShortFormUrl}
+                        type="video/mp4"
+                      />
+                    </video>
                   </div>
                   <div className="flex flex-row h-20 px-6 pe-5 py-2 justify-between">
                     <div className="text-lg text-neutral-950">
@@ -95,30 +106,6 @@ const VHome = (homeProps: HomeProps) => {
             );
           })}
         </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>
   );

diff --git a/src/pages/home/VideoComponent.tsx b/src/pages/home/VideoComponent.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useRef } from 'react';
+
+interface VideoComponentProps {
+  profileShortFormUrl: string;
+}
+
+const VideoComponent: React.FC<VideoComponentProps> = ({
+  profileShortFormUrl,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [playRequested, setPlayRequested] = useState(false);
+
+  const handlePlayClick = () => {
+    if (videoRef.current) {
+      videoRef.current.play();
+    }
+  };
+
+  return (
+    <div>
+      <video
+        ref={videoRef}
+        controls
+        loop
+        muted
+        className="w-full h-full"
+        onPlay={() => setPlayRequested(true)}
+      >
+        <source src={profileShortFormUrl} type="video/mp4" />
+      </video>
+      {!playRequested && <button onClick={handlePlayClick}>재생</button>}
+    </div>
+  );
+};
+
+export default VideoComponent;