마이페이지 api 추가

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)
 }

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;
+};