import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import Menu from '../Components/Menu'; 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 = (
별명 :
{/*
*/}
) ReactDOM.render(html, document.getElementById("nickname")) } function editNickname2() { //수정버튼 누르면 다시 원래대로 돌아가게 함 changeNickname() const html = (
별명 : {userNickname}
) 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) { //불러온 사진
에 띄우기 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 (
{tohome ? : ''}

Profile Page

{userName}님 환영합니다 !

이름 : {userName}
별명 : {userNickname}
이메일 : {userEmail}
) } export default ProfilePage