[본 캠프 17일차] 팀 프로젝트 마지막날

마감날까지 못 끝낼 줄 알았던 프로젝트가 드디어 끝났습니다.

 

오늘은 제가 진행했던 로그인 회원가입 로그아웃 마이페이지 부분 코드를 뜯어보겠습니다.

 

login.js

// 로그인 부분
document.addEventListener("DOMContentLoaded", () => {
  const logInButton = document.querySelector("#loginButton"); 
  if (logInButton) { 
    // if문으로 로그인 버튼이 존재하는지 확인. 없으면 null, 안정성 향상
    logInButton.addEventListener("click", (event) => {
      event.preventDefault(); // 페이지가 새로고침 되는 것을 방지
      const loginID = document.getElementById("loginID").value; 
      const loginPassword = document.getElementById("loginPassword").value;
      // 이메일과 비밀번호 입력 시 auth 로 로그인 인증 상태 확인
      signInWithEmailAndPassword(auth, loginID, loginPassword)
        .then((userCredential) => {
      // Firebase 인증 메서드가 성공적으로 완료됐을 때 반환되는 객체 userCredential
          const user = userCredential.user;
          localStorage.setItem("userID", user.uid);
        })
        .then(() => (window.location.href = "/index.html")) // 로그인 정보를 가져오고 성공 시 index.html 로 이동
        .catch((error) => {
          alert("로그인 정보가 일치하지 않습니다.");
          const errorCode = error.code;
          const errorMessage = error.message;
          // ..
        });
    });
  }
  // 회원가입 버튼 클릭 시 회원가입 페이지로 이동
  const signupButton = document.querySelector(".moveToSignUpPageButton");
  if (signupButton) {
    signupButton.addEventListener("click", () => {
      window.location.href = "signup.html";
    });
  }
});

 

signup.js

// 회원가입 부분
document.addEventListener("DOMContentLoaded", () => {
  const signUpButton = document.querySelector("#signUpButton");
  if (signUpButton) {  // 회원가입 버튼이 있는지 확인
    signUpButton.addEventListener("click", (event) => {
      event.preventDefault(); // 클릭하면 페이지가 새로고침 되는 것을 방지하고
      const signUpEmail = document.getElementById("signUpEmail").value;
      const signUpPassword = document.getElementById("signUpPassword").value;
   // 이메일, 비밀번호 id값을 signupEmail, signupPassword 에 넣어주고
      createUserWithEmailAndPassword(auth, signUpEmail, signUpPassword) // 유저 정보를 저장해라 auth에
        .then(async (userCredential) => { 
          alert("회원가입 완료");  
          // auth 를 통한 Firebase 인증 메서드가 성공적으로 완료됐을 때 반환되는 객체 userCredential
          const user = userCredential.user;
          localStorage.setItem("userID", user.uid);
         // 추가로 localstorage 에 유저 정보를 저장해라
          await setDoc(doc(firestoreDB, "user", `${user.uid}`), { saveMovies: [], reviewMovies: {} });
        }) // 성공적으로 회원가입 완료 시 index.html 로 이동
        .then(() => (window.location.href = "/index.html"))
        .catch((error) => {
          console.log("error: ", error);
          alert("이메일 주소 혹은 비밀번호를 다시 확인해주세요");
          const errorCode = error.code;
          const errorMessage = error.message;
          // ..
        });
    });
  }
  // 로그인 버튼 클릭시 login page 로 이동
  const loginButton = document.querySelector(".moveToLoginPageButton");
  if (loginButton) {
    loginButton.addEventListener("click", () => {
      window.location.href = "login.html";
    });
  }
});

 

logoutstatus.js

// 로그인 인증 상태 확인 해서 버튼 표시하는 부분
document.addEventListener("DOMContentLoaded", function () {
  const loginButton = document.querySelector(".moveToLoginPageButton");
  const signUpButton = document.querySelector(".moveToSignUpPageButton");
  const logoutButton = document.getElementById("logoutButton");
  const myMoviesButton = document.getElementById("moveToMyMoviesButton");
  // 기본적으로 모든 버튼을 숨긴 상태로 만듦
  if (loginButton) loginButton.style.display = "none";
  if (signUpButton) signUpButton.style.display = "none";
  if (logoutButton) logoutButton.style.display = "none";
  if (myMoviesButton) myMoviesButton.style.display = "none";

  const userLoggedIn = localStorage.getItem("userLoggedIn");
 // localStorage 를 통해 로그인 인증 상태가 true이면 아래 버튼을 보여라
  if (userLoggedIn === "true") {
    if (loginButton) loginButton.style.display = "none";
    if (signUpButton) signUpButton.style.display = "none";
    if (logoutButton) logoutButton.style.display = "block";
    if (myMoviesButton) myMoviesButton.style.display = "block";
  } else {  // localStorage 를 통해 로그인 인증 상태가 false면 아래 버튼을 보여라
    if (loginButton) loginButton.style.display = "block";
    if (signUpButton) signUpButton.style.display = "block";
    if (logoutButton) logoutButton.style.display = "none";
    if (myMoviesButton) myMoviesButton.style.display = "none";
  }
  // Firebase Auth 상태 감지
  // 원래는 회원가입 시 로그인 상태(true)를 localstorage 에 저장해주면 더 빨리 호출되지만,
  // 보안상 계정 정보만 localstorage 에 저장하고, 로그인 상태는 auth 에서 가져온다.
  // 계정 정보만 localstorage에 넣어줘도 기존보다 딜레이 없이 더 빠르다.
  onAuthStateChanged(auth, (user) => {  // firebase auth 계정 인증정보를 확인
    if (user) {  
      localStorage.setItem("userLoggedIn", "true");  // 로그인 상태인 경우 로컬 저장소에 사용자 ID 저장
      if (loginButton) loginButton.style.display = "none"; 
      if (signUpButton) signUpButton.style.display = "none";
      if (logoutButton) logoutButton.style.display = "block";
      if (myMoviesButton) myMoviesButton.style.display = "block";
    } else {  // 로그아웃 상태인 경우 로컬 저장소에서 사용자 ID 제거
      localStorage.setItem("userLoggedIn", "false");
      if (loginButton) loginButton.style.display = "block";
      if (signUpButton) signUpButton.style.display = "block";
      if (logoutButton) logoutButton.style.display = "none";
      if (myMoviesButton) myMoviesButton.style.display = "none";
    }
  });
  // 로그아웃 후 index.html로 리디렉션
  if (logoutButton) {
    logoutButton.addEventListener("click", () => {
      signOut(auth)
        .then(() => {
          console.log("User logged out");
          localStorage.setItem("userID", null);
        })
        .then(() => (window.location.href = "index.html"))
        .catch((error) => {
          console.error("Logout failed:", error);
        });
    });
  }
});

 

이 외 module 을 사용해서 import 와 export 를 활용하여 코드 정리를 하여 가독성을 높혔고, 각 구역마다 헤더부분에 버튼 기능을 코드 복붙으로 기능 구현을 해주었습니다. 그리고 마이페이지 부분 사용자 프로필 이미지도 랜덤색상 및 zep 아바타로 넣었는데 코드가 겹쳐 이미지가 여러개 생성 될 때는 while 문으로 기존 이미지 제거를 해서 해결하였습니다.

 

내일 팀 프로젝트가 끝나고 팀장으로써 발표를 해야하는데 말도 잘 못하고 부담이 되지만, 열심히 마무리 잘 해보도록 하겠습니다.