diff --git a/client/src/composition/feed/Feed.tsx b/client/src/composition/feed/Feed.tsx index 5ea25b14..c939ac65 100644 --- a/client/src/composition/feed/Feed.tsx +++ b/client/src/composition/feed/Feed.tsx @@ -4,7 +4,6 @@ import FeedHeader from "./FeedHeader"; import FeedBody from "./FeedBody"; import FeedFooter from "./FeedFooter"; import Comment from "./Comment"; - import buttons from "../../image/buttons.png"; const FeedDiv = styled.div` diff --git a/client/src/composition/feed/index.tsx b/client/src/composition/feed/index.tsx index 32fd7d69..0f4ee40b 100644 --- a/client/src/composition/feed/index.tsx +++ b/client/src/composition/feed/index.tsx @@ -1,9 +1,8 @@ -import React, { useState, useMemo, useEffect } from "react"; +import React, { useState, useMemo } from "react"; import Feed from "./Feed"; import { useQuery } from "@apollo/react-hooks"; import gql from "graphql-tag"; -import { async } from "q"; - +import useScrollEnd from "../../hooks/useScrollEnd"; interface IFeed { content: string; } @@ -33,34 +32,10 @@ interface FeedVars { shareCnt: number; } */ -const useScroll = () => { - // state를 생성합니다. - const [state, setState] = useState(false); - - const onScroll = () => { - console.log("a", window.scrollY); - if ( - document.documentElement.scrollTop + - document.documentElement.clientHeight === - document.documentElement.scrollHeight - ) { - console.log(true); - setState(true); - } else { - setState(false); - } - }; - useEffect(() => { - window.addEventListener("scroll", onScroll); - return () => window.removeEventListener("scroll", onScroll); // <---- 집중 !!! - }, []); - return state; -}; - const FeedContainer = () => { const [feeds, setFeeds] = useState([]); const [cursor, setCursor] = useState(); - const checkEnd = useScroll(); + const checkEnd = useScrollEnd(); // hooks 에서 useQuery 1 부터 시작 const { loading, data, fetchMore } = useQuery(GET_FEEDS, { variables: { first: 2, after: 1 } @@ -91,7 +66,7 @@ const FeedContainer = () => { }; const checkEndFeed = () => { - // fetchMoreFeed(); + fetchMoreFeed(); return null; }; diff --git a/client/src/hooks/useScrollEnd.tsx b/client/src/hooks/useScrollEnd.tsx new file mode 100644 index 00000000..46651560 --- /dev/null +++ b/client/src/hooks/useScrollEnd.tsx @@ -0,0 +1,26 @@ +import React, { useState, useEffect } from "react"; +const useScrollEnd = () => { + // state를 생성합니다. + const [state, setState] = useState(false); + + const onScroll = () => { + if ( + document.documentElement.scrollTop + + document.documentElement.clientHeight === + document.documentElement.scrollHeight + ) { + console.log("scroll Y : ", window.scrollY); + setState(true); + } else { + console.log("scroll Y! : ", window.scrollY); + setState(false); + } + }; + useEffect(() => { + window.addEventListener("scroll", onScroll); + return () => window.removeEventListener("scroll", onScroll); // <---- 집중 !!! + }, []); + return state; +}; + +export default useScrollEnd;