커뮤니티프로젝트-프로필사진변경

커뮤니티프로젝트

커뮤니티프로젝트-프로필사진변경

MINMINH 2022. 5. 17. 01:20

TODO:

1) CSS

~~- 반응형: 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려감->해결할 것~~

~~- 오른쪽 컬럼 로그인 했을 때~~

- CSS고치기: LINK 파랑색글, 밑줄 없애기, ~~오른쪽 컬럼 아이콘 크기 조정,~~ ~~HOT게시판 조정~~

~~- 양컬럼에 float, overflow:hidden test~~

2) 백엔드

~~- 글쓰기 작성완료 했을 때, FIREBASE에 DATA저장시키기~~

~~- 프로필설정~~

3) 프론트엔드

- 작성된 글 눌렀을 때, 상세페이지로

~~- 글 작성하기 눌렀을 때 EDITOR 화면~~

~~- 로그인 했을 때 오른쪽 컬럼 활성화~~

TODAY

프로필설정 기능을 마무리했다. 저번 시간에 updateprofile기능을 수정하여 정상적으로 작동하도록 하였다.

displayname은 기능을 했지만 문제는 photourl을 변경하고자 컴퓨터에 저장되어 있는 사진을 선택했을 때, 이름이 너무 길어서 변경 불가하다는 오류를 만났다. 이를 해결하기 위해 storage에 먼저 사진을 등록하고, 다운받아서 auth에 저장하는 방식을 사용하였다.

const onChange = async (e) => {
    setLoading("로딩 중");
    const {
      target: { name, value, files },
    } = e;

    if (name === "name") {
      setNewDisplayName(value);
      //파일선택
    } else if (name === "photo") {
    //사진 dataurl로 변환
      const photo = files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        const {
          target: { result },
        } = event;
        setAttachment(result);
      };
      reader.readAsDataURL(photo);
//dataurl이 ""가 아니라면
      if (attachment !== "") {
      //storage ref 설정(폴더명 및 파일 이름)
        const storageRef = ref(storageService, `${userDb.uid}/${uuidv4()}`);
        //storage에 저장
        await uploadString(storageRef, attachment, "data_url");
        //storage에서 다운받고, state에 저장
        await getDownloadURL(storageRef)
          .then((result) => setPhotoURLDownloaded(result))
          .then(() => {
            setLoading("사진이 성공적으로 업로드 되었습니다.");
          });
      }
    }
  };

다만, 사용자가 반복적으로 사진을 변경하면 불필요한 파일데이터가 쌓인다는 것과 중복된 사진을 업로드를 하려고하면 끝없이 로딩이 되는 문제가 생긴다.

따라서 storage에 저장할 때 userdb.uid에 따라 한 파일만 저장될 수 있도록, 덮어쓰기를 할 필요가 있다.

추가적으로, 파일이 업로드되는 시간이 길어서 사용자에게 업데이트되고 있는 상황을 알려줘야 할 필요가 있다고 생각했다.

  const [loading, setLoading] = useState("");
  
   const onChange = async (e) => {
   //파일 선택 후 파일선택팝업창 닫히면 "로딩 중" 메세지를 확인할 수 있다.
    setLoading("로딩 중");
    ...
    else if (name === "photo") {
      const photo = files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        const {
          target: { result },
        } = event;
        setAttachment(result);
      };
      reader.readAsDataURL(photo);

      if (attachment !== "") {
        const storageRef = ref(storageService, `${userDb.uid}/photoURL.jpg`);
        await uploadString(storageRef, attachment, "data_url");
        await getDownloadURL(storageRef)
          .then((result) => setPhotoURLDownloaded(result))
          .then(() => {
          //업데이트 완료 시
            setLoading("사진이 성공적으로 업로드 되었습니다.");
          });
      }
    }
  };
  
 
  return(...
  <div className="loading-msg">
            <span>{loading}</span>
          </div>
          ...
          )