[FEAT] 로그아웃, 탈퇴 및 마이페이지 프로필 조회

package.json

@@ -23,6 +23,7 @@
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^18.0.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^2.1.3",
     "react-tag-input": "^6.8.1",

src/Components/Header.js

@@ -1,9 +1,12 @@
 import React, { useContext, useState } from "react";
 import {Link, useNavigate} from "react-router-dom";
-import styled from "styled-components";
-import Token from "./Token";
+import axios from "axios";
+import {preURL} from "../preURL/preURL";
 import { UserContext } from "../_contextAPI/UserContext";
+// Component
+import Token from "./Token";
 // Style
+import styled from "styled-components";
 import "../Style/Font.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -19,6 +22,7 @@ import Main_logo from "../Assets/Main_logo.png";
 import Main_logo_dark from "../Assets/Main_logo_dark.png";
 import User_default_img from "../Assets/User_default_img.png";
 
+
 // 카카오 소셜 로그인
 const client_id = process.env.REACT_APP_KAKAO_REST_API_KEY;
 const redirect_uri = process.env.REACT_APP_KAKAO_REDIRECT_URI;
@@ -40,36 +44,25 @@ const Header = ({ darkMode }) => {
   const onLogout = () => {
     let logout = window.confirm("로그아웃 하시겠습니까?");
     if (logout) {
-      if (!token) {
-        alert("사용자가 없습니다.");
-        return;
-      }
-      sessionStorage.removeItem("access-token");
-      window.location.replace("/");
-      alert("로그아웃 되었습니다.");
+      axios
+          .patch(preURL + `/user/${user.id}/edit`,[],{
+            headers: {
+              ITTASEKKI: token
+            }
+          })
+          .then((res) => {
+            console.log("👍로그아웃 성공", res);
+            sessionStorage.removeItem("access-token");
+            window.location.replace("/");
+            alert("로그아웃 되었습니다.");
+          })
+          .catch((err) => {
+            console.log("🧨로그아웃 실패", err);
+            alert('로그아웃 실패');
+          })
     }
   };
 
-  // 탈퇴하기 TODO 마이페이지로 이동
-  // const onLeave = () => {
-  //   const content =
-  //     "[회원 탈퇴]\n " +
-  //     "탈퇴 시 유의사항을 확인 바랍니다.\n\n " +
-  //     "- 계정 연동 시 연동이 해제됩니다.\n" +
-  //     "- 사이트 내에 작성한 게시글, 댓글 등은 삭제되지 않으며, ‘알 수 없음’으로 회원 정보가 수정되어 작성 내용이 유지됩니다.\n" +
-  //     "- 회원 탈퇴 시 사이트 내 등록된 대부분의 게시글 확인·수정·삭제 등이 일체 불가하며 이를 유의하시어 탈퇴 바랍니다.\n\n" +
-  //     "위 탈퇴 유의사항을 확인하고 이에 동의한다면 '확인'을, 동의하지 않는다면 '취소'를 눌러주세요.";
-  //
-  //   let leave = window.confirm(content);
-  //   if (leave) {
-  //     localStorage.removeItem("access_token");
-  //     alert("탈퇴가 완료되었습니다.\n함께 달리며 즐거웠습니다:)");
-  //     window.location.reload();
-  //   } else {
-  //     alert("탈퇴하기를 취소하였습니다.");
-  //     window.location.reload();
-  //   }
-  // };
 
   return (
     <Wrapper>

src/Pages/Member/MyPage.js

@@ -8,6 +8,7 @@ import Token from "../../Components/Token";
 import Header from "../../Components/Header";
 import MyVideo from "../../Components/Mypage/MyVideo";
 import MyPly from "../../Components/Mypage/MyPly";
+import MyComment from "../../Components/Mypage/MyComment";
 import Pagination from "../../Components/Mypage/Pagination";
 // Style
 import {
@@ -25,10 +26,10 @@ import {
 import {StyledDivRow} from "../../Style/StyledDiv";
 import StyledBtn from "../../Style/StyledBtn";
 import {VideoList} from "../../Style/Video";
+import {BiPencil, IoCameraReverse} from "react-icons/all";
 // Assets
 import GotoPly from "../../Assets/Mypage_GotoSavedply.png";
 import Eye from "../../Assets/Mypage_eye1.png";
-import MyComment from "../../Components/Mypage/MyComment";
 
 
 const MyPage = () => {
@@ -81,6 +82,25 @@ const MyPage = () => {
   const [commentsPage, setcommentsPage] = useState(0);
 
 
+  // 상단 프로필 조회
+  useEffect(() => {
+    axios
+        .get(preURL + `/user/${user.id}/info`,{
+          headers: {
+            ITTASEKKI: token
+          }
+        })
+        .then((res) => {
+          console.log("👍상단 프로필 조회 성공", res);
+          setProfileName(res.data['nickname']);
+          setProfileImg(res.data['profileUrl']);
+          setProfileEmail(res.data['email']);
+        })
+        .catch((err) => {
+          console.log("🧨상단 프로필 조회 실패", err);
+        })
+  },[user])
+
   // 게시한 영상 목록 불러오기
   useEffect(() => {
     axios
@@ -148,6 +168,49 @@ const MyPage = () => {
   },[user, videosPage]);
 
 
+  // 프로필 이미지 바꾸기
+  const onChangeProfileImg = (e) => {
+    const newImg = e.target.files[0];
+    // console.log(newImg);
+    const reader = new FileReader();
+    reader.readAsDataURL(newImg);
+    reader.onload = () => {
+      setProfileImg(reader.result);
+    }
+  };
+
+  // 탈퇴하기
+  const onDelete = () => {
+    const content =
+        "[회원 탈퇴]\n " +
+        "탈퇴 시 유의사항을 확인 바랍니다.\n\n " +
+        "- 계정 연동 시 연동이 해제됩니다.\n" +
+        "- 사이트 내에 작성한 게시글, 댓글 등은 삭제되지 않으며, ‘알 수 없음’으로 회원 정보가 수정되어 작성 내용이 유지됩니다.\n" +
+        "- 회원 탈퇴 시 사이트 내 등록된 대부분의 게시글 확인·수정·삭제 등이 일체 불가하며 이를 유의하시어 탈퇴 바랍니다.\n\n" +
+        "위 탈퇴 유의사항을 확인하고 이에 동의한다면 '확인'을, 동의하지 않는다면 '취소'를 눌러주세요.";
+
+    let leave = window.confirm(content);
+    if (leave) {
+      axios
+          .delete(preURL + `/user/${user.id}/edit`,{
+            headers: {
+              ITTASEKKI: token
+            }
+          })
+          .then((res) => {
+            console.log("👍탈퇴 성공", res.data);
+            sessionStorage.removeItem("access-token");
+            window.location.replace("/");
+            alert("탈퇴가 완료되었습니다.\n함께 달리며 즐거웠습니다:)");
+          })
+          .catch((err) => {
+            console.log("🧨탈퇴 실패", err);
+            alert('오류! 고객센터에 문의하세요.');
+          })
+    }
+  };
+
+
   return (
       <>
         <Header />
@@ -162,10 +225,18 @@ const MyPage = () => {
             <StyledDivRow>
               <ImgWrapper>
                 <img src={profileImg} alt="사용자 프로필 이미지" />
+                <IoCameraReverse id="camera" size="1.8em"/>
+                <label htmlFor="img-edit" title="프로필 이미지 변경"/>
+                <input id="img-edit" type="file" accept="image/*" onChange={onChangeProfileImg} style={{display: "none"}}/>
               </ImgWrapper>
               <RightWrapper>
-                <Nickname>{profileName}</Nickname>
-                <Email>{profileEmail}</Email>
+                <Nickname>
+                  <span>{profileName}</span>
+                  <BiPencil size="0.6em"/>
+                </Nickname>
+                <Email>
+                  {profileEmail}
+                </Email>
               </RightWrapper>
             </StyledDivRow>
             {/*게시한 영상*/}
@@ -207,7 +278,7 @@ const MyPage = () => {
             </div>
             {/*탈퇴하기*/}
             <div>
-              <Delete>탈퇴하기</Delete>
+              <Delete onClick={onDelete}>탈퇴하기</Delete>
             </div>
           </BGdiv>
         </Wrapper>

src/Style/MyPage.js

@@ -59,7 +59,7 @@ export const BGdiv = styled.div`
 // 프로필 이미지
 export const ImgWrapper = styled.div`
   width: 18%;
-  padding-bottom: 18%;
+  padding-top: 18%;
   margin-left: 25%;
   position: relative;
 
@@ -73,6 +73,23 @@ export const ImgWrapper = styled.div`
     object-fit: cover;
     border-radius: 50%;
   }
+  & > #camera {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  & > label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    :hover {
+      cursor: pointer;
+      background-color: rgb(225, 225, 225, 0.2);
+    }
+  }
 `
 
 // 닉네임, 이메일