[Library Management System] 25.10.26 | (구현) 마이페이지 이메일 수정 기능 구현

[ 작업한 내용 ]

# Frontend

1. 이메일 수정 기능 구현

- api 사용하여 입력한 이메일을 DB로 전송 후 응답 결과 받기.

const updateEmail = async () => {
  try {
    const response = await axios.patch(
      "http://localhost:8080/api/v1/user/me/email",
      { email: value },
      { withCredentials: true },
    );

    console.log(response.data.data)
    setData(response.data.data);

  } catch (error) {
    console.log("Error: ", error);
    setError(error);
  } finally {
    setLoading(false);
  }
}

---

2. 모달창 추가

- tailwind에서 제공하는 모달 컴포넌트 사용.

- 이메일 수정, 비밀번호 수정에서 사용되는 input의 속성은 객체로 관리.

const modalData = {
  dialogEmail: {
    title: "이메일 수정",
    content: "새로운 이메일 주소를 입력해주세요.",
    placeholder: "새 이메일 입력",
  },
  dialogPw: {
    title: "비밀번호 수정",
    content: "새로운 비밀번호를 입력해주세요.",
    placeholderOri: "새 비밀번호 입력",
    placeholderRe: "새 비밀번호 확인 입력",
  }
}

---

3. 수정 버튼 관리

- 모달창의 id에 따라 이메일 또는 비밀번호 수정의 모달창이 뜨고 해당 api를 호출한다.

const handleClick = async () => {
  if (id === "dialogEmail") {
    await updateEmail();
  } else if (id === "dialogPw") {
    // await updatePassword();
  }

  await fetchUser(); 
  setValue("");
  document.getElementById(id)?.close();
}

---

commit.