Skip to content

GitLab

Commit e15228f3 authored by 우지원's avatar 우지원
Browse files

0113

parent a3d225ab
Show whitespace changes
Inline Side-by-side
client/src/Components/Menu.js
View file @ e15228f3
import React from 'react' // import axios from 'axios';
// import { response } from 'express';
import React, { useState, useEffect } from 'react';
import { Navbar, Nav, Button } from 'react-bootstrap'; import { Navbar, Nav, Button } from 'react-bootstrap';
import { handleLogout, isAuthenticated } from '../utils/auth'; import { handleLogout, isAuthenticated } from '../utils/auth';
// const INIT_USER = {
// username: ''
// }
function Menu() { function Menu() {
const userName = "정연우"; const userName = "정연우";
const user = isAuthenticated() const user = isAuthenticated()
// const [userName, setUsername] = useState(INIT_USER)
// async function getLoginedUser() {
// const userId = localStorage.getItem('user')
// const response = await axios.get(`/users/${userId}`)
// setUsername(response.data)
// }
// useEffect((user) => {
// if (localStorage.getItem('user')) {
// getLoginedUser(user)
// }
// }, [])
return ( return (
<Navbar bg="dark" variant="dark"> <Navbar bg="dark" variant="dark">
...@@ -12,7 +33,7 @@ function Menu() { ...@@ -12,7 +33,7 @@ function Menu() {
{user ? {user ?
<> <>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div> <div className='ml-1 mr-2' style={{ color: 'white' }}>{response.data} 님 환영합니다</div>
<Nav className="mr-auto"> <Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link> <Nav.Link href="/home">Home</Nav.Link>
<Nav.Link href="/profile">Profile</Nav.Link> <Nav.Link href="/profile">Profile</Nav.Link>
......
client/src/Pages/LogInPage.js
View file @ e15228f3
...@@ -49,8 +49,8 @@ function LogIn() { ...@@ -49,8 +49,8 @@ function LogIn() {
setError('') setError('')
const response = await axios.post('/auth/login', user) const response = await axios.post('/auth/login', user)
// 알아서 stringify하기 때문에 따로 해줄 필요 없음. // 알아서 stringify하기 때문에 따로 해줄 필요 없음.
console.log(user.email) console.log(response.data)
handleLogin(user.email) handleLogin(response.data.userId)
setSucces(true) setSucces(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
......
client/src/Pages/ProfilePage.js
View file @ e15228f3
import React, { useState } from 'react'; // import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom'; // import ReactDOM from 'react-dom';
import Menu from '../Components/Menu'; // import Menu from '../Components/Menu';
import { Image, Button, Container, Form } from 'react-bootstrap'; // import { Image, Button, Container, Form, FormControl, Navbar, Nav, Row, Col, Dropdown, Carousel } from 'react-bootstrap';
import { Redirect } from 'react-router-dom'; // import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
// import axios from 'axios'
import userdefault from './KakaoTalk_20201230_153151693.png'
// // import userdefault from './KakaoTalk_20201230_153151693.png'
// import userimg from './KakaoTalk_20201230_153151693.png'
const userName = "정연우"; // // import img1 from './img_1.png'
const userEmail = "dusdn8455@korea.ac.kr"; // // import img2 from './img_2.png'
let userNickname = "가나다라마바사"; // // import img3 from './img_3.jpg'
// import DropdownItem from 'react-bootstrap/esm/DropdownItem';
function editNickname1() { //수정버튼 누르면 재입력하게 함 // const INIT_USER = {
const html = ( // username: '',
<Form> // email: '',
<div className="d-flex justify-content-center"> // nickname: ''
별명 : <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> // function ProfilePage() {
{/* // const [user, setUser] = useState(INIT_USER)
<div>
<Image src={pic} width="300px" roundedCircle /> // // const [userimg, setUserimg] = useState(img2)
// const [defaultImg, setDefaultImg] = useState(true)
</div> */} // const [hidden, setHidden] = useState(true)
</Form>
)
ReactDOM.render(html, document.getElementById("nickname")) // async function getLoginedUser() { //email로 db에서 찾아오기 ㅇㅇㅇㅇㅇ
} // const userid = localStorage.getItem('user')
function editNickname2() { //수정버튼 누르면 다시 원래대로 돌아가게 함 // const response = await axios.post(`/users/${userid}`, { 'email': userid })
changeNickname() // setUser(response.data)
const html = ( // }
<div>
별명 : {userNickname} // function handleSubmit(e) {
<Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname1}>수정</Button> // e.preventDefault()
</div> // if (hidden) {
) // setHidden(false)
ReactDOM.render(html, document.getElementById("nickname")) // } else {
} // setHidden(true)
function changeNickname() { //수정버튼 누르면 닉네임 변경해줌 // }
let editedNickname = document.getElementById("editBlock") // console.log(document.cookie)
userNickname = editedNickname.value // }
} // function handleChange(e) {
// setUser({ ...user, 'nickname': e.target.value })
function ProfilePage() { // }
const [tohome, setTohome] = useState(false) // async function handleNicksave() {
const [defaultImg, setDefaultImg] = useState(true) // const userid = localStorage.getItem('user')
// await axios.put(`/users/${userid}`, user)
function goHome() { // }
return (setTohome(true))
} // function setThumbnail(event) { //불러온 사진 <div id='image_container'>에 띄우기
// let reader = new FileReader();
function setThumbnail(event) { //불러온 사진 <div id='image_container'>에 띄우기
let reader = new FileReader(); // reader.onload = function (event) {
// let img = document.createElement("img");
reader.onload = function (event) { // img.setAttribute("src", event.target.result);
let img = document.createElement("img"); // img.setAttribute("id", "profileImg")
img.setAttribute("src", event.target.result); // img.setAttribute("style", 'height:300px; width:300px')
img.setAttribute("id", "profileImg") // img.setAttribute("class", "mb-3")
img.setAttribute("style",'height:300px; width:300px') // // img.setAttribute("class","d-flex justify-content-center mb-3")
img.setAttribute("class","mb-3") // document.querySelector("div#image_container").appendChild(img);
// img.setAttribute("class","d-flex justify-content-center mb-3") // };
document.querySelector("div#image_container").appendChild(img); // reader.readAsDataURL(event.target.files[0]);
};
reader.readAsDataURL(event.target.files[0]); // if (defaultImg) { //첫 이미지 업로드(default이미지 지우고 유저가 올린걸로 업로드)
// let del = document.getElementById("defaultImg")
// del.remove()
if (defaultImg) { //첫 이미지 업로드(default이미지 지우고 유저가 올린걸로 업로드) // setDefaultImg(false)
let del = document.getElementById("defaultImg") // }
del.remove() // else { //기존에 올렸던 사진 지우고 재선택한 사진 업로드
setDefaultImg(false) // let del2 = document.getElementById('profileImg')
} // del2.remove()
else { //기존에 올렸던 사진 지우고 재선택한 사진 업로드
let del2= document.getElementById('profileImg') // reader.onload = function (event) {
del2.remove() // let img = document.createElement("img");
// img.setAttribute("src", event.target.result);
reader.onload = function (event) { // img.setAttribute("id", "profileImg")
let img = document.createElement("img"); // img.setAttribute("style", 'height:300px; width:300px')
img.setAttribute("src", event.target.result); // document.querySelector("div#image_container").appendChild(img);
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 {
return ( // alert("로그인 후 이용하세요")
<div> // window.location.href = '/login'
<Menu /> // }
// }, [])
{tohome ? <Redirect to='/homepage' /> : ''}
<Container className="d-flex justify-content-center"> // return (
<div className="mt-5 shadow w-75"> // <div>
<h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1> // <Menu />
<h4 className="text-center mb-5">{userName}님 환영합니다 !</h4> // <Container className="d-flex justify-content-center">
// <div className="mt-5 shadow w-75">
<div className="d-flex justify-content-center mb-3" id="defaultImg"> // <h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1>
<Image src={userdefault} width="300px" roundedCircle /> // <h4 className="text-center mb-5">{user.username}님 환영합니다 !</h4>
</div>
<div className="d-flex justify-content-center"> // <div className="d-flex justify-content-center mb-3" id="defaultImg">
<Form className="d-flex justify-content-center"> // <Image src={userimg} width="300px" roundedCircle />
<Form.Group> // </div>
<div id="image_container"></div> // <Row className="d-flex justify-content-center">
<Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} />
</Form.Group> // <Form className="d-flex justify-content-center">
</Form> // <Form.Group>
</div> // <div id="image_container"></div>
// <Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} />
<div className="text-center"> // </Form.Group>
<div className="m-3">이름 : {userName}</div> // </Form>
<div className="m-3" id="nickname">별명 : {userNickname} // </Row>
<Button className="ml-3" variant="outline-primary" size="sm" onClick={editNickname1}>수정</Button> // <Row className="d-flex justify-content-center">
</div> // <Dropdown>
<div className="m-3">이메일 : {userEmail}</div> // <Dropdown.Toggle variant='success' id='dropdown-basic'>
</div> // 프로필 사진 선택
<div className="text-center m-5"> // </Dropdown.Toggle>
<span> // <Dropdown.Menu>
<Button variant="outline-success" size="sm" className="mr-4">저장</Button> // <Dropdown.Item as='button'>홈으로</Dropdown.Item>
<Button variant="outline-success" size="sm" className="ml-4" onClick={goHome}>홈 화면으로</Button> // <Dropdown.Item href='/'>라이언</Dropdown.Item>
</span> // <Dropdown.Item href='/'>어피치</Dropdown.Item>
</div> // </Dropdown.Menu>
</div> // </Dropdown>
</Container> // </Row>
// {/* <Carousel className="d-flex justify-content-center" style={{ width: "300px", height: "300px" }}>
</div> // <Carousel.Item className="d-flex justify-content-center">
) // <Image
} // className="d-block w-100"
// src={img1}
export default ProfilePage // />
// <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
\ No newline at end of file
client/src/utils/auth.js
View file @ e15228f3
import axios from "axios" import axios from "axios"
//자동으로 localstorage에 login이 생성됨 //자동으로 localstorage에 login이 생성됨
export function handleLogin(userEmail) { export function handleLogin(userId) {
localStorage.setItem('user', userEmail) localStorage.setItem('user', userId)
// localStorage.setItem('user', JSON.stringify({email: props.email})) // localStorage.setItem('user', JSON.stringify({email: props.email}))
} }
export async function handleLogout() { export async function handleLogout() {
...@@ -14,9 +14,9 @@ export async function handleLogout() { ...@@ -14,9 +14,9 @@ export async function handleLogout() {
//login이 됬는지 안됬는지 따질때 쓰임 //login이 됬는지 안됬는지 따질때 쓰임
export function isAuthenticated() { export function isAuthenticated() {
const userEmail = localStorage.getItem('user') const userId = localStorage.getItem('user')
if (userEmail) { if (userId) {
return userEmail return userId
} else { } else {
return false return false
} }
......
package.json
View file @ e15228f3
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1", "express": "^4.17.1",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"mongoose": "^5.11.9", "mongoose": "^5.11.9",
......
server/controllers/auth.controller.js
View file @ e15228f3
...@@ -25,7 +25,7 @@ const login = async (req, res) => { ...@@ -25,7 +25,7 @@ const login = async (req, res) => {
// 4) 비밀번호가 맞으면 토큰 생성 후 쿠키에 저장 // 4) 비밀번호가 맞으면 토큰 생성 후 쿠키에 저장
if (passwordMatch) { if (passwordMatch) {
//토큰 생성 //토큰 생성
const token = jwt.sign({ userEmail: user.email}, config.jwtSecret, {expiresIn: '7d'}) const token = jwt.sign({ userId: user._id}, config.jwtSecret, {expiresIn: '7d'})
//jwtSecret : 노출되면 안됨. 문자열 //jwtSecret : 노출되면 안됨. 문자열
//expiresIn: '7d' -> 만기날짜 : 만든 7일후 만기 //expiresIn: '7d' -> 만기날짜 : 만든 7일후 만기
...@@ -39,7 +39,7 @@ const login = async (req, res) => { ...@@ -39,7 +39,7 @@ const login = async (req, res) => {
secure: config.env === 'production', secure: config.env === 'production',
//secure가 true이면 http로 접근하면 cookie가 들어가지 않음. //secure가 true이면 http로 접근하면 cookie가 들어가지 않음.
}) })
res.send({ userEmail: user.email}) res.send({ userId: user._id})
} else { } else {
// 5) 비밀번호가 틀리면 에러 반환 // 5) 비밀번호가 틀리면 에러 반환
......
server/controllers/user.controller.js
View file @ e15228f3
...@@ -68,6 +68,35 @@ const signup = async (req, res) => { ...@@ -68,6 +68,35 @@ const signup = async (req, res) => {
//res는 한번만 실행. 두번하면 에러 발생 //res는 한번만 실행. 두번하면 에러 발생
} }
const loginNavbar = async (req, res) => {
try {
let user = await User.findOne(req.body).select('username').exec()
return res.json(user)
} catch (error) {
alert('올바르지 못한 접근입니다.')
}
}
// const loginNavbar = (req, res) => {
// res.json(req.login)
// }
// const userById = async (req, res, next, id) => {
// try {
// const user = await User.findById(id)
// if (!user) {
// res.status(404).send('사용자를 찾을 수 없습니다.')
// }
// req.login = user
// //req에 profile을 만들어서 user를 저장해줌
// next()
// //다음 middleware로 이동시킴 / 없으면 멈춤
// } catch (error) {
// console.log(error)
// res.status(500).send('사용자 아이디 검색 실패')
// }
// }
export default { signup } export default { signup ,loginNavbar }
// {} : 객체로 return함 // {} : 객체로 return함
\ No newline at end of file
server/routes/user.routes.js
View file @ e15228f3
...@@ -7,6 +7,10 @@ const router = express.Router() ...@@ -7,6 +7,10 @@ const router = express.Router()
router.route('/users/signup') router.route('/users/signup')
.post(userCtrl.signup) .post(userCtrl.signup)
router.route('/users/:userId')
.get(userCtrl.loginNavbar)
// router.param('userId', userCtrl.userById)
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함 // /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임 //browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment