MainLayer.js 2.61 KB
Newer Older
Spark's avatar
layout    
Spark committed
1
import React from 'react'
Spark's avatar
Spark committed
2
3
import { Button, Image, Row, ButtonGroup, } from 'react-bootstrap';
import { Link } from 'react-router-dom';
Spark's avatar
layout    
Spark committed
4
import '../App.css'
5
import LocalCode from '../components/LocalCode';
Spark's avatar
client    
Spark committed
6
import { kakaoLogout } from '../utils/Oauth';
7

Spark's avatar
layout    
Spark committed
8
9
10
11
12
13
14

function MainLayer() {

    const boxstyled = {
        border: 'solid',
        color: 'rgba(195, 195, 195, 0.753)',
        borderRadius: '20px',
15
        borderWidth: '3px',
Spark's avatar
layout    
Spark committed
16
17
18
        marginBottom: '1em',
        width: '100%',
        backgroundSize: 'contain',
19
20
        margin: 'auto',
        textDecorationColor: 'none'
Spark's avatar
layout    
Spark committed
21
22
23
24
    }

    const btnstyled = {
        background: 'rgb(110, 189, 142)',
Spark's avatar
Spark committed
25
26
        margin: 'auto',
        marginBottom: '0.5em',
Spark's avatar
layout    
Spark committed
27
28
        display: 'flex',
        justifyContent: 'center',
Spark's avatar
Spark committed
29
        width: '100%',
Spark's avatar
layout    
Spark committed
30
31
32
        borderWidth: '2px',
        borderColor: 'rgba(195, 195, 195, 0.753)',
        borderRadius: '20px',
33
34
        textDecorationColor: 'none',
        color: 'white'
Spark's avatar
layout    
Spark committed
35
36
    }

Spark's avatar
Spark committed
37
    const logined = localStorage.getItem('nickname')
Spark's avatar
layout    
Spark committed
38
39
40
41

    return (
        <>
            <Row className='d-flex align-items-center m-auto w-100'>
42
43
44
                <Link to='/' className=' m-auto'>
                    <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
                </Link>
Spark's avatar
layout    
Spark committed
45
46
            </Row>

47
48
49
50
51
            <Row className='m-auto d-flex justify-content-center w-100'>
                <LocalCode />
            </Row>
            <Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
                <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
Spark's avatar
Spark committed
52
                    {logined ?
Spark's avatar
Spark committed
53
54
                        //true
                        <Button variant='light' style={btnstyled} onClick={kakaoLogout}>
55
56
57
                            로그아웃
                        </Button>
                        :
Spark's avatar
Spark committed
58
                        //false
Spark's avatar
Spark committed
59
60
61
62
                        <Button variant='light' style={btnstyled}>
                            <Link to='/login' id='btnlink'>
                                로그인
                            </Link>
63
64
                        </Button>
                    }
Spark's avatar
Spark committed
65
                    {!logined &&
Spark's avatar
Spark committed
66
67
68
69
70
71
                        <Button variant='light' style={btnstyled}>
                            <Link to='/signup' id='btnlink'>
                                회원가입
                            </Link>
                        </Button>
                    }
Spark's avatar
Spark committed
72

Spark's avatar
layout    
Spark committed
73
74
                </ButtonGroup>
            </Row>
75
76
77
            <Row className='m-auto justify-content-center w-100' id='contour'>
                |
            </Row>
Spark's avatar
layout    
Spark committed
78
79
80
81
82
        </>
    );
}

export default MainLayer