[6주차] Hooking 미션 제출합니다.

components/movieCard/movieCard.element.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 76px;
+  padding-right: 20px;
+  color: white;
+  background-color: #424242;
+
+  & + & {
+    margin-top: 10px;
+  }
+
+  .skeleton {
+    display: flex;
+
+    &-poster {
+      width: 146px;
+      height: 76px;
+      background-color: #2e313d;
+    }
+
+    &-text {
+      width: 150px;
+      height: 20px;
+      margin: 10px;
+      background-color: #2e313d;
+      flex: 1;
+    }
+
+    &-play {
+      border-radius: 50%;
+      background-color: #2e313d;
+      width: 30px;
+      height: 30px;
+    }
+  }
+`;
+
+export const MovieName = styled.span`
+  padding: 20px;
+  width: 150px;
+`;

components/movieCard/movieCard.js

@@ -0,0 +1,49 @@
+import Link from "next/link";
+import Image from "next/image";
+import { useState, useRef } from "react";
+import { Wrapper, MovieName } from "./movieCard.element";
+import { FaRegPlayCircle } from "react-icons/fa";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { useObserver } from "../../hooks/useObserver";
+import useLocalStorage from "use-local-storage";
+
+const MovieCard = ({ id, title, poster }) => {
+  let imgSrc = "https://image.tmdb.org/t/p/w500";
+
+  const [visible, setVisible] = useState(false);
+  const [scrollY, setScrollY] = useLocalStorage("movie_list_scroll", 0);
+  const target = useRef(null);
+
+  // DOM이 뷰포트 안에 보이는 경우에만 렌더링함
+  const onIntersect = ([entry]) =>
+    entry.isIntersecting ? setVisible(true) : setVisible(false);
+
+  // threshold: 화면 양끝에서 10%만 보여줘도 onIntersect callback을 실행함
+  useObserver({ target, onIntersect, threshold: 0.1 });
+
+  return (
+    <Wrapper ref={target}>
+      {visible && (
+        <>
+          {/* Image보다 LazyLoadImage가 체감 속도가 빨라서 일단 이걸로 썼음 */}
+          <LazyLoadImage
+            alt={title}
+            src={imgSrc + poster}
+            style={{ objectFit: "cover" }}
+            width="146"
+            height="76"
+          />
+          <MovieName className="text-ellipsis">{title}</MovieName>
+          <Link href={`/search/${id}`}>
+            <FaRegPlayCircle
+              size={20}
+              onClick={() => setScrollY(window.scrollY)}
+            />
+          </Link>
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+export default MovieCard;