Skip to content

Commit

Permalink
feat: infinity scroll적용 (#100)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lavegaa
Lavegaa committed Dec 5, 2020
1 parent 645f315 commit ef85781
Show file tree
Hide file tree
Showing 10 changed files with 180 additions and 108 deletions.
4 changes: 3 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -42,7 +43,8 @@ export default function App() {
<AuthRoute path="/question/:id" component={QuestionPage} />
<AuthRoute path="/self-training" component={SelfTrainPage} />
<AuthRoute path="/self-checklist" component={AloneQuestionCheckList} />
<AuthRoute exact path="/mypage" component={MyPage} />
<AuthRoute path="/mypage" component={MyPage} />
<AuthRoute path="/group-study" component={StudyMainPage} />
</Wrapper>
<Route component={NotFound} />
</Switch>
Expand Down
45 changes: 30 additions & 15 deletions src/components/Modal/StudyMakeModal/StudyMakeModal.js
View file
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -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(
Expand All @@ -170,7 +168,7 @@ export default function StudyStartModal() {
const [time, setTime] = useState(
moment(new Date()).format('HH:mm'),
);
const enterpriseList = [
const industryList = [
'경영/사무',
'마케팅/MD',
'영업',
Expand Down Expand Up @@ -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 (
<>
<Wrapper>
Expand All @@ -234,18 +249,18 @@ export default function StudyStartModal() {
산업
</InputText>
<SelectList>
<Select onClick={() => handleToggle('enterprise')}>
<Select onClick={() => handleToggle('industry')}>
<SelectText>
{enterprise}
{industry}
</SelectText>
<Icon type="arrow_down_blue" alt="" />
</Select>
{select.enterprise && (
{select.industry && (
<SelectItemListWrapper>
<SelectItemList>
{enterpriseList.map((val) => (
{industryList.map((val) => (
<SelectItem>
<SelectText onClick={() => handleSelect(setEnterprise, val, 'enterprise')}>
<SelectText onClick={() => handleSelect(setIndustry, val, 'industry')}>
{val}
</SelectText>
</SelectItem>
Expand All @@ -258,7 +273,7 @@ export default function StudyStartModal() {
진행 날짜
</InputText>
<PickerWrapper>
{select.enterprise || (
{select.industry || (
<TextField
id="date"
type="date"
Expand Down Expand Up @@ -317,7 +332,7 @@ export default function StudyStartModal() {
</RightWrapper>
</SelectWrapper>
<ButtonWrapper>
<Button text="방 개설" theme="blue" />
<Button text="방 개설" theme="blue" func={handleMakeStudy} />
</ButtonWrapper>
</Wrapper>
</>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Sidebar/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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`
Expand Down Expand Up @@ -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() {
Expand Down
19 changes: 19 additions & 0 deletions src/hooks/usePageBottom.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
148 changes: 75 additions & 73 deletions src/pages/MyPage/MyPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,79 +9,81 @@ export default function MyPage() {
const email = sessionStorage.getItem('email');
return (
<>
<S.Wrapper>
<S.ProfileWrapper>
<S.Profile>
<ProfileEdit />
<S.ProfileInfo>
<S.NameWrapper>
<S.NameText>
{name}
</S.NameText>
<Icon type="post" />
</S.NameWrapper>
<S.Jobs>
화학 / 데이터 분석
</S.Jobs>
<S.Reliability>
신뢰도
</S.Reliability>
<S.BarWrapper>
<S.Bar value="82" max="100" />
<S.BarText>82%</S.BarText>
</S.BarWrapper>
</S.ProfileInfo>
</S.Profile>
<S.InfoWrapper>
<S.Info>
<S.Title>
이메일 주소
</S.Title>
<S.Content>
{email}
</S.Content>
<S.Title>
관심 산업
</S.Title>
<S.Block>
<S.BlockItem theme="blue">
화학
</S.BlockItem>
<S.BlockItem theme="blue">
금융
</S.BlockItem>
</S.Block>
</S.Info>
<S.Info>
<S.Title>
휴대전화
</S.Title>
<S.Content>
01012345678
</S.Content>
<S.Title>
관심 직무
</S.Title>
<S.Block>
<S.BlockItem theme="orange">
데이터 분석
</S.BlockItem>
<S.BlockItem theme="orange">
유통
</S.BlockItem>
</S.Block>
</S.Info>
</S.InfoWrapper>
</S.ProfileWrapper>
<S.BoxWrapper>
<Box type="sound_big" title="면접스터디 횟수" count={15} />
<Box type="bubble_big" title="혼자연습 횟수" count={6} />
<Box type="memo_big" title="질문 리스트 갯수" count={4} />
<Box type="star_big" title="면접 평균 점수" count={7.8} />
<Box type="thumb_up_big" title="합격 횟수" count={5} />
<Box type="thumb_down_big" title="불합격 횟수" count={2} />
</S.BoxWrapper>
</S.Wrapper>
<S.Background>
<S.Wrapper>
<S.ProfileWrapper>
<S.Profile>
<ProfileEdit />
<S.ProfileInfo>
<S.NameWrapper>
<S.NameText>
{name}
</S.NameText>
<Icon type="post" />
</S.NameWrapper>
<S.Jobs>
화학 / 데이터 분석
</S.Jobs>
<S.Reliability>
신뢰도
</S.Reliability>
<S.BarWrapper>
<S.Bar value="82" max="100" />
<S.BarText>82%</S.BarText>
</S.BarWrapper>
</S.ProfileInfo>
</S.Profile>
<S.InfoWrapper>
<S.Info>
<S.Title>
이메일 주소
</S.Title>
<S.Content>
{email}
</S.Content>
<S.Title>
관심 산업
</S.Title>
<S.Block>
<S.BlockItem theme="blue">
화학
</S.BlockItem>
<S.BlockItem theme="blue">
금융
</S.BlockItem>
</S.Block>
</S.Info>
<S.Info>
<S.Title>
휴대전화
</S.Title>
<S.Content>
01012345678
</S.Content>
<S.Title>
관심 직무
</S.Title>
<S.Block>
<S.BlockItem theme="orange">
데이터 분석
</S.BlockItem>
<S.BlockItem theme="orange">
유통
</S.BlockItem>
</S.Block>
</S.Info>
</S.InfoWrapper>
</S.ProfileWrapper>
<S.BoxWrapper>
<Box type="sound_big" title="면접스터디 횟수" count={15} />
<Box type="bubble_big" title="혼자연습 횟수" count={6} />
<Box type="memo_big" title="질문 리스트 갯수" count={4} />
<Box type="star_big" title="면접 평균 점수" count={7.8} />
<Box type="thumb_up_big" title="합격 횟수" count={5} />
<Box type="thumb_down_big" title="불합격 횟수" count={2} />
</S.BoxWrapper>
</S.Wrapper>
</S.Background>
</>
);
}
20 changes: 13 additions & 7 deletions src/pages/MyPage/MyPage.style.js
View file
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -189,6 +194,7 @@ const BoxWrapper = styled.div`
`;

export default {
Background,
Wrapper,
ProfileWrapper,
Profile,
Expand Down
Loading

0 comments on commit ef85781

Please sign in to comment.