-
Notifications
You must be signed in to change notification settings - Fork 0
/
Layout.jsx
70 lines (61 loc) · 1.54 KB
/
Layout.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { useEffect } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";
import {
clearLocal,
gettingLocal,
settingLocal,
} from "component/common/localStorage";
import styled from "styled-components";
import { useSelector } from "react-redux";
const Layout = () => {
const navigate = useNavigate();
const { data, status } = useSelector((store) => store.users.userData);
const token = gettingLocal("token");
const userInfo = {
id: data?.userId,
nickname: data?.nickname,
avatar: data?.avatar,
success: data?.success,
};
if (!token) {
alert("다시 로그인 해주세요!");
navigate("/", { replace: true });
}
const onLogout = () => {
clearLocal("token");
alert("로그아웃 되셨습니다!");
navigate("/", { replace: true });
};
console.log(userInfo);
useEffect(() => {
settingLocal("user", userInfo);
}, []);
return (
<div>
<Header>
<Link to="/home">HOME</Link>
<ProfileLogoutNav>
<Link to="/myprofile">
<p>내 프로필</p>
</Link>
<LogoutBtn onClick={onLogout}>로그아웃</LogoutBtn>
</ProfileLogoutNav>
</Header>
<Outlet />
</div>
);
};
export default Layout;
export const Header = styled.header`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20px;
`;
export const ProfileLogoutNav = styled.nav`
display: flex;
align-items: center;
gap: 20px;
`;
export const LogoutBtn = styled.button``;