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
09af2954
Commit
09af2954
authored
Jan 02, 2021
by
Soo Hyun Kim
Browse files
Merge remote-tracking branch 'origin/young' into soo-12-28
parents
b7b9b6c2
c4848cf1
Changes
22
Hide whitespace changes
Inline
Side-by-side
client/.gitignore
View file @
09af2954
...
@@ -25,4 +25,4 @@ yarn-error.log*
...
@@ -25,4 +25,4 @@ yarn-error.log*
package-lock.json
package-lock.json
.eslintcache
.eslintcache
debug.log
debug.log
.env
.env
\ No newline at end of file
client/package.json
View file @
09af2954
...
@@ -37,5 +37,6 @@
...
@@ -37,5 +37,6 @@
"last 1 firefox version"
,
"last 1 firefox version"
,
"last 1 safari version"
"last 1 safari version"
]
]
}
},
"proxy"
:
"http://localhost:3030"
}
}
client/src/Components/Chat.js
0 → 100644
View file @
09af2954
import
React
from
'
react
'
;
import
{
Form
,
Button
}
from
'
react-bootstrap
'
;
function
Chat
(
props
)
{
return
(
<
div
className
=
"
chat
"
id
=
"
chat
"
style
=
{{
border
:
"
2px solid
"
,
height
:
"
300%
"
,
margin
:
"
1%
"
,
borderColor
:
"
#BDBDBD
"
}}
>
<
Button
variant
=
"
light
"
onClick
=
{
props
.
handleChatc
}
>
{
`<`
}
<
/Button
>
<
Form
>
<
Form
.
Group
>
<
Form
.
Control
type
=
"
text
"
/>
<
/Form.Group
>
<
Button
variant
=
"
primary
"
type
=
"
submit
"
>
전송
<
/Button
>
<
/Form
>
<
/div
>
);
}
export
default
Chat
;
client/src/Components/ClosedList.js
0 → 100644
View file @
09af2954
import
React
,
{
useState
}
from
'
react
'
import
{
ListGroup
}
from
'
react-bootstrap
'
;
function
ClosedList
()
{
const
[
list
,
setList
]
=
useState
([
{
room
:
'
테스트 방1
'
,
memnum
:
5
,
admin
:
'
가영
'
},
{
room
:
'
테스트 방2
'
,
memnum
:
4
,
admin
:
'
수현
'
}]
);
return
(
<
div
>
{
list
.
map
((
list
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
>
<
h2
>
{
list
.
room
}
<
/h2
>
<
/ListGroup.Item
>
<
/ListGroup
>
)}
<
/div
>
)
}
export
default
ClosedList
client/src/Components/Menu.js
0 → 100644
View file @
09af2954
import
React
from
'
react
'
import
{
Navbar
,
Nav
,
Button
}
from
'
react-bootstrap
'
;
function
Menu
()
{
const
userName
=
"
정연우
"
;
return
(
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Navbar
.
Brand
href
=
"
/home
"
>
YDK
Messenger
<
/Navbar.Brand
>
<
div
className
=
'
ml-1 mr-2
'
style
=
{{
color
:
'
white
'
}}
>
{
userName
}
님
환영합니다
<
/div
>
<
Nav
className
=
"
mr-auto
"
>
<
Nav
.
Link
href
=
"
/home
"
>
Home
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/profile
"
>
Profile
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/hello
"
>
Hello
<
/Nav.Link
>
<
/Nav
>
<
Button
variant
=
"
light
"
className
=
"
ml-3
"
>
Logout
<
/Button
>
<
/Navbar
>
)
}
export
default
Menu
client/src/Components/OpenList.js
0 → 100644
View file @
09af2954
import
React
,
{
useState
}
from
'
react
'
import
{
ListGroup
}
from
'
react-bootstrap
'
;
function
OpenList
()
{
const
[
list
,
setList
]
=
useState
([
{
room
:
'
테스트 방3
'
,
memnum
:
7
,
admin
:
'
가영2
'
},
{
room
:
'
테스트 방4
'
,
memnum
:
2
,
admin
:
'
수현2
'
}]
);
return
(
<
div
>
{
list
.
map
((
list
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
>
<
h2
>
{
list
.
room
}
<
/h2
>
<
/ListGroup.Item
>
<
/ListGroup
>
)}
<
/div
>
)
}
export
default
OpenList
client/src/Hello.js
View file @
09af2954
import
{
Button
,
Navbar
,
Nav
,
Form
,
FormControl
}
from
'
react-bootstrap
'
;
import
React
from
'
react
'
import
React
from
'
react
'
const
userName
=
"
정연우
"
;
function
Hello
(
props
)
{
function
Hello
(
props
)
{
console
.
log
(
props
)
console
.
log
(
props
)
return
(
return
(
<>
<>
<
h1
>
Hello
<
/h1
>
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Navbar
.
Brand
href
=
"
/homepage
"
>
YDK
Messenger
<
/Navbar.Brand
>
<
div
className
=
'
ml-1 mr-2
'
style
=
{{
color
:
'
white
'
}}
>
{
userName
}
님
환영합니다
<
/div
>
<
Nav
className
=
"
mr-auto
"
>
<
Nav
.
Link
href
=
"
/homepage
"
>
Home
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/profilepage
"
>
Profile
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/hello
"
>
Hello
<
/Nav.Link
>
<
/Nav
>
{
/* <Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-info">Search</Button>
</Form> */
}
<
Button
variant
=
"
light
"
className
=
"
ml-3
"
>
Logout
<
/Button
>
<
/Navbar
>
<
h1
>
hello
<
/h1
>
<
div
>
<
div
>
안녕하세요
.
{
props
.
name
}
님
안녕하세요
.{
props
.
name
}
<
/div
>
<
/div
>
<
input
/>
<
input
className
=
"
input
"
/>
<
/
>
<
/
>
)
)
}
export
default
Hello
// import React from 'react'
}
// function Hello(props) {
// }
export
default
Hello
;
\ No newline at end of file
client/src/Pages/HomePage.js
View file @
09af2954
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
ListGroup
,
Col
,
Row
,
Modal
,
Button
,
Form
,
Alert
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Modal
,
Button
}
from
'
react-bootstrap
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
Tabs
from
'
react-bootstrap/Tabs
'
;
import
randCode
from
'
../randCode
'
import
Tab
from
'
react-bootstrap/Tab
'
;
// import randomN from './RandomN';
import
ClosedList
from
'
../Components/ClosedList
'
;
import
OpenList
from
'
../Components/OpenList
'
;
import
Chat
from
'
../Components/Chat
'
;
import
Menu
from
'
../Components/Menu
'
;
// import styled from 'styled-components';
function
Home
()
{
// const List = styled.div`
const
[
list
,
setList
]
=
useState
([
// background: #FFFAFA;
{
room
:
'
테스트 방1
'
,
memnum
:
5
,
admin
:
'
가영
'
},
// `
{
room
:
'
테스트 방2
'
,
memnum
:
4
,
admin
:
'
수현
'
}]
);
const
[
show
,
setShow
]
=
useState
(
false
);
const
handleClose
=
()
=>
setShow
(
false
);
const
handleShow
=
()
=>
setShow
(
true
);
const
[
show2
,
setShow2
]
=
useState
(
false
);
const
handleClose2
=
()
=>
setShow2
(
false
);
const
handleShow2
=
()
=>
setShow2
(
true
);
const
[
checkedI
,
setCheckedI
]
=
useState
(
false
);
const
codeClose
=
()
=>
setCheckedI
(
false
);
const
codeShow
=
()
=>
setCheckedI
(
true
);
const
[
showCode
,
setCode
]
=
useState
(
false
);
const
handleCloseCode
=
()
=>
setCode
(
false
);
function
Home
()
{
const
handleShowCode
=
()
=>
setCode
(
true
);
const
[
show
,
setShow
]
=
useState
(
false
);
const
[
chat
,
setChat
]
=
useState
(
false
);
return
(
const
handleClose
=
()
=>
setShow
(
false
);
<
div
className
=
"
container
"
>
const
handleShow
=
()
=>
setShow
(
true
);
<
div
className
=
"
list
"
>
const
handleChato
=
()
=>
setChat
(
true
);
<
Col
md
=
{
6
}
>
const
handleChatc
=
()
=>
setChat
(
false
);
{
list
.
map
(
list
=>
// variant="pills"
<
ListGroup
>
<
ListGroup
.
Item
action
>
return
(
<
h2
>
{
list
.
room
}
<
/h2
>
<>
<
p
><
/p
>
<
Menu
/>
<
/ListGroup.Item
>
<
Row
className
=
"
mr-0
"
>
<
/ListGroup
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
)}
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
/Col
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
/div
>
<
ClosedList
/>
<
div
className
=
"
right
"
>
<
/Tab
>
<
button
variant
=
"
primary
"
onClick
=
{
handleShow
}
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
>
생성
<
OpenList
/>
<
/button
>
<
/Tab
>
<
/Tabs
>
<
button
variant
=
"
primary
"
onClick
=
{
handleShow2
}
>
<
/Col
>
참가
<
Col
style
=
{{
padding
:
"
0
"
}}
>
<
/button
>
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
/> : null
}
<
Modal
show
=
{
show
}
onHide
=
{
handleClose
}
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShow
}
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
10px
"
,
right
:
"
10px
"
}}
>
<
Modal
.
Header
closeButton
>
생성
<
Modal
.
Title
>
방
생성
<
/Modal.Title
>
<
/Button
>
<
/Modal.Header
>
<
Modal
.
Body
>
<
Modal
show
=
{
show
}
onHide
=
{
handleClose
}
>
<
Form
onSubmit
=
{
handleShowCode
}
>
<
Modal
.
Header
closeButton
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formChatTitle
"
>
<
Modal
.
Title
>
방
생성
<
/Modal.Title
>
<
Form
.
Label
column
sm
=
{
4
}
>
방
이름
<
/Form.Label
>
<
/Modal.Header
>
<
Col
>
<
Modal
.
Body
>
여기에
form
입력
<
/Modal.Body
>
<
Form
.
Control
type
=
"
text
"
/>
<
Modal
.
Footer
>
<
/Col
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleClose
}
>
<
/Form.Group
>
생성
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formInterest
"
>
<
/Button
>
<
Form
.
Label
column
sm
=
{
4
}
>
관심
분야
<
/Form.Label
>
<
/Modal.Footer
>
<
Col
>
<
/Modal
>
<
Form
.
Control
as
=
"
select
"
defaultValue
=
"
Choose...
"
>
<
/Col
>
<
option
>
Choose
...
<
/option
>
<
/Row
>
<
option
>
과학
<
/option
>
<
/
>
<
option
>
수학
<
/option
>
);
<
option
>
예술
<
/option
>
<
option
>
언어
<
/option
>
<
option
>
취미
<
/option
>
<
/Form.Control
>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formBasicCheckbox
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
공개방
<
/Form.Label
>
<
Col
>
<
Form
.
Check
type
=
"
checkbox
"
checked
=
{
checkedI
}
onChange
=
{()
=>
setCheckedI
(
!
checkedI
)}
/
>
<
/Col
>
<
/Form.Group
>
{
(
checkedI
)
?
(
<
p
><
b
>
공개방
<
/b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</
p
>
)
:
(
<
p
><
b
>
비밀방
<
/b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</
p
>
)
}
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
방
생성
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
<
/Modal.Body
>
<
/Modal
>
{(
showCode
)?
(
alert
(
'
참여코드
'
),
setCode
(
false
)):
null
}
<
Modal
show
=
{
show2
}
onHide
=
{
handleClose2
}
>
<
Modal
.
Header
closeButton
>
<
Modal
.
Title
>
참여
코드로
채팅
참가
<
/Modal.Title
>
<
/Modal.Header
>
<
Modal
.
Body
>
<
Form
onSubmit
=
{()
=>
{
console
.
log
(
'
제출
'
)
}}
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
formCodeE
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
참여
코드
<
/Form.Label
>
<
Col
>
<
Form
.
Control
type
=
"
text
"
/>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
참가
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
<
/Modal.Body
>
<
/Modal
>
<
/div
>
<
/div
>
);
}
}
export
default
Home
;
export
default
Home
;
\ No newline at end of file
client/src/Pages/KakaoTalk_20201230_153151693.png
0 → 100644
View file @
09af2954
19 KB
client/src/Pages/LogInPage.js
0 → 100644
View file @
09af2954
import
React
,
{
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Container
,
Navbar
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Menu
from
'
../Components/Menu
'
;
function
LogIn
()
{
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
handleSubmit
=
(
event
)
=>
{
const
form
=
event
.
currentTarget
;
if
(
form
.
checkValidity
()
===
false
)
{
event
.
preventDefault
();
event
.
stopPropagation
();
}
setValidated
(
true
);
};
return
(
<>
<
Menu
/>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
<
Container
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
mt-5 p-5 shadow w-75
"
>
<
h2
className
=
"
text-center
"
>
로그인
<
/h2
>
<
Form
.
Group
controlId
=
"
formGroupEmail
"
>
<
Form
.
Label
>
이메일
<
/Form.Label
>
<
Form
.
Control
required
type
=
"
text
"
placeholder
=
"
이메일을 입력해주세요
"
/>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
필수
정보입니다
!
이메일을
입력해주세요
!
<
/Form.Control.Feedback
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupPassword
"
>
<
Form
.
Label
>
비밀번호
<
/Form.Label
>
<
Form
.
Control
required
type
=
"
text
"
placeholder
=
"
비밀번호를 입력해주세요
"
/>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
필수
정보입니다
!
비밀번호를
입력해주세요
!
<
/Form.Control.Feedback
>
<
/Form.Group
>
<
Link
to
=
"
./homepage
"
>
<
Button
type
=
"
submit
"
variant
=
"
outline-success
"
size
=
"
lg
"
className
=
"
mr-4
"
block
>
로그인
<
/Button
>
<
/Link
>
<
Link
to
=
"
./signuppage
"
>
<
h6
type
=
"
button
"
className
=
"
text-right mt-2
"
style
=
{{
cursor
:
'
pointer
'
}}
>
회원가입
<
/h6
>
<
/Link
>
<
/div
>
<
/Container
>
<
/Form
>
<
/
>
);
}
//render(<LogIn />);
export
default
LogIn
\ No newline at end of file
client/src/Pages/LoginForm.js
0 → 100644
View file @
09af2954
client/src/Pages/ProfilePage.js
0 → 100644
View file @
09af2954
import
React
,
{
useState
}
from
'
react
'
;
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
userdefault
from
'
./KakaoTalk_20201230_153151693.png
'
const
userName
=
"
정연우
"
;
const
userEmail
=
"
dusdn8455@korea.ac.kr
"
;
let
userNickname
=
"
가나다라마바사
"
;
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
}
function
ProfilePage
()
{
const
[
tohome
,
setTohome
]
=
useState
(
false
)
const
[
defaultImg
,
setDefaultImg
]
=
useState
(
true
)
function
goHome
()
{
return
(
setTohome
(
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
)
}
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
);
};
}
}
return
(
<
div
>
<
Menu
/>
{
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
>
<
div
className
=
"
d-flex justify-content-center mb-3
"
id
=
"
defaultImg
"
>
<
Image
src
=
{
userdefault
}
width
=
"
300px
"
roundedCircle
/>
<
/div
>
<
div
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
>
<
/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
>
<
div
className
=
"
m-3
"
>
이메일
:
{
userEmail
}
<
/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
>
<
/span
>
<
/div
>
<
/div
>
<
/Container
>
<
/div
>
)
}
export
default
ProfilePage
client/src/Pages/SignUpPage.js
0 → 100644
View file @
09af2954
import
React
,
{
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Container
,
Navbar
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Menu
from
'
../Components/Menu
'
;
function
SingUp
()
{
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
handleSubmit
=
(
event
)
=>
{
const
form
=
event
.
currentTarget
;
if
(
form
.
checkValidity
()
===
false
)
{
event
.
preventDefault
();
event
.
stopPropagation
();
}
setValidated
(
true
);
};
return
(
<>
<
Menu
/>
<
div
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
<
Container
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
mt-5 p-5 shadow w-75
"
>
<
h2
className
=
"
text-center
"
>
회원가입
<
/h2
>
<
Form
.
Group
controlId
=
"
formGroupUsername
"
>
<
Form
.
Label
>
이름
<
/Form.Label
>
<
Form
.
Control
required
type
=
"
text
"
placeholder
=
"
이름을 입력해주세요
"
/>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
필수
정보입니다
!
이름을
입력해주세요
!
<
/Form.Control.Feedback
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupNickname
"
>
<
Form
.
Label
>
별명
<
/Form.Label
>
<
Form
.
Control
required
type
=
"
text
"
placeholder
=
"
별명을 입력해주세요
"
/>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
필수
정보입니다
!
별명을
입력해주세요
!
<
/Form.Control.Feedback
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupEmail
"
>
<
Form
.
Label
>
이메일
<
/Form.Label
>
<
Form
.
Control
required
type
=
"
text
"
placeholder
=
"
이메일을 입력해주세요
"
/>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
필수
정보입니다
!
이메일을
입력해주세요
!
<
/Form.Control.Feedback
>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupPassword
"
>
<
Form
.
Label
>
비밀번호
<
/Form.Label
>
<
Form
.
Control
required
type
=
"
text
"
placeholder
=
"
비밀번호를 입력해주세요
"
/>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
>
필수
정보입니다
!
비밀번호를
입력해주세요
!
<
/Form.Control.Feedback
>
<
/Form.Group
>
<
Link
to
=
"
./
"
>
<
Button
type
=
"
submit
"
variant
=
"
outline-success
"
size
=
"
lg
"
className
=
"
mr-4
"
block
>
가입
<
/Button
>
<
/Link
>
<
/div
>
<
/Container
>
<
/Form
>
<
/div
>
<
/
>
)
}
export
default
SingUp
\ No newline at end of file
client/src/Pages/user_default.png
0 → 100644
View file @
09af2954
client/src/Pages/user_default.png
\ No newline at end of file
client/src/Pages/user_default.svg
0 → 100644
View file @
09af2954
client/src/Pages/user_default.svg
\ No newline at end of file
client/src/index.js
View file @
09af2954
...
@@ -2,15 +2,29 @@ import React from 'react';
...
@@ -2,15 +2,29 @@ import React from 'react';
import
ReactDOM
from
'
react-dom
'
;
import
ReactDOM
from
'
react-dom
'
;
import
'
./index.css
'
;
import
'
./index.css
'
;
// import App from './App';
// import App from './App';
//
import
Hello from './Hello'
import
SignUpPage
from
'
./Pages/SignUpPage
'
;
import
Hom
e
from
'
./Pages/
Hom
ePage
'
import
ProfilePag
e
from
'
./Pages/
Profil
ePage
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
LogInPage
from
'
./Pages/LogInPage
'
;
// import LoginForm from './Pages/LoginForm';
import
{
BrowserRouter
as
Router
,
Route
,
Redirect
,
Switch
}
from
'
react-router-dom
'
;
import
{
BrowserRouter
as
Router
,
Route
,
Redirect
,
Switch
}
from
'
react-router-dom
'
;
import
Hello
from
'
./Hello
'
import
HomePage
from
'
./Pages/HomePage
'
ReactDOM
.
render
(
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
Router
>
<
Home
/>
<
Switch
>
<
/React.StrictMode>
,
<
Route
exact
path
=
"
/
"
component
=
{
HomePage
}
/
>
<
Route
path
=
"
/login
"
component
=
{
LogInPage
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
SignUpPage
}
/
>
<
Route
path
=
"
/profile
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/hello
"
component
=
{
Hello
}
/
>
<
Route
path
=
"
/home
"
component
=
{
HomePage
}
/
>
<
Redirect
path
=
'
/hello
'
to
=
'
/hello
'
/>
<
/Switch
>
<
/Router>
,
document
.
getElementById
(
'
root
'
)
document
.
getElementById
(
'
root
'
)
);
);
...
...
server/config.js
View file @
09af2954
const
config
=
{
const
config
=
{
env
:
process
.
env
.
NODE_ENV
||
'
development
'
,
env
:
process
.
env
.
NODE_ENV
||
'
development
'
,
port
:
process
.
env
.
PORT
||
300
1
,
port
:
process
.
env
.
PORT
||
30
3
0
,
jwtSecret
:
process
.
env
.
JWT_SECRET
||
'
My_Secret_Key
'
,
jwtSecret
:
process
.
env
.
JWT_SECRET
||
'
My_Secret_Key
'
,
mongoDbUri
:
process
.
env
.
MONGODB_URI
||
'
mongodb://localhost/
react_test
'
mongoDbUri
:
process
.
env
.
MONGODB_URI
||
'
mongodb://localhost/
messenger
'
}
}
export
default
config
export
default
config
\ No newline at end of file
server/controllers/user.controller.js
0 → 100644
View file @
09af2954
import
User
from
"
../models/User.js
"
import
isLength
from
'
validator/lib/isLength.js
'
import
isEmail
from
'
validator/lib/isEmail.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
)
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
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
)
{
//알수없는 모든 에러발생시 처리
console
.
log
(
error
)
res
.
status
(
500
).
send
(
'
User signup error
'
)
}
//newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄
//res : 응답하는 객체
//응답안할 시 browser에서 빙빙돌다 에러 발생 -> 꼭 붙여줘야됨!
//res는 한번만 실행. 두번하면 에러 발생
}
const
hello
=
(
req
,
res
)
=>
{
res
.
send
(
'
Hello from users controller
'
)
}
export
default
{
signup
,
hello
}
// {} : 객체로 return함
\ No newline at end of file
server/models/User.js
View file @
09af2954
//주고받는 형식을 정의함.
import
mongoose
from
'
mongoose
'
import
mongoose
from
'
mongoose
'
const
{
String
}
=
mongoose
.
Schema
.
Types
const
{
String
}
=
mongoose
.
Schema
.
Types
//원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
//object의 id를 쓸때에도 추가시켜줘야됨.
//형식을 정의함.
const
UserSchema
=
new
mongoose
.
Schema
({
const
UserSchema
=
new
mongoose
.
Schema
({
name
:
{
name
:
{
type
:
String
,
type
:
String
,
required
:
true
,
required
:
true
,
},
},
nickname
:
{
type
:
String
,
required
:
true
,
},
email
:
{
email
:
{
type
:
String
,
type
:
String
,
required
:
true
,
required
:
true
,
select
:
false
unique
:
true
,
//unique: 같은 email을 두번넣으면 error발생함
},
},
role
:
{
password
:
{
type
:
String
,
type
:
String
,
required
:
true
,
required
:
true
,
default
:
'
user
'
,
select
:
false
,
enum
:
[
'
user
'
,
'
admin
'
,
'
root
'
]
//정보를 찾을때 찾지 않게함
}
//플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
},
{
},
// role: {
// type: String,
// required: true,
// default: 'user',
// enum: ['user', 'admin', 'root'],
// //열거, 배열 : role이라는 것이 'user', 'admin', 'root'중 하나를 쓰임
// //사용자에 역할을 줄 때 사용함.
//}
},{
//옵셥을 정의함.
timestamps
:
true
timestamps
:
true
//기본이 false로 되어있음
//user가 추가될때마다 createdAt(만들어진 시간 저장)과 updatedAt(수정될때 시간이 변경되어 저장)가 추가되어 시간을 저장함.
})
})
export
default
mongoose
.
models
.
User
||
mongoose
.
model
(
'
User
'
,
UserSchema
)
export
default
mongoose
.
models
.
User
||
mongoose
.
model
(
'
User
'
,
UserSchema
)
\ No newline at end of file
//user라는 이름이 있으면 앞을 return하고 없으면 뒤를 실행함
server/routes/user.routes.js
0 → 100644
View file @
09af2954
import
express
from
'
express
'
import
userCtrl
from
'
../controllers/user.controller.js
'
const
router
=
express
.
Router
()
//router의 역할 : './주소'부분을 처리하는 역할함.
router
.
route
(
'
/api/users/signup
'
)
.
post
(
userCtrl
.
signup
)
.
get
(
userCtrl
.
hello
)
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
//express middleware : (req, res) => {}
//node(req(client의 정보), res)를 넘겨줌.
export
default
router
\ No newline at end of file
Prev
1
2
Next
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