송용우 / oss-Jaksimsamil

Go to a project
Toggle navigation Toggle navigation pinning
송용우
59d30c0f 1 parent 419a4785

Update Material Design

Inline Side-by-side
Showing 9 changed files with 138 additions and 27 deletions
This diff could not be displayed because it is too large.
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.10.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
......
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import palette from '../../lib/styles/palette';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
background: palette.gray[2],
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
const HomeForm = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
</Grid>
</div>
);
};
export default HomeForm;
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
import Button from '../common/Button';
import palette from '../../lib/styles/palette';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
const BJIDFormBlock = styled.div`
width: 100%;
border-top: 1px solid ${palette.gray[2]};
padding-top: 2rem;
h4 {
color: ${palette.gray[8]};
......@@ -13,21 +14,35 @@ const BJIDFormBlock = styled.div`
}
`;
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}));
const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
const classes = useStyles();
return (
<BJIDFormBlock>
<h4>백준 아이디</h4>
<div>
<form onSubmit={onBJIDSubmit}>
<input
<TextField
name="userBJID"
onChange={onChange}
value={profile.userBJID}
placeholder="백준 아이디"
id="standard-basic"
label="백준 아이디"
/>
<button type="submit">등록</button>
<Button variant="outlined" type="submit">
등록
</Button>
</form>
<button onClick={onSyncBJIDSubmit}>동기화</button>
</BJIDFormBlock>
<Button variant="outlined" onClick={onSyncBJIDSubmit}>
동기화
</Button>
</div>
);
};
export default BJIDForm;
......
......@@ -3,6 +3,9 @@ import styled from 'styled-components';
import Button from '../common/Button';
import palette from '../../lib/styles/palette';
import BJIDForm from './BJIDForm';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const SettingFormBlock = styled.div`
h3 {
......@@ -33,30 +36,40 @@ const SectionContainer = styled.div`
display: flex;
`;
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
background: palette.gray[2],
},
paper: {
margin: 'auto',
textAlign: 'center',
padding: 30,
},
}));
const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
const classes = useStyles();
return (
<SettingFormBlock>
<SectionContainer>
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<h3>{profile.username}</h3>
<p>입력</p>
</SectionContainer>
<SectionContainer>
</Paper>
</Grid>
<Grid container item xs={12}>
<Paper className={classes.paper} elevation={3}>
<BJIDForm
profile={profile}
onChange={onChange}
onBJIDSubmit={onBJIDSubmit}
onSyncBJIDSubmit={onSyncBJIDSubmit}
/>
</SectionContainer>
<SectionContainer>
<h3>친구</h3>
<StyledInput name="BJID" placeholder="친구 아이디" />
<Button>추가</Button>
</SectionContainer>
<h3>친구 리스트</h3>
</SettingFormBlock>
</Paper>
</Grid>
</Grid>
</div>
);
};
......
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { withRouter } from 'react-router-dom';
import HomeForm from '../../components/home/HomeForm';
const HomeContainer = ({ histroy }) => {
const dispatch = useDispatch();
const [isLogin, setLogin] = useState(false);
const { user, profile } = useSelector(({ user, profile }) => ({
user: user.user,
profile: profile,
}));
useEffect(() => {
if (user) {
setLogin(true);
}
});
return <HomeForm />;
};
export default withRouter(HomeContainer);
......@@ -9,7 +9,7 @@ import {
initializeProfile,
} from '../../modules/profile';
import SettingForm from '../../components/setting/SettingForm';
import { sync } from '../../../node_modules/fast-glob/index';
const SettingContainer = ({ history }) => {
const dispatch = useDispatch();
const { user, profile } = useSelector(({ user, profile }) => ({
......@@ -42,12 +42,17 @@ const SettingContainer = ({ history }) => {
};
useEffect(() => {
if (!user) {
alert('로그인이 필요합니다 ');
history.push('/');
} else {
let username = user.username;
dispatch(getPROFILE({ username }));
return () => {
dispatch(initializeProfile());
};
}, [dispatch, user]);
}
}, [dispatch, user, history]);
return (
<SettingForm
......
/*
1. 날짜 순 정렬
2. 현재 날짜와의 차이
3. 최근 일주일간 푼 문제 수
4. 추천 문제
*/
exports.analyzeBJ = function (solvedBJ) {
console.log(solvedBJ);
};
import React from 'react';
import HeaderContainer from '../containers/common/HeaderContainer';
import Button from '../components/common/Button';
import HomeContainer from '../containers/home/HomeContainer';
const HomePage = () => {
return (
<div>
<HeaderContainer />
<Button>home</Button>
<HomeContainer />
</div>
);
};
......