prototype

src/App.js

@@ -27,11 +27,13 @@ export default function App() {
 
   //로그인 상태 관리하기--------------------------------
   useEffect(() => {
-    // refreshTokenRequest();
-    if (accessToken.accessToken !== null) {
-      history.push('/Waiting');
-    }
-  }, []);
+
+    //refreshTokenRequest()
+    if(accessToken.accessToken!==null){
+      history.push('/Waiting')
+    }      
+  },[]);
+
   const loginHandler = (data) => {
     issueAccessToken(data.data.accessToken);
     history.push('/Waiting');
@@ -44,13 +46,11 @@ export default function App() {
   //로그 아웃--------------------------------------------------------
   const hendleLogout = () => {
     axios
-      .get('http://localhost:4000/user/logout', {
-        headers: {
-          'Content-Type': 'application/json',
-          'Clear-Site-Data': 'cookies',
-        },
-      })
-      .then((res) => {});
+
+        .get(
+          'http://localhost:4000/user/logout',
+          {withCredentials: true}
+        ).then((res) => {})
     setUserInfo({
       id: null,
       nickname: null,
@@ -96,14 +96,16 @@ export default function App() {
         withCredentials: true,
       })
       .then((res) => {
-        if (res.data.message !== 'ok') {
-        }
-        const { nickname, email, profile_image } = res.data.data.userInfo;
-        console.log(res.data.data.accessToken);
-        setAccessToken({ accessToken: res.data.data.accessToken });
+
+        if (res.data.message !== 'ok') {}
+        const { nickname, email, profile_image, id,comment } = res.data.data.userInfo;
+        console.log(res.data.data.accessToken)
+        setAccessToken({accessToken:res.data.data.accessToken})
         setUserInfo({
+          id : id,
           nickname: nickname,
           email: email,
+          comment:comment,
           profile_image: profile_image,
         });
       });

src/MainPages/main.js

@@ -23,7 +23,10 @@ export default function Main({ loginHandler, handleGuestLogin }) {
 
   const guestLogIn = () => {
     axios
-      .get('http://localhost:4000/guest')
+      .get('http://localhost:4000/guest',
+      {
+        withCredentials: true
+      })
       .then((res) => {
         console.log(res.data);
         loginHandler(res.data);

src/MyPages/MyPage.js

@@ -10,21 +10,37 @@ import Character2 from '../images/Character2.png';
 import Character3 from '../images/Character3.png';
 import Character4 from '../images/Character4.png';
 
-function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
+function MyPage({ accessToken, refreshTokenRequest, userInfo }) {
   const PhotoData = [Character1, Character2, Character3, Character4];
-
   const [isOpen, setIsOpen] = useState(false);
   const [isPhotoBoxOpen, setIsPhotoBoxOpen] = useState(false);
   const { nickname, email, profile_image, comment, id } = userInfo;
-  const defaultImageNum = profile_image === null ? 0 : profile_image;
-  const [nowPhoto, setPhoto] = useState(PhotoData[defaultImageNum]);
+  const [PhotoNum, setPhotoNum] = useState(0);
+  const [nowPhoto, setPhoto] = useState(PhotoData[profile_image]);
+  const [text, setText] = useState(null);
+
+  // const emailInputValue = (e) => {
+  //   setEmail(e.target.value);
+  // };
+
+  // const passwordInputValue = (e) => {
+  //   setPassword(e.target.value);
+  // };
+
+  // const nickNameInputValue = (e) => {
+  //   setNickName(e.target.value);
+  // };
+
   const ChangeInputPhoto = function (photo) {
     // e.preventDefault();
     setPhoto(photo);
+    setPhotoNum(PhotoData.indexOf(nowPhoto))
+    console.log(PhotoNum)
     if (photo !== nowPhoto) {
       console.log('openModal');
       openModal();
     }
+    //MyPageSaveData()
   };
   const openModal = () => {
     setIsOpen(true);
@@ -41,31 +57,35 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
     }
   };
 
-  const MyPageSaveData = async () => {
-    const PhotoNum = PhotoData.findIndex(nowPhoto);
-    const SavePhoto = await axios.post(
-      `http://localhost:4000/mypage/${id}/profile`,
-      {
-        authorization: accessToken,
-        new_profile: PhotoNum,
+
+  const MyPageSaveData= async (PhotoNum) =>{
+
+    await refreshTokenRequest()
+    const SavePhoto = await axios.post(`http://localhost:4000/mypage/${id}/profile`,
+    {new_profile: PhotoNum},
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken.accessToken}`,
+        'Content-Type': 'application/json',
       },
-      {
-        headers: { 'Content-Type': 'application/json' },
-        Credentials: 'include',
-      }
-    );
-    const SaveComment = await axios.post(
-      `http://localhost:4000/mypage/${id}/comment`,
-      {
-        authorization: accessToken,
-        Comment: PhotoNum,
-      }
-    );
-  };
+      //withCredentials: true,
+    })
+    const SaveComment = await axios.post(`http://localhost:4000/mypage/${id}/comment`,
+    {Comment: '아니라어민어리ㅏㅁㄴ얼'},
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+      //withCredentials: true,
+    })
+  }
+
+
 
   return (
     <div>
-      <Header isOpen={isOpen} nowPhoto={nowPhoto} nickname={nickname} />
+      <Header isOpen={isOpen} nowPhoto={nowPhoto} nickname={nickname} PhotoNum={PhotoNum}MyPageSaveData={MyPageSaveData}/>
       <content className="container">
         <div className="pro_search_box">
           <div className="introBox">
@@ -84,8 +104,7 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
             <div className="intro">
               <h1>자기소개</h1>
               <textarea
-                placeholder={`클릭하여 자신을 소개해
-보세요!`}
+                placeholder={`클릭하여 자신을 소개해 보세요!`}
               />
             </div>
           </div>

src/MyPages/components/ExitBtn.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-export default function ExitBtn({ MyPageSaveData }) {
+export default function ExitBtn({ MyPageSaveData,PhotoNum }) {
   const history = useHistory();
   return (
     <span className="Exit">
       <button
-        onClick={() => {
+        onClick={async () => {
+          await MyPageSaveData(PhotoNum)
           history.push('/Waiting');
         }}
       >

src/MyPages/components/Header.js

@@ -3,14 +3,14 @@ import React, { useEffect } from 'react';
 import ExitBtn from './ExitBtn';
 import Complete from './Complete';
 
-export default function Header({ isOpen, nowPhoto, nickname, MyPageSaveData }) {
+export default function Header({ isOpen, nowPhoto, nickname, MyPageSaveData,PhotoNum }) {
   console.log(nickname);
 
   return (
     <header className="header">
       <h1>{nickname}님의 마이페이지</h1>
       <Complete isOpen={isOpen} />
-      <ExitBtn MyPageSaveData={MyPageSaveData} />
+      <ExitBtn MyPageSaveData={MyPageSaveData} PhotoNum={PhotoNum}/>
     </header>
   );
 }