12/28 til

1. 코드 리팩토링
2. 프로젝트 회고 작성

가독성 향상: 코드를 보기 쉽게 만들기 위해 함수와 주석을 추가했어. 각 함수는 하나의 작업을 수행하도록 분리하고, 주석을 통해 코드의 목적을 명확히 표현했어.

중복 코드 제거: 중복 코드를 함수로 묶어서 재사용성을 높였어. 이렇게 하면 유지보수가 편하고 코드 양도 줄어들어 가독성이 좋아지지 않겠냐?

명시적인 함수명: 함수명을 더 명시적으로 변경해서 코드를 읽는 사람이 함수의 역할을 더 쉽게 이해할 수 있도록 했어.

프로필 내용 수정기능
리팩토링 전

function toggleContentEditable() {
        // p 태그의 contenteditable 속성을 토글
        const isEditable =
          document.querySelector(".text").contentEditable === "true";
        document
          .querySelectorAll(".text")
          .forEach((p) => (p.contentEditable = !isEditable));
        // isEditable 토글
      }
      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);
        }
      }
      function profileModify() {
        // 수정 모드 토글
        toggleContentEditable();
        // 버튼 텍스트 변경
        const buttonText = document.querySelector(".modify").innerHTML;
        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);

리팩토링 후

function toggleContentEditable() {
        const isEditable = isContentEditable();
        setAllElementsEditable(!isEditable);
      }

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

      function profileModify() {
        toggleContentEditable();
        const buttonText = getModifyButtonText();
        setModifyButtonText(
          buttonText === "프로필 수정" ? "저장" : "프로필 수정"
        );

        if (buttonText === "저장") {
          const editedData = getEditedProfileData();
          console.log("저장된 내용:", editedData);
          saveProfileData(editedData);
          toggleContentEditable();
        }
      }

      function isContentEditable() {
        return document.querySelector(".text").contentEditable === "true";
      }

      function setAllElementsEditable(editable) {
        document
          .querySelectorAll(".text")
          .forEach((p) => (p.contentEditable = editable));
      }

      function getCurrentProfileId() {
        return localStorage.getItem("currentProfileId");
      }

      function getProfileDocRef(profileId) {
        return doc(db, "profiles", profileId);
      }

      function getModifyButtonText() {
        return document.querySelector(".modify").innerText;
      }

      function setModifyButtonText(text) {
        document.querySelector(".modify").innerText = text;
      }

      function getEditedProfileData() {
        return {
          name: getElementInnerText("name"),
          MBTI: getElementInnerText("mbti"),
          blog: getElementInnerText("blog"),
          한마디: getElementInnerText("comment"),
        };
      }

      function getElementInnerText(id) {
        const element = document.getElementById(id);
        return element ? element.innerText : "";
      }
      document
        .querySelector(".modify")
        .addEventListener("click", profileModify);

프로필 자기소개 내용 리팩토링 전

document
.querySelector(".modal-close")
.addEventListener("click", closeEditor);

  // 모달 저장 버튼 이벤트 핸들러 추가
  document
    .querySelector("#editorModal button")
    .addEventListener("click", saveProfile);

  // 수정 버튼 클릭 시 모달 열기
  document
    .getElementById("editButton")
    .addEventListener("click", openModal);

  // 프로필 저장 함수

  async function saveProfile() {
    // 에디터에서 수정된 내용을 가져와 프로필에 반영
    // 리팩토링 필요
    var updatedContent = document.getElementById("editorContent").innerText;
    document.querySelector(".profile-info").innerHTML = updatedContent;
    console.log(updatedContent);
    // 에디터 모달 닫기
    closeEditor();

    // 프로필을 Firebase에 업데이트
    const profileId = localStorage.getItem("currentProfileId");
    const profileRef = doc(db, "profile-infos", profileId);

    // 가져온 내용을 업데이트할 데이터로 사용
    const updateData = {
      자기소개: updatedContent,
    };

    updateProfile(profileRef, updateData);
  }

  async function updateProfile(profileRef, updateData) {
    try {
      await updateDoc(profileRef, updateData);
      console.log("프로필이 업데이트되었습니다.");
    } catch (error) {
      console.error("프로필 업데이트 오류:", error);
    }
  }

  function openModal() {
    // 프로필 자기 소개 정보만 가져와서 에디터에 로드
    const currentIntroduction =
      document.getElementById("profile-info-data").innerHTML;
    const introWithoutTitle = currentIntroduction.replace(/^[^\n]*\n/, "");
    document.getElementById("editorContent").innerHTML =
      currentIntroduction;
    // 에디터 모달 표시
    document.getElementById("editorModal").style.display = "block";
    document.getElementById("modalBackground").style.display = "block";
  }

  function closeEditor() {
    document.getElementById("editorModal").style.display = "none";
    document.getElementById("modalBackground").style.display = "none";
  }

```javascript
 const modalCloseButton = document.querySelector(".modal-close");
const saveButton = document.querySelector("#editorModal button");
const editButton = document.getElementById("editButton");

modalCloseButton.addEventListener("click", closeEditor);
saveButton.addEventListener("click", saveProfile);
editButton.addEventListener("click", openModal);

async function saveProfile() {
    const updatedContent = document.getElementById("editorContent").innerText;
    updateProfileInfo(updatedContent);
    closeEditor();
}

async function updateProfileInfo(updatedContent) {
    const profileId = localStorage.getItem("currentProfileId");
    const profileRef = doc(db, "profile-infos", profileId);
    const updateData = {
        자기소개: updatedContent,
    };
    try {
        await updateDoc(profileRef, updateData);
        console.log("프로필이 업데이트되었습니다.");
    } catch (error) {
        console.error("프로필 업데이트 오류:", error);
    }
}

function openModal() {
    const currentIntroduction = document.getElementById("profile-info-data").innerHTML;
    const introWithoutTitle = currentIntroduction.replace(/^[^\n]*\n/, "");
    document.getElementById("editorContent").innerHTML = currentIntroduction;
    document.getElementById("editorModal").style.display = "block";
    document.getElementById("modalBackground").style.display = "block";
}

function closeEditor() {
    document.getElementById("editorModal").style.display = "none";
    document.getElementById("modalBackground").style.display = "none";
}

```javascript