diff --git a/client/src/page/BaseTemplate/index.tsx b/client/src/page/BaseTemplate/index.tsx
index 9d9cea6e..b08e1280 100644
--- a/client/src/page/BaseTemplate/index.tsx
+++ b/client/src/page/BaseTemplate/index.tsx
@@ -18,9 +18,7 @@ const BaseTemplate = ({ children, Modal, closeModal }: TemplateProps) => {
return (
-
-
-
+
{children}
{Modal && ModalSection}
diff --git a/client/src/page/BaseTemplate/style.ts b/client/src/page/BaseTemplate/style.ts
index 2f883ff4..be9ac7b1 100644
--- a/client/src/page/BaseTemplate/style.ts
+++ b/client/src/page/BaseTemplate/style.ts
@@ -6,8 +6,6 @@ export const Template = styled.section`
width: 100%;
`;
-export const Nav = styled.nav``;
-
export const Body = styled.section``;
export const ModalContainer = styled.div`
diff --git a/client/src/page/Dashboard/Personal/index.tsx b/client/src/page/Dashboard/Personal/index.tsx
index 1046bdc6..e1e946e6 100644
--- a/client/src/page/Dashboard/Personal/index.tsx
+++ b/client/src/page/Dashboard/Personal/index.tsx
@@ -5,6 +5,7 @@ import BaseTemplate from 'page/BaseTemplate';
import PersonalDetailModal, {
PersonalModalProps,
} from 'component/orgamisms/DetailModal/Personal';
+import LoadingPage from 'page/Loading';
import * as S from './style';
type ExtractType = K extends keyof O ? O[K] : never;
@@ -30,14 +31,7 @@ const PersonalDashboardPage = ({ className }: any) => {
${listUser}
`,
);
-
- if (loading) {
- return (
-
-
-
- );
- }
+ if (loading) return ;
const { items } = data.listUser;
const users = items.reduce((obj: any, user: any) => {
diff --git a/client/src/page/Dashboard/Personal/style.ts b/client/src/page/Dashboard/Personal/style.ts
index 59aa2f9d..4793bfb7 100644
--- a/client/src/page/Dashboard/Personal/style.ts
+++ b/client/src/page/Dashboard/Personal/style.ts
@@ -1,7 +1,6 @@
import styled from 'styled-components';
import Floating from 'component/atoms/FloatingButton';
import _TextLabel from 'component/atoms/TextLabel';
-import Loading from 'component/atoms/Loading';
export const Container = styled.div`
display: flex;
@@ -273,12 +272,4 @@ export const PersonState = styled((props: { text: string }) =>
export const FloatingButton = styled(Floating)``;
-export const LoadContainer = styled.div`
- display: flex;
- justify-content: center;
- margin-top: 20%;
-`;
-
-export const LoadingComponent = styled(Loading)``;
-
export default {};
diff --git a/client/src/page/Dashboard/Team/index.tsx b/client/src/page/Dashboard/Team/index.tsx
index 4077e035..d617b4bb 100644
--- a/client/src/page/Dashboard/Team/index.tsx
+++ b/client/src/page/Dashboard/Team/index.tsx
@@ -6,6 +6,7 @@ import makeTeamIdByUserId from 'utils/setTeamId';
import BaseTemplate from 'page/BaseTemplate';
import { useHistory } from 'react-router-dom';
import ConfirmModal from 'component/orgamisms/ConfirmModal';
+import LoadingPage from 'page/Loading';
import TeamDetailModal, {
TeamModalProps,
} from 'component/orgamisms/DetailModal/Team';
@@ -47,13 +48,7 @@ const TeamDashboardPage = ({ className, isLoggedIn }: any) => {
{ skip: !userData?.getUser.items[0]?.id },
);
- if (loading) {
- return (
-
-
-
- );
- }
+ if (loading) return ;
const { items } = data.listTeamDashboard;
const skills = (team: any) =>
@@ -122,7 +117,9 @@ const TeamDashboardPage = ({ className, isLoggedIn }: any) => {
const onCloseModal = () => setModal({});
const onClickUpdate = async () => {
- const res = await refetch({ id: makeTeamIdByUserId(userData.getUser.items[0].id) });
+ const res = await refetch({
+ id: makeTeamIdByUserId(userData.getUser.items[0].id),
+ });
if (modal?.type === 'update') {
setModal({ type: 'detail', data: res?.data.getTeamDashboard });
} else {
@@ -165,7 +162,9 @@ const TeamDashboardPage = ({ className, isLoggedIn }: any) => {
return (
{
- const res = await refetch({ id: makeTeamIdByUserId(userData.getUser.items[0].id) });
+ const res = await refetch({
+ id: makeTeamIdByUserId(userData.getUser.items[0].id),
+ });
setModal({ type: 'detail', data: res?.data.getTeamDashboard });
}}
>
diff --git a/client/src/page/Dashboard/Team/style.ts b/client/src/page/Dashboard/Team/style.ts
index 7bf96c0c..fad96dcc 100644
--- a/client/src/page/Dashboard/Team/style.ts
+++ b/client/src/page/Dashboard/Team/style.ts
@@ -1,7 +1,6 @@
import styled from 'styled-components';
import globalTheme from 'style/theme';
import TextLabel from 'component/atoms/TextLabel';
-import Loading from 'component/atoms/Loading';
import Floating from 'component/atoms/FloatingButton';
export const TeamDashboardPage = styled.div`
@@ -286,12 +285,4 @@ export const State = styled((props: { text: string }) =>
}
`;
-export const LoadContainer = styled.div`
- display: flex;
- justify-content: center;
- margin-top: 20%;
-`;
-
-export const LoadingComponent = styled(Loading)``;
-
export default {};
diff --git a/client/src/page/Home/index.tsx b/client/src/page/Home/index.tsx
index 2e3f2ba1..6012ffd7 100644
--- a/client/src/page/Home/index.tsx
+++ b/client/src/page/Home/index.tsx
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
import { gql, useQuery } from '@apollo/client';
import { Auth } from 'aws-amplify';
import BaseTemplate from 'page/BaseTemplate';
+import LoadingPage from 'page/Loading';
import * as S from './style';
const googleLoginOnClick = () =>
@@ -20,11 +21,7 @@ const Home = ({ className, isLoggedIn }: any) => {
);
if (isLoggedIn) {
if (loading) {
- return (
-
-
-
- );
+ return ;
}
}
// 8월 13일 초대 주소 get, 30일 마다 갱신
diff --git a/client/src/page/Home/style.ts b/client/src/page/Home/style.ts
index 13828b0a..97a2f1bf 100644
--- a/client/src/page/Home/style.ts
+++ b/client/src/page/Home/style.ts
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import Loading from 'component/atoms/Loading';
export const Home = styled.div`
position: relative;
@@ -106,11 +105,3 @@ export const WhiteButton = styled.button`
margin-left: 1rem;
}
`;
-
-export const LoadContainer = styled.div`
- display: flex;
- justify-content: center;
- margin-top: 20%;
-`;
-
-export const LoadingComponent = styled(Loading)``;
diff --git a/client/src/page/Loading/index.tsx b/client/src/page/Loading/index.tsx
new file mode 100644
index 00000000..fe335385
--- /dev/null
+++ b/client/src/page/Loading/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import BaseTemplate from 'page/BaseTemplate';
+import { LoadContainer, LoadingComponent } from './style';
+
+const LoadingPage = () => (
+
+
+
+
+
+);
+export default LoadingPage;
diff --git a/client/src/page/Loading/style.ts b/client/src/page/Loading/style.ts
new file mode 100644
index 00000000..4ec55992
--- /dev/null
+++ b/client/src/page/Loading/style.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import Loading from 'component/atoms/Loading';
+
+export const LoadContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ margin-top: 20%;
+`;
+
+export const LoadingComponent = styled(Loading)``;
diff --git a/client/src/page/Mail/index.tsx b/client/src/page/Mail/index.tsx
index 9bc20657..3174ef69 100644
--- a/client/src/page/Mail/index.tsx
+++ b/client/src/page/Mail/index.tsx
@@ -7,6 +7,7 @@ import { gql, useQuery } from '@apollo/client';
import MailDetailModal, {
MailModalProps,
} from 'component/orgamisms/DetailModal/Mail';
+import LoadingPage from 'page/Loading';
import * as S from './style';
type ExtractType = K extends keyof O ? O[K] : never;
@@ -33,11 +34,7 @@ const Mail = ({ className, isLoggedIn }: any) => {
}, [isLoggedIn]);
if (loading) {
- return (
-
-
-
- );
+ return ;
}
const mail = data && data.getUser.items?.length !== 0 ? data.getUser.items[0].mail : [];
const mailList = mail.map((el: any) => {
diff --git a/client/src/page/Mail/style.ts b/client/src/page/Mail/style.ts
index cd9ab136..9b72603d 100644
--- a/client/src/page/Mail/style.ts
+++ b/client/src/page/Mail/style.ts
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import Loading from 'component/atoms/Loading';
export const Container = styled.div`
display: flex;
@@ -155,11 +154,3 @@ export const Name = styled.h1`
export const Content = styled.div`
display: flex;
`;
-
-export const LoadContainer = styled.div`
- display: flex;
- justify-content: center;
- margin-top: 20%;
-`;
-
-export const LoadingComponent = styled(Loading)``;
diff --git a/client/src/page/Notice/index.tsx b/client/src/page/Notice/index.tsx
index ddcae884..ddb0c494 100644
--- a/client/src/page/Notice/index.tsx
+++ b/client/src/page/Notice/index.tsx
@@ -7,6 +7,7 @@ import NoticeDetailModal, {
NoticeModalProps,
} from 'component/orgamisms/DetailModal/Notice';
import NoticeAddForm from 'component/orgamisms/DetailModal/NoticeAddForm';
+import LoadingPage from 'page/Loading';
import * as S from './style';
type ExtractType = K extends keyof O ? O[K] : never;
@@ -43,11 +44,7 @@ const Notice = ({ className }: any) => {
}
}, [data]);
if (loading) {
- return (
-
-
-
- );
+ return ;
}
const { items } = noticeData?.listNotice;
diff --git a/client/src/page/Notice/style.ts b/client/src/page/Notice/style.ts
index 3015a692..e70ef6be 100644
--- a/client/src/page/Notice/style.ts
+++ b/client/src/page/Notice/style.ts
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import Loading from 'component/atoms/Loading';
export const Container = styled.div`
display: flex;
@@ -29,6 +28,7 @@ export const CreateBtn = styled.button`
cursor: pointer;
width: 20rem;
height: 6rem;
+ margin-top: 2rem;
font-size: 2rem;
border-radius: 0.5rem;
`;
@@ -51,7 +51,7 @@ export const NoticeList = styled.div`
}
padding-top: 1em;
width: 124rem;
- height: 68rem;
+ height: 66vh;
@media screen and (max-width: 1290px) {
width: 108rem;
}
@@ -163,11 +163,3 @@ export const Name = styled.h1`
export const Content = styled.div`
display: flex;
`;
-
-export const LoadContainer = styled.div`
- display: flex;
- justify-content: center;
- margin-top: 20%;
-`;
-
-export const LoadingComponent = styled(Loading)``;
diff --git a/client/src/page/Result/style.ts b/client/src/page/Result/style.ts
index 8a831343..91b0ef30 100644
--- a/client/src/page/Result/style.ts
+++ b/client/src/page/Result/style.ts
@@ -11,7 +11,7 @@ export const ResultPage = styled.div`
align-items: center;
background-color: #e9e9e9;
border-radius: 1em;
- z-index:100;
+ z-index: 100;
width: 130rem;
height: 70rem;
@media screen and (max-width: 85rem) {
diff --git a/client/src/page/Survey/index.tsx b/client/src/page/Survey/index.tsx
index 9d87847f..b55ac16d 100644
--- a/client/src/page/Survey/index.tsx
+++ b/client/src/page/Survey/index.tsx
@@ -4,6 +4,7 @@ import { gql, useQuery, useMutation } from '@apollo/client';
import { listQuestionnaires, getUser } from 'graphql/queries';
import { createUser } from 'graphql/mutations';
import BaseTemplate from 'page/BaseTemplate';
+import LoadingPage from 'page/Loading';
import { IAnswers } from 'component/molecules/QuestionRespond';
import Questionnaire from 'component/orgamisms/Questionnaire';
import ResultComponent from '../Result';
@@ -43,8 +44,11 @@ const Survey = ({ className, isLoggedIn }: any) => {
const bUserUpdating = useRef(false);
const [page, setPage] = useState(0);
- const [answerRespond, setanswerRespond] = useState(userData?.getUser.items[0]
- ? userData.getUser.items[0].question : firstInput);
+ const [answerRespond, setanswerRespond] = useState(
+ userData?.getUser.items[0]
+ ? userData.getUser.items[0].question
+ : firstInput,
+ );
const [resultOpen, setResultOpen] = useState(false);
if (userError) {
@@ -55,11 +59,7 @@ const Survey = ({ className, isLoggedIn }: any) => {
}
if (userLoading || loading || bUserUpdating.current || !userData?.getUser) {
- return (
-
-
-
- );
+ return ;
}
if (!userLoading && !userError) {
@@ -194,13 +194,15 @@ const Survey = ({ className, isLoggedIn }: any) => {
return (
- {resultOpen
- ?
- :
+ onCloseResult={onCloseResult}
+ />
+ ) : (
+
{
/>
- }
+ )}
);
};
diff --git a/client/src/page/Survey/style.ts b/client/src/page/Survey/style.ts
index 141a9ade..2e1d2fdc 100644
--- a/client/src/page/Survey/style.ts
+++ b/client/src/page/Survey/style.ts
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import Loading from 'component/atoms/Loading';
export const SurveyPage = styled.div`
display: flex;
@@ -15,11 +14,3 @@ export const SurveyWrapper = styled.div`
left: 50%;
transform: translate(-50%, -50%);
`;
-
-export const LoadContainer = styled.div`
- display: flex;
- justify-content: center;
- margin-top: 20%;
-`;
-
-export const LoadingComponent = styled(Loading)``;