Merge pull request #35 from Soongsil-CoffeeChat/feat/#28

[Feat] 로그아웃 기능 추가

src/pages/mypage/mypage.styles.tsx

@@ -1,44 +1,45 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  width: 100%;  
+  width: 100%;
   box-sizing: border-box;
 `;
 
 export const HeaderContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: 18em;  
+  height: 18em;
   align-items: center;
-  background: linear-gradient(to right, #C3F1FD ,skyblue);  // 선형 그라데이션 배경 설정
-  width: 100%; 
+  background: linear-gradient(to right, #c3f1fd, skyblue);
+  width: 100%;
   box-sizing: border-box;
 `;
 
 export const BodyContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: left;
-  width: 100%;  // 전체 화면 너비를 차지하도록 설정
-  box-sizing: border-box;  // padding과 border를 포함한 박스 모델 사용
-  padding: 0 20px;  // 좌우 패딩 추가
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
 `;
 
 export const BodyTitle = styled.h2`
   padding-top: 10px;
-  margin: 10px auto;  // 중앙 정렬을 위해 auto 사용
+  margin: 10px auto;
   font-size: 24px;
-  width: 100%;  // 전체 화면 너비를 차지하도록 설정
-  text-align: left;  // 텍스트 중앙 정렬
-  box-sizing: border-box;  // padding과 border를 포함한 박스 모델 사용
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
 `;
 
 export const BodyText = styled.p`
-  margin: 10px auto;  // 중앙 정렬을 위해 auto 사용
+  margin: 10px auto;
   font-size: 18px;
-  width: 100%;  // 전체 화면 너비를 차지하도록 설정
-  text-align: left;  // 텍스트 중앙 정렬
-  box-sizing: border-box;  // padding과 border를 포함한 박스 모델 사용
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+  cursor: pointer;
 `;
 
 export const HeaderTitle = styled.div`
@@ -64,18 +65,18 @@ export const ProfileButtonContainer = styled.div`
 `;
 
 export const ProfileButton = styled.div`
-  display: flex;  // 내부 콘텐츠를 가운데 정렬하기 위한 설정
-  width: 200px;  // 원의 크기를 정하기 위해 너비 설정
-  height: 200px;  // 원의 크기를 정하기 위해 높이 설정
-  border-radius: 50%;  // 완벽한 원을 만들기 위해 border-radius를 50%로 설정
-  background-color: white;  // 배경색을 흰색으로 설정
+  display: flex; // 내부 콘텐츠를 가운데 정렬하기 위한 설정
+  width: 200px; // 원의 크기를 정하기 위해 너비 설정
+  height: 200px; // 원의 크기를 정하기 위해 높이 설정
+  border-radius: 50%; // 완벽한 원을 만들기 위해 border-radius를 50%로 설정
+  background-color: white; // 배경색을 흰색으로 설정
   margin: 0 auto;
 `;
 
 export const ButtonContainer = styled.div`
   display: flex;
-  align-items: flex-start;  /* 상단 정렬 */
-  justify-content: flex-start;  /* 왼쪽 정렬 */
+  align-items: flex-start; /* 상단 정렬 */
+  justify-content: flex-start; /* 왼쪽 정렬 */
   height: 10%;
   width: 100%;
-`;
+`;

src/pages/mypage/mypage.tsx

@@ -1,15 +1,22 @@
 import React, { useEffect, useState } from "react";
 import * as styles from "./mypage.styles";
 import BackButton from "../../components/button/backButton";
+import { useNavigate } from "react-router-dom";
 
 function MyPage() {
   const [activeButtons, setActiveButtons] = useState<string[]>([]);
-  const [Username, setUsername] = useState<string>('멘티_User');
+  const [Username, setUsername] = useState<string>("멘티_User");
+  const navigate = useNavigate();
 
   useEffect(() => {
     // 클릭한 분야 변경 시 데이터 가져오기
   }, [activeButtons]);
 
+  const handleLogout = () => {
+    localStorage.setItem("isLoggedIn", "false");
+    navigate("/login");
+  };
+
   return (
     <styles.Container>
       <styles.HeaderContainer>
@@ -25,7 +32,7 @@ function MyPage() {
         <styles.BodyText>내정보관리</styles.BodyText>
         <styles.BodyText>버그관리</styles.BodyText>
         <styles.BodyText>코고소개</styles.BodyText>
-        <styles.BodyText>로그아웃</styles.BodyText>
+        <styles.BodyText onClick={handleLogout}>로그아웃</styles.BodyText>
       </styles.BodyContainer>
     </styles.Container>
   );