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
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
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
SingUp
from
'
./Page/SignUp
'
;
import
SignUpPage
from
'
./Pages/SignUpPage
'
;
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
LogIn
from
'
./Page/LogIn
'
;
import
LogInPage
from
'
./Pages/LogInPage
'
;
import
ProfilePage
from
'
./Page/ProfilePage
'
;
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
(
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
Router
>
<
SignUp
/>
<
Switch
>
<
LogIn
/>
<
Route
exact
path
=
"
/
"
component
=
{
LogInPage
}
/
>
<
ProfilePage
/>
<
Route
path
=
"
/signuppage
"
component
=
{
SignUpPage
}
/
>
<
/React.StrictMode>
,
<
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
'
)
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