Skip to content

Commit

Permalink
feat: 질문 리스트 페이지 제작 (#66)
Browse files Browse the repository at this point in the history
Lavegaa committed Nov 22, 2020
1 parent 314f812 commit c7504c0
Showing 11 changed files with 142 additions and 10 deletions.
2 changes: 2 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -6,13 +6,15 @@ import ConferenceButton from './components/ConferenceButton';
import ConferenceRoom from './pages/ConferenceRoom';
import NotFound from './pages/404';
import LoginPage from './pages/LoginPage';
import QuestionListPage from './pages/QuestionListPage'

export default function App() {
return (
<>
<Switch>
<Route exact path="/" component={LoginPage} />
<AuthRoute path="/conference" component={ConferenceButton} />
<AuthRoute path="/questionlist" component={QuestionListPage} />
<Route path="/room/:roomID" component={ConferenceRoom} />
<Route component={NotFound} />
</Switch>
10 changes: 6 additions & 4 deletions src/pages/LoginPage/LoginPage.js
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import { Redirect } from 'react-router-dom';
import styled from 'styled-components';
import { get } from '../../utils/snippet';
import { setLogin } from '../../store/Auth/auth';
import LoginApi from '../../repository/loginRepository';
import { LoginApi } from '../../repository/loginRepository';

const Wrapper = styled.div`
height: 100vh;
@@ -32,16 +32,18 @@ export default function LoginPage() {
};
const handleLogin = () => {
LoginApi(JSON.stringify(loginForm)).then((response) => {
const user = JSON.stringify(response.data.email).replace(/\"/g, '');
dispatch(setLogin({ user }));
console.log(response.data);
const email = JSON.stringify(response.data.email).replace(/\"/g, '');
const name = JSON.stringify(response.data.name).replace(/\"/g, '');
dispatch(setLogin({ email: email, name: name}));
}).catch(() => {
alert('로그인 실패');
});
};

return (
<Wrapper>
{authSelector.isLogin && <Redirect to="/conference" />}
{authSelector.isLogin && <Redirect to="/questionlist" />}
<div>
<h3>아이디</h3>
<input
Empty file.
1 change: 1 addition & 0 deletions src/pages/QuestionListPage/IsQuestionList/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './IsQuestionList';
55 changes: 55 additions & 0 deletions src/pages/QuestionListPage/NoList/NoList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import NoListImage from '../../../assets/images/illust_4.png'
import Icon from '../../../components/Icon'
const Image = styled.img`
width: 327px;
height: 197px;
`;
const Text = styled.div`
font-family: AppleSDGothicNeoM00;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #000000;
`;
const Button = styled.div`
display: flex;
width: 356px;
height: 82px;
margin: 100px 0 0;
border-radius: 10px;
background-image: linear-gradient(to bottom, #2323de, #4848da);
justify-content: center;
align-items: center;
`
const ButtonText = styled.span`
margin-left: 30px;
font-family: AppleSDGothicNeoB00;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.42;
letter-spacing: normal;
color: #ffffff;
`;

export default function NoList() {
return (
<>
<Image src={NoListImage}/>
<Text>등록된 질문 리스트가 없습니다.</Text>
<Button>
<Icon type="add_white" alt=""/>
<ButtonText>
질문 리스트 등록하기
</ButtonText>
</Button>
</>
)
}
1 change: 1 addition & 0 deletions src/pages/QuestionListPage/NoList/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './NoList';
59 changes: 59 additions & 0 deletions src/pages/QuestionListPage/QuestionListPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';
import { getQuestionListAPI } from '../../repository/questionListRepository';
import NoList from './NoList/NoList';
import { get } from '../../utils/snippet';

const Wrapper = styled.div`
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
`;

const Title = styled.div`
font-family: AppleSDGothicNeoEB00;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.44;
letter-spacing: normal;
color: #000000;
`;

const Select = styled.div`
font-family: AppleSDGothicNeoM00;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #3d3d3d;
`;

export default function QuestionListPage() {
const authSelector = useSelector(get('auth'));
const [questionList, setQuestionList] = useState();
useEffect(() => {
getQuestionListAPI().then((response) => {
setQuestionList(JSON.stringify(response.data));
})
})

return (
<>
<Wrapper>
<Title>{authSelector.name}님이 등록한 질문 리스트입니다.</Title>
<Select>연습하고 싶은 질문 리스트를 선택해주세요.</Select>
<NoList />
</Wrapper>
{/* { questionList.length === 0 ?
<NoList/> : <IsQuestionList />} */}
</>
)
}
1 change: 1 addition & 0 deletions src/pages/QuestionListPage/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './QuestionListPage';
3 changes: 1 addition & 2 deletions src/repository/loginRepository.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
/* eslint-disable no-return-await */
import api from '../context/serverContext';

const LoginApi = async (param) => await api({
export const LoginApi = async (param) => await api({
url: '/login',
type: 'post',
param,
});

export default LoginApi;
9 changes: 9 additions & 0 deletions src/repository/questionListRepository.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/* eslint-disable no-return-await */
import api from '../context/serverContext';

export const getQuestionListAPI = async (param) => await api({
url: '/api/self/questionList',
type: 'get',
param,
});

11 changes: 7 additions & 4 deletions src/store/Auth/auth.js
Original file line number Diff line number Diff line change
@@ -4,21 +4,24 @@ const authReducer = createSlice({
name: 'auth',
initialState: {
isLogin: false,
user: '',
email: '',
name: '',
},
reducers: {
setLogin(state, { payload: { user } }) {
setLogin(state, { payload: { email, name } }) {
return {
...state,
isLogin: true,
user,
email: email,
name: name,
};
},
setLogout(state) {
return {
...state,
isLogin: false,
user: '',
email: '',
name: '',
};
},
},

0 comments on commit c7504c0

Please sign in to comment.