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
b7f87260
Commit
b7f87260
authored
Jan 04, 2021
by
Soo Hyun Kim
Browse files
shyun0104
parent
09af2954
Changes
6
Show whitespace changes
Inline
Side-by-side
client/src/Pages/HomePage.js
View file @
b7f87260
import
React
,
{
useState
}
from
'
react
'
;
import
{
Row
,
Col
,
Modal
,
Button
}
from
'
react-bootstrap
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Row
,
Col
,
Modal
,
Button
,
Form
}
from
'
react-bootstrap
'
;
import
Tabs
from
'
react-bootstrap/Tabs
'
;
import
Tab
from
'
react-bootstrap/Tab
'
;
import
ClosedList
from
'
../Components/ClosedList
'
;
...
...
@@ -12,17 +12,53 @@ import Menu from '../Components/Menu';
// background: #FFFAFA;
// `
const
INIT_CHATR
=
{
name
:
''
,
interest
:
''
,
isOpen
:
false
}
function
Home
()
{
const
[
show
,
setShow
]
=
useState
(
false
);
const
[
show2
,
setShow2
]
=
useState
(
false
);
const
[
chat
,
setChat
]
=
useState
(
false
);
const
[
checkedI
,
setCheckedI
]
=
useState
(
false
);
const
[
chatR
,
setChatR
]
=
useState
(
INIT_CHATR
);
const
[
disabled
,
setDisabled
]
=
useState
(
true
);
const
handleClose
=
()
=>
setShow
(
false
);
const
handleShow
=
()
=>
setShow
(
true
);
const
handleChato
=
()
=>
setChat
(
true
);
const
handleChatc
=
()
=>
setChat
(
false
);
const
handleClose2
=
()
=>
setShow2
(
false
);
const
handleShow2
=
()
=>
setShow2
(
true
);
// variant="pills"
useEffect
(()
=>
{
const
isChatR
=
Object
.
values
(
chatR
).
every
(
el
=>
Boolean
(
el
))
isChatR
?
setDisabled
(
false
)
:
setDisabled
(
true
)
},
[
chatR
])
function
handleChange
(
event
){
const
{
name
,
value
}
=
event
.
target
setChatR
({...
chatR
,
[
name
]:
value
})
console
.
log
(
chatR
)
}
async
function
handleSubmit
(
event
){
event
.
preventDefault
()
const
response
=
await
fetch
(
'
chat/makeChat
'
,
{
method
:
'
POST
'
,
headers
:
{
'
Content-Type
'
:
'
application/json
'
},
body
:
JSON
.
stringify
(
chatR
)
})
const
data
=
await
response
.
json
()
console
.
log
(
data
)
setChatR
(
INIT_CHATR
)
}
return
(
<>
<
Menu
/>
...
...
@@ -40,20 +76,86 @@ function Home() {
<
Col
style
=
{{
padding
:
"
0
"
}}
>
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
/> : null
}
<
Button
variant
=
"
primary
"
onClick
=
{
handleShow
}
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
10px
"
,
right
:
"
10px
"
}}
>
<
div
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
20px
"
,
right
:
"
30px
"
}}
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShow
}
size
=
"
lg
"
block
>
생성
<
/Button
>
<
Button
variant
=
"
secondary
"
onClick
=
{
handleShow2
}
size
=
"
lg
"
block
>
참가
<
/Button
>
<
/div
>
<
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
.
Body
>
<
Form
onSubmit
=
{
handleSubmit
}
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatName
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
방
이름
<
/Form.Label
>
<
Col
>
<
Form
.
Control
name
=
'
name
'
type
=
'
text
'
value
=
{
chatR
.
name
}
onChange
=
{
handleChange
}
/
>
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatInterest
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
관심
분야
<
/Form.Label
>
<
Col
>
<
Form
.
Control
as
=
"
select
"
defaultValue
=
"
Choose...
"
name
=
'
interest
'
type
=
'
text
'
value
=
{
chatR
.
interest
}
onChange
=
{
handleChange
}
>
<
option
>
Choose
...
<
/option
>
<
option
>
과학
<
/option
>
<
option
>
수학
<
/option
>
<
option
>
예술
<
/option
>
<
option
>
언어
<
/option
>
<
option
>
취미
<
/option
>
<
/Form.Control
>
{
/* <Form.Control type="text" /> */
}
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatIsOpen
"
>
<
Form
.
Label
column
sm
=
{
4
}
>
공개방
<
/Form.Label
>
<
Col
>
<
Form
.
Check
type
=
"
checkbox
"
checked
=
{
chatR
.
isOpen
}
name
=
'
isOpen
'
onChange
=
{()
=>
setChatR
({...
chatR
,
isOpen
:
!
chatR
.
isOpen
})}
/
>
<
/Col
>
<
/Form.Group
>
{
(
chatR
.
isOpen
)
?
(
<
p
><
b
>
공개방
<
/b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</
p
>
)
:
(
<
p
><
b
>
비밀방
<
/b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</
p
>
)
}
<
Form
.
Group
as
=
{
Row
}
>
{
console
.
log
(
chatR
)}
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
방
생성
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
<
/Modal.Body
>
<
/Modal
>
<
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
>
<
/Col
>
<
/Row
>
...
...
package.json
View file @
b7f87260
...
...
@@ -6,7 +6,7 @@
"type"
:
"module"
,
"scripts"
:
{
"test"
:
"echo
\"
Error: no test specified
\"
&& exit 1"
,
"dev"
:
"nodemon
index
.js"
"dev"
:
"nodemon
server/server
.js"
},
"repository"
:
{
"type"
:
"git"
,
...
...
server/controllers/chat.controller.js
0 → 100644
View file @
b7f87260
import
chat
from
"
../models/chat.js
"
import
isLength
from
'
validator/lib/isLength.js
'
const
makeChat
=
async
(
req
,
res
)
=>
{
const
{
name
,
interest
,
isOpen
}
=
req
.
body
;
// console.log('/bodyCheck', interest);
try
{
if
(
!
isLength
(
name
,
{
min
:
3
,
max
:
10
}))
{
return
res
.
status
(
422
).
json
({
message
:
'
Name must be 3-10 characters
'
})
}
const
newChat
=
await
new
chat
({
name
,
interest
,
isOpen
}).
save
()
console
.
log
(
newChat
)
res
.
json
(
newChat
)
}
catch
(
error
)
{
console
.
log
(
error
)
res
.
status
(
500
).
json
({
message
:
'
User signup error
'
})
}
}
const
hello
=
(
req
,
res
)
=>
{
res
.
send
(
'
Hello from users controller
'
)
}
export
default
{
makeChat
,
hello
}
\ No newline at end of file
server/models/chat.js
View file @
b7f87260
...
...
@@ -13,13 +13,11 @@ const ChatSchema = new mongoose.Schema({
select
:
false
},
isOpen
:
{
type
:
String
,
type
:
Boolean
,
required
:
true
,
default
:
'
user
'
,
enum
:
[
'
user
'
,
'
admin
'
,
'
root
'
]
}
},
{
timestamps
:
true
})
export
default
mongoose
.
models
.
User
||
mongoose
.
model
(
'
chat
'
,
ChatSchema
)
\ No newline at end of file
export
default
mongoose
.
models
.
chat
||
mongoose
.
model
(
'
chat
'
,
ChatSchema
)
\ No newline at end of file
server/routes/chat.routers.js
0 → 100644
View file @
b7f87260
import
express
from
'
express
'
import
chatCtrl
from
'
../controllers/chat.controller.js
'
const
router
=
express
.
Router
()
router
.
route
(
'
/chat/makeChat
'
)
.
post
(
chatCtrl
.
makeChat
)
.
get
(
chatCtrl
.
hello
)
export
default
router
\ No newline at end of file
server/server.js
View file @
b7f87260
import
express
from
'
express
'
import
connectDb
from
'
./utils/connectDb.js
'
import
user
Router
from
'
./routes/
user
.routes.js
'
import
chat
Router
from
'
./routes/
chat
.route
r
s.js
'
connectDb
()
...
...
@@ -11,12 +11,16 @@ app.use(express.json())
//express가 req.body라는곳을 자동으로만들어서 json형식으로 보낸것을 객체형식으로 넣음
//이부분 다음부터는 req.body라는 부분을 실행할 수 있음
app
.
use
(
user
Router
)
app
.
use
(
chat
Router
)
//userRouter로 이동
app
.
get
(
'
/
'
,
(
req
,
res
)
=>
{
res
.
send
(
'
Hello World. 안녕하세요
'
)
})
// app.post('/makeChat', (req, res) => {
// app.use(chatRouter)
// })
// app.get('/', (req, res) => {
// res.send('Hello World. 안녕하세요')
// })
app
.
listen
(
3030
,
()
=>
{
console
.
log
(
'
Listening on port 3030
'
)
...
...
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