ProfilePage.js 7.38 KB
Newer Older
JeongYeonwoo's avatar
JeongYeonwoo committed
1
import React, { useState, useEffect } from 'react';
우지원's avatar
ul    
우지원 committed
2
import ReactDOM from 'react-dom';
Choi Ga Young's avatar
Choi Ga Young committed
3
import Menu from '../Components/Menu';
JeongYeonwoo's avatar
JeongYeonwoo committed
4
import { Image, Button, Container, Form, FormControl, Navbar, Nav, Row, Col, Dropdown, Carousel } from 'react-bootstrap';
우지원's avatar
ul    
우지원 committed
5
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
JeongYeonwoo's avatar
   
JeongYeonwoo committed
6
import axios from 'axios'
우지원's avatar
ul    
우지원 committed
7

JeongYeonwoo's avatar
JeongYeonwoo committed
8
9
10
11
import userdefault from '../Images/KakaoTalk_20201230_153151693.png'
import img1 from '../Images/img_1.png'
import img2 from '../Images/img_2.png'
import img3 from '../Images/img_3.jpg'
JeongYeonwoo's avatar
JeongYeonwoo committed
12
import DropdownItem from 'react-bootstrap/esm/DropdownItem';
우지원's avatar
ul    
우지원 committed
13

JeongYeonwoo's avatar
   
JeongYeonwoo committed
14

JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
15
16
17
18
19
// const INIT_USER = {
//     username: '',
//     email: '',
//     nickname: ''
// }
우지원's avatar
ul    
우지원 committed
20

JeongYeonwoo's avatar
   
JeongYeonwoo committed
21
function ProfilePage() {
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
22
    const [user, setUser] = useState('')
우지원's avatar
ul    
우지원 committed
23

JeongYeonwoo's avatar
JeongYeonwoo committed
24
    const [userimg, setUserimg] = useState(img2)
JeongYeonwoo's avatar
   
JeongYeonwoo committed
25
26
    const [defaultImg, setDefaultImg] = useState(true)
    const [hidden, setHidden] = useState(true)
우지원's avatar
ul    
우지원 committed
27
28


JeongYeonwoo's avatar
JeongYeonwoo committed
29
30
31
    async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
        const userid = localStorage.getItem('user')
        const response = await axios.post(`/users/${userid}`, { 'email': userid })
JeongYeonwoo's avatar
   
JeongYeonwoo committed
32
33
        setUser(response.data)
    }
우지원's avatar
ul    
우지원 committed
34

JeongYeonwoo's avatar
JeongYeonwoo committed
35
36
    function handleSubmit(e) {
        e.preventDefault()
JeongYeonwoo's avatar
   
JeongYeonwoo committed
37
38
39
40
41
42
        if (hidden) {
            setHidden(false)
        } else {
            setHidden(true)
        }
    }
JeongYeonwoo's avatar
JeongYeonwoo committed
43
44
45
46
47
48
    function handleChange(e) {
        setUser({ ...user, 'nickname': e.target.value })
    }
    async function handleNicksave() {
        const userid = localStorage.getItem('user')
        await axios.put(`/users/${userid}`, user)
우지원's avatar
ul    
우지원 committed
49
50
51
52
53
54
55
56
57
    }

    function setThumbnail(event) {  //불러온 사진 <div id='image_container'>에 띄우기
        let reader = new FileReader();

        reader.onload = function (event) {
            let img = document.createElement("img");
            img.setAttribute("src", event.target.result);
            img.setAttribute("id", "profileImg")
JeongYeonwoo's avatar
   
JeongYeonwoo committed
58
59
            img.setAttribute("style", 'height:300px; width:300px')
            img.setAttribute("class", "mb-3")
우지원's avatar
ul    
우지원 committed
60
61
62
63
64
65
66
67
68
69
70
            // img.setAttribute("class","d-flex justify-content-center mb-3")
            document.querySelector("div#image_container").appendChild(img);
        };
        reader.readAsDataURL(event.target.files[0]);

        if (defaultImg) {   //첫 이미지 업로드(default이미지 지우고 유저가 올린걸로 업로드)
            let del = document.getElementById("defaultImg")
            del.remove()
            setDefaultImg(false)
        }
        else {  //기존에 올렸던 사진 지우고 재선택한 사진 업로드
JeongYeonwoo's avatar
   
JeongYeonwoo committed
71
            let del2 = document.getElementById('profileImg')
우지원's avatar
ul    
우지원 committed
72
73
74
75
76
77
            del2.remove()

            reader.onload = function (event) {
                let img = document.createElement("img");
                img.setAttribute("src", event.target.result);
                img.setAttribute("id", "profileImg")
JeongYeonwoo's avatar
   
JeongYeonwoo committed
78
                img.setAttribute("style", 'height:300px; width:300px')
우지원's avatar
ul    
우지원 committed
79
80
81
82
                document.querySelector("div#image_container").appendChild(img);
            };
        }
    }
JeongYeonwoo's avatar
JeongYeonwoo committed
83
84
85
86
87
88
89
90
91
    useEffect(() => {
        if (localStorage.getItem('user')) { //id뿐만아니라 토큰같은거를 확인 못하나 + 이런식으로 확인해도 되는것도 맞나
            getLoginedUser()
        }
        else {
            alert("로그인 후 이용하세요")
            window.location.href = '/login'
        }
    }, [])
JeongYeonwoo's avatar
   
JeongYeonwoo committed
92

우지원's avatar
ul    
우지원 committed
93
94
    return (
        <div>
Choi Ga Young's avatar
Choi Ga Young committed
95
            <Menu />
JeongYeonwoo's avatar
JeongYeonwoo committed
96
            <Container className='border' fluid>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
97
98
                <Row>
                    <Col sm={4}>
JeongYeonwoo's avatar
JeongYeonwoo committed
99
100
                        <Row className='justify-content-center'>
                            <div className="d-flex ml-3 mt-3" id="defaultImg">
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
101
102
103
                                <Image src={userimg} width="300px" roundedCircle />
                            </div>
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
104
105
                        <Row className='ml-3 mt-3 justify-content-center'>
                            <Form className="d-flex">
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
106
107
108
109
110
111
                                <Form.Group>
                                    <div id="image_container"></div>
                                    <Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} />
                                </Form.Group>
                            </Form>
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
112
                        <Row className="d-flex justify-content-center mb-3">
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
113
114
115
116
117
118
119
120
121
122
123
124
125
                            <Dropdown>
                                <Dropdown.Toggle variant='success' id='dropdown-basic'>
                                    프로필 사진 선택
                                </Dropdown.Toggle>
                                <Dropdown.Menu>
                                    <Dropdown.Item as='button'>홈으로</Dropdown.Item>
                                    <Dropdown.Item href='/'>라이언</Dropdown.Item>
                                    <Dropdown.Item href='/'>어피치</Dropdown.Item>
                                </Dropdown.Menu>
                            </Dropdown>
                        </Row>
                    </Col>
                    <Col sm={8}>
JeongYeonwoo's avatar
JeongYeonwoo committed
126
127
                        <Row className='m-5 justify-content-center'>
                            <h2>{user.username}님의 프로필 정보</h2>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
128
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
129
130
131
132
                        <Row className="m-3 justify-content-flex-start" style={{ fontWeight: "bold", fontSize: "large" }}>
                            <Col xs={3}>이름 :</Col>
                            <Col xs={6}>{user.username}</Col>
                            {/* <Col sm={4}></Col> */}
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
133
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
                        <Row className="m-3 justify-content-flex-start" id="nickname" style={{ fontWeight: "bold", fontSize: "large" }}>
                            <Col xs={3}>별명 :</Col>
                            <Col xs={6} hidden={!hidden}>
                                {user.nickname}
                            </Col>
                            <Col xs={6} hidden={hidden}>
                                <Form>
                                    <Form.Control defaultValue={user.nickname} style={{ width: "110%" }} onChange={handleChange} />
                                </Form>
                            </Col>
                            <Col xs={3}>
                                <Form className="d-flex" onSubmit={handleSubmit}>
                                    <Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
                                </Form>
                            </Col>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
149
                        </Row>
JeongYeonwoo's avatar
JeongYeonwoo committed
150
151
152
153
154
                        <Row className="m-3" style={{ fontWeight: "bold", fontSize: "large" }}>
                            <Col xs={3}>이메일 : </Col>
                            <Col xs={6}>{user.email}</Col>
                        </Row>
                        <Row className='m-3 justify-content-center'>
JeongYeonwoo's avatar
0113    
JeongYeonwoo committed
155
156
157
158
159
160
161
162
163
164
                            <Form>
                                <Button variant="outline-success" size="sm" className="mr-4" onClick={handleNicksave}>저장</Button>
                                <Link to='/'>
                                    <Button variant="outline-success" size="sm" className="ml-4" > 화면으로</Button>
                                </Link>
                            </Form>
                        </Row>
                    </Col>
                </Row>
            </Container>
우지원's avatar
ul    
우지원 committed
165
166
167
168
169
        </div>
    )
}

export default ProfilePage