240729 TIL_최종 프로젝트_ 실시간 채팅, 레이아웃

1. 스크롤 관련

서치하다가 찾은 함수

  useEffect(() => {
    console.log('스크롤 왜 안 돼ㅜㅜ', data);
    scrollToBottom();
  }, [data]);

  const scrollToBottom = () => {
    scrollDown.current?.scrollIntoView({ behavior: 'smooth' });
  };

useRef를 쓴 다음에 해봤다. 근데 콘솔에서도 보이는 나으 슬픔. 안 된다. 이유를 열심히 찾아본다.... 이유를 찾아보니, 이걸 마지막 메세지에 연결해야 한단다.

맵으로 돌리고 있는데, 이러면 다시 한 번 제일 마지막 메세지를 찾아 떠나야 하는 여정....

그게 싫다...^^....

그래서 찾아본 방법1) 전체 컨테이너에 ref 연결 됐당.

const scrollToBottom = () => {
  scrollDown.current?.scrollTo({
    top: scrollDown.current.scrollHeight,
    behavior: 'smooth',
  });
};

이게 훨씬 간단하다. 이제 useEffect에 적용하니 된다.

하고 나니까 제일 먼저 최하단으로 내리는 것도 필요할 거 같아서 useEffect를 꼼지락꼼지락 만지는 중이다. ... 나중에 하기

---

채팅 2개씩 보내지는 것 오류

규칙성이라도 발견하려고 열심히 노력 중인데,
1. 뭔가 빠르게 타탁! 하고 보내면 한 개만 감
2. 천천히.... 엔터 누르면 2개 감 (일반적으로 2가 실행)

아니었다!!!!!!!!!!!

한글일 때만 문제가 발생하고 있엇음. 정확한 이유는 모르겠지만, keyDown = enter 일 때 뭔가뭔가 문제가 생기는 모양이었다. form 태그였다가 => div로 바꾸고 난리를 쳤는데. 다시 form으로 바꾼 후 event.preventDefault를 걍 안 주는 방향성으로 바꾸기.

---

실시간 채팅 스크롤 이벤트를 주려고 하는데 마음만큼 잘 안 된다잉.

// 스크롤 하단으로 유지
  // TODO 버튼이 눌렸을 때로 할까? 맨 처음 데이터 로드 시 최하단으로 안 내려감! 버튼에다가 이벤트 주는 로직 다시 생각해보기...
  useEffect(() => {
    console.log(isOpen);
    if (isOpen && scrollDown.current) {
      console.log(12311);
      scrollDown.current.scrollTo({
        top: scrollDown.current.scrollHeight
        // behavior: 'smooth'
      });
    }
  }, [isOpen, data]);

  const handleDialogStateChange = (open: boolean) => {
    console.log('Dialog state changed:', open);
    setIsOpen(open);
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleDialogStateChange}>
      <DialogTrigger asChild>
        <Button size="icon" onClick={() => setIsOpen(true)}>
          <ChatIcon />
        </Button>
      </DialogTrigger>

안 됨!!!!!!! 꺄오

// 스크롤 하단으로 유지
// TODO 버튼이 눌렸을 때로 할까? 맨 처음 데이터 로드 시 최하단으로 안 내려감! 버튼에다가 이벤트 주는 로직 다시 생각해보기... ㅜㅜㅜㅜㅜ 왜 안 돼애애애ㅐ애~~~
// ref를 동적으로 넣는 방법 .....? -? ........... div가 생성이 안 된 상태에서 ref를 주는 문제....

---

setTimeOut으로 비동기 처리해서 어찌저찌 완료~...!!!! 휴우?

---

빌드 첨 해봣다 빌드 오류 잡으면서 오늘 하루는 끝~~!

1. 오늘 알아가는 상식
   서버 => fetch 시 절대 경로 필요
   클라이언트 => api 이하 경로로 가능
2. 클라이언트에서 async () 쓸 때는 스코프 안에만. useEffect 안에서 쓰면 더 조음. 함수 자체에 쓰는 거 x
3. 타입 에러. 배포가 급하다면 일단 any 쓰고 이후에 고칠 것. ... ^-^... b...

내일은 검색 하자. 페이지네이션에 대해서도 공부하고 도와드리기.