MainLayer.js 3.19 KB
Newer Older
Spark's avatar
Spark committed
1
2
import React, { useEffect, useState } from 'react'
import { Button, Image, Row, ButtonGroup, Form, Col } from 'react-bootstrap';
Spark's avatar
Spark committed
3
import { Link } from 'react-router-dom';
Spark's avatar
layout    
Spark committed
4
import '../App.css'
Spark's avatar
Spark committed
5
import UserInfo from './UserInfo';
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

Spark's avatar
Spark committed
39
40
41
42
43
44
45
    const [airUsing, setAirUsing] = useState(false)

    function aircondiCheck() {
        setAirUsing(!airUsing)
        localStorage.setItem('using-aircondition', !airUsing);
    }

Spark's avatar
layout    
Spark committed
46
    return (
Spark's avatar
Spark committed
47
        <Col>
Spark's avatar
layout    
Spark committed
48
            <Row className='d-flex align-items-center m-auto w-100'>
49
50
51
                <Link to='/' className=' m-auto'>
                    <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
                </Link>
Spark's avatar
layout    
Spark committed
52
53
            </Row>

54
            <Row className='m-auto d-flex justify-content-center w-100'>
Spark's avatar
Spark committed
55
                <UserInfo />
56
            </Row>
Spark's avatar
Spark committed
57
58
59
60
61
62
63
64
65
66
            <Form
                key='checkbox' className="d-flex  justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
                <Form.Check
                    type='switch'
                    id='aircondition-checkbox'
                    label='에어컨 사용중'
                    onChange={aircondiCheck}
                />
            </Form>

67
68
            <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
69
                    {logined ?
Spark's avatar
Spark committed
70
71
                        //true
                        <Button variant='light' style={btnstyled} onClick={kakaoLogout}>
72
73
74
                            로그아웃
                        </Button>
                        :
Spark's avatar
Spark committed
75
                        //false
Spark's avatar
Spark committed
76
77
78
79
                        <Button variant='light' style={btnstyled}>
                            <Link to='/login' id='btnlink'>
                                로그인
                            </Link>
80
81
                        </Button>
                    }
Spark's avatar
Spark committed
82
                    {!logined &&
Spark's avatar
Spark committed
83
84
85
86
87
88
                        <Button variant='light' style={btnstyled}>
                            <Link to='/signup' id='btnlink'>
                                회원가입
                            </Link>
                        </Button>
                    }
Spark's avatar
Spark committed
89

Spark's avatar
layout    
Spark committed
90
91
                </ButtonGroup>
            </Row>
92
93
94
            <Row className='m-auto justify-content-center w-100' id='contour'>
                |
            </Row>
Spark's avatar
Spark committed
95
        </Col>
Spark's avatar
layout    
Spark committed
96
97
98
99
    );
}

export default MainLayer