12/27 til

프로필 내용 수정 기능 구현

1. 토글 기능을 통해서 수정,수정불가능 상태 조절

function toggleContentEditable() {
        // p 태그의 contenteditable 속성을 토글
        const isEditable =
          document.querySelector(".text").contentEditable === "true";
        document
          .querySelectorAll(".text")
          .forEach((p) => (p.contentEditable = !isEditable));
        // isEditable 토글
      }

2. 기존의 내용을 가져오는 saveProfileData

async function saveProfileData(editedData) {
        try {
          const profileId = localStorage.getItem("currentProfileId");
          const docRef = doc(db, "profiles", profileId);
          await setDoc(docRef, editedData, { merge: true });
          console.log("프로필 데이터가 성공적으로 저장되었습니다.");
        } catch (error) {
          console.error("프로필 데이터 저장 중 오류 발생:", error);
        }
      }

3-1. 수정된 내용을 저장하고있는 editedData
3-2. saveProfiledata에 변경된 내용의 editedData를 덮어씌운다**

function profileModify() {
       // 수정 모드 토글
       toggleContentEditable();
       // 버튼 텍스트 변경
       const buttonText = document.querySelector(".modify").innerText;
       document.querySelector(".modify").innerText =
         buttonText === "프로필 수정" ? "저장" : "프로필 수정";
       // 저장 버튼일 경우, 수정 내용을 저장하고 수정 모드 종료
       if (buttonText === "저장") {
         const nameElement = document.getElementById("name");
         const mbtiElement = document.getElementById("mbti");
         const blogElement = document.getElementById("blog");
         const commentElement = document.getElementById("comment");

         const editedData = {
           name: nameElement ? nameElement.innerText : "",
           MBTI: mbtiElement ? mbtiElement.innerText : "",
           blog: blogElement ? blogElement.innerText : "",
           한마디: commentElement ? commentElement.innerText : "",
         };

         // TODO: Firebase 또는 다른 저장소에 수정된 내용 저장 로직 추가
         console.log("저장된 내용:", editedData);
         saveProfileData(editedData);
         toggleContentEditable(); // 수정 모드 종료
       }
     }
     document
       .querySelector(".modify")
       .addEventListener("click", profileModify);

토글함수, 파이어베이스의 내용을 가져오는 함수, 새로운 내용을 저장하는 함수
, 파이어베이스에 새로운 내용을 덮어씌우는 함수 이렇게 구현했다.

  `

자기소개 내용 수정 기능 보완중