Repository navigation
Expand file tree
/
Copy pathHeader.js
More file actions
110 lines (105 loc) · 4.35 KB
/
Copy pathHeader.js
File metadata and controls
110 lines (105 loc) · 4.35 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
import React, { useState, useEffect } from "react";
import { Title, Icon, Logo, Profile, Button } 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 { Modal } from "../elements/Tools/Modal";
const Header = (props) => {
const [is_login, setIsLogin] = useState(false);
// const [ownerId, setOwnerId] = useState("");
const [accountId, setAccountId] = useState("");
const [modalOpen, setModalOpen] = useState(false);
let navigate = useNavigate();
let nickname = "";
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
useEffect(() => {
// const cookie = getCookie("access_token");
const session = sessionStorage.getItem("access_token");
const account_id = getCookie("account_id");
if (session) {
setIsLogin(true);
// setOwnerId(account_id);
setAccountId(account_id);
} else {
setIsLogin(false);
}
}, []);
const goToMyPage = () => {
const ownerId = sessionStorage.getItem("account_id");
navigate(`/myspace/myprofile/${ownerId}`, {
state: {
nickname: { nickname },
owner_id: { ownerId },
},
});
};
return (
<div className="bg-gradient-to-r from-[#A162F7] to-[#6F88FC] h-32 md:h-[30rem] relative w-[1920px] mx-auto">
<div className="w-[1620px] flex justify-between mx-auto">
<div className="hidden w-[1620px] lg:flex lg:flex-row md:h-[7.8rem] lg:w-4/6 xl:w-3/4 ml-auto text-white md:pl-10 xl:pl-10 2xl:pl-1">
{/* <Title size="6"><Link to="/">홈</Link></Title> */}
<div className="flex mx-auto md:absolute md:top-[2.25rem] md:left-[9.375rem] py-5 md:py-0 ">
<Link to="/">
<Logo name="DplusCF" logoSizeW="200" logoSizeH="59" />
</Link>
</div>
<div className="flex items-center gap-8 md:absolute md:top-[2.7rem] md:left-[26rem]">
<Title size="6">
<Link to="/art/list/all">모아보기</Link>
</Title>
<Title size="6">
<Link to="/dimo/qna/uiux">디모</Link>
</Title>
{is_login && (
<Title size="6" onClick={goToMyPage} className="cursor-pointer">
마이페이지
</Title>
)}
</div>
</div>
{is_login ? (
<>
<div className="xl:absolute xl:right-10 2xl:right-36 top-8">
<div className="flex flex-row items-center justify-center gap-5">
<Button size="3" color="7">
<Link to="/createart">작업 업로드</Link>
</Button>
<div onClick={() =>
Swal.fire({
icon: 'success',
title: '로그아웃 되었습니다',
showConfirmButton: false,
timer: 1000
})}>
<Link to="/logout">
<Title size="6">로그아웃</Title>
</Link>
</div>
</div>
</div>
</>
) : (
<>
<Title
size="6"
className="cursor-pointer xl:absolute xl:right-10 2xl:right-36 top-12"
onClick={openModal}
>
<Icon name="User" />
</Title>
<Modal open={modalOpen} close={closeModal} header="">
<main> {props.children} </main>
</Modal>
</>
)}
</div>
</div>
);
};
export default Header;