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 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({ userEmail: "", userNickName: "", userMbnum: "", userPassword: "", userRePassword: "" }) //각 타입별 error 유무 state const [error, setError] = useState(""); const [errorMsg, setErrorMsg] = useState({ errorEmail: false, errorNickName: false, errorMbnum: false, errorPassword: false, errorRePassword: 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); console.log(image.img); setProfile(image.img); } catch (error) { catchErrors(error, setError); } } //기존 비밀번호 확인 const handleOnSummitVerify = async (e) => { e.preventDefault(); try { setError(() => ("")); setLoading(() => (true)); const pw = presentPw; const confirmPw = await authApi.comparePw(pw); if (confirmPw) { setPage(false); } else { alert("비밀번호가 일치하지 않습니다."); } } catch (error) { catchErrors(error, setError); } finally { setLoading(false); } } //비교하여 error메세지 반환 const vaildationData = (text, compareValue, error) => { if (text !== compareValue) { setErrorMsg(errorMsg => ({ ...errorMsg, [error]: true })); } else { setErrorMsg(errorMsg => ({ ...errorMsg, [error]: false })); } } const vaildationIdPw = (text, minValue, error) => { if ((text < minValue)) { setErrorMsg(errorMsg => ({ ...errorMsg, [error]: true })); } else { setErrorMsg(errorMsg => ({ ...errorMsg, [error]: false })); } } //유효성 검사 const validation = () => { //별명 유효성 검사 vaildationData((userRe.userNickName.length === 0), false, "errorNickName"); // 휴대폰 유효성 검사 vaildationData(userRe.userMbnum.length, 11, "errorMbnum"); // 비밀번호 유효성 검사 vaildationIdPw(userRe.userPassword.length, 8, "errorPassword"); // 비밀번호 확인 유효성 검사 vaildationData(userRe.userPassword, userRe.userRePassword, "errorRePassword"); // 최종 유효성 검사 if ((Object.values(errorMsg).some((element) => (element)) === false)) { return true } else { return false } } const handleOnSummit = async (e) => { e.preventDefault(); try { setError(() => ("")); //처리가 될때까지 버튼(가입하기)이 안눌리게 지정 setLoading(() => (true)); console.log("userRe : " + userRe.userEmail); //유효성 검사 let valid = validation(); console.log("valid :" + valid); if (valid) { const userData = userRe; console.log(userData); //서버로 전송 const process = await authApi.modifyUser(userData); console.log("process : " + process); alert("회원정보 수정 완료"); valid = false; } else { throw new Error("유효하지 않은 데이터입니다.") } } catch (error) { //에러전송 catchErrors(error, setError); } finally { setLoading(() => (false)); } } const handleOnClick = (e) => { e.preventDefault(); setPage(true); } return ( <> {/* 마이페이지 창 */}
마이페이지

프로필 변경

{`${userNickName}`}님 반갑습니다!
{/* 기존 비밀번호 확인 모달창 */} ) } export default MyInfo