import { useState, useEffect } from "react"; import authApi from "../../apis/auth.api"; import catchErrors from "../../utils/catchErrors.js"; import styles from "./my-info.module.scss"; const MyInfo = () => { const [userNickName, setUserNickName] = useState("사용자"); const [img, setImg] = useState(""); const [profile, setProfile] = useState(""); const [startTime, setStartTime] = useState(""); const [page, setPage] = useState(true); const [presentPw, setPresentPw] = useState(""); const [loading, setLoading] = useState(false); const [userRe, setUserRe] = useState({ userName: "", userEmail: "", userNickName: "", userMbnum: "", userPassword: "", userRePassword: "" }) const [confirmMb, setConfirmMb] = useState(false); const [number, setNumber] = useState(null); 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 getMember = async () => { const member = await authApi.getMember(); setUserNickName(member.nickname); setProfile(member.img); } const handlePwOnChange = (e) => { setPresentPw(e.target.value) } 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; const confirmPw = await authApi.comparePw(pw); 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) { catchErrors(error, setError); } 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); } } 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}`}님 반갑습니다!
) } export default MyInfo