feat: Logout 기능 만들기#83

src/components/Layout.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
+import { useLogoutState } from '../recoil/userList';
+import { Logout } from './modal/Logout';
 
 const Layout = () => {
+  const [islogout, setIslogout] = useRecoilState(useLogoutState);
   return (
     <LayoutContainer>
       <Outlet />
+      {islogout && <Logout />}
     </LayoutContainer>
   );
 };

src/components/aside/NavList.tsx

@@ -9,6 +9,7 @@ import search from '../../assets/icon/search.svg';
 import mypage from '../../assets/icon/mypage.svg';
 
 import { subNavListType } from '../../types/asset';
+import { Logout } from '../modal/Logout';
 
 const NavList = () => {
   const match = useLocation().pathname;
@@ -135,3 +136,12 @@ const SubList = styled.ul<{ subToggleMeru: boolean }>`
   flex-direction: column;
   padding-left: 20px;
 `;
+const LogoutBtn = styled.button`
+  background-color: var(--gray);
+  border-radius: 8px;
+  color: var(--black2);
+  font-weight: 700;
+  font-size: 15px;
+  height: 44px;
+  margin-top: 356px;
+`;

src/components/aside/index.tsx

@@ -1,10 +1,17 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Outlet } from 'react-router-dom';
 import NavList from './NavList';
+import { useRecoilState } from 'recoil';
+import { useLogoutState } from '../../recoil/userList';
 
 const Aside = () => {
   const name = window.localStorage.getItem('name') as string;
+  const [islogout, setIslogout] = useRecoilState(useLogoutState);
+  const logoutHandler = () => {
+    console.log('실행됨');
+    setIslogout(!islogout);
+  };
 
   return (
     <>
@@ -16,6 +23,7 @@ const Aside = () => {
         <NavListContainer>
           <AsideTitle>대시보드</AsideTitle>
           <NavList />
+          <LogoutBtn onClick={logoutHandler}>로그아웃</LogoutBtn>
         </NavListContainer>
       </AsideContainer>
       <Outlet />
@@ -62,3 +70,12 @@ const NavListContainer = styled.ul`
   display: flex;
   flex-direction: column;
 `;
+const LogoutBtn = styled.button`
+  background-color: var(--gray);
+  border-radius: 8px;
+  color: var(--black2);
+  font-weight: 700;
+  font-size: 15px;
+  height: 44px;
+  margin-top: 356px;
+`;

src/components/modal/Logout.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import { useLogoutState } from '../../recoil/userList';
+
+export const Logout = () => {
+  const navigate = useNavigate();
+  const [islogout, setIslogout] = useRecoilState(useLogoutState);
+  const logoutHandler = () => {
+    localStorage.clear();
+    setIslogout(!islogout);
+
+    navigate('/');
+  };
+  return (
+    <Modalback>
+      <LogoutModal>
+        <div>
+          <LogoutSpan>정말 로그아웃 하시겠습니까?</LogoutSpan>
+        </div>
+
+        <SpanDiv>
+          <ReturnBtn onClick={() => setIslogout(!islogout)}>돌아가기</ReturnBtn>
+          <ConfirmBtn onClick={logoutHandler}>네</ConfirmBtn>
+        </SpanDiv>
+      </LogoutModal>
+    </Modalback>
+  );
+};
+
+const LogoutModal = styled.div`
+  width: 300px;
+  height: 182px;
+  margin: auto;
+  background-color: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  box-shadow: var(--box-shadow);
+  gap: 40px;
+`;
+const LogoutSpan = styled.span`
+  width: 145px;
+  height: 15px;
+  font-weight: 700;
+  font-size: 12px;
+`;
+const Modalback = styled.div`
+  background-color: rgba(0, 0, 0, 0);
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const SpanDiv = styled.div`
+  display: flex;
+  gap: 22px;
+`;
+const ReturnBtn = styled.button`
+  width: 73px;
+  height: 31px;
+  border: 1px solid var(--sub);
+  border-radius: 3px;
+`;
+const ConfirmBtn = styled.button`
+  width: 40px;
+  height: 31px;
+  background-color: var(--primary);
+  border-radius: 3px;
+  color: #ffffff;
+`;

src/recoil/userList.ts

@@ -8,6 +8,9 @@ export interface User {
   token: string;
   agreePi?: boolean;
 }
+export interface Logout {
+  islogout: boolean;
+}
 
 const USER_KEY = 'user';
 const Token_KEY = 'token';
@@ -29,5 +32,9 @@ const useAccountState = atom({
   default: [] as User[],
   effects: [localStorageEffect(Account_KEY)],
 });
+const useLogoutState = atom({
+  key: 'Logout',
+  default: false,
+});
 
-export { useInfoState, useUserState, useAccountState };
+export { useInfoState, useUserState, useAccountState, useLogoutState };

src/styles/globalstyle.ts

@@ -35,6 +35,7 @@ const globalStyle = createGlobalStyle`
     --primary:#5A3092;
     --sub:#E4CCFF;
     --black: #363630;
+    --black2:#4E4E4E;
     --gray: #F2F2F2;
     --gray2: #8f97b2;
     --heading1: 48px;