UserInfo.js 5.21 KB
Newer Older
1
2
import React, { useState, useEffect } from 'react'
import { Row, Card, Button, Col } from 'react-bootstrap';
3
import '../App.css'
Spark's avatar
Spark committed
4
import { Link } from 'react-router-dom';
5
import { callUserInfo } from '../utils/CheckDB';
6
import { isLogined } from '../utils/Auth';
7
8


Spark's avatar
Spark committed
9
function UserInfo() {
Spark's avatar
Spark committed
10

11
12
    const cardstyled = {
        margin: 'auto',
Spark's avatar
Spark committed
13
        padding: '1em 0.5em 1em 0.5em',
14
15
16
17
18
19
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
        borderWidth: '3px',
        borderRadius: '20px',
        borderColor: 'rgba(195, 195, 195, 0.753)',
Spark's avatar
Spark committed
20
        color: 'rgb(110, 189, 142)',
21
    }
22

23
24
25
26
    const btnstyled2 = {
        background: 'white',
        margin: 'auto',
        borderWidth: '2px',
Spark's avatar
Spark committed
27
        fontSize: '0.7em',
28
29
        color: 'rgb(110, 189, 142)',
        borderColor: 'rgba(195, 195, 195, 0.753)',
Spark's avatar
Spark committed
30
        width: '50%'
31
    }
Spark's avatar
Spark committed
32

33
34
35
36
37
    const [userNick, setUserNick] = useState('')
    const [createdTime, setCreatedTime] = useState('')

    useEffect(() => {
        callUserInfo().then((res) => {
38
            if (isLogined()) {
39
40
41
42
43
44
45
46
                setUserNick(res[0]['nick_name'])
                const dateStr = res[0]['created_at'].split('T')[0].split('-')
                const now = new Date();

                const year = now.getFullYear(); // 년
                const month = now.getMonth() + 1; // 월 0부터 시작
                const day = now.getDate(); // 일

47
                const stDate = new Date(dateStr[0], dateStr[1], dateStr[2]) // 가입 날짜
48

49
                const endDate = new Date(year, month, day) // 현재 시간
50
51

                const btMs = endDate.getTime() - stDate.getTime() // 주어진 날짜 사이의 경과 시간 (밀리 초)
52

53
                const btDay = btMs / (1000 * 60 * 60 * 24) // 초 -> 일
54
55
56
57

                setCreatedTime(btDay)
            }
        })
58
    }, [])
59

60
61
    const [showState, setShowState] = useState('')
    const [localState, setLocalState] = useState([])
62
63
64
65
66

    useEffect(() => {
        // user-info 에서 loc_code
        callUserInfo().then((res) => {
            if (isLogined()) {
67
68
69
70
71
72
73
74
75
                const dbloc = res[0].loc_code
                if (dbloc === null) {
                    setShowState('지역을 입력해주세요')
                    const localstyle = document.getElementById('local_state')
                    localstyle.style.display = 'none'
                }
                else {
                    const localName = res[0].loc_name
                    setLocalState(localName)
76
77
78
                }
            }
        })
79
80
    }, [])

81

82
    return (
83
84
85
86
        <Col className='text-center pt-3 pb-2 px-0'>
            <Card style={cardstyled} id='localName'>
                <Card.Title>
                    <strong>
87
                        {isLogined() ?
88
89
90
91
92
93
94
                            <h3>
                                {`${userNick}`}
                            </h3>
                            :
                            <h3>
                                GUEST
                            </h3>
Spark's avatar
Spark committed
95
                        }
96
97
98
99
100
101
102
103
                    </strong>
                    <p style={{ fontWeight: '300', margin: '0' }}>
                        환영합니다
                    </p>
                </Card.Title>
                <hr />
                <Row style={{ alignItems: 'center', margin: 'auto', justifyContent: 'center' }}>
                    <Card.Subtitle>
104
                        {isLogined() ?
105
106
107
108
109
110
111
112
113
114
115
116
117
118
                            <div className='mb-2'>
                                <div>
                                    {showState}
                                </div>

                                <div id='local_state'>
                                    {`${localState['doe']}`}
                                    <br />
                                    {`${localState['sgg']}`}
                                    <br />
                                    {`${localState['emd']}`}
                                </div>

                            </div>
119
                            :
120
                            <div className='mb-2'>
121
                                로그인  이용 가능합니다
122
                            </div>
123
124
                        }
                    </Card.Subtitle>
125

126
                    {isLogined() &&
127
128
129
130
131
                        <Button variant='light' className='m-auto d-flex' style={btnstyled2}>
                            <Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
                                변경
                            </Link>
                        </Button>
Spark's avatar
Spark committed
132
                    }
133
                </Row>
134
                {isLogined() &&
135
136
137
138
139
140
                    <Card.Text>
                        <hr />
                        <Row style={{ color: 'black' }}>
                            <p style={{ fontWeight: '300', margin: '0' }}>
                                환경을 향한 노력
                            </p>
141
                            <h3 style={{ fontWeight: '300', color: '#2b90d9', margin: '0' }}>
142
                                <strong>{createdTime}</strong> 일
143
144
145
146
147
148
149
150
                            </h3>

                        </Row>

                    </Card.Text>
                }
            </Card>
        </Col>
151
152
    )
}
Spark's avatar
Spark committed
153
export default UserInfo;