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
reservation-service
Commits
309d4ea9
Commit
309d4ea9
authored
Nov 04, 2020
by
Ha YeaJin
Browse files
card component 생성
parent
ded7f980
Changes
4
Show whitespace changes
Inline
Side-by-side
server/client/src/Components/Card.js
0 → 100644
View file @
309d4ea9
import
React
,
{
useState
,
useContext
}
from
'
react
'
;
import
{
Card
,
Accordion
,
Col
,
AccordionContext
,
useAccordionToggle
}
from
'
react-bootstrap
'
;
import
styled
from
'
styled-components
'
;
const
Text
=
styled
(
Card
.
Body
)
`
& .WRAP {
display: inline-block;
text-overflow: ellipsis;
width: 100%;
white-space: initial;
}
`
function
Notice
({
card_index
,
title
,
date
,
content
})
{
function
ContextAwareToggle
({
children
,
eventKey
,
callback
})
{
const
currentEventKey
=
useContext
(
AccordionContext
);
const
decoratedOnClick
=
useAccordionToggle
(
eventKey
,
()
=>
callback
&&
callback
(
eventKey
),
);
const
isCurrentEventKey
=
currentEventKey
===
eventKey
;
return
(
<
div
className
=
{
isCurrentEventKey
?
"
text-wrap whiteSpace-initial
"
:
"
text-truncate
"
}
onClick
=
{
decoratedOnClick
}
>
{
children
}
<
/div
>
);
}
function
dateForm
(
day
)
{
const
post_day
=
new
Date
(
day
);
let
year
=
post_day
.
getFullYear
();
let
month
=
post_day
.
getMonth
()
+
1
;
let
date
=
post_day
.
getDate
();
month
=
month
<
10
?
'
0
'
+
month
:
month
;
date
=
date
<
10
?
'
0
'
+
date
:
date
;
const
new_date
=
year
+
"
-
"
+
month
+
"
-
"
+
date
;
return
new_date
}
return
(
<
Card
className
=
"
w-100
"
>
<
Card
.
Header
className
=
"
row flex-row py-3
"
>
<
Col
md
=
{
10
}
xs
=
{
8
}
>
<
ContextAwareToggle
variant
=
"
link
"
eventKey
=
{
card_index
+
1
}
>
{
title
}
<
/ContextAwareToggle
>
<
/Col
>
<
Col
md
=
{
2
}
xs
=
{
4
}
className
=
"
p-0
"
>
{
dateForm
(
date
)}
<
/Col
>
<
/Card.Header
>
<
Accordion
.
Collapse
eventKey
=
{
card_index
+
1
}
>
<
Text
><
pre
className
=
"
text-overflow-ellipsis w-100 white-space-initial
"
>
{
content
}
<
/pre></
Text
>
<
/Accordion.Collapse
>
<
/Card
>
)
}
export
default
Notice
;
\ No newline at end of file
server/client/src/Pages/ApplyPage.js
View file @
309d4ea9
...
@@ -125,7 +125,6 @@ function Apply(props) {
...
@@ -125,7 +125,6 @@ function Apply(props) {
<
/h3
>
<
/h3
>
<
div
className
=
"
form-group
"
>
<
div
className
=
"
form-group
"
>
<
div
className
=
{
touched
.
date
&&
errors
.
date
?
"
text-danger
"
:
""
}
>
신청날짜
<
/div
>
<
div
className
=
{
touched
.
date
&&
errors
.
date
?
"
text-danger
"
:
""
}
>
신청날짜
<
/div
>
<
input
<
input
className
=
{(
touched
.
date
&&
errors
.
date
?
'
form-control is-invalid
'
:
"
form-control
"
)}
className
=
{(
touched
.
date
&&
errors
.
date
?
'
form-control is-invalid
'
:
"
form-control
"
)}
...
...
server/client/src/Pages/NoticePage.js
View file @
309d4ea9
...
@@ -2,26 +2,29 @@ import React, { useState, useEffect, useRef } from 'react';
...
@@ -2,26 +2,29 @@ import React, { useState, useEffect, useRef } from 'react';
import
Menu
from
'
../Components/Menu
'
;
import
Menu
from
'
../Components/Menu
'
;
import
axios
from
'
axios
'
;
import
axios
from
'
axios
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Container
,
Row
,
Col
,
Card
,
Accordion
,
Button
}
from
'
react-bootstrap
'
;
import
{
Container
,
Row
,
Col
,
Button
,
Accordion
}
from
'
react-bootstrap
'
;
import
CARD
from
'
../Components/Card
'
;
function
Notice
()
{
function
Notice
()
{
const
[
user
,
setUser
]
=
useState
({
role
:
""
})
const
[
notices
,
setNotices
]
=
useState
([]);
const
[
notices
,
setNotices
]
=
useState
([]);
// const [show, setShow] = useState(false);
useEffect
(()
=>
{
useEffect
(()
=>
{
acheck
();
getNotice
();
getNotice
();
},
[]);
},
[]);
function
dateForm
(
day
)
{
function
acheck
()
{
const
post_day
=
new
Date
(
day
);
axios
.
get
(
`/users/
${
localStorage
.
getItem
(
'
_id
'
)}
`
)
let
year
=
post_day
.
getFullYear
();
.
then
(
res
=>
{
let
month
=
post_day
.
getMonth
()
+
1
;
if
(
res
.
data
.
role
==
"
admin
"
)
{
let
date
=
post_day
.
getDate
();
setUser
(
res
.
data
)
}
month
=
month
<
10
?
'
0
'
+
month
:
month
;
}).
catch
(
err
=>
{
date
=
date
<
10
?
'
0
'
+
date
:
date
;
alert
(
err
.
error
)
});
const
new_date
=
year
+
"
-
"
+
month
+
"
-
"
+
date
;
return
new_date
}
}
function
getNotice
()
{
function
getNotice
()
{
...
@@ -42,17 +45,21 @@ function Notice() {
...
@@ -42,17 +45,21 @@ function Notice() {
<
Container
fluid
>
<
Container
fluid
>
<
Row
className
=
"
justify-content-center vw-100 vh-90
"
>
<
Row
className
=
"
justify-content-center vw-100 vh-90
"
>
<
Col
md
=
{
7
}
>
<
Col
md
=
{
7
}
>
<
h2
className
=
"
p-3 border-bottom
"
>
공지사항
<
Link
to
=
"
/write
"
>
글
작성
<
/Link></
h2
>
<
h2
className
=
"
p-3 border-bottom d-flex justify-content-between
"
>
공지사항
{
user
.
role
===
"
admin
"
?
(
<
Button
as
=
{
Link
}
to
=
"
/write
"
>
글
작성
<
/Button>
)
: null}</
h2
>
<
Accordion
>
<
Accordion
>
{
notices
.
map
((
notice
,
index
)
=>
{
notices
.
map
((
notice
,
index
)
=>
<
CARD
card_index
=
{
index
}
title
=
{
notice
.
notice_title
}
date
=
{
notice
.
post_date
}
content
=
{
notice
.
notice_content
}
/
>
<
Card
>
)}
<
Card
.
Header
>
{
/* <Card>
<
Accordion
.
Toggle
as
=
{
Button
}
variant
=
"
link
"
eventKey
=
{
index
+
1
}
>
{
notice
.
notice_title
}
<
span
className
=
"
text-right
"
>
{
dateForm
(
notice
.
post_date
)}
<
/span></
Accordion
.
Toggle
>
<Card.Header className="d-flex justify-content-space-between">
<Accordion.Toggle as={Button} variant="link" eventKey={index + 1} className={"d-inline-block " + (show ? "text-wrap" : "text-truncate")} onClick={() => setShow(!show)}>{notice.notice_title}</Accordion.Toggle>
<span className="d-flex align-items-center" style={{ width: "50%" }}>{dateForm(notice.post_date)}</span>
</Card.Header>
</Card.Header>
<Accordion.Collapse eventKey={index + 1}>
<Accordion.Collapse eventKey={index + 1}>
<
Card
.
Body
>
{
notice
.
notice_content
}
<
/Card.Body
>
<Card.Body>
<pre>
{notice.notice_content}</
pre></
Card.Body>
</Accordion.Collapse>
</Accordion.Collapse>
<
/Card>
)
}
</Card> */
}
<
/Accordion
>
<
/Accordion
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
...
...
server/client/src/Pages/WritePage.js
View file @
309d4ea9
...
@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom';
...
@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom';
import
Menu
from
'
../Components/Menu
'
;
import
Menu
from
'
../Components/Menu
'
;
import
*
as
Yup
from
'
yup
'
;
import
*
as
Yup
from
'
yup
'
;
import
axios
from
'
axios
'
;
import
axios
from
'
axios
'
;
import
{
Container
,
Row
,
Col
,
Form
}
from
'
react-bootstrap
'
;
import
{
Container
,
Row
,
Col
,
Button
}
from
'
react-bootstrap
'
;
import
{
Field
,
Formik
}
from
'
formik
'
;
import
{
Field
,
Formik
}
from
'
formik
'
;
function
Write
()
{
function
Write
()
{
...
@@ -67,7 +67,7 @@ function Write() {
...
@@ -67,7 +67,7 @@ function Write() {
// </Form.Group>
// </Form.Group>
// </Form>
// </Form>
<
form
onSubmit
=
{
handleSubmit
}
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
form-group
"
>
<
div
className
=
"
form-group
"
>
<
div
className
=
{
touched
.
name
&&
errors
.
name
?
"
text-danger
"
:
""
}
>
제목
<
/div
>
<
div
className
=
{
touched
.
name
&&
errors
.
name
?
"
text-danger
"
:
""
}
>
제목
<
/div
>
<
input
className
=
{(
touched
.
name
&&
errors
.
name
?
'
form-control is-invalid
'
:
"
form-control
"
)}
<
input
className
=
{(
touched
.
name
&&
errors
.
name
?
'
form-control is-invalid
'
:
"
form-control
"
)}
...
@@ -79,14 +79,10 @@ function Write() {
...
@@ -79,14 +79,10 @@ function Write() {
<
div
className
=
"
form-group
"
>
<
div
className
=
"
form-group
"
>
<
div
className
=
{
touched
.
name
&&
errors
.
name
?
"
text-danger
"
:
""
}
>
내용
<
/div
>
<
div
className
=
{
touched
.
name
&&
errors
.
name
?
"
text-danger
"
:
""
}
>
내용
<
/div
>
<
input
className
=
{(
touched
.
name
&&
errors
.
name
?
'
form-control is-invalid
'
:
"
form-control
"
)}
<
Field
as
=
"
textarea
"
rows
=
{
8
}
style
=
{{
"
min-width
"
:
"
100%
"
}}
type
=
"
text
"
{...
getFieldProps
(
'
content
'
)}
/
>
content
=
"
content
"
{...
getFieldProps
(
'
content
'
)}
placeholder
=
"
내용
"
/>
<
/div
>
<
/div
>
<
Button
className
=
"
mb-2
"
variant
=
"
dark
"
type
=
"
submit
"
disabled
=
{
isSubmitting
}
>
공지
등록
<
/Button
>
<
button
type
=
"
submit
"
className
=
"
btn btn-dark
"
disabled
=
{
isSubmitting
}
>
공지
등록
<
/button
>
<
/form
>
<
/form
>
)}
)}
<
/Formik
>
<
/Formik
>
...
...
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