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
c4848cf1
Commit
c4848cf1
authored
Jan 02, 2021
by
Choi Ga Young
Browse files
이거 병합하세요
parent
7d7cf27a
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/src/Components/Menu.js
0 → 100644
View file @
c4848cf1
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/Pages/HomePage.js
View file @
c4848cf1
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
Row
,
Col
,
Modal
,
Button
,
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Modal
,
Button
}
from
'
react-bootstrap
'
;
import
Tabs
from
'
react-bootstrap/Tabs
'
;
import
Tabs
from
'
react-bootstrap/Tabs
'
;
import
Tab
from
'
react-bootstrap/Tab
'
;
import
Tab
from
'
react-bootstrap/Tab
'
;
import
ClosedList
from
'
../Components/ClosedList
'
;
import
ClosedList
from
'
../Components/ClosedList
'
;
import
OpenList
from
'
../Components/OpenList
'
;
import
OpenList
from
'
../Components/OpenList
'
;
import
Chat
from
'
../Components/Chat
'
;
import
Chat
from
'
../Components/Chat
'
;
import
Menu
from
'
../Components/Menu
'
;
// import styled from 'styled-components';
// import styled from 'styled-components';
// const List = styled.div`
// const List = styled.div`
// background: #FFFAFA;
// background: #FFFAFA;
// `
// `
const
userName
=
"
정연우
"
;
function
Home
()
{
function
Home
()
{
...
@@ -25,20 +25,7 @@ function Home() {
...
@@ -25,20 +25,7 @@ function Home() {
return
(
return
(
<>
<>
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Menu
/>
<
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
>
<
Row
className
=
"
mr-0
"
>
<
Row
className
=
"
mr-0
"
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
...
...
client/src/Pages/LogInPage.js
View file @
c4848cf1
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Container
,
Navbar
}
from
'
react-bootstrap
'
;
import
{
Button
,
Form
,
Container
,
Navbar
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Menu
from
'
../Components/Menu
'
;
function
LogIn
()
{
function
LogIn
()
{
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
[
validated
,
setValidated
]
=
useState
(
false
);
...
@@ -17,10 +18,7 @@ function LogIn() {
...
@@ -17,10 +18,7 @@ function LogIn() {
return
(
return
(
<>
<>
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Menu
/>
<
Navbar
.
Brand
>
YDK
Messenger
<
/Navbar.Brand
>
<
/Navbar
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
<
Container
className
=
"
d-flex justify-content-center
"
>
<
Container
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
mt-5 p-5 shadow w-75
"
>
<
div
className
=
"
mt-5 p-5 shadow w-75
"
>
...
...
client/src/Pages/LoginForm.js
View file @
c4848cf1
import
React
,
{
useState
}
from
"
react
"
;
import
Joi
,
{
validate
}
from
"
joi-browser
"
;
const
LoginForm
=
()
=>
{
const
userSchema
=
{
username
:
Joi
.
string
().
required
(),
password
:
Joi
.
string
().
required
(),
};
const
[
userInfo
,
setUserInfo
]
=
useState
({
username
:
""
,
password
:
""
,
});
const
handleSubmit
=
(
e
)
=>
{
e
.
preventDefault
();
// 기본 동작 방지
};
const
handleChange
=
(
e
)
=>
{
// e.target.id: 변경이 일어난 input 태그의 id
// e.target.value: 변경이 일어난 input 태그의 값
const
{
id
,
value
}
=
e
.
target
;
const
errors
=
{
...
userInfo
.
errors
};
/* 입력받은 값 유효성 검증 */
const
obj
=
{
[
id
]:
value
};
// 입력받은 값에
const
schema
=
{
[
id
]:
userSchema
[
id
]
};
// Joi 스키마를 적용하여
const
{
error
}
=
validate
(
obj
,
schema
);
// 유효성 검증
if
(
error
)
errors
[
id
]
=
error
;
else
delete
errors
[
id
];
/* 입력받은 username 및 password를 state에 저장 */
const
data
=
userInfo
;
data
[
id
]
=
value
;
// 점(.) 표기법을 대괄호([]) 표기법으로 사용
setUserInfo
({
...
data
,
errors
});
};
const
buttonValidate
=
()
=>
{
const
options
=
{
abortEarly
:
false
,
allowUnknown
:
true
};
const
{
error
}
=
Joi
.
validate
(
userInfo
,
userSchema
,
options
);
// 에러 미발생 시 null 반환
if
(
!
error
)
return
null
;
// 에러 발생 시 에러 정보 반환
const
errors
=
{};
for
(
let
item
of
error
.
details
)
{
errors
[
item
.
path
[
0
]]
=
item
.
message
;
}
return
errors
;
}
const
handleClick
=
(
e
)
=>
{
e
.
preventDefault
();
const
validUsername
=
'
ingyeo
'
;
const
validPassword
=
'
1234
'
;
if
(
validUsername
===
userInfo
.
username
&&
validPassword
===
userInfo
.
password
)
alert
(
'
로그인 성공!
'
)
else
alert
(
'
로그인 실패...
'
);
}
return
(
<
div
>
<
h1
>
Login
<
/h1
>
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"
form-group
"
>
<
label
htmlFor
=
"
username
"
>
Username
<
/label>{" "
}
{
/* 이 label 태그는 아래 input 태그를 참조함 */
}
<
input
onChange
=
{
handleChange
}
id
=
"
username
"
type
=
"
text
"
className
=
"
form-control
"
/>
<
/div
>
<
div
className
=
"
form-group
"
>
<
label
htmlFor
=
"
password
"
>
Password
<
/label
>
<
input
onChange
=
{
handleChange
}
id
=
"
password
"
type
=
"
password
"
className
=
"
form-control
"
/>
<
/div
>
<
button
disabled
=
{
buttonValidate
()}
onClick
=
{
handleClick
}
className
=
"
btn btn-primary
"
>
Login
<
/button
>
<
/form
>
<
/div
>
);
};
export
default
LoginForm
;
\ No newline at end of file
client/src/Pages/ProfilePage.js
View file @
c4848cf1
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
import
ReactDOM
from
'
react-dom
'
;
import
Menu
from
'
../Components/Menu
'
;
import
{
Image
,
Button
,
Container
,
Form
,
FormControl
,
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
Image
,
Button
,
Container
,
Form
,
FormControl
,
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
BrowserRouter
as
Router
,
Route
,
Redirect
,
Switch
,
Link
}
from
'
react-router-dom
'
;
import
{
BrowserRouter
as
Router
,
Route
,
Redirect
,
Switch
,
Link
}
from
'
react-router-dom
'
;
...
@@ -89,16 +89,7 @@ function ProfilePage() {
...
@@ -89,16 +89,7 @@ function ProfilePage() {
return
(
return
(
<
div
>
<
div
>
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Menu
/>
<
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
>
<
Button
variant
=
"
light
"
className
=
"
ml-3
"
>
Logout
<
/Button
>
<
/Navbar
>
{
tohome
?
<
Redirect
to
=
'
/homepage
'
/>
:
''
}
{
tohome
?
<
Redirect
to
=
'
/homepage
'
/>
:
''
}
<
Container
className
=
"
d-flex justify-content-center
"
>
<
Container
className
=
"
d-flex justify-content-center
"
>
...
...
client/src/Pages/SignUpPage.js
View file @
c4848cf1
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Container
,
Navbar
}
from
'
react-bootstrap
'
;
import
{
Button
,
Form
,
Container
,
Navbar
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Menu
from
'
../Components/Menu
'
;
function
SingUp
()
{
function
SingUp
()
{
const
[
validated
,
setValidated
]
=
useState
(
false
);
const
[
validated
,
setValidated
]
=
useState
(
false
);
...
@@ -17,9 +18,7 @@ function SingUp() {
...
@@ -17,9 +18,7 @@ function SingUp() {
return
(
return
(
<>
<>
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Menu
/>
<
Navbar
.
Brand
>
YDK
Messenger
<
/Navbar.Brand
>
<
/Navbar
>
<
div
>
<
div
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
...
...
client/src/index.js
View file @
c4848cf1
...
@@ -7,7 +7,7 @@ import ProfilePage from './Pages/ProfilePage';
...
@@ -7,7 +7,7 @@ import ProfilePage from './Pages/ProfilePage';
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
LogInPage
from
'
./Pages/LogInPage
'
;
import
LogInPage
from
'
./Pages/LogInPage
'
;
import
LoginForm
from
'
./Pages/LoginForm
'
;
//
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
Hello
from
'
./Hello
'
import
HomePage
from
'
./Pages/HomePage
'
import
HomePage
from
'
./Pages/HomePage
'
...
@@ -16,11 +16,12 @@ import HomePage from './Pages/HomePage'
...
@@ -16,11 +16,12 @@ import HomePage from './Pages/HomePage'
ReactDOM
.
render
(
ReactDOM
.
render
(
<
Router
>
<
Router
>
<
Switch
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
LogInPage
}
/
>
<
Route
exact
path
=
"
/
"
component
=
{
HomePage
}
/
>
<
Route
path
=
"
/signuppage
"
component
=
{
SignUpPage
}
/
>
<
Route
path
=
"
/login
"
component
=
{
LogInPage
}
/
>
<
Route
path
=
"
/profilepage
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/signup
"
component
=
{
SignUpPage
}
/
>
<
Route
path
=
"
/profile
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/hello
"
component
=
{
Hello
}
/
>
<
Route
path
=
"
/hello
"
component
=
{
Hello
}
/
>
<
Route
path
=
"
/home
page
"
component
=
{
HomePage
}
/
>
<
Route
path
=
"
/home
"
component
=
{
HomePage
}
/
>
<
Redirect
path
=
'
/hello
'
to
=
'
/hello
'
/>
<
Redirect
path
=
'
/hello
'
to
=
'
/hello
'
/>
<
/Switch
>
<
/Switch
>
<
/Router>
,
<
/Router>
,
...
...
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