회원관리기능 - Part3 회원정보수정

회원정보 수정 기능 구현 방법 기록

---

 

1. 회원정보 수정 컴포넌트

회원정보 수정 컴포넌트는 사용자가 입력한 정보를 업데이트하고 이를 Firebase에 저장하는 역할을 합니다.

 

import React, { useState, useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { kuwazawa_memberDB, kuwazawa_cartDB } from "@/assets/firebase";
import { useNavigate } from "react-router-dom";
import { fetchMembers, localUser, userLogout } from "@/store/member";
import MemberModifySectionBlock from "./MemberModifySectionBlock";

위에서는 필요한 모듈을 import합니다.


const MemberModifySection = () => {
  const navigate = useNavigate(); // 페이지 이동을 위해 useNavigate 사용
  const dispatch = useDispatch(); // Redux 액션 디스패치를 위해 사용
  const user = useSelector((state) => state.members.user); // Redux에서 현재 로그인된 사용자 정보 가져옴

  const userIdRef = useRef(""); // 사용자 ID 입력 필드 참조
  const userPwRef = useRef(""); // 사용자 비밀번호 입력 필드 참조
  const userPwOkRef = useRef(""); // 사용자 비밀번호 확인 입력 필드 참조
  const mZipcodeRef = useRef(""); // 우편번호 입력 필드 참조
  const mAddressRef = useRef(""); // 주소 입력 필드 참조
  const mAddressSubRef = useRef(""); // 상세주소 입력 필드 참조

 

여기서는 필요한 ref와 state를 선언합니다. 

useSelector를 사용하여 Redux에서 현재 로그인된 사용자 정보를 가져옵니다.

 

const [userInfo, setUserInfo] = useState({
    userId: user.userId,
    userPw: "",
    userPwOk: "",
    userIrum: user.userIrum,
    handphone: user.handphone,
    zipCode: user.zipCode,
    addr1: user.addr1,
    addr2: user.addr2,
  });

  // 입력값 변경 시 상태 업데이트
  const handleChange = (e) => {
    const { value, name } = e.target;
    setUserInfo((userInfo) => ({ ...userInfo, [name]: value }));
  };

userInfo라는 state를 정의하고, 이를 통해 입력값이 변경될 때마다 상태를 업데이트합니다.

 

 

2. 회원정보 수정 처리 함수

// 회원정보 수정 처리
  const modify = async (e) => {
    e.preventDefault();
    // 비밀번호 입력 확인
    if (!userInfo.userPw) {
      alert("비밀번호를 입력하세요.");
      userPwRef.current.focus();
      return;
    }
    if (!userInfo.userPwOk) {
      alert("비밀번호를 입력하세요.");
      userPwOkRef.current.focus();
      return;
    }
    // 비밀번호 일치 확인
    if (userInfo.userPw !== userInfo.userPwOk) {
      alert("비밀번호가 일치하지 않습니다.");
      userPwRef.current.focus();
      return;
    }
    try {
      // Firebase에 회원정보 업데이트
      await kuwazawa_memberDB.child(user.key).update(userInfo);
      dispatch(fetchMembers());
      dispatch(localUser(JSON.parse(localStorage.getItem("loging"))));
      alert("회원정보를 수정했습니다.");
      navigate("/");
    } catch (error) {
      console.log("오류 : ", error);
    }
  };

modify 함수는 사용자가 폼을 제출할 때 호출되며, 입력된 비밀번호를 확인하고 일치하는지 체크한 후, Firebase에 회원정보를 업데이트합니다.

 

3. 회원 탈퇴 처리 함수

  // 회원 탈퇴 처리
  const memberRemove = async (e) => {
    e.preventDefault();
    const answer = confirm("정말로 탈퇴하시겠습니까?");
    if (answer) {
      try {
        // Firebase에서 회원정보 및 카트 정보 삭제
        await kuwazawa_cartDB.child(user.key).remove();
        await kuwazawa_memberDB.child(user.key).remove();
        dispatch(userLogout());
        dispatch(fetchCarts());
        navigate("/");
      } catch (error) {
        console.log("오류 : ", error);
      }
    } else {
      return;
    }
  };

memberRemove 함수는 사용자가 탈퇴를 원할 때 호출됩니다. Firebase에서 회원정보를 삭제하고, Redux 상태를 업데이트합니다.

 

 

4. 다음 주소 API 초기화

 // 다음 주소 API 사용을 위한 초기화
  useEffect(() => {
    window.openDaumPostcode = () => {
      new window.daum.Postcode({
        oncomplete: (data) => {
          let fullAddr = ""; // 최종 주소 변수
          let extraAddr = ""; // 조합형 주소 변수
          if (data.userSelectedType === "R") {
            fullAddr = data.roadAddress;
          } else {
            fullAddr = data.jibunAddress;
          }
          if (data.userSelectedType === "R") {
            if (data.bname !== "") {
              extraAddr += data.bname;
            }
            if (data.buildingName !== "") {
              extraAddr += extraAddr !== "" ? ", " + data.buildingName : data.buildingName;
            }
            fullAddr += extraAddr !== "" ? " (" + extraAddr + ")" : "";
          }
          setUserInfo((prevState) => ({
            ...prevState,
            zipCode: data.zonecode,
            addr1: fullAddr,
            addr2: "",
          }));
          mAddressSubRef.current.focus();
        },
      }).open();
    };
  }, []);

useEffect를 사용하여 다음 주소 API를 초기화하고, 주소 검색 기능을 제공합니다.