-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathHeaderMini.js
More file actions
125 lines (115 loc) · 4.45 KB
/
Copy pathHeaderMini.js
File metadata and controls
125 lines (115 loc) · 4.45 KB
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, { useState, useEffect } from "react";
import { Title, Image, Logo, Profile, Icon } from "../elements";
import { getCookie } from "../shared/cookie";
import { useDispatch } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";
import { useToggle } from "../hooks";
import { Modal } from "../elements/Tools/Modal";
import tw from "tailwind-styled-components";
// const MiniBtn = tw.button`
// xl:hidden bg-yellow-300 rounded-full fixed top-0
// `;
const ProfileBox = tw.div`
lg:hidden absolute top-0 w-full z-50 h-20
`;
const MobileBtn = tw.button`
bg-dpurple-200 rounded-full p-2 xl:hidden absolute top-10 left-5 text-white shadow-md
animate-bounce
`;
const HeaderMini = (props) => {
let navigate = useNavigate();
const [is_login, setIsLogin] = useState(false);
const [nickname, setNickname] = useState("");
const [ownerId, setOwnerId] = useState("");
const [accountId, setAccountId] = useState("");
const [showCategory, setShowCategory] = useToggle();
const [modalOpen, setModalOpen] = useState(false);
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
useEffect(() => {
const cookie = getCookie("access_token");
const nickname = getCookie("nickname");
const account_id = getCookie("account_id");
// console.log(nickname);
if (cookie) {
setIsLogin(true);
setNickname(nickname);
setOwnerId(account_id);
setAccountId(account_id);
} else {
setIsLogin(false);
}
}, []);
const goToMyPage = () => {
navigate(`/myspace/myprofile/${ownerId}`, {
state: {
nickname: { nickname },
owner_id: { ownerId },
},
});
};
return (
<>
<ProfileBox>
<div className="flex flex-row items-center justify-center gap-5 py-5 mt-16 text-white sm:py-0 md:mt-24 ">
<Title size="6" className="">
<Link to="/art/list/all">모아보기</Link>
</Title>
<Title size="6">
<Link to="/dimo/qna/uiux">디모</Link>
</Title>
{is_login ? (
<>
<div onClick={() =>
Swal.fire({
icon: 'success',
title: '로그아웃 되었습니다',
showConfirmButton: false,
timer: 1000
})}>
<Title size="6">
<Link to="/logout">로그아웃</Link>
</Title>
</div>
</>
) : (
<>
<MobileBtn onClick={openModal}>
<Icon name="User" />
</MobileBtn>
<Modal open={modalOpen} close={closeModal} header="">
<main> {props.children} </main>
</Modal>
</>
)}
{is_login && (
<>
<Title size="6" onClick={goToMyPage}>
마이페이지
</Title>
<Title size="1" onClick={() =>
Swal.fire({
icon: 'success',
title: '로그아웃 되었습니다',
showConfirmButton: false,
timer: 1000
})}>
<Link to="/logout">
<Profile size="6" className="" />
</Link>
</Title>
</>
)}
</div>
</ProfileBox>
{/* <MiniBtn onClick={setShowCategory}>{showCategory ? <>close</> : <>open!</>}</MiniBtn>
{showCategory && <></>} */}
</>
);
};
export default HeaderMini;