Toggle navigation
Toggle navigation
This project
Loading...
Sign in
khusat
/
khusat-front
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이준호
2020-12-05 00:14:23 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
f818bbe7dd746bd409184c5d01ebefd9636456b4
f818bbe7
1 parent
1c4dde18
[ADD] 서버 통신에서의 로딩 및 에러처리 코드 추가 & Loading 페이지 추가
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
26 additions
and
13 deletions
README.md
src/components/loading/Loading.js
src/containers/ResultPageContainer.js
src/containers/SurveyPageContainer.js
src/pages/SurveyPage.js
README.md
View file @
f818bbe
...
...
@@ -8,7 +8,7 @@
20대 남자면 꼭 가야만 하는 군대, 어떤 보직이 알맞을지 미리 추천해 드리겠습니다.
(이미지 추가하기
)
> (이미지 추가 예정
)
## 🔖 프로그램 구조
...
...
src/components/loading/Loading.js
0 → 100644
View file @
f818bbe
import
{
Spin
}
from
'antd'
;
import
{
LoadingOutlined
}
from
'@ant-design/icons'
;
const
antIcon
=
<
LoadingOutlined
style
=
{{
fontSize
:
40
}}
spin
/>
;
function
Loading
()
{
return
(
<
Spin
indicator
=
{
antIcon
}
style
=
{{
display
:
"flex"
,
alignItems
:
"center"
,
justifyContent
:
"center"
,
margin
:
"300px"
}}
/
>
)
}
export
default
Loading
;
// 군인 관련 애니메이션 or 움짤로 개선 예정
\ No newline at end of file
src/containers/ResultPageContainer.js
View file @
f818bbe
import
React
from
'react'
import
{
useSelector
}
from
'react-redux'
;
import
ResultPage
from
'../pages/ResultPage'
;
import
Loading
from
'../components/loading/Loading'
;
export
function
ResultPageContainer
()
{
const
data
=
useSelector
((
state
)
=>
state
.
result
.
data
);
const
{
loading
,
data
,
error
}
=
useSelector
((
state
)
=>
state
.
result
);
return
(
<>
<
ResultPage
result
=
{
data
}
/
>
{
loading
&&
<
Loading
/>
}
{
data
&&
<
ResultPage
result
=
{
data
}
/>
}
{
error
&&
<
div
>
에러
발생
!!<
/div>
}
<
/
>
)
}
...
...
src/containers/SurveyPageContainer.js
View file @
f818bbe
import
React
from
'react'
;
import
{
useSelector
}
from
'react-redux'
;
import
SurveyPage
from
'../pages/SurveyPage'
;
// import { createHashHistory } from 'history'
// const history = createHashHistory();
import
Loading
from
'../components/loading/Loading'
;
export
function
SurveyPageContainer
({
history
})
{
const
data
=
useSelector
((
state
)
=>
state
.
survey
.
data
);
const
{
loading
,
data
,
error
}
=
useSelector
((
state
)
=>
state
.
survey
);
return
(
<>
<
SurveyPage
history
=
{
history
}
question
=
{
data
}
/
>
{
loading
&&
<
Loading
/>
}
{
data
&&
<
SurveyPage
history
=
{
history
}
question
=
{
data
}
/>
}
{
error
&&
<
div
>
에러
발생
!!<
/div>
}
<
/
>
)
}
...
...
src/pages/SurveyPage.js
View file @
f818bbe
...
...
@@ -40,7 +40,6 @@ function SurveyPage({ history, question }) {
if
(
answer
.
length
===
10
){
// answer state 배열에 10개가 채워지면,
dispatch
(
getResultThunk
(
answer
));
history
.
push
(
'/result'
);
console
.
log
(
history
);
}
},[
answer
]);
...
...
Please
register
or
login
to post a comment