ProfilePage.js 5.77 KB
Newer Older
우지원's avatar
ul    
우지원 committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import { Image, Button, Container, Form, FormControl, Navbar, Nav } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';

import userdefault from './KakaoTalk_20201230_153151693.png'


const userName = "정연우";
const userEmail = "dusdn8455@korea.ac.kr";
let userNickname = "가나다라마바사";



function editNickname1() {  //수정버튼 누르면 재입력하게 함
    const html = (
        <Form>
            <div className="d-flex justify-content-center">
                별명 : <Form.Control className="" id="editBlock" style={{ width: "40%" }} size="sm" type="id" defaultValue={userNickname} />
                <Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname2}>수정</Button>
            </div>
            {/* 
            <div>
                <Image src={pic} width="300px" roundedCircle />

            </div> */}
        </Form>
    )
    ReactDOM.render(html, document.getElementById("nickname"))
}
function editNickname2() {   //수정버튼 누르면 다시 원래대로 돌아가게 함
    changeNickname()
    const html = (
        <div>
            별명 : {userNickname}
            <Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname1}>수정</Button>
        </div>
    )
    ReactDOM.render(html, document.getElementById("nickname"))
}
function changeNickname() {  //수정버튼 누르면 닉네임 변경해줌
    let editedNickname = document.getElementById("editBlock")
    userNickname = editedNickname.value
}

function ProfilePage() {
    const [tohome, setTohome] = useState(false)
    const [defaultImg, setDefaultImg] = useState(true)

    function goHome() {
        return (setTohome(true))
    }

    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")
            img.setAttribute("style",'height:300px; width:300px')
            img.setAttribute("class","mb-3")
            // 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 {  //기존에 올렸던 사진 지우고 재선택한 사진 업로드
            let del2= document.getElementById('profileImg')
            del2.remove()

            reader.onload = function (event) {
                let img = document.createElement("img");
                img.setAttribute("src", event.target.result);
                img.setAttribute("id", "profileImg")
                img.setAttribute("style",'height:300px; width:300px')
                document.querySelector("div#image_container").appendChild(img);
            };
        }
    }


    return (
        <div>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
                <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName}  환영합니다</div>
                <Nav className="mr-auto">
                    <Nav.Link href="/homepage">Home</Nav.Link>
                    <Nav.Link href="/profilepage">Profile</Nav.Link>
                    <Nav.Link href="/hello">Hello</Nav.Link>
                </Nav>
                <Button variant="light" className="ml-3">Logout</Button>
            </Navbar>

            {tohome ? <Redirect to='/homepage' /> : ''}
            <Container className="d-flex justify-content-center">
                <div className="mt-5 shadow w-75">
                    <h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1>
                    <h4 className="text-center mb-5">{userName} 환영합니다 !</h4>

                    <div className="d-flex justify-content-center mb-3" id="defaultImg">
                        <Image src={userdefault} width="300px" roundedCircle />
                    </div>
                    <div className="d-flex justify-content-center">
                        <Form className="d-flex justify-content-center">
                            <Form.Group>
                                <div id="image_container"></div>
                                <Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} />
                            </Form.Group>
                        </Form>
                    </div>

                    <div className="text-center">
                        <div className="m-3">이름 : {userName}</div>
                        <div className="m-3" id="nickname">별명 : {userNickname}
                            <Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname1}>수정</Button>
                        </div>
                        <div className="m-3">이메일 : {userEmail}</div>
                    </div>
                    <div className="text-center m-5">
                        <span>
                            <Button variant="outline-success" size="sm" className="mr-4">저장</Button>
                            <Button variant="outline-success" size="sm" className="ml-4" onClick={goHome}> 화면으로</Button>
                        </span>
                    </div>
                </div>
            </Container>

        </div>
    )
}

export default ProfilePage