import styles from "./my-info.module.scss"; import { useState, useEffect } from "react"; import authApi from "../../apis/auth.api"; import catchErrors from "../../utils/catchErrors.js"; const MyInfo = () => { const [userNickName, setUserNickName] = useState("사용자"); const [img, setImg] = useState(""); const [profile, setProfile] = useState(""); const [startTime, setStartTime] = useState(""); // 사용자 이름 가져오는 함수 const getMember = async () => { const member = await authApi.getMember(); setUserNickName(member.nickname); setProfile(member.img); } const [page, setPage] = useState(true); //현재 비밀번호 state const [presentPw, setPresentPw] = useState(""); const [loading, setLoading] = useState(false); //변경할 데이터 입력받는 state const [userRe, setUserRe] = useState({ userName: "", userEmail: "", userNickName: "", userMbnum: "", userPassword: "", userRePassword: "" }) const [confirmMb, setConfirmMb] = useState(false); const [number, setNumber] = useState(null); //각 타입별 error 유무 state const [mbError,setMbError] = useState(false); const [error, setError] = useState(""); const [errorMsg, setErrorMsg] = useState({ errorName: false, errorEmail: false, errorNickName: false, errorMbnum: false, errorPassword: false, }) useEffect(() => { getMember(); }, []) const handlePwOnChange = (e) => { setPresentPw(e.target.value) } //입력할때마다 state에 저장 const handleUserOnChange = (e) => { setUserRe({ ...userRe, [e.target.name]: e.target.value }) if (e.target.name === "userMbnum") { setUserRe({ ...userRe, [e.target.name]: String(e.target.value) }) } } const enterKey = (e) => { if (e.key === "Enter") { handleOnSummitVerify(e); } } const handleOnChange = (e) => { setImg(e.target.files[0]); } const handleOnSummitForm = async (e) => { e.preventDefault(); try { setError("") const formData = new FormData(); formData.append("image", img); const image = await authApi.profile(formData); setProfile(image.img); } catch (error) { catchErrors(error, setError); } } //기존 비밀번호 확인 const handleOnSummitVerify = async (e) => { e.preventDefault(); try { setError(""); setLoading(true); const pw = presentPw; console.log(pw); const confirmPw = await authApi.comparePw(pw); console.log("confirmPw : ", confirmPw); if (confirmPw) { setPage(false); setPresentPw(""); } else { alert("비밀번호가 일치하지 않습니다."); } } catch (error) { catchErrors(error, setError); } finally { setLoading(false); } } const handleOnClickMbnum = async (e) => { e.preventDefault(); try { setStartTime(""); setError(""); setLoading(true); const phone = userRe.userMbnum; const message = await authApi.confirmMbnum(phone); if(message.isSuccess){ setMbError("보냄"); setStartTime(message.startTime); } } catch (error) { console.log('error'+ error) }finally { setLoading(false); } } const handleOnChangeMb = (e) => { setNumber(String(e.target.value)); } const handleOnClickMbConfirm = async (e) => { e.preventDefault(); try { setError(""); setLoading(true); const confirmNum = {userMbnum : userRe.userMbnum, number : number, startTime : startTime}; const message = await authApi.confirmNum(confirmNum); setMbError(message); if(message === "성공"){ setConfirmMb(true); console.log("인증완료"); } } catch (error) { catchErrors(error, setError); }finally { setLoading(false); } } const validationPw = () => { if(userRe.userPassword !== userRe.userRePassword){ return false; }else{return true;} } const handleOnSummit = async (e) => { e.preventDefault(); try { setError(""); //처리가 될때까지 버튼(가입하기)이 안눌리게 지정 setLoading(true); let validPw = validationPw(); if(confirmMb){ if(validPw){ const userData = userRe; //서버로 전송 const error = await authApi.modifyUser(userData); if(error === "성공"){ alert("회원정보수정에 성공하였습니다.") }else{ setErrorMsg(error); alert("형식에 맞게 다시 작성해주세요"); } }else{ throw new Error("비밀번호가 일치하지 않습니다."); } }else{ throw new Error("핸드폰 번호를 인증해주세요."); } } catch (error) { //에러전송 catchErrors(error, setError); } finally { setLoading(false); } } const handleOnclickOut = (e) => { setConfirmMb(false); } const handleOnClick = (e) => { e.preventDefault(); handleOnclickOut(e); setPage(true); } return ( <> {/* 마이페이지 창 */}
마이페이지

프로필 변경

{`${userNickName}`}님 반갑습니다!
{/* 프로필 변경 모달창 */} {/* 기존 비밀번호 확인 모달창 */}