[WIL] 내배캠4기 React 4주차

일단 심플 귀염 깔꼼한 사용자 친화적 사시미 웹 자랑타임

세상에 이 날이 오긴 오는 구나..
대혼란의 깃=인간머지
능력 밖인 것만 같은 구현 기능들
머지충돌
에러
.
.
.
힘든 지난 날이 기억 안날 만큼 세상에 나온 우리 웹사이트가 너무 이쁩니다..
세상 자랑스럽고 팀원들 뽀뽀해주고 싶음. 하..

- 기초프로젝트 - 뉴스피드 사이트 제작

* 내 파트

필수 구현 기능

• 로그인/회원가입 - Authentication API 활용

  • 이메일, 패스워드 입력을 통해 로그인/회원가입 가능
  • google, github의 SNS 소셜로그인 연동

• aws S3 배포 ➡ 가비아 도메인과 연결(AWS Route 53의 DNS서버 설정)

추가 구현 기능

• 회원탈퇴 기능
  • 사용자 재인증을 통해 비밀번호 재입력 시 탈퇴 가능

---

1. 로그인/회원가입

1) 헤더에 토글버튼으로 드롭다운 메뉴를 다르게 지정 - 로그인 여부 체크

// 홈 화면 드롭다운 버튼 기능
export function Toggled() {
    let ulElementBeforeLogin = document.querySelector(".navbarBeforeLogin")
    let ulElementAfterLogin = document.querySelector(".navbarUserAccountMenu")

    // 사용자 상태 확인
    authService.onAuthStateChanged((user) => {

        if (user) {

            if (ulElementAfterLogin.classList.contains("active")) {

                ulElementAfterLogin.classList.remove("active");
                console.log('토글 드롭다운 실행- 로그인 후');
            }
            else {
                ulElementAfterLogin.classList.add("active");
            }
        }
        else {
            if (ulElementBeforeLogin.classList.contains("active")) {

                ulElementBeforeLogin.classList.remove("active");
                console.log('토글 드롭다운 실행- 로그인 전');
            }
            else {
                ulElementBeforeLogin.classList.add("active");
            }
        }
    });

}v

📌ClassList

• 특정 클래스만 조작하게 하는 메서드
  - elem.classList.add/remove("class") : class를 추가하거나 제거
  - elem.classList.toggle("class") : class가 존재할 경우 class를 제거하고 그렇지 않으면 추가
  - elem.classList.contains("class") : class 존재 여부에 따라 true/false 반환
  
  
  

2) 외부(토글버튼 영역 외의 곳) 클릭 시, 드롭다운 컴포넌트 숨기기
-> 사용자 경험 개선

window.addEventListener('mouseup', function (event) {
  const dropDown = this.document.querySelector('#dropDown');

  const mobileDropdown = this.document.querySelector('.mobileDropdownContent');
  if (!dropDown.contains(event.target)) {
    const dropdown1 = this.document.querySelector('.navbarUserAccountMenu');
    const dropdown2 = this.document.querySelector('.navbarBeforeLogin');
    dropdown1.classList.remove('active');
    dropdown2.classList.remove('active');
  }

});

📌mouseup

• 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생하는 마우스 이벤트

---

2. 회원탈퇴

• 사용자 재인증을 위해 비밀번호 입력 후 탈퇴 가능
• reauthenticateWithCredential를 통해 deleteUser가 가능해짐

import {
  deleteUser,
  reauthenticateWithCredential,
  EmailAuthProvider,
} from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js';
import { authService } from '../firebase.js';

export const leave = async (event) => {
  event.preventDefault();

  if (
    window.confirm(
      '정말 탈퇴하시겠습니까? 탈퇴 후에도 내가 쓴 게시물은 계속 남아있습니다.'
    )
  ) {
    // 확인 클릭 시 실행
    console.log('user 탈퇴');

    // 비밀번호 재입력 인풋 가져옴
    let userProvidedPassword = document.getElementById('passwordText').value;
    const credential = EmailAuthProvider.credential(
      authService.currentUser.email,
      userProvidedPassword
    );

    const result = await reauthenticateWithCredential(
      authService.currentUser,
      credential
    );

    // Pass result.user
    await deleteUser(result.user)
      .then(() => {
        console.log('유저 삭제 완료');
        localStorage.removeItem('user');
        window.location.replace('');
      })
      .catch((error) => {
        const errorMessage2 = error.message;
        console.log('error:', errorMessage2);
      });
    
  } else {
    // 컨펌 창에서 '취소' 클릭 시 실행
    console.log('탈퇴 취소');
  }
};