내일배움캠프 Week 4

내일 드디어 프로젝트 발표 날

 

CRUD 는 전부 기능 구현에 성공 하였다 

 

다만 

몇몇 페이지는 SPA 로 구현하기 어려워서 따로 페이지를 만들었다 ..

프로젝트가 끝나도  이건 추후에 다시 만들어 볼 것이다 

 

 

또한 

 

수정 페이지 에서 이전에 등록되어있는 DB들을 불러오는 건 성공을 했지만 

이미지파일에서 문제가 발생했다 .. 

 

이것도 추후에 꼭 다시 보자 

 

가장 마음에 든  나의 함수는 

이미지 업로드 작업 이다. 

export const uploading = async (event) => {
 //이미지 업로드를 위한 상수 선언
  const imgFile = document.querySelector("#image").files[0];
  const storageRef = ref(storageService, "post_image/" + uuidv4());
  const uploadTask = uploadBytesResumable(storageRef, imgFile);

  document.getElementById("send").disabled = true;

  uploadTask.on(
    "state_change",
    // 변화시 동작하는 함수
    (snapshot) => {
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log("Upload is " + progress + "% done");
      switch (snapshot.state) {
        case "paused":
          console.log("Upload is paused");
          break;
        case "running":
          console.log("Upload is running");
          break;
      }
    },
    //에러시 동작하는 함수
    (error) => {
      console.error("실패사유는:", error);
    },
    //성공시 동작하는 함수
    () => {
      getDownloadURL(uploadTask.snapshot.ref).then((contentImgUrl) => {
        console.log("업로드된 경로는:", contentImgUrl);
        const category = document.getElementById("category");
        const title = document.getElementById("title");
        const content = document.getElementById("content");
        const { uid, displayName, photoURL } = authService.currentUser;
        console.log(authService.currentUser);
        function addZero(i) {
          if (i < 10) {
            i = "0" + i;
          }
          return i;
        }
        const today = new Date();
        const year = today.getFullYear();
        const month = ("0" + (today.getMonth() + 1)).slice(-2);
        const day = ("0" + today.getDate()).slice(-2);
        const h = addZero(today.getHours());
        const m = addZero(today.getMinutes());
        const s = addZero(today.getSeconds());
        const dateString = year + month + day + h + m + s;

        try {
          addDoc(collection(dbService, "post"), {
            category: category.value,
            title: title.value,
            content: content.value,
            date: parseInt(dateString),
            uid: uid,
            contentImgUrl: contentImgUrl,
            nickname: displayName,
            profileImage: photoURL ? photoURL : "/assets/blankProfile.webp",
            time: parseInt(today),
          });
        //   alert("등록완료");
          Swal.fire({
            title: "등록완료",
            confirmButtonColor: "#94D493",
          });
  
          
          window.location.hash = "#";
        } catch (error) {
        //   alert(error);
          Swal.fire({
            title: "등록에 실패했습니다",
            confirmButtonColor: "#94D493",
          });
          console.log("error in addDoc:", error);
        }
      });
    }
  );
};