트위터 클론코딩 2

이어서 트윗작성페이지이다.

트윗작성을 할경우 Textarea의 높이가 자동조절이 되는 것이 확인되어 이를 구현하고자 하였다.
그리고 사진의 경우 파일을 업로드했을때 미리보기를 할 수 있어 이것도 구현을 해보았다.

const handleResizeHeight = useCallback(() => {
    if (Textref === null || Textref.current === null) {
      return;
    }
    Textref.current.style.height = attachment ? "80px" : "150px";
    Textref.current.style.height = Textref.current.scrollHeight + "px";
  }, [attachment, Textref]);

textarea의 기존 높이는 150px이고 사진의 미리보기가 붙어있다면 80px이다. 이 후로 textarea의 scrollheight만큼 크기를 추가적으로 늘리는 방식이다.

이미지 미리보기는

const onFileChange = event => {
    const files = event.target.files;
    const theFile = files[0];

    setFileZero(theFile);
    const reader = new FileReader();
    reader.onloadend = finishedEvent => {
      const {
        currentTarget: { result },
      } = finishedEvent;
      setAttachment(result);
    };
    reader.readAsDataURL(theFile);
  };

input 태그 onFileChange 함수를 걸어주고 해당 파일이 지정이 되면
FileReader로 파일을 DataURL로 변환시켜 미리보기를 보여줄 수 있다.

이렇게 트윗을 추가할 값들이 정해지면
파일형태의 데이터는 application/json으로 보낼수 없고 FormData로 보내야기 때문에

const onSubmiHandle = e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("multipartFile", fileZero);

    const value = {
      content: Textref.current?.value,
    };

    const blob = new Blob([JSON.stringify(value)], {
      type: "application/json",
    });

    formData.append("requestDto", blob);
    // for (let value of formData.values()) {
    //   console.log(value);
    // } 값 확인하기

    mutate(formData);
  };

기존의 json형식은 blob으로 만들어 formData에 추가하고 이미지 파일도 formData에 추가해서 api요청을 보내면 된다.

추가로 모달창을 만들고 모달 백그라운드 클릭 방지와 스코롤 잠금까지 구현해 보았다.

onClick={e => e.stopPropagation()}

를 통해 모달 뒤의 페이지 클릭을 방지하였다.

 useEffect(() => {
    document.body.style.cssText = `
      position: fixed; 
      top: -${window.scrollY}px;
      overflow-y: scroll;
      width: 100%;`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = "";
      window.scrollTo(0, parseInt(scrollY) * -1);
    };
  }, []);

모달창이 떠있을때 스크롤 바를 고정 시키고 모달창을 닫을때 return을 안해주면 닫고나서 원래 보고있던 스크롤 위치가 아니라 리턴으로 원래의 위치로 돌아가게 만들었다.