Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
messenger
Commits
bea5f2c2
Commit
bea5f2c2
authored
Jan 18, 2021
by
우지원
Browse files
Merge remote-tracking branch 'origin/young' into jiweon827
parents
65225ff9
b9c8ba1f
Changes
8
Hide whitespace changes
Inline
Side-by-side
client/package.json
View file @
bea5f2c2
...
...
@@ -2,6 +2,7 @@
"name"
:
"client"
,
"version"
:
"0.1.0"
,
"private"
:
true
,
"type"
:
"module"
,
"dependencies"
:
{
"@testing-library/jest-dom"
:
"^5.11.6"
,
"@testing-library/react"
:
"^11.2.2"
,
...
...
client/src/Components/Chat.js
View file @
bea5f2c2
...
...
@@ -24,7 +24,7 @@ function Chat(props) {
useEffect
(()
=>
{
setChat
([...
chat
,
props
.
singleChat
])
},
[
props
.
singleChat
])
useEffect
(()
=>
{
setChat
([...
chat
,
props
.
recievedMsg
])
},
[
props
.
recievedMsg
])
...
...
client/src/Pages/ProfilePage.js
View file @
bea5f2c2
...
...
@@ -3,35 +3,36 @@ 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
catchErrors
from
'
../utils/catchErrors
'
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
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: ''
//
}
const
INIT_USER
=
{
username
:
''
,
email
:
''
,
nickname
:
''
,
imageUrl
:
[]
}
function
ProfilePage
()
{
const
[
user
,
setUser
]
=
useState
(
''
)
const
[
user
,
setUser
]
=
useState
(
INIT_USER
)
const
[
error
,
setError
]
=
useState
(
''
)
const
[
userimg
,
setUserimg
]
=
useState
(
img2
)
const
[
defaultImg
,
setDefaultImg
]
=
useState
(
true
)
const
[
hidden
,
setHidden
]
=
useState
(
true
)
const
[
changed
,
setChanged
]
=
useState
(
false
)
const
userId
=
isAuthenticated
()
async
function
getLoginedUser
()
{
const
userid
=
sessionStorage
.
getItem
(
'
userId
'
)
const
response
=
await
axios
.
post
(
`/users/
${
userid
}
`
,
{
'
_id
'
:
userid
})
setUser
(
response
.
data
)
async
function
getProfile
(
userId
)
{
try
{
const
response
=
await
axios
.
get
(
`/users/
${
userId
}
`
)
setUser
(
response
.
data
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
function
handleSubmit
(
e
)
{
function
handleSubmit
HidVis
(
e
)
{
e
.
preventDefault
()
if
(
hidden
)
{
setHidden
(
false
)
...
...
@@ -40,80 +41,85 @@ function ProfilePage() {
}
}
function
handleChange
(
e
)
{
setUser
({
...
user
,
'
nickname
'
:
e
.
target
.
value
})
}
async
function
handleNicksave
()
{
const
userid
=
sessionStorage
.
getItem
(
'
userId
'
)
await
axios
.
put
(
`/users/
${
userid
}
`
,
user
)
const
{
name
,
value
,
files
}
=
e
.
target
if
(
files
)
{
setUser
({
...
user
,
[
name
]:
files
})
}
else
{
setUser
({
...
user
,
[
name
]:
value
})
}
setChanged
(
true
)
}
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
)
async
function
handleSubmit
(
e
)
{
e
.
preventDefault
()
if
(
changed
)
{
const
formData
=
new
FormData
()
if
(
user
.
imageUrl
)
{
formData
.
append
(
'
imageUrl
'
,
user
.
imageUrl
[
0
])
}
formData
.
append
(
'
newNickname
'
,
user
.
nickname
)
//얘네는 req.body로 들어감
try
{
if
(
userId
)
{
await
axios
.
put
(
`/users/
${
userId
}
`
,
formData
)
alert
(
'
저장되었습니다.
'
)
window
.
location
.
reload
()
}
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
}
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
);
};
else
{
alert
(
'
변경사항이 없습니다.
'
)
}
}
useEffect
(()
=>
{
getLoginedUser
()
},
[])
getProfile
(
userId
)
},
[
userId
])
// const [img, setImg] = useState('')
// function bbb(e) {
// const { name } = e.target
// let reader = new FileReader();
// reader.onload = function (e){
// console.log(e.target.result)
// // setImg(e.target.result)
// // setProfileimg
// // console.log(user,name)
// setUser({...user, [name]: e.target.result})
// };
// reader.readAsDataURL(e.target.files[0])
// )
return
(
<
div
>
<>
<
Menu
/>
<
Container
className
=
'
border
'
fluid
>
<
Row
>
<
Container
>
<
Row
>
<
Col
sm
=
{
4
}
>
<
Row
className
=
'
justify-content-center
'
>
<
div
className
=
"
d-flex ml-3 mt-3
"
id
=
"
defaultImg
"
>
<
Image
src
=
{
userimg
}
width
=
"
300px
"
roundedCircle
/>
<
/div
>
{
user
.
profileimg
?
<
Image
src
=
{
user
.
profileimg
&&
`/images/
${
user
.
profileimg
}
`
}
style
=
{{
width
:
"
300px
"
,
height
:
"
300px
"
}}
roundedCircle
/>
:
<
Image
src
=
'
https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f
'
style
=
{{
width
:
"
300px
"
,
height
:
"
300px
"
}}
roundedCircle
/>
}
{
/* {user.profileimg ? <><Image id='profileimg' src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height:
"300px"
}}
roundedCircle
hidden={!hidden}/> */
}
{
/* <Image id='profileimg' src={user.profileimg} style={{ width: "300px", height: "300px" }} roundedCircle hidden={hidden}/></> : <Image src='https://www.flaticon.com/svg/vstatic/svg/149/149071.svg?token=exp=1610922596~hmac=f4b972b9db509d4e3cc2eb40543b0b0f' style={{ width: "300px", height: "300px" }} roundedCircle />} */
}
<
/Row
>
<
Row
className
=
'
ml-3 mt-3 justify-content-center
'
>
<
Form
className
=
"
d-flex
"
>
<
Form
.
Group
>
<
div
id
=
"
image_container
"
><
/div
>
<
Form
.
File
label
=
"
프로필 사진 변경
"
accept
=
"
image
/*
"
onChange
=
{
setThumbnail
}
/
>
<
Form
.
Label
>
프로필
사진
변경
<
/Form.Label
>
<
Form
.
Control
type
=
'
file
'
name
=
'
image
Url
'
onChange
=
{
handleChange
}
accept
=
'
image/*
'
/>
<
/Form.Group
>
<
/Form
>
<
/Row
>
<
Row
className
=
"
d-flex justify-content-center mb-3
"
>
<
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
>
{
/*
{img?<Image src={img}/> : <h2>아직입니다.</h2>}
<Row className='ml-3 mt-3 justify-content-center'>
<Form className="d-flex">
<Form.Group>
<Form.Label>프로필 사진 변경</Form.Label>
<Form.Control type='file' name='profileimg' onChange={bbb} accept='image/*' />
</Form.Group>
</Form>
</Row> */
}
<
/Col
>
<
Col
sm
=
{
8
}
>
<
Row
className
=
'
m-5 justify-content-center
'
>
...
...
@@ -122,7 +128,6 @@ function ProfilePage() {
<
Row
className
=
"
m-3 justify-content-flex-start
"
style
=
{{
fontWeight
:
"
bold
"
,
fontSize
:
"
large
"
}}
>
<
Col
xs
=
{
3
}
>
이름
:
<
/Col
>
<
Col
xs
=
{
6
}
>
{
user
.
username
}
<
/Col
>
{
/* <Col sm={4}></Col> */
}
<
/Row
>
<
Row
className
=
"
m-3 justify-content-flex-start
"
id
=
"
nickname
"
style
=
{{
fontWeight
:
"
bold
"
,
fontSize
:
"
large
"
}}
>
<
Col
xs
=
{
3
}
>
별명
:
<
/Col
>
...
...
@@ -131,11 +136,11 @@ function ProfilePage() {
<
/Col
>
<
Col
xs
=
{
6
}
hidden
=
{
hidden
}
>
<
Form
>
<
Form
.
Control
defaultValue
=
{
user
.
nickname
}
style
=
{{
width
:
"
110%
"
}}
onChange
=
{
handleChange
}
/
>
<
Form
.
Control
defaultValue
=
{
user
.
nickname
}
name
=
'
nickname
'
style
=
{{
width
:
"
110%
"
}}
onChange
=
{
handleChange
}
/
>
<
/Form
>
<
/Col
>
<
Col
xs
=
{
3
}
>
<
Form
className
=
"
d-flex
"
onSubmit
=
{
handleSubmit
}
>
<
Form
className
=
"
d-flex
"
onSubmit
=
{
handleSubmit
HidVis
}
>
<
Button
className
=
"
ml-3 d-flex justify-content-end
"
variant
=
"
outline-primary
"
size
=
"
sm
"
type
=
'
submit
'
>
수정
<
/Button
>
<
/Form
>
<
/Col
>
...
...
@@ -145,8 +150,8 @@ function ProfilePage() {
<
Col
xs
=
{
6
}
>
{
user
.
email
}
<
/Col
>
<
/Row
>
<
Row
className
=
'
m-3 justify-content-center
'
>
<
Form
>
<
Button
variant
=
"
outline-success
"
size
=
"
sm
"
className
=
"
mr-4
"
onClick
=
{
handleNicksave
}
>
저장
<
/Button
>
<
Form
onSubmit
=
{
handleSubmit
}
>
<
Button
variant
=
"
outline-success
"
size
=
"
sm
"
className
=
"
mr-4
"
type
=
'
submit
'
>
저장
<
/Button
>
<
Link
to
=
'
/
'
>
<
Button
variant
=
"
outline-success
"
size
=
"
sm
"
className
=
"
ml-4
"
>
홈
화면으로
<
/Button
>
<
/Link
>
...
...
@@ -155,7 +160,7 @@ function ProfilePage() {
<
/Col
>
<
/Row
>
<
/Container
>
<
/
div
>
<
/
>
)
}
...
...
package.json
View file @
bea5f2c2
...
...
@@ -24,6 +24,7 @@
"
express
"
:
"
^4.17.1
"
,
"
jsonwebtoken
"
:
"
^8.5.1
"
,
"
mongoose
"
:
"
^5.11.9
"
,
"
multer
"
:
"
^1.4.2
"
,
"
nanoid
"
:
"
^3.1.20
"
,
"
nodemon
"
:
"
^2.0.6
"
,
"
socket.io
"
:
"
^3.0.5
"
,
...
...
server/controllers/user.controller.js
View file @
bea5f2c2
...
...
@@ -2,6 +2,12 @@ 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
multer
from
"
multer
"
;
const
upload
=
multer
({
dest
:
'
uploads/
'
})
const
profileUpload
=
upload
.
fields
([
{
name
:
'
imageUrl
'
,
maxCount
:
1
},
])
const
signup
=
async
(
req
,
res
)
=>
{
...
...
@@ -32,10 +38,7 @@ const signup = async (req, res) => {
email
,
password
:
hash
,
}).
save
()
console
.
log
(
newUser
)
res
.
json
(
newUser
)
}
catch
(
error
)
{
//알수없는 모든 에러발생시 처리
console
.
log
(
error
)
...
...
@@ -43,23 +46,44 @@ const signup = async (req, res) => {
}
}
const
logineduser
=
async
(
req
,
res
)
=>
{
const
update
=
async
(
req
,
res
)
=>
{
const
username
=
req
.
user
.
username
const
newNickname
=
req
.
body
.
newNickname
try
{
let
user
=
await
User
.
findOne
(
req
.
body
).
select
(
'
username email nickname
'
).
exec
()
return
res
.
json
(
user
)
await
User
.
updateOne
({
'
username
'
:
username
},
{
'
nickname
'
:
newNickname
})
let
imageUrl
=
''
if
(
req
.
files
[
'
imageUrl
'
])
{
imageUrl
=
req
.
files
[
'
imageUrl
'
][
0
]
}
const
user
=
req
.
user
if
(
req
.
files
[
'
imageUrl
'
])
{
user
.
profileimg
=
imageUrl
.
filename
//우리가 사용할 uesr.profileimg에다가 imageUrl의 filename을 저장
}
const
updatedUser
=
await
user
.
save
()
res
.
json
(
updatedUser
)
}
catch
(
error
)
{
alert
(
'
올바르지 못한 접근입니다.
'
)
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
프로필 업데이트 실패
'
)
}
}
const
changenick
=
async
(
req
,
res
)
=>
{
const
userById
=
async
(
req
,
res
,
next
,
id
)
=>
{
//id로 찾아와서 req.user를 우리가 찾는 user로 저장
try
{
const
newnick
=
req
.
body
.
nickname
await
User
.
updateOne
({
'
username
'
:
req
.
body
.
username
},
{
'
nickname
'
:
newnick
})
const
user
=
await
User
.
findById
(
id
)
if
(
!
user
)
{
res
.
status
(
404
).
send
(
'
사용자를 찾을 수 없습니다.
'
)
}
req
.
user
=
user
next
()
}
catch
(
error
)
{
alert
(
'
올바르지 못한 접근입니다.
'
)
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
사용자 아이디 검색 실패
'
)
}
}
const
getProfile
=
(
req
,
res
)
=>
{
res
.
json
(
req
.
user
)
}
const
loginNavbar
=
async
(
req
,
res
)
=>
{
try
{
...
...
@@ -70,5 +94,5 @@ const loginNavbar = async (req, res) => {
}
}
export
default
{
signup
,
logineduser
,
changenick
,
loginNavbar
}
// {} : 객체로 return
함
export
default
{
signup
,
profileUpload
,
update
,
userById
,
getProfile
,
loginNavbar
}
// {} : 객체로 return함
server/models/User.js
View file @
bea5f2c2
...
...
@@ -29,7 +29,10 @@ const UserSchema = new mongoose.Schema({
//정보를 찾을때 찾지 않게함
//플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
},
},{
profileimg
:
{
type
:
String
},
},
{
//옵셥을 정의함.
timestamps
:
true
//기본이 false로 되어있음
...
...
server/routes/user.routes.js
View file @
bea5f2c2
...
...
@@ -8,23 +8,10 @@ router.route('/users/signup')
.
post
(
userCtrl
.
signup
)
router
.
route
(
`/users/:userId`
)
.
post
(
userCtrl
.
logineduser
)
.
put
(
userCtrl
.
changenick
)
.
get
(
userCtrl
.
loginNavbar
)
.
get
(
userCtrl
.
getProfile
)
.
put
(
userCtrl
.
profileUpload
,
userCtrl
.
update
)
// router.param('userId', userCtrl.userById)
// router.route('/api/users/signup/:userId') //로그인한 사람의 정보만 가져오도록
// .get
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
//express middleware : (req, res) => {}
//node(req(client의 정보), res)를 넘겨줌.
router
.
param
(
'
userId
'
,
userCtrl
.
userById
)
export
default
router
\ No newline at end of file
server/server.js
View file @
bea5f2c2
...
...
@@ -43,6 +43,7 @@ io.on("connection", (socket) => { // 기본 연결
app
.
use
(
bodyParser
.
json
());
app
.
use
(
cors
());
app
.
use
(
'
/images
'
,
express
.
static
(
'
uploads/
'
))
app
.
use
(
userRouter
)
app
.
use
(
authRouter
)
app
.
use
(
roomRouter
)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment