Skip to content

GitLab

Commit 289b3608 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

ㅇ

parent 99a6f465
Show whitespace changes
Inline Side-by-side
client/package.json
View file @ 289b3608
......@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
......
client/src/Pages/ProfilePage.js
View file @ 289b3608
......@@ -3,53 +3,95 @@ 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 axios from 'axios'
import userdefault from './KakaoTalk_20201230_153151693.png'
//localStorage에 아이디? 가있는걸로 db에서 그 사람꺼 찾은(findOne 이런걸로) 다음에 닉네임도 불러오고 여기서 수정할 수 있는 기능을 만들자!
////////////////////////////////////////////////////////////////////////////////
// async function sending() {
// const info = await fetch(`/api/users/signup`, {
// method: "POST",
// headers: {
// "Content-type": 'application/json'
// },
// body: JSON.stringify({
// name: userName,
// email: userEmail,
// password: "123123123",
// nickname: userNickname
// })
// })
// const data = await info.json()
// console.log(data)
// }
////////////////////////////////////////////////////////////////////////////////
const INIT_USER = {
name: '',
email: '',
nickname: ''
}
const userName = "정연우";
const userEmail = "dusdn8455@korea.ac.kr";
let userNickname = "가나다라마바사";
function ProfilePage() {
const [user, setUser] = useState(INIT_USER)
const [defaultImg, setDefaultImg] = useState(true)
const [hidden, setHidden] = useState(true)
function setlocal() {
localStorage.setItem('_id', '5ff77d56da609732c001b392')
}
async function loginedinfo() {
const userid = localStorage.getItem('_id')
const response = await axios.post(`/api/users/${userid}`, user)
setUser(response.data[1])
console.log(user)
}
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
}
async function getInfo() { //db에서 로그인 정보 가져옴
const response = await axios.get('/api/users')
console.log(response.data)
setUser(response.data[1])
console.log(user)
}
async function makeLogin() { //로그인 상태로 만들어줌
const info = await axios.get('/api/users')
console.log('info', info.data)
setUser(info.data[1])
await axios.post(`/api/users/`, user)
localStorage.setItem('loginStatus', 'true')
localStorage.setItem('_id', user._id)
console.log(user)
}
function ProfilePage() {
const [tohome, setTohome] = useState(false)
const [defaultImg, setDefaultImg] = useState(true)
async function authinfo() { //id로 db에서 찾아오기
const userid = { '_id': localStorage.getItem('_id') }
const response = await axios.post(`/api/users/${userid._id}`, userid)
console.log(response.data)
setUser(response.data)
}
//@@그다음에 찾아온걸로 다시 띄우기
//@@닉네임 수정하기
function handleEditnick() {
if (hidden) {
setHidden(false)
} else {
setUser({ ...user, 'nickname': document.getElementById("inputNick").value })
setHidden(true)
}
}
async function handleNicksave(){
const userid = { '_id': localStorage.getItem('_id') }
await axios.put(`/api/users/${userid._id}`, user)
function goHome() {
return (setTohome(true))
}
function setThumbnail(event) { //불러온 사진 <div id='image_container'>에 띄우기
......@@ -59,43 +101,49 @@ function ProfilePage() {
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("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')
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')
img.setAttribute("style", 'height:300px; width:300px')
document.querySelector("div#image_container").appendChild(img);
};
}
}
return (
<div>
<Menu />
<Button onClick={setlocal}>로컬에 추가</Button>
<Button onClick={loginedinfo}>로그인된 정보 불러오기</Button>
<Button onClick={getInfo}>불러오기</Button>
<Button onClick={makeLogin}>로그인 상태로 만들기</Button>
<Button onClick={authinfo}>로그인 유저 불러오기</Button>
{/* <Button onClick={sending}>보내기</Button> */}
{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>
<h4 className="text-center mb-5">{user.name}님 환영합니다 !</h4>
<div className="d-flex justify-content-center mb-3" id="defaultImg">
<Image src={userdefault} width="300px" roundedCircle />
......@@ -110,16 +158,26 @@ function ProfilePage() {
</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 className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이름 : {user.name}</div>
<div className="m-3" id="nickname">
<Form className="d-flex justify-content-center" style={{ fontWeight: "bold", fontSize: "x-large" }}>
별명 :
<div id="mainNick" hidden={!hidden}>
{user.nickname}
</div>
<Form.Control id="inputNick" type="name" defaultValue={user.nickname} style={{ width: "40%" }} size="sm" hidden={hidden} />
<Button className="ml-3" variant="outline-primary" size="sm" onClick={handleEditnick}>수정</Button>
</Form>
</div>
<div className="m-3">이메일 : {userEmail}</div>
<div className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>이메일 : {user.email}</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>
<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>
</span>
</div>
</div>
......
package.json
View file @ 289b3608
......@@ -5,7 +5,9 @@
"main": "index.js",
"type": "module",
"dependencies": {
"bcryptjs": "^2.4.3",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.11.9",
"nodemon": "^2.0.6",
"validator": "^13.5.2"
......@@ -13,7 +15,7 @@
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"nodemon server/server.js"
"dev": "nodemon server/server.js"
},
"repository": {
"type": "git",
......
server/config.js
View file @ 289b3608
......@@ -2,7 +2,8 @@ const config = {
env: process.env.NODE_ENV || 'development',
port: process.env.PORT || 3030,
jwtSecret: process.env.JWT_SECRET || 'My_Secret_Key',
mongoDbUri: process.env.MONGODB_URI || 'mongodb://localhost/messenger'
mongoDbUri: process.env.MONGODB_URI || 'mongodb://localhost/messenger',
cookieMaxAge: 60 * 60 * 24 * 7 * 1000,
}
export default config
\ No newline at end of file
server/controllers/profile.controller.js 0 → 100644
View file @ 289b3608
import User from "../models/user.js"
import bcrypt from "bcryptjs";
import jwt from 'jsonwebtoken'
import config from "../config.js"
const mklogin = async (req, res) => {
const { email } = req.body
console.log(email)
try {
const user = await User.findOne({ email }).select('+name')
console.log(user.name, user.nickname, user.email)
const token = jwt.sign({ userId: user._id }, config.jwtSecret, {
expiresIn: '7d'
})
res.cookie('token', token, {
maxAge: config.cookieMaxAge,
httpOnly: true,
secure: config.env === 'production'
})
res.send('login successful')
}
catch (error){
console.log(error)
res.send(500).send('로그인에러')
}
}
const getinfo = (req, res) => {
// 1) 로그인 된 사용자 정보를 가져오기
// 일단 1명으로 해놓고 설정
// let users = await User.find().select('name nickname email password').exec()
// return res.json(users)
res.send('여기가 프로필이다.')
//try catch로 오류잡는거 추가해야함
}
export default { mklogin , getinfo }
\ No newline at end of file
server/controllers/user.controller.js
View file @ 289b3608
import User from "../models/User.js"
import isLength from 'validator/lib/isLength.js'
import isEmail from 'validator/lib/isEmail.js'
import bcrypt from "bcryptjs";
import jwt from 'jsonwebtoken'
import config from "../config.js"
//꼭 js붙여주기!!
//isEmail
//sign validation해야됨
const signup = async (req, res) => {
const { name, nickname, email, password } = req.body
//req.body를 구조분해하여 각각 보이게함 -> 모든정보들이 한줄에 보임
console.log(name, nickname, email, password)
// const { name, nickname, email, password } = req.body
// //req.body를 구조분해하여 각각 보이게함 -> 모든정보들이 한줄에 보임
// console.log(name, nickname, email, password)
// try {
// // if (!isLength(name, { min: 3, max: 10 })) {
// // //이범위를 벗어나면 error발생
// // return res.status(422).send('Name must be 3-10 characters')
// // //422 : 형식이 잘못되었다는 error발생
// // }
// // else if (!isLength(nickname, { min: 3, max: 10 })) {
// // return res.status(422).send('Nickname must be 3-10 characters')
// // }
// // else if (!isEmail(email, {
// // allow_display_name: true,
// // require_display_name: true,
// // allow_utf8_local_part: false,
// // })) {
// // return res.status(422).send('Email does not fit the format')
// // }
// // else if (!isLength(password, { min: 6, max: 25 })) {
// // return res.status(422).send('Nickname must be 6-25 characters')
// // }
// const hash = await bcrypt.hash(password, 10)
// const newUser = await new User({
// name,
// nickname,
// email,
// password : hash,
// //required를 하였기 때문에 이중 하나라도 없으면 에러 발생
// }).save()
// //save시 user schema형식에 맞는지 확인후 틀리면 error발생 맞으면 mongooDb로 들어감
// //save(promise)붙일 시 fuction 앞에 await 붙여주기 + async 함수 앞에 붙여주기
// console.log(newUser)
// res.json(newUser)
// } catch (error) {
// //알수없는 모든 에러발생시 처리
// console.log(error)
// res.status(500).send('User signup error')
// }
// //newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄
// //res : 응답하는 객체
// //응답안할 시 browser에서 빙빙돌다 에러 발생 -> 꼭 붙여줘야됨!
// //res는 한번만 실행. 두번하면 에러 발생
const { email } = req.body
console.log(email, 'ddd')
try {
const user = await User.findOne({ email }).select('+name')
console.log(user.name, user.nickname, user.email)
if (!isLength(name, { min: 3, max: 10 })) {
//이범위를 벗어나면 error발생
return res.status(422).send('Name must be 3-10 characters')
//422 : 형식이 잘못되었다는 error발생
} else if (!isLength(nickname, { min: 3, max: 10 })) {
return res.status(422).send('Nickname must be 3-10 characters')
} else if (!isEmail(email, {
allow_display_name: true,
require_display_name: true,
allow_utf8_local_part: false,
})) {
return res.status(422).send('Email does not fit the format')
} else if (!isLength(password, { min: 6, max: 25 })) {
return res.status(422).send('Nickname must be 6-25 characters')
const token = jwt.sign({ userId: user._id }, config.jwtSecret, {
expiresIn: '7d'
})
res.cookie('token', token, {
maxAge: config.cookieMaxAge,
httpOnly: true,
secure: config.env === 'production'
})
res.send('login successful')
}
const newUser = await new User({
name,
nickname,
email,
password,
//required를 하였기 때문에 이중 하나라도 없으면 에러 발생
}).save()
//save시 user schema형식에 맞는지 확인후 틀리면 error발생 맞으면 mongooDb로 들어감
//save(promise)붙일 시 fuction 앞에 await 붙여주기 + async 함수 앞에 붙여주기
console.log(newUser)
res.json(newUser)
} catch (error) {
//알수없는 모든 에러발생시 처리
catch (error) {
console.log(error)
res.status(500).send('User signup error')
res.send(500).send('로그인에러')
}
//newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄
//res : 응답하는 객체
//응답안할 시 browser에서 빙빙돌다 에러 발생 -> 꼭 붙여줘야됨!
//res는 한번만 실행. 두번하면 에러 발생
}
const hello = (req, res) => {
res.send('Hello from users controller')
// const list=async(req, res)=>{
// let users = await User.find().select('name nickname email password').exec()
// return res.json(users)
// }
const hello = async (req, res) => {
let users = await User.find().select('name nickname email _id').exec()
return res.json(users)
}
const authuser = async (req, res) => {
let user = await User.findOne( req.body ).select('name email nickname').exec()
console.log(user)
return res.json(user)
}
export default { signup, hello }
const chnick = async (req, res) =>{
let user = {"dusdn":"ddd"}
console.log("변경~")
return res.json(user)
}
export default { signup, hello, authuser, chnick }
// {} : 객체로 return함
\ No newline at end of file
server/routes/profile.routes.js 0 → 100644
View file @ 289b3608
import express from 'express'
import profileCtrl from "../controllers/profile.controller.js";
const router = express.Router()
router.route('/api/profile')
.post(profileCtrl.mklogin)
.get(profileCtrl.getinfo)
export default router
\ No newline at end of file
server/routes/user.routes.js
View file @ 289b3608
......@@ -4,10 +4,21 @@ import userCtrl from '../controllers/user.controller.js'
const router = express.Router()
//router의 역할 : './주소'부분을 처리하는 역할함.
router.route('/api/users/signup')
router.route('/api/users/')
.post(userCtrl.signup)
.get(userCtrl.hello)
router.route(`/api/users/:userId`)
.post(userCtrl.authuser)
.put(userCtrl.chnick)
// router.route('/api/users/signup/:userId') //로그인한 사람의 정보만 가져오도록
// .get
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
......
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