diff --git a/src/App.js b/src/App.js
index 2a81489..2501de7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ import QuestionPage from '@pages/QuestionPage';
import SelfTrainPage from '@pages/SelfTrainPage';
import AloneQuestionCheckList from '@pages/AloneQuestionCheckList';
import MyPage from '@pages/MyPage';
+import StudyMainPage from '@pages/StudyMainPage';
import Sidebar from '@components/Sidebar';
import ProfileMenuContainer from '@components/ProfileMenuContainer';
@@ -42,7 +43,8 @@ export default function App() {
-
+
+
diff --git a/src/components/Modal/StudyMakeModal/StudyMakeModal.js b/src/components/Modal/StudyMakeModal/StudyMakeModal.js
index df237b8..6026f07 100644
--- a/src/components/Modal/StudyMakeModal/StudyMakeModal.js
+++ b/src/components/Modal/StudyMakeModal/StudyMakeModal.js
@@ -1,15 +1,14 @@
import React, { useState } from 'react';
import styled from 'styled-components';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
-import { hideModal, showModal } from '@store/Modal/modal';
+import { hideModal } from '@store/Modal/modal';
import Icon from '@components/Icon';
import InputBar from '@components/InputBar';
import Button from '@components/Button';
-// import { postQuestionListAPI, postQuestionItemAPI } from '@repository/groupRepository';
-import { get } from '@utils/snippet';
+import { postStudyApi } from '@repository/groupRepository';
import { MODALS } from '@utils/constant';
const Wrapper = styled.div`
@@ -154,13 +153,12 @@ const useStyles = makeStyles((theme) => ({
export default function StudyStartModal() {
const classes = useStyles();
const dispatch = useDispatch();
- const qeustionSelector = useSelector(get('question'));
const [title, setTitle] = useState();
const [description, setDescription] = useState();
- const [enterprise, setEnterprise] = useState('산업을 선택해주세요.');
+ const [industry, setIndustry] = useState('산업을 선택해주세요.');
const [job, setJob] = useState('직무를 선택해주세요.');
const [select, setSelect] = useState({
- enterprise: false,
+ industry: false,
job: false,
});
const [date, setDate] = useState(
@@ -170,7 +168,7 @@ export default function StudyStartModal() {
const [time, setTime] = useState(
moment(new Date()).format('HH:mm'),
);
- const enterpriseList = [
+ const industryList = [
'경영/사무',
'마케팅/MD',
'영업',
@@ -213,6 +211,23 @@ export default function StudyStartModal() {
setTime(e.target.value);
};
+ const handleMakeStudy = () => {
+ if(title === '' || description === '' || jobList.indexOf(job) === -1 || industryList.indexOf(industry) === -1) {
+ alert("입력값을 확인해 주세요.");
+ return;
+ }
+ postStudyApi({
+ title,
+ description,
+ job,
+ industry,
+ date,
+ time
+ }).then(()=>{
+ dispatch(hideModal(MODALS.STUDY_MAKE_MODAL));
+ })
+ }
+
return (
<>
@@ -234,18 +249,18 @@ export default function StudyStartModal() {
산업
-
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 98572c1..43e858e 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -7,6 +7,7 @@ import Logo from '@assets/images/witherview_logo.png';
import SidebarButton from './SidebarButton';
const Wrapper = styled.div`
+ position: fixed;
width: ${({ hover }) => (hover ? 296 : 159)}px;
min-width: 159px;
max-width: 296px;
@@ -19,6 +20,7 @@ const Wrapper = styled.div`
-moz-user-select: none;
-o-user-select: none;
user-select: none;
+ z-index: 10;
`;
const WrapTopButton = styled.div`
@@ -62,7 +64,8 @@ export default function Sidebar() {
const handleClick = (value) => {
setClick(value);
- history.push('/mypage');
+ history.push(value === 0 ? '/questionlist'
+ : value === 1 ? 'group-study': 'mypage');
};
function hoverActive() {
diff --git a/src/hooks/usePageBottom.js b/src/hooks/usePageBottom.js
new file mode 100644
index 0000000..966ce3f
--- /dev/null
+++ b/src/hooks/usePageBottom.js
@@ -0,0 +1,19 @@
+import React, {useEffect} from "react";
+
+export default function usePageBottom() {
+ const [bottom, setBottom] = React.useState(false);
+
+ useEffect(() => {
+ function handleScroll() {
+ const isBottom =
+ window.innerHeight + document.documentElement.scrollTop ===
+ document.documentElement.offsetHeight;
+ setBottom(isBottom);
+ }
+ window.addEventListener("scroll", handleScroll);
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+ return bottom;
+}
\ No newline at end of file
diff --git a/src/pages/MyPage/MyPage.js b/src/pages/MyPage/MyPage.js
index 1eb7c03..b19b84d 100644
--- a/src/pages/MyPage/MyPage.js
+++ b/src/pages/MyPage/MyPage.js
@@ -9,79 +9,81 @@ export default function MyPage() {
const email = sessionStorage.getItem('email');
return (
<>
-
-
-
-
-
-
-
- {name}
-
-
-
-
- 화학 / 데이터 분석
-
-
- 신뢰도
-
-
-
- 82%
-
-
-
-
-
-
- 이메일 주소
-
-
- {email}
-
-
- 관심 산업
-
-
-
- 화학
-
-
- 금융
-
-
-
-
-
- 휴대전화
-
-
- 01012345678
-
-
- 관심 직무
-
-
-
- 데이터 분석
-
-
- 유통
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+ 화학 / 데이터 분석
+
+
+ 신뢰도
+
+
+
+ 82%
+
+
+
+
+
+
+ 이메일 주소
+
+
+ {email}
+
+
+ 관심 산업
+
+
+
+ 화학
+
+
+ 금융
+
+
+
+
+
+ 휴대전화
+
+
+ 01012345678
+
+
+ 관심 직무
+
+
+
+ 데이터 분석
+
+
+ 유통
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/pages/MyPage/MyPage.style.js b/src/pages/MyPage/MyPage.style.js
index 7b30afb..8fd3474 100644
--- a/src/pages/MyPage/MyPage.style.js
+++ b/src/pages/MyPage/MyPage.style.js
@@ -1,13 +1,18 @@
import styled from 'styled-components';
+const Background = styled.div`
+ display: flex;
+ width: 100%;
+ height: 100vh;
+ flex: 1;
+ flex-direction: column;
+ align-items: center;
+ background-color: #f6f6f6;
+`;
+
const Wrapper = styled.div`
- display: flex;
- flex: 1;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top
- background-color: #f6f6f6;
+ margin-top: 178px;
+ margin-left: 100px;
`;
const ProfileWrapper = styled.div`
@@ -189,6 +194,7 @@ const BoxWrapper = styled.div`
`;
export default {
+ Background,
Wrapper,
ProfileWrapper,
Profile,
diff --git a/src/pages/StudyMainPage/StudyMainPage.js b/src/pages/StudyMainPage/StudyMainPage.js
index 1a0e149..52b0b16 100644
--- a/src/pages/StudyMainPage/StudyMainPage.js
+++ b/src/pages/StudyMainPage/StudyMainPage.js
@@ -1,33 +1,51 @@
import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
import { getGroupListApi, getGroupMemberApi } from '@repository/groupRepository';
import Icon from '@components/Icon';
import TextButton from '@components/TextButton';
import ProfileInfoContainer from '@components/ProfileInfoContainer/ProfileInfoContainer';
import StudyCardView from '@components/StudyCardView';
import S from './StudyMainPage.style';
-
-import StudyMainList from './StudyMainList.js';
+import { showModal } from '@store/Modal/modal';
+import { MODALS } from '@utils/constant';
+import Modal from '@components/Modal/Modal';
+import usePageBottom from '@hooks/usePageBottom';
export default function StudyMainPage() {
+ const dispatch = useDispatch();
+ const isPageBottom = usePageBottom();
const [groupList, setGroupList] = useState([]);
const [member, setMember] = useState([]);
+ const [page, setPage] = useState(0);
const [loading, setLoading] = useState(false);
- const fetch = async () => {
- getGroupListApi().then((res) => {
+ const fetch = async (page) => {
+ getGroupListApi(page).then((res) => {
+ const unit = res.data.length === 0 ? 0 : 1;
res.data.map((val) => {
getGroupMemberApi(val.id).then((response) => {
console.log(`id ${val.id} member: ${response.data.length}`);
setMember((member) => [...member, { id: val.id, member: response.data.length }]);
});
});
- setGroupList(res.data);
+ setGroupList((groupList)=>[...groupList, ...res.data]);
setLoading(true);
+ setPage(page+unit);
});
};
+ const handleStudyAddModal = () => {
+ dispatch(showModal(MODALS.STUDY_MAKE_MODAL));
+ }
+
useEffect(() => {
- fetch();
+ fetch(page);
}, []);
+
+ useEffect(()=>{
+ if (!isPageBottom) return;
+ fetch(page);
+ }, [isPageBottom])
+
const ButtonList = [
'이공계_사기업',
'이공계_공기업',
@@ -35,8 +53,10 @@ export default function StudyMainPage() {
'인문계_공기업',
'자유_기타',
];
+
return (
+
@@ -60,7 +80,7 @@ export default function StudyMainPage() {
-
+
diff --git a/src/pages/StudyMainPage/StudyMainPage.style.js b/src/pages/StudyMainPage/StudyMainPage.style.js
index c02a146..410da52 100644
--- a/src/pages/StudyMainPage/StudyMainPage.style.js
+++ b/src/pages/StudyMainPage/StudyMainPage.style.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
display: flex;
flex: 1;
flex-direction: column;
- margin-bottom: 50px;
+ margin: 53px 0 50px 245px;
`;
const SearchWrapper = styled.div`
diff --git a/src/repository/groupRepository.js b/src/repository/groupRepository.js
index c3b5732..cb24310 100644
--- a/src/repository/groupRepository.js
+++ b/src/repository/groupRepository.js
@@ -3,12 +3,17 @@
import api from '@context/serverContext';
export const getGroupListApi = async (param) => await api({
- url: '/api/group',
+ url: `/api/group?page=${param}`,
type: 'get',
- param,
});
export const getGroupMemberApi = async (param) => await api({
url: `/api/group/room/${param}`,
type: 'get',
});
+
+export const postStudyApi = async (param) => await api({
+ url: `/api/group`,
+ type: 'post',
+ param
+});
diff --git a/src/store/Modal/modal.js b/src/store/Modal/modal.js
index 449ca5b..3844d42 100644
--- a/src/store/Modal/modal.js
+++ b/src/store/Modal/modal.js
@@ -6,7 +6,7 @@ const modalReducer = createSlice({
initialState: {
[MODALS.QUESTIONLIST_SAVE_MODAL]: false,
[MODALS.SELF_TRAIN_START_MODAL]: false,
- [MODALS.STUDY_MAKE_MODAL]: true,
+ [MODALS.STUDY_MAKE_MODAL]: false,
},
reducers: {
displayModal(state, { payload: { modalName } }) {