Main

📌 주요 기능

✔숙소 목록 조회

• 숙소 등록 페이지를 통해 만들어진 숙소 조회
• 숙소 목록의 끝에 도달했을 때 Intersection Observer을 이용해 새로운 숙소 목록 페이지를 요청하여 무한 스크롤 구현
• 검색을 통한 숙소 필터링

Main.tsx

import useHttpRequest from '../hooks/useHttpRequest';
import { MAIN_PAGE_HOME_LIST_API_PATH } from '../constants/api/homeListApi';

function Main() {
const location = useLocation();
const isSearchPage = location.pathname.includes('/search/');
const [page, setPage] = useState(0);
const [nextData, setNextData] = useState(true)
const { responseData, sendRequest} = useHttpRequest();

//메인 페이지 데이터 요청
useEffect(() => {
  if (nextData && !isSearchPage)
    sendRequest({
      url: `${MAIN_PAGE_HOME_LIST_API_PATH}`,
      method: "POST",
      body: {
        page: page
      }
    })
   }, [page])

//Intersection Observer을 이용해 새로운 페이지 요청
 useEffect(() => {
  const handleIntersection = (entries: IntersectionObserverEntry[]) => {
    const entry = entries[0];
    if (entry.isIntersecting && nextData) {
      setPage((prevPage) => prevPage + 1);
    }
  };

  const observer = new IntersectionObserver(
    handleIntersection,
    {
      root: null,
      rootMargin: '0px',
      threshold: 0.1,
    });

  if (observerRef.current) {
    observer.observe(observerRef.current);
  }

  return () => {
    if (observerRef.current) {
      observer.unobserve(observerRef.current);
    }
  };
}, [nextData]);

//검색을 통한 숙소 필터링
useEffect(() => {
  if (nextData && isSearchPage)
    sendRequest({
      url: `${MAIN_PAGE_HOME_LIST_API_PATH}`,
      method: "POST",
      body: {
        page: page,
        city: city === "null" ? null : city,
        district: district === "null" ? null : district,
        checkin: firstPickedDate === "Invalid date" ? null : firstPickedDate,
        checkout: secondPickedDate === "Invalid date" ? null : secondPickedDate,
        people: totalguestnumber === "0" ? null : totalguestnumber,
        type: houseTypeValue === "null" ? null : houseTypeValue
      }
    })
}, [page])
}

✔❤ 클릭시 관심 숙소 저장

• 관심 숙소로 등록 후에 관심 숙소 페이지에 확인 가능.

ToggleFavorite.tsx

import useAuthorizedRequest from "../../../hooks/useAuthorizedRequest";
import { WISHLIST_API_PATH } from "../../../constants/api/homeListApi";

interface ToggleFavoriteProps {
  houseId: number
}

interface ResultData {
  accessToken: string;
}

const ToggleFavorite = ({ houseId }: ToggleFavoriteProps) => {
  const { responseData, sendRequest } = useAuthorizedRequest<ResultData>({
      onUnauthorized: handleUnAutorization,
  });

//관심 숙소 등록 요청
const handleClick = async (event: React.MouseEvent<HTMLElement>) => {
      event.stopPropagation()
      if (!loginState) {
          setLoginModal(true)
          return
      }
      if (!favorite) {
          await sendRequest({
              url: `${WISHLIST_API_PATH}`,
              method: "POST",
              withCredentials: true,
              body: {
                  houseId: houseId
              }
          });
      } else {
          await sendRequest({
              url: `${WISHLIST_API_PATH}/${houseId}`,
              method: "DELETE",
              withCredentials: true,
          });
      }
      setFavorite((prevState) => !prevState)
  };
}