ChallengeForm.js
3.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import palette from '../../lib/styles/palette';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
background: palette.gray[2],
padding: theme.spacing(8),
},
paper: {
padding: theme.spacing(8),
margin: 'auto',
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
const ChallengeForm = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={5}>
<Grid item xs={12}>
<Accordion>
<AccordionSummary>
<Typography>챌린지 참여하기</Typography>
</AccordionSummary>
<AccordionDetails>
<Paper className={classes.paper}>
챌린지 참여하기
<Autocomplete
style={{ width: 300 }}
options={['전체', '준비', '진행 중', '마감']}
renderInput={(params) => (
<TextField
{...params}
label="검색 기준"
variant="outlined"
inputProps={{
...params.inputProps,
Autocomplete: 'new-password',
}}
/>
)}
/>
</Paper>
</AccordionDetails>
</Accordion>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>
참여중인 챌린지
<Autocomplete
style={{ width: 300 }}
options={['전체', '준비', '진행 중', '마감']}
renderInput={(params) => (
<TextField
{...params}
label="검색 기준"
variant="outlined"
inputProps={{
...params.inputProps,
Autocomplete: 'new-password',
}}
/>
)}
/>
<Grid container spacing={5}>
<Grid item xs={4}>
<Paper className={classes.paper}>
챌린지 이름, 기간, 참여 인원수
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>뒤 배경 변경 필요</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>test3</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>test4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</div>
);
};
/*
TODO:
챌린지 목록
챌린지 이름
챌린지 기간 (Start - End)
챌린지 세션 정보 (일 간격과 목표 문제)
그룹 원 정보.
*/
export default ChallengeForm;