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

홈 기능 작동 완성

package.json

@@ -11,11 +11,13 @@
     "@types/node": "^16.18.54",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
+    "intersection-observer": "^0.12.2",
     "react": "^18.2.0",
     "react-cookie": "^6.1.1",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
     "react-kakao-maps-sdk": "^1.1.21",
+    "react-player": "^2.13.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
@@ -46,6 +48,7 @@
   },
   "devDependencies": {
     "@types/react-daum-postcode": "^1.6.1",
+    "react-player":"2.13.0",
     "eslint": "^8.50.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",

src/pages/detailPet/DetailPetData.tsx

@@ -13,10 +13,17 @@ const DetailPetData = () => {
   const { data, isLoading } = useQuery({
     queryKey: ['pet', petId],
     queryFn: () => {
-      return fetch(`${process.env.REACT_APP_URI}/pet/${petId}`).then((res) =>
-        res.json(),
-      );
+      return fetch(`${process.env.REACT_APP_URI}/pet/${petId}`).then((res) => {
+        if (res.status === 200) {
+          return res.json();
+        }
+        if (res.status === 404) {
+          throw new Error('해당 친구를 찾을 수 없어요...');
+        }
+        throw new Error('데이터 로드 중 문제가 생겼어요...');
+      });
     },
+    suspense: true,
   });
   if (isLoading) return <div>로딩중</div>;
   const labels = ['영리함', '친화력', '운동신경', '적응력', '활발함'];
@@ -27,7 +34,7 @@ const DetailPetData = () => {
     height: 400,
     canvas,
     labels,
-    data: data.response.petPolygonProfileDto,
+    data: data?.response?.petPolygonProfileDto,
     willAnimate: true,
   };
 

src/pages/detailPet/DetailPetPage.tsx

@@ -1,11 +1,14 @@
 import DetailPetData from 'pages/detailPet/DetailPetData';
 import GNB from 'layouts/GNB';
+import ErrorBoundary from 'commons/ErrorBoundary';
 
 const DetailPetPage = () => {
   return (
     <>
       <GNB />
-      <DetailPetData />
+      <ErrorBoundary>
+        <DetailPetData />
+      </ErrorBoundary>
     </>
   );
 };

src/pages/home/HomePage.tsx

@@ -1,12 +1,11 @@
 import GNB from 'layouts/GNB';
-import Home from './Home';
+import TestHome from './TestHome';
 
 const HomePage = () => {
   return (
     <div>
       <GNB />
-      {/* gnb가 감싸게 하기 */}
-      <Home />
+      <TestHome />
     </div>
   );
 };

src/pages/home/HomeVideo.tsx

@@ -0,0 +1,91 @@
+import { useState, useRef, useEffect } from 'react';
+import ReactPlayer from 'react-player';
+
+export interface HomeVideoProps {
+  url: string;
+  muted: boolean;
+  setMuted: (mute: boolean) => void;
+  handleDoubleClick: () => void;
+  hovering: boolean;
+  setHovering: (hover: boolean) => void;
+}
+
+const HomeVideo = (props: HomeVideoProps) => {
+  const { url, muted, setMuted, handleDoubleClick, hovering, setHovering } =
+    props;
+  const [playing, setPlaying] = useState(false);
+  const [opacity, setOpacity] = useState(1);
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setPlaying(true);
+        } else {
+          setPlaying(false);
+        }
+      });
+    }, options);
+
+    if (videoRef.current) {
+      observer.observe(videoRef.current);
+    }
+
+    return () => {
+      if (videoRef.current) {
+        observer.unobserve(videoRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      {hovering && (
+        <div
+          className="absolute font text-white text-3xl bg-black/50 top-0 right-0 w-1 px-10 h-full flex flex-col gap-10 items-center justify-center"
+          style={{
+            opacity,
+            transition: 'opacity 0.2s ease-in-out',
+          }}
+        >
+          <div>왼쪽으로</div>
+          <div>당겨보세요</div>
+        </div>
+      )}
+      <div
+        ref={videoRef}
+        onClick={() => setPlaying((prev) => !prev)}
+        onDoubleClick={handleDoubleClick}
+        className="h-screen w-screen items-center justify-center"
+        onMouseEnter={() => {
+          setHovering(true);
+          setOpacity(1);
+          setTimeout(() => {
+            setHovering(false);
+          }, 1500);
+          setTimeout(() => {
+            setOpacity(0);
+          }, 1300);
+        }}
+      >
+        <ReactPlayer
+          url={url}
+          loop={true}
+          width="100%"
+          height="100%"
+          playing={playing}
+          muted={muted}
+        />
+      </div>
+    </>
+  );
+};
+
+export default HomeVideo;