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
72411812
Commit
72411812
authored
Dec 30, 2020
by
우지원
Browse files
ul
parent
2ddf79b0
Changes
15
Hide whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
0 → 100644
View file @
72411812
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 @
72411812
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/OpenList.js
0 → 100644
View file @
72411812
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
0 → 100644
View file @
72411812
import
{
Button
,
Navbar
,
Nav
,
Form
,
FormControl
}
from
'
react-bootstrap
'
;
import
React
from
'
react
'
const
userName
=
"
정연우
"
;
function
Hello
(
props
)
{
console
.
log
(
props
)
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
>
<
h1
>
hello
<
/h1
>
<
div
>
안녕하세요
.{
props
.
name
}
<
/div
>
<
input
className
=
"
input
"
/>
<
/
>
)
}
export
default
Hello
;
client/src/Page/LogIn.js
deleted
100644 → 0
View file @
2ddf79b0
import
React
from
'
react
'
;
import
{
Button
,
Container
}
from
'
react-bootstrap
'
;
function
LogIn
()
{
return
(
<
div
>
<
Container
>
<
h2
className
=
"
d-flex justify-content-center
"
>
회원가입
<
/h2
>
<
Form
>
<
Form
.
Group
controlId
=
"
formGroupEmail
"
>
<
Form
.
Label
>
Email
address
<
/Form.Label
>
<
Form
.
Control
type
=
"
email
"
placeholder
=
"
Enter email
"
/>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupPassword
"
>
<
Form
.
Label
>
Password
<
/Form.Label
>
<
Form
.
Control
type
=
"
password
"
placeholder
=
"
Enter Password
"
/>
<
/Form.Group
>
<
/Form
>
<
span
>
<
Button
className
=
"
btn btn-outline-primary
"
>
가입
<
/Button
>
<
/span
>
<
/Container
>
<
/div
>
)
}
export
default
LogIn
\ No newline at end of file
client/src/Page/SignUp.js
deleted
100644 → 0
View file @
2ddf79b0
import
React
from
'
react
'
;
import
{
Button
,
Container
}
from
'
react-bootstrap
'
;
function
SingUp
()
{
return
(
<
div
>
<
h2
className
=
"
d-flex justify-content-center
"
>
회원가입
<
/h2
>
<
Form
>
<
Form
.
Group
controlId
=
"
formGroupEmail
"
>
<
Form
.
Label
>
User
name
<
/Form.Label
>
<
Form
.
Control
type
=
"
email
"
placeholder
=
"
Enter User name
"
/>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupPassword
"
>
<
Form
.
Label
>
Nickname
<
/Form.Label
>
<
Form
.
Control
type
=
"
password
"
placeholder
=
"
Enter nickname
"
/>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupEmail
"
>
<
Form
.
Label
>
Email
address
<
/Form.Label
>
<
Form
.
Control
type
=
"
email
"
placeholder
=
"
Enter email
"
/>
<
/Form.Group
>
<
Form
.
Group
controlId
=
"
formGroupPassword
"
>
<
Form
.
Label
>
Password
<
/Form.Label
>
<
Form
.
Control
type
=
"
password
"
placeholder
=
"
Enter Password
"
/>
<
/Form.Group
>
<
/Form
>
<
span
>
<
Button
className
=
"
btn btn-outline-primary
"
>
가입
<
/Button
>
<
/span
>
<
/div
>
)
}
export
default
SingUp
\ No newline at end of file
client/src/Pages/HomePage.js
0 → 100644
View file @
72411812
import
React
,
{
useState
}
from
'
react
'
;
import
{
Row
,
Col
,
Modal
,
Button
,
Navbar
,
Nav
}
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 styled from 'styled-components';
// const List = styled.div`
// background: #FFFAFA;
// `
const
userName
=
"
정연우
"
;
function
Home
()
{
const
[
show
,
setShow
]
=
useState
(
false
);
const
[
chat
,
setChat
]
=
useState
(
false
);
const
handleClose
=
()
=>
setShow
(
false
);
const
handleShow
=
()
=>
setShow
(
true
);
const
handleChato
=
()
=>
setChat
(
true
);
const
handleChatc
=
()
=>
setChat
(
false
);
// variant="pills"
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
>
<
Row
className
=
"
mr-0
"
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
ClosedList
/>
<
/Tab
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
>
<
OpenList
/>
<
/Tab
>
<
/Tabs
>
<
/Col
>
<
Col
style
=
{{
padding
:
"
0
"
}}
>
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
/> : null
}
<
Button
variant
=
"
primary
"
onClick
=
{
handleShow
}
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
10px
"
,
right
:
"
10px
"
}}
>
생성
<
/Button
>
<
Modal
show
=
{
show
}
onHide
=
{
handleClose
}
>
<
Modal
.
Header
closeButton
>
<
Modal
.
Title
>
방
생성
<
/Modal.Title
>
<
/Modal.Header
>
<
Modal
.
Body
>
여기에
form
입력
<
/Modal.Body
>
<
Modal
.
Footer
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleClose
}
>
생성
<
/Button
>
<
/Modal.Footer
>
<
/Modal
>
<
/Col
>
<
/Row
>
<
/
>
);
}
export
default
Home
;
client/src/Pages/KakaoTalk_20201230_153151693.png
0 → 100644
View file @
72411812
19 KB
client/src/Pages/LogInPage.js
0 → 100644
View file @
72411812
import
React
,
{
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Container
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
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
(
<
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
>
<
Button
type
=
"
submit
"
variant
=
"
outline-success
"
size
=
"
lg
"
className
=
"
mr-4
"
block
>
로그인
<
/Button
>
<
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 @
72411812
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
0 → 100644
View file @
72411812
import
React
,
{
useState
}
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
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
>
<
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
>
{
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 @
72411812
import
React
,
{
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Container
}
from
'
react-bootstrap
'
;
import
{
Link
}
from
'
react-router-dom
'
;
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
(
<
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
=
"
./homepage
"
>
<
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 @
72411812
client/src/Pages/user_default.png
\ No newline at end of file
client/src/Pages/user_default.svg
0 → 100644
View file @
72411812
client/src/Pages/user_default.svg
\ No newline at end of file
client/src/index.js
View file @
72411812
import
React
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
import
'
./index.css
'
;
import
App
from
'
./App
'
;
import
SingUp
from
'
./Page/SignUp
'
;
// import App from './App';
import
SignUpPage
from
'
./Pages/SignUpPage
'
;
import
ProfilePage
from
'
./Pages/ProfilePage
'
;
import
reportWebVitals
from
'
./reportWebVitals
'
;
import
'
bootstrap/dist/css/bootstrap.min.css
'
;
import
LogIn
from
'
./Page/LogIn
'
;
import
ProfilePage
from
'
./Page/ProfilePage
'
;
import
LogInPage
from
'
./Pages/LogInPage
'
;
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
'
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
SignUp
/>
<
LogIn
/>
<
ProfilePage
/>
<
/React.StrictMode>
,
<
Router
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
LogInPage
}
/
>
<
Route
path
=
"
/signuppage
"
component
=
{
SignUpPage
}
/
>
<
Route
path
=
"
/profilepage
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/hello
"
component
=
{
Hello
}
/
>
<
Route
path
=
"
/homepage
"
component
=
{
HomePage
}
/
>
<
Redirect
path
=
'
/hello
'
to
=
'
/hello
'
/>
<
/Switch
>
<
/Router>
,
document
.
getElementById
(
'
root
'
)
);
...
...
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