트러블슈팅

import NoMessage from "@/components/messages/noMessage";
import useMessageList from "@/hooks/useMessageList";
import useModal from "@/hooks/useModal";
import useObserver from "@/hooks/useObserver";
import { Message } from "@/types/message";
import { useNavigate } from "@tanstack/react-router";
import { useRef } from "react";
 
export default function MessageList() {
  const { modal: linkmodal, openModal, closeModal } = useModal();
  const { data: messages, fetchNextPage, hasNextPage } = useMessageList();
  const bottomRef = useRef(null);
 
  const onIntersect = ([entry]: IntersectionObserverEntry[]) =>
    entry.isIntersecting && hasNextPage && fetchNextPage();
 
  const navigate = useNavigate();
 
  useObserver<Message[]>({
    target: bottomRef,
    onIntersect,
  });
 
  if (!messages.length)
    return (
      <NoMessage
        modal={linkmodal}
        openModal={openModal}
        closeModal={closeModal}
      />
    );
 
  return (
    <div className="relative h-full w-full overflow-hidden">
      <div className="absolute inset-0 h-full overflow-y-auto">
        {messages.map((message: Message, index: number) => (
          <div
            key={index}
            className="flex h-14 w-full items-center gap-4 border-b border-black p-2"
            onClick={() =>
              navigate({
                to: "/messages/$messageId",
                params: { messageId: message.id.toString() },
              })
            }
          >
            <span className="w-3">{index + 1}</span>
            <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
              {message.body}
            </span>
          </div>
        ))}
        <div className="h-10" ref={bottomRef}></div>
      </div>
    </div>
  );
}
 

시바 기껏 무한스크롤 만들어 놨더니 안되네

import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { TbMailDown } from "react-icons/tb";
import linkIcon from "@assets/link.png";
import MessageList from "@/components/messages/messageList";
import useModal from "@/hooks/useModal";
import LinkModal from "@/components/modals/linkModal";
import { useRoomStore } from "@/store/useRoomStore";
import { roomSignOut } from "@/api/auth.api";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa6";
 
import useMessageList from "@/hooks/useMessageList";
 
export const Route = createFileRoute("/messages/")({
  component: MessagesComponent,
});
 
function MessagesComponent() {
  const navigate = useNavigate();
  const { modal, openModal, closeModal } = useModal();
  const {
    data: messages,
    fetchNextPage,
    hasNextPage,
    hasPreviousPage,
    fetchPreviousPage,
  } = useMessageList();
 
  const deleteToken = useRoomStore((state) => state.signOut);
 
  async function signOut() {
    await roomSignOut();
    deleteToken();
    navigate({ to: "/" });
  }
 
  return (
    <>
      <div className="relative flex h-full w-full flex-col justify-between">
        <header className="flex h-16 w-full items-center justify-between gap-2 border-y-2 border-black px-2 text-xl">
          <div>
            {hasPreviousPage && (
              <button onClick={() => fetchPreviousPage()}>
                <FaChevronLeft />
              </button>
            )}
          </div>
          <div className="flex gap-2">
            <TbMailDown size={30} color="crimson" />
            받은 메시지
          </div>
          <div>
            {hasNextPage && (
              <button onClick={() => fetchNextPage()}>
                <FaChevronRight />
              </button>
            )}
          </div>
        </header>
        <button
          className="flex h-10 items-center justify-center gap-2 border-b bg-yellow-100 p-2"
          onClick={openModal}
        >
          <img src={linkIcon} alt="link" className="w-5" />
          링크 공유하기
        </button>
        <MessageList messages={messages} />
        <footer className="flex h-10 w-full items-center justify-between border-y-2 border-black text-xl">
          <button className="w-1/3" onClick={() => navigate({ to: ".." })}>
            홈
          </button>
          <button className="w-1/3">확인</button>
          <button className="w-1/3" onClick={signOut}>
            나가기
          </button>
        </footer>
      </div>
      <LinkModal openModal={openModal} closeModal={closeModal} modal={modal} />
    </>
  );
}