Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
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
{
Row
,
Col
,
Modal
,
Button
,
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Modal
,
Button
}
from
'
react-bootstrap
'
;
import
Tabs
from
'
react-bootstrap/Tabs
'
;
import
Tab
from
'
react-bootstrap/Tab
'
;
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';
// const List = styled.div`
// background: #FFFAFA;
// `
const
userName
=
"
정연우
"
;
function
Home
()
{
...
...
@@ -25,20 +25,7 @@ function Home() {
return
(
<>
<
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
>
<
Menu
/>
<
Row
className
=
"
mr-0
"
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
...
...
client/src/Pages/LogInPage.js
View file @
c4848cf1
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
);
...
...
@@ -17,10 +18,7 @@ function LogIn() {
return
(
<>
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Navbar
.
Brand
>
YDK
Messenger
<
/Navbar.Brand
>
<
/Navbar
>
<
Menu
/>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
<
Container
className
=
"
d-flex justify-content-center
"
>
<
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
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
'
;
...
...
@@ -89,16 +89,7 @@ function ProfilePage() {
return
(
<
div
>
<
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
>
<
Button
variant
=
"
light
"
className
=
"
ml-3
"
>
Logout
<
/Button
>
<
/Navbar
>
<
Menu
/>
{
tohome
?
<
Redirect
to
=
'
/homepage
'
/>
:
''
}
<
Container
className
=
"
d-flex justify-content-center
"
>
...
...
client/src/Pages/SignUpPage.js
View file @
c4848cf1
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
);
...
...
@@ -17,9 +18,7 @@ function SingUp() {
return
(
<>
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Navbar
.
Brand
>
YDK
Messenger
<
/Navbar.Brand
>
<
/Navbar
>
<
Menu
/>
<
div
>
<
Form
noValidate
validated
=
{
validated
}
onSubmit
=
{
handleSubmit
}
>
...
...
client/src/index.js
View file @
c4848cf1
...
...
@@ -7,7 +7,7 @@ import ProfilePage from './Pages/ProfilePage';
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
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
Hello
from
'
./Hello
'
import
HomePage
from
'
./Pages/HomePage
'
...
...
@@ -16,11 +16,12 @@ import HomePage from './Pages/HomePage'
ReactDOM
.
render
(
<
Router
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
LogInPage
}
/
>
<
Route
path
=
"
/signuppage
"
component
=
{
SignUpPage
}
/
>
<
Route
path
=
"
/profilepage
"
component
=
{
ProfilePage
}
/
>
<
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
page
"
component
=
{
HomePage
}
/
>
<
Route
path
=
"
/home
"
component
=
{
HomePage
}
/
>
<
Redirect
path
=
'
/hello
'
to
=
'
/hello
'
/>
<
/Switch
>
<
/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