import React, { useState, useEffect } from 'react' import Menu from '../Components/Menu'; import { Image, Button, Container, Form, Row, Col, Dropdown } from 'react-bootstrap'; import { BrowserRouter as Link } from 'react-router-dom'; import axios from 'axios' 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' import DropdownItem from 'react-bootstrap/esm/DropdownItem'; // const INIT_USER = { // username: '', // email: '', // nickname: '' // } function ProfilePage() { const [user, setUser] = useState('') const [userimg, setUserimg] = useState(img2) const [defaultImg, setDefaultImg] = useState(true) const [hidden, setHidden] = useState(true) async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ const userid = sessionStorage.getItem('userId') const response = await axios.post(`/users/${userid}`, { '_id': userid }) setUser(response.data) } function handleSubmit(e) { e.preventDefault() if (hidden) { setHidden(false) } else { setHidden(true) } } function handleChange(e) { setUser({ ...user, 'nickname': e.target.value }) } async function handleNicksave() { const userid = sessionStorage.getItem('userId') await axios.put(`/users/${userid}`, user) } 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); }; } } useEffect(() => { getLoginedUser() }, []) return (
프로필 사진 선택 홈으로 라이언 어피치

{user.username}님의 프로필 정보

이름 : {user.username} {/* */} 별명 : {user.nickname}
이메일 : {user.email}
) } export default ProfilePage