Menu.js 3.05 KB
Newer Older
Ha YeaJin's avatar
pages    
Ha YeaJin committed
1
import React, { useState, useEffect } from 'react';
CHAERIN KIM's avatar
CHAERIN KIM committed
2
import { Link, Redirect } from 'react-router-dom';
Ha YeaJin's avatar
pages    
Ha YeaJin committed
3
import styled from 'styled-components';
Ha YeaJin's avatar
Ha YeaJin committed
4
5
import { Navbar, Nav, NavLink } from 'react-bootstrap';
import axios from 'axios';
Ha YeaJin's avatar
pages    
Ha YeaJin committed
6

Ha YeaJin's avatar
Ha YeaJin committed
7
const MENU = styled(Navbar)`
Ha YeaJin's avatar
Ha YeaJin committed
8
    background-color: #7B031D;
Ha YeaJin's avatar
Ha YeaJin committed
9
10
11
12

    a {
        color : white;
    }
Ha YeaJin's avatar
pages    
Ha YeaJin committed
13
14
15
`

function Menu() {
CHAERIN KIM's avatar
CHAERIN KIM committed
16
    const [state, setState] = useState()
Ha YeaJin's avatar
Ha YeaJin committed
17
    const [user, setUser] = useState({ role: "" })
CHAERIN KIM's avatar
CHAERIN KIM committed
18
    const name = localStorage.getItem('name');
Ha YeaJin's avatar
Ha YeaJin committed
19

CHAERIN KIM's avatar
CHAERIN KIM committed
20
    function logout() {
CHAERIN KIM's avatar
CHAERIN KIM committed
21
        localStorage.clear();
CHAERIN KIM's avatar
CHAERIN KIM committed
22
        alert("로그아웃 되었습니다.");
CHAERIN KIM's avatar
CHAERIN KIM committed
23
24
25
        setState(true);
    }

Ha YeaJin's avatar
Ha YeaJin committed
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    useEffect(() => {
        acheck();
    }, [])

    function acheck() {
        axios.get(`/users/${localStorage.getItem('_id')}`)
            .then(res => {
                if (res.data.role == "admin") {
                    setUser(res.data)
                }
            }).catch(err => {
                alert(err.error)
            });
    }

Ha YeaJin's avatar
Ha YeaJin committed
41
    if (state) return <Redirect to="/" />
Ha YeaJin's avatar
pages    
Ha YeaJin committed
42
    return (
Ha YeaJin's avatar
Ha YeaJin committed
43
44
45
46
47
        <MENU expand="md" variant="dark">
            <Navbar.Brand href="#">대관 서비스</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
Ha YeaJin's avatar
Ha YeaJin committed
48
49
50
51
                    <NavLink as={Link} to="/notice">공지사항</NavLink>
                    <NavLink as={Link} to="/home">대관 현황</NavLink>

                    <NavLink as={Link} to={{
Ha YeaJin's avatar
Ha YeaJin committed
52
53
                        pathname: `/apply/${localStorage.getItem('_id')}`,
                        state: { id: localStorage.getItem('_id') },
Ha YeaJin's avatar
Ha YeaJin committed
54
55
56
                    }} className="nav-link">대관 신청</NavLink>

                    <NavLink as={Link} to={{
Ha YeaJin's avatar
Ha YeaJin committed
57
58
59
                        pathname: `/check/${localStorage.getItem('_id')}`,
                        state: { id: localStorage.getItem('_id') },
                    }} className="nav-link">
Ha YeaJin's avatar
Ha YeaJin committed
60
61
                        대관 확인/취소</NavLink>

Ha YeaJin's avatar
Ha YeaJin committed
62
63
64
65
66
67
                    {user.role === "admin" ? (
                        <NavLink as={Link} to={{
                            pathname: `/acheck/${localStorage.getItem('_id')}`,
                            state: { id: localStorage.getItem('_id') },
                        }} className="nav-link">
                            대관 확인/취소(관리자)</NavLink>) : null}
Ha YeaJin's avatar
Ha YeaJin committed
68
69
70
71
72
73
                </Nav>
                <Nav >
                    <NavLink>
                        <small className="d-flex flex-row justify-content-end">
                            <div className="text-white text-right font-weight-light pr-2">{name}</div>
                            <NavLink className="p-0" as={Link} to={{
Ha YeaJin's avatar
Ha YeaJin committed
74
75
                                pathname: `/change/${localStorage.getItem('_id')}`,
                                state: { id: localStorage.getItem('_id') },
Ha YeaJin's avatar
Ha YeaJin committed
76
77
                            }}>  비밀번호 변경 </NavLink> / <NavLink className="p-0" onClick={logout} > 로그아웃</NavLink></small>
                    </NavLink>
Ha YeaJin's avatar
Ha YeaJin committed
78
79
80
                </Nav>
            </Navbar.Collapse>
        </MENU >
Ha YeaJin's avatar
pages    
Ha YeaJin committed
81
82
83
84
    )
}

export default Menu