import { ReactComponent as DeleteIcon } from "../../asset/delete.svg";

<DeleteIcon
  width="12px"
  onClick={(e: React.MouseEvent) => {
    e.stopPropagation();
    deleteTag();
  }}
/>

// settingSessions.js
import { Cookies } from "react-cookie";
const cookies = new Cookies();

// 로그인 할때 받은 리프레시토큰을 인자로 받아 쿠키에 저장한다
export const setRefreshToken = (refreshToken) => {
  const today = new Date();
  const expireDate = today.setDate(today.getDate() + 7);

  return cookies.set("refresh_token", refreshToken, {
    sameSite: "strict",
    path: "/",
    expires: new Date(expireDate),
  });
};

// 쿠키에 저장된 토큰을 가져온다
export const getCookieToken = () => {
  return cookies.get("refresh_token");
};

// 쿠키에 저장된 토큰을 삭제한다
export const removeCookieToken = () => {
  return cookies.remove("refresh_token", { sameSite: "strict", path: "/" });
};

const CategoryButton = () => {
  const params = useParams();
  const btnRef = useRef(null);

  useEffect(() => {
    btnRef.current.scrollIntoView({
          behavior: "smooth",
        });
  }, []);

  return (
    <QuickButtonWrap id="scroll-container">
      {mainCategory.map((category) => {
        return (
            <RadiusButton
              orange={params.id === category.id}
              ref={btnRef}
            >
              {category.category}
            </RadiusButton>
        );
      })}
    </QuickButtonWrap>
  );
};

export default CategoryButton;

ref={(el) => (btnRef.current[idx] = el)}

const CategoryButton = () => {
  const params = useParams();
  const btnRef = useRef([]); // 배열로 설정

  useEffect(() => {
    btnRef.current.scrollIntoView({
          behavior: "smooth",
        });
  }, []);

  return (
    <QuickButtonWrap id="scroll-container">
      {mainCategory.map((category,idx) => {
        return (
            <RadiusButton
              orange={params.id === category.id}
              ref={(el) => (btnRef.current[idx] = el)} // ref를 배열로 저장
            >
              {category.category}
            </RadiusButton>
        );
      })}
    </QuickButtonWrap>
  );
};

export default CategoryButton;

const CategoryButton = () => {
  const params = useParams();
  const btnRef = useRef([]);

  useEffect(() => {
    btnRef.current.forEach((item, idx) => { // 배열을 순회하고
      if (item.innerText.toLowerCase() === params.id) { // innertext와 비교를 했다..
        btnRef.current[idx].scrollIntoView({ // true 일시 해당 index의 ref로 scrollIntoView가 된다
          behavior: "smooth",
        });
      }
    });
  }, []);

  return (
    <QuickButtonWrap id="scroll-container">
      {mainCategory.map((category, idx) => {
        return (
          <Link
            to={`/quick${category.path}`}
            key={category.id}
            id={category.id}
          >
            <RadiusButton
              orange={params.id === category.id}
              ref={(el) => (btnRef.current[idx] = el)}
            >
              {category.category}
            </RadiusButton>
          </Link>
        );
      })}
    </QuickButtonWrap>
  );
};

export default CategoryButton;

import { useState, useEffect, useRef, useCallback } from "react";
import { useDispatch } from "react-redux";
import axios from "axios";

const GetDataHooks = (keyword, page, setPage) => {
  const [newsData, setNewsData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(false);
  const [error, setError] = useState(false);

  const API_KEY = process.env.REACT_APP_API_KEY;

  const dispatch = useDispatch();

  useEffect(() => {
    setNewsData([]);
  }, [keyword]);

  useEffect(() => {
    if (keyword && !loading) {
      const searchTimeout = setTimeout(() => {
        setLoading(true);
        setError(false);
        let cancel;
        axios({
          method: "GET",
          url: `https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=${API_KEY}`,
          params: { q: keyword, sort: "newest", page },
          cancelToken: new axios.CancelToken((c) => (cancel = c)),
        })
          .then((res) => {
            setNewsData((prev) => [...prev, ...res.data.response.docs]);
            setHasMore(res.data.response.docs.length > 0);
            setLoading(false);
          })
          .catch((e) => {
            if (axios.isCancel(e)) return;
            setError(true);
          });
        dispatch({ type: "SEARCH_HISTORY", payload: keyword });
      }, 500);
      return () => {
        clearTimeout(searchTimeout);
      };
    }
  }, [keyword, page]);

  const observer = useRef();
  const lastCardNewsRef = useCallback(
    (node) => {
      console.log("visible");
      if (loading) return;
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setPage((page) => page + 1);
          ✅ // 문제의 호출
          GetDataHooks(keyword, page, setPage,)
        }
      });
      if (node) observer.current.observe(node);
    },
    [loading, hasMore]
  );

  return { newsData, loading, lastCardNewsRef };
};

export default GetDataHooks;

// NewsList Component
const NewsList = ({ news, lastCardNewsRef }) => {
  return (
    <Container>
      {news.map((newsData, idx) => {
        return <News ref={lastCardNewsRef} />;
      })}
    </Container>
  );
};

// News Component

const News = (props) => {
  return (
    <Card ref={props.ref}>
      <h2>{props.headline}</h2>
    </Card>
  );
};

export default News;

// NewsList Component
const NewsList = ({ news, lastCardNewsRef }) => {
  return (
    <Container>
      {news.map((newsData, idx) => {
        return (
          <News myRef={lastCardNewsRef}
            ✅ // myRef 이름으로 컴포넌트에 전달
          />
        );
      })}
    </Container>
  );
};

// News Component

const News = (props) => {
  return (
    <Card ref={props.myRef}>
      ✅ // props로 myRef
      <h2>{props.headline}</h2>
    </Card>
  );
};

export default News;

// NewsList Component
const NewsList = ({ news, lastCardNewsRef }) => {
  return (
    <Container>
      {news.map((newsData, idx) => {
        return (
          <News ref={lastCardNewsRef}
            ✅ // ref 그대로 사용
          />
        );
      })}
    </Container>
  );
};

// News Component
import React, { forwardRef } from 'react';

const News = forwardRef((props, ref) => {
             ✅ // forwardRef 사용
  return (
    <Card ref={ref}>
           ✅ // ref 사용
      <h2>{props.headline}</h2>
    </Card>
  );
});

export default News;