ProfilePage.js

// import React, { useState, useEffect } from 'react';
// import ReactDOM from 'react-dom';
// import Menu from '../Components/Menu';
// import { Image, Button, Container, Form, FormControl, Navbar, Nav, Row, Col, Dropdown, Carousel } from 'react-bootstrap';
// import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
// import axios from 'axios'

// // import userdefault from './KakaoTalk_20201230_153151693.png'
// import userimg from './KakaoTalk_20201230_153151693.png'
// // import img1 from './img_1.png'
// // import img2 from './img_2.png'
// // import img3 from './img_3.jpg'
// import DropdownItem from 'react-bootstrap/esm/DropdownItem';


// const INIT_USER = {
//     username: '',
//     email: '',
//     nickname: ''
// }

// function ProfilePage() {
//     const [user, setUser] = useState(INIT_USER)

//     // const [userimg, setUserimg] = useState(img2)
//     const [defaultImg, setDefaultImg] = useState(true)
//     const [hidden, setHidden] = useState(true)


//     async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
//         const userid = localStorage.getItem('user')
//         const response = await axios.post(`/users/${userid}`, { 'email': userid })
//         setUser(response.data)
//     }

//     function handleSubmit(e) {
//         e.preventDefault()
//         if (hidden) {
//             setHidden(false)
//         } else {
//             setHidden(true)
//         }
//         console.log(document.cookie)
//     }
//     function handleChange(e) {
//         setUser({ ...user, 'nickname': e.target.value })
//     }
//     async function handleNicksave() {
//         const userid = localStorage.getItem('user')
//         await axios.put(`/users/${userid}`, user)
//     }

//     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);
//             };
//         }
//     }
//     useEffect(() => {
//         if (localStorage.getItem('user')) { //id뿐만아니라 토큰같은거를 확인 못하나 + 이런식으로 확인해도 되는것도 맞나
//             getLoginedUser()
//         }
//         else {
//             alert("로그인 후 이용하세요")
//             window.location.href = '/login'
//         }
//     }, [])

//     return (
//         <div>
//             <Menu />
//             <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">{user.username}님 환영합니다 !</h4>

//                     <div className="d-flex justify-content-center mb-3" id="defaultImg">
//                         <Image src={userimg} width="300px" roundedCircle />
//                     </div>
//                     <Row 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>
//                     </Row>
//                     <Row className="d-flex justify-content-center">
//                         <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>
//                     {/* <Carousel className="d-flex justify-content-center" style={{ width: "300px", height: "300px" }}>
//                         <Carousel.Item className="d-flex justify-content-center">
//                             <Image
//                                 className="d-block w-100"
//                                 src={img1}
//                             />
//                             <Carousel.Caption>
//                                 <p style={{color : 'black'}}>펭수입니다.</p>
//                             </Carousel.Caption>
//                         </Carousel.Item>
//                         <Carousel.Item>
//                             <Image
//                                 className="d-block w-100"
//                                 src={img2}
//                             />
//                             <Carousel.Caption>
//                                 <p>라이언입니다.</p>
//                             </Carousel.Caption>
//                         </Carousel.Item>
//                         <Carousel.Item>
//                             <Image
//                                 className="d-block w-100"
//                                 src={img3}
//                             />
//                             <Carousel.Caption>
//                                 <p>어피치 입니다.</p>
//                             </Carousel.Caption>
//                         </Carousel.Item>
//                     </Carousel> */}
//                     <div className="text-center">
//                         <div className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이름 : {user.username}</div>
//                         <div className="m-3" id="nickname">
//                             <Form className="d-flex justify-content-center" onSubmit={handleSubmit} style={{ fontWeight: "bold", fontSize: "x-large" }}>
//                                 별명 :
//                                 <div hidden={!hidden}>
//                                     {user.nickname}
//                                 </div>
//                                 <Form.Control defaultValue={user.nickname} style={{ width: "40%" }} size="sm" onChange={handleChange} hidden={hidden} />
//                                 <Button className="ml-3" variant="outline-primary" size="sm" type='submit'>수정</Button>
//                             </Form>

//                         </div>
//                         <div className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이메일 : {user.email}</div>
//                     </div>
//                     <div className="text-center m-5">
//                         <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>
//                     </div>
//                 </div>
//             </Container>

//         </div>
//     )
// }

// export default ProfilePage