diff --git a/src/components/MyPage/PersonalInfoChangeForm.js b/src/components/MyPage/PersonalInfoChangeForm.js index 89d08434..cd3d111c 100644 --- a/src/components/MyPage/PersonalInfoChangeForm.js +++ b/src/components/MyPage/PersonalInfoChangeForm.js @@ -1,6 +1,9 @@ import styled from 'styled-components'; import React, {useState} from 'react'; +import { useQueryClient, useMutation} from 'react-query'; import { Button } from '../common/Button'; +import { getUsers,patchUsers, getUserEmailCheck, getRegisterEmail} from '../../lib/api/user'; +import { useDispatch } from 'react-redux'; const ButtonPosition = styled.div` display: flex; @@ -66,12 +69,70 @@ const ItemWrapper = styled.div` padding: 2rem; `; + function PersonalInfoChangeForm(){ const [nickname , setNickname] = useState(" "); //비밀번호 재설정 로직 삭제 const [phoneNo , setPhoneNo] = useState(" "); const [email , setEmail] = useState(" "); + const useQuery = useQueryClient(); +//개인정보 조회 +const { data } = useQuery( + ['getUsers', id], + () => getUsers(id), + { + refetchOnWindowFocus: false, + onSuccess: (id) => { + navigate('/api/users'); + }, + }, + ); + +//개인정보 수정 +const PatchMutation = useMutation( + (type) => + patchUsers( + email, + gender, + nickname, + phoneNum + ), + { + onSuccess: () => { + queryClient.refetchQueries(['patchUsers', email, gender, nickname, phoneNum]); + }, + }, + ); + +//이메일 중복 확인 +const { data } = useQuery( + ['getUserEmailCheck', email], + () => getUserEmailCheck(email), + { + refetchOnWindowFocus: false, + onError: () => { + alert('중복된 이메일입니다.'); + }, + onSuccess: (email) => { + navigate(`api/user/emailCheck?email=${email}`); + }, + }, + ); + +//이메일 인증 +const { data } = useQuery( + ['getRegisterEmail', email], + () => getRegisterEmail(email), + { + refetchOnWindowFocus: false, + onSuccess: ( email ) => { + navigate(`api/user/RegisterEmail?email=${email}`); + }, + }, + ); + + const onNicknameHandler = (event) => { //닉네임 재설정 setNickname(event.currentTarget.value) } diff --git a/src/lib/api/user.js b/src/lib/api/user.js index 7ef58a45..ea469c57 100644 --- a/src/lib/api/user.js +++ b/src/lib/api/user.js @@ -1,4 +1,5 @@ import axios from 'axios'; +import { useQueryClient, useMutation} from 'react-query'; import { setToken } from './auth'; const baseUrl = process.env.REACT_APP_BACKEND_BASE_URL @@ -16,6 +17,41 @@ export const getUserCommunityInfo = async (category, page = 0) => { // scrap url = `${baseUrl}/mypage/scraps`; } + const { data } = await axios.get(`${url}?page=${page}`); return data; }; + +//개인정보 조회 +export const getUsers = async (id) => { + const { data } = await axios.get(`${baseUrl}/users?id=${id}`); + return data; +}; + +//개인정보 수정 +export const patchUsers= async (id) => { + const { data } = await axios.patch(`${baseUrl}/users?id=${id}`,{ + email, + gender, + nickname, + phoneNum + }); + return data; +}; + +//이메일 중복 확인 +export const getUserEmailCheck = async (email) => { + const { data } = await axios.get(`${baseUrl}/emailCheck?email=${email}`); + if(data === true){ + alert('중복된 이메일입니다!') + } + else{ + return data; +}; + +//이메일 인증 +export const getRegisterEmail = async (email) => { + setToken(); + const { data } = await axios.get(`${baseUrl}/RegisterEmail?email=${email}`); + return data; +};