Showing
13 changed files
with
187 additions
and
49 deletions
jaksimsamil-page/package-lock.json
0 → 100644
This diff could not be displayed because it is too large.
| ... | @@ -3,6 +3,7 @@ | ... | @@ -3,6 +3,7 @@ |
| 3 | "version": "0.1.0", | 3 | "version": "0.1.0", |
| 4 | "private": true, | 4 | "private": true, |
| 5 | "dependencies": { | 5 | "dependencies": { |
| 6 | + "@material-ui/core": "^4.10.2", | ||
| 6 | "@testing-library/jest-dom": "^4.2.4", | 7 | "@testing-library/jest-dom": "^4.2.4", |
| 7 | "@testing-library/react": "^9.3.2", | 8 | "@testing-library/react": "^9.3.2", |
| 8 | "@testing-library/user-event": "^7.1.2", | 9 | "@testing-library/user-event": "^7.1.2", | ... | ... |
| 1 | +import React from 'react'; | ||
| 2 | +import { makeStyles } from '@material-ui/core/styles'; | ||
| 3 | +import Paper from '@material-ui/core/Paper'; | ||
| 4 | +import Grid from '@material-ui/core/Grid'; | ||
| 5 | +import palette from '../../lib/styles/palette'; | ||
| 6 | +const useStyles = makeStyles((theme) => ({ | ||
| 7 | + root: { | ||
| 8 | + flexGrow: 1, | ||
| 9 | + background: palette.gray[2], | ||
| 10 | + }, | ||
| 11 | + paper: { | ||
| 12 | + padding: theme.spacing(2), | ||
| 13 | + textAlign: 'center', | ||
| 14 | + color: theme.palette.text.secondary, | ||
| 15 | + }, | ||
| 16 | +})); | ||
| 17 | +const HomeForm = () => { | ||
| 18 | + const classes = useStyles(); | ||
| 19 | + return ( | ||
| 20 | + <div className={classes.root}> | ||
| 21 | + <Grid container spacing={3}> | ||
| 22 | + <Grid item xs={12}> | ||
| 23 | + <Paper className={classes.paper}>xs=12</Paper> | ||
| 24 | + </Grid> | ||
| 25 | + <Grid item xs={6}> | ||
| 26 | + <Paper className={classes.paper}>xs=6</Paper> | ||
| 27 | + </Grid> | ||
| 28 | + <Grid item xs={6}> | ||
| 29 | + <Paper className={classes.paper}>xs=6</Paper> | ||
| 30 | + </Grid> | ||
| 31 | + <Grid item xs={3}> | ||
| 32 | + <Paper className={classes.paper}>xs=3</Paper> | ||
| 33 | + </Grid> | ||
| 34 | + <Grid item xs={3}> | ||
| 35 | + <Paper className={classes.paper}>xs=3</Paper> | ||
| 36 | + </Grid> | ||
| 37 | + <Grid item xs={3}> | ||
| 38 | + <Paper className={classes.paper}>xs=3</Paper> | ||
| 39 | + </Grid> | ||
| 40 | + <Grid item xs={3}> | ||
| 41 | + <Paper className={classes.paper}>xs=3</Paper> | ||
| 42 | + </Grid> | ||
| 43 | + </Grid> | ||
| 44 | + </div> | ||
| 45 | + ); | ||
| 46 | +}; | ||
| 47 | + | ||
| 48 | +export default HomeForm; |
| 1 | import React from 'react'; | 1 | import React from 'react'; |
| 2 | +import { makeStyles } from '@material-ui/core/styles'; | ||
| 2 | import styled from 'styled-components'; | 3 | import styled from 'styled-components'; |
| 3 | -import Button from '../common/Button'; | ||
| 4 | import palette from '../../lib/styles/palette'; | 4 | import palette from '../../lib/styles/palette'; |
| 5 | -const BJIDFormBlock = styled.div` | 5 | +import Button from '@material-ui/core/Button'; |
| 6 | - width: 100%; | 6 | +import TextField from '@material-ui/core/TextField'; |
| 7 | - border-top: 1px solid ${palette.gray[2]}; | 7 | + |
| 8 | - padding-top: 2rem; | 8 | +const useStyles = makeStyles((theme) => ({ |
| 9 | - h4 { | 9 | + root: { |
| 10 | - color: ${palette.gray[8]}; | 10 | + '& > *': { |
| 11 | - margin-top: 0; | 11 | + margin: theme.spacing(1), |
| 12 | - margin-bottom: 0.5rem; | 12 | + }, |
| 13 | - } | 13 | + }, |
| 14 | -`; | 14 | +})); |
| 15 | 15 | ||
| 16 | const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { | 16 | const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { |
| 17 | + const classes = useStyles(); | ||
| 17 | return ( | 18 | return ( |
| 18 | - <BJIDFormBlock> | 19 | + <div> |
| 19 | - <h4>백준 아이디</h4> | ||
| 20 | <form onSubmit={onBJIDSubmit}> | 20 | <form onSubmit={onBJIDSubmit}> |
| 21 | - <input | 21 | + <TextField |
| 22 | name="userBJID" | 22 | name="userBJID" |
| 23 | onChange={onChange} | 23 | onChange={onChange} |
| 24 | value={profile.userBJID} | 24 | value={profile.userBJID} |
| 25 | placeholder="백준 아이디" | 25 | placeholder="백준 아이디" |
| 26 | + label="백준 아이디" | ||
| 26 | /> | 27 | /> |
| 27 | - <button type="submit">등록</button> | 28 | + <Button variant="outlined" type="submit"> |
| 29 | + 등록 | ||
| 30 | + </Button> | ||
| 28 | </form> | 31 | </form> |
| 29 | - <button onClick={onSyncBJIDSubmit}>동기화</button> | 32 | + <Button variant="outlined" onClick={onSyncBJIDSubmit}> |
| 30 | - </BJIDFormBlock> | 33 | + 동기화 |
| 34 | + </Button> | ||
| 35 | + </div> | ||
| 31 | ); | 36 | ); |
| 32 | }; | 37 | }; |
| 33 | export default BJIDForm; | 38 | export default BJIDForm; | ... | ... |
| ... | @@ -3,6 +3,9 @@ import styled from 'styled-components'; | ... | @@ -3,6 +3,9 @@ import styled from 'styled-components'; |
| 3 | import Button from '../common/Button'; | 3 | import Button from '../common/Button'; |
| 4 | import palette from '../../lib/styles/palette'; | 4 | import palette from '../../lib/styles/palette'; |
| 5 | import BJIDForm from './BJIDForm'; | 5 | import BJIDForm from './BJIDForm'; |
| 6 | +import { makeStyles } from '@material-ui/core/styles'; | ||
| 7 | +import Paper from '@material-ui/core/Paper'; | ||
| 8 | +import Grid from '@material-ui/core/Grid'; | ||
| 6 | 9 | ||
| 7 | const SettingFormBlock = styled.div` | 10 | const SettingFormBlock = styled.div` |
| 8 | h3 { | 11 | h3 { |
| ... | @@ -33,30 +36,40 @@ const SectionContainer = styled.div` | ... | @@ -33,30 +36,40 @@ const SectionContainer = styled.div` |
| 33 | display: flex; | 36 | display: flex; |
| 34 | `; | 37 | `; |
| 35 | 38 | ||
| 39 | +const useStyles = makeStyles((theme) => ({ | ||
| 40 | + root: { | ||
| 41 | + flexGrow: 1, | ||
| 42 | + background: palette.gray[2], | ||
| 43 | + }, | ||
| 44 | + paper: { | ||
| 45 | + margin: 'auto', | ||
| 46 | + textAlign: 'center', | ||
| 47 | + padding: 30, | ||
| 48 | + }, | ||
| 49 | +})); | ||
| 50 | + | ||
| 36 | const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { | 51 | const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { |
| 52 | + const classes = useStyles(); | ||
| 37 | return ( | 53 | return ( |
| 38 | - <SettingFormBlock> | 54 | + <div className={classes.root}> |
| 39 | - <SectionContainer> | 55 | + <Grid container spacing={3}> |
| 40 | - <h3>{profile.username}</h3> | 56 | + <Grid item xs={12}> |
| 41 | - <p>입력</p> | 57 | + <Paper className={classes.paper}> |
| 42 | - </SectionContainer> | 58 | + <h3>{profile.username}</h3> |
| 43 | - | 59 | + </Paper> |
| 44 | - <SectionContainer> | 60 | + </Grid> |
| 45 | - <BJIDForm | 61 | + <Grid container item xs={12}> |
| 46 | - profile={profile} | 62 | + <Paper className={classes.paper} elevation={3}> |
| 47 | - onChange={onChange} | 63 | + <BJIDForm |
| 48 | - onBJIDSubmit={onBJIDSubmit} | 64 | + profile={profile} |
| 49 | - onSyncBJIDSubmit={onSyncBJIDSubmit} | 65 | + onChange={onChange} |
| 50 | - /> | 66 | + onBJIDSubmit={onBJIDSubmit} |
| 51 | - </SectionContainer> | 67 | + onSyncBJIDSubmit={onSyncBJIDSubmit} |
| 52 | - | 68 | + /> |
| 53 | - <SectionContainer> | 69 | + </Paper> |
| 54 | - <h3>친구</h3> | 70 | + </Grid> |
| 55 | - <StyledInput name="BJID" placeholder="친구 아이디" /> | 71 | + </Grid> |
| 56 | - <Button>추가</Button> | 72 | + </div> |
| 57 | - </SectionContainer> | ||
| 58 | - <h3>친구 리스트</h3> | ||
| 59 | - </SettingFormBlock> | ||
| 60 | ); | 73 | ); |
| 61 | }; | 74 | }; |
| 62 | 75 | ... | ... |
| 1 | +import React, { useEffect, useState } from 'react'; | ||
| 2 | +import { useDispatch, useSelector } from 'react-redux'; | ||
| 3 | +import { withRouter } from 'react-router-dom'; | ||
| 4 | +import HomeForm from '../../components/home/HomeForm'; | ||
| 5 | +import { getPROFILE } from '../../modules/profile'; | ||
| 6 | +import { analyzeBJ } from '../../lib/util/analyzeBJ'; | ||
| 7 | +const HomeContainer = ({ history }) => { | ||
| 8 | + const dispatch = useDispatch(); | ||
| 9 | + const [isLogin, setLogin] = useState(false); | ||
| 10 | + const { user, profile } = useSelector(({ user, profile }) => ({ | ||
| 11 | + user: user.user, | ||
| 12 | + profile: profile, | ||
| 13 | + })); | ||
| 14 | + useEffect(() => { | ||
| 15 | + analyzeBJ(profile.solvedBJ); | ||
| 16 | + }, [profile.solvedBJ]); | ||
| 17 | + useEffect(() => { | ||
| 18 | + setLogin(true); | ||
| 19 | + if (user) { | ||
| 20 | + let username = user.username; | ||
| 21 | + dispatch(getPROFILE({ username })); | ||
| 22 | + } | ||
| 23 | + }, [dispatch, user]); | ||
| 24 | + return <HomeForm />; | ||
| 25 | +}; | ||
| 26 | +export default withRouter(HomeContainer); |
| ... | @@ -6,12 +6,12 @@ import { | ... | @@ -6,12 +6,12 @@ import { |
| 6 | setBJID, | 6 | setBJID, |
| 7 | getPROFILE, | 7 | getPROFILE, |
| 8 | syncBJID, | 8 | syncBJID, |
| 9 | + initializeProfile, | ||
| 9 | } from '../../modules/profile'; | 10 | } from '../../modules/profile'; |
| 10 | import SettingForm from '../../components/setting/SettingForm'; | 11 | import SettingForm from '../../components/setting/SettingForm'; |
| 11 | -import { sync } from '../../../node_modules/fast-glob/index'; | 12 | + |
| 12 | const SettingContainer = ({ history }) => { | 13 | const SettingContainer = ({ history }) => { |
| 13 | const dispatch = useDispatch(); | 14 | const dispatch = useDispatch(); |
| 14 | - const [error, setError] = useState(null); | ||
| 15 | const { user, profile } = useSelector(({ user, profile }) => ({ | 15 | const { user, profile } = useSelector(({ user, profile }) => ({ |
| 16 | user: user.user, | 16 | user: user.user, |
| 17 | profile: profile, | 17 | profile: profile, |
| ... | @@ -42,11 +42,17 @@ const SettingContainer = ({ history }) => { | ... | @@ -42,11 +42,17 @@ const SettingContainer = ({ history }) => { |
| 42 | }; | 42 | }; |
| 43 | 43 | ||
| 44 | useEffect(() => { | 44 | useEffect(() => { |
| 45 | - console.log('1'); | 45 | + if (!user) { |
| 46 | - let username = JSON.parse(user).username; | 46 | + alert('로그인이 필요합니다 '); |
| 47 | - dispatch(getPROFILE({ username })); | 47 | + history.push('/'); |
| 48 | - //Do Init Form | 48 | + } else { |
| 49 | - }, [dispatch]); | 49 | + let username = user.username; |
| 50 | + dispatch(getPROFILE({ username })); | ||
| 51 | + return () => { | ||
| 52 | + dispatch(initializeProfile()); | ||
| 53 | + }; | ||
| 54 | + } | ||
| 55 | + }, [dispatch, user, history]); | ||
| 50 | 56 | ||
| 51 | return ( | 57 | return ( |
| 52 | <SettingForm | 58 | <SettingForm | ... | ... |
jaksimsamil-page/src/lib/util/analyzeBJ.js
0 → 100644
| 1 | +/* | ||
| 2 | +1. 날짜 순 정렬 | ||
| 3 | +2. 현재 날짜와의 차이 | ||
| 4 | +3. 최근 일주일간 푼 문제 수 | ||
| 5 | +4. 추천 문제 | ||
| 6 | +*/ | ||
| 7 | +exports.analyzeBJ = function (solvedBJ) { | ||
| 8 | + console.log(typeof solvedBJ); | ||
| 9 | + if (solvedBJ) { | ||
| 10 | + solvedBJ.sort(function (a, b) { | ||
| 11 | + return a.solvedDate > b.solvedDate | ||
| 12 | + ? -1 | ||
| 13 | + : a.solvedDate < b.solvedDate | ||
| 14 | + ? 1 | ||
| 15 | + : 0; | ||
| 16 | + }); | ||
| 17 | + console.log(solvedBJ); | ||
| 18 | + } | ||
| 19 | +}; |
jaksimsamil-page/src/lib/util/sendSlack.js
0 → 100644
| 1 | +const webhookUri = | ||
| 2 | + 'https://hooks.slack.com/services/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'; | ||
| 3 | + | ||
| 4 | +const slack = new Slack(); | ||
| 5 | +slack.setWebhook(webhookUri); | ||
| 6 | +const send = async (message) => { | ||
| 7 | + slack.webhook( | ||
| 8 | + { | ||
| 9 | + channel: '#general', // 전송될 슬랙 채널 | ||
| 10 | + username: 'webhookbot', //슬랙에 표시될 이름 | ||
| 11 | + text: message, | ||
| 12 | + }, | ||
| 13 | + function (err, response) { | ||
| 14 | + console.log(response); | ||
| 15 | + }, | ||
| 16 | + ); | ||
| 17 | +}; | ||
| 18 | + | ||
| 19 | +send('안녕'); |
| ... | @@ -22,7 +22,7 @@ const [ | ... | @@ -22,7 +22,7 @@ const [ |
| 22 | SYNC_BJID_SUCCESS, | 22 | SYNC_BJID_SUCCESS, |
| 23 | SYNC_BJID_FAILURE, | 23 | SYNC_BJID_FAILURE, |
| 24 | ] = createRequestActionTypes('profile/SYNC_BJID'); | 24 | ] = createRequestActionTypes('profile/SYNC_BJID'); |
| 25 | - | 25 | +export const initializeProfile = createAction(INITIALIZE); |
| 26 | export const syncBJID = createAction(SYNC_BJID, ({ username }) => ({ | 26 | export const syncBJID = createAction(SYNC_BJID, ({ username }) => ({ |
| 27 | username, | 27 | username, |
| 28 | })); | 28 | })); | ... | ... |
| 1 | import React from 'react'; | 1 | import React from 'react'; |
| 2 | import HeaderContainer from '../containers/common/HeaderContainer'; | 2 | import HeaderContainer from '../containers/common/HeaderContainer'; |
| 3 | -import Button from '../components/common/Button'; | 3 | +import HomeContainer from '../containers/home/HomeContainer'; |
| 4 | 4 | ||
| 5 | const HomePage = () => { | 5 | const HomePage = () => { |
| 6 | return ( | 6 | return ( |
| 7 | <div> | 7 | <div> |
| 8 | <HeaderContainer /> | 8 | <HeaderContainer /> |
| 9 | - <Button>home</Button> | 9 | + <HomeContainer /> |
| 10 | </div> | 10 | </div> |
| 11 | ); | 11 | ); |
| 12 | }; | 12 | }; | ... | ... |
This diff is collapsed. Click to expand it.
| ... | @@ -22,6 +22,7 @@ | ... | @@ -22,6 +22,7 @@ |
| 22 | "mongoose": "^5.9.17", | 22 | "mongoose": "^5.9.17", |
| 23 | "morgan": "^1.10.0", | 23 | "morgan": "^1.10.0", |
| 24 | "path": "^0.12.7", | 24 | "path": "^0.12.7", |
| 25 | + "slack-node": "^0.1.8", | ||
| 25 | "voca": "^1.4.0" | 26 | "voca": "^1.4.0" |
| 26 | }, | 27 | }, |
| 27 | "devDependencies": { | 28 | "devDependencies": { | ... | ... |
-
Please register or login to post a comment