Merge pull request #169 from LM-channel-team-project/feature/loadComp…

…onent graphql api loading시 load Component 설정
LM-channel-team-project · Sep 4, 2021 · 208f8d7 · 208f8d7
2 parents 7c831b7 + 0734c97
commit 208f8d7
Show file tree

Hide file tree

Showing 17 changed files with 56 additions and 105 deletions.
diff --git 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 (
     <S.Template>
-      <S.Nav>
-        <MenuBar />
-      </S.Nav>
+      <MenuBar />
       <S.Body>{children}</S.Body>
       {Modal && ModalSection}
     </S.Template>

diff --git 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
@@ -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<O, K> = K extends keyof O ? O[K] : never;
@@ -30,14 +31,7 @@ const PersonalDashboardPage = ({ className }: any) => {
       ${listUser}
     `,
   );
-
-  if (loading) {
-    return (
-      <S.LoadContainer>
-        <S.LoadingComponent />
-      </S.LoadContainer>
-    );
-  }
+  if (loading) return <LoadingPage />;
 
   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
@@ -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
@@ -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 (
-      <Team.LoadContainer>
-        <Team.LoadingComponent />
-      </Team.LoadContainer>
-    );
-  }
+  if (loading) return <LoadingPage />;
 
   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 (
           <Team.FloatingButton
             onClick={async () => {
-              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
@@ -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
@@ -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 (
-        <S.LoadContainer>
-          <S.LoadingComponent />
-        </S.LoadContainer>
-      );
+      return <LoadingPage />;
     }
   }
   // 8월 13일 초대 주소 get, 30일 마다 갱신

diff --git 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
@@ -0,0 +1,12 @@
+import React from 'react';
+import BaseTemplate from 'page/BaseTemplate';
+import { LoadContainer, LoadingComponent } from './style';
+
+const LoadingPage = () => (
+  <BaseTemplate>
+    <LoadContainer>
+      <LoadingComponent />
+    </LoadContainer>
+  </BaseTemplate>
+);
+export default LoadingPage;
diff --git a/client/src/page/Loading/style.ts 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
@@ -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<O, K> = K extends keyof O ? O[K] : never;
@@ -33,11 +34,7 @@ const Mail = ({ className, isLoggedIn }: any) => {
   }, [isLoggedIn]);
 
   if (loading) {
-    return (
-      <S.LoadContainer>
-        <S.LoadingComponent />
-      </S.LoadContainer>
-    );
+    return <LoadingPage />;
   }
   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
@@ -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
@@ -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<O, K> = K extends keyof O ? O[K] : never;
@@ -43,11 +44,7 @@ const Notice = ({ className }: any) => {
     }
   }, [data]);
   if (loading) {
-    return (
-      <S.LoadContainer>
-        <S.LoadingComponent />
-      </S.LoadContainer>
-    );
+    return <LoadingPage />;
   }
 
   const { items } = noticeData?.listNotice;

diff --git 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
@@ -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
@@ -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<boolean>(false);
   const [page, setPage] = useState<number>(0);
-  const [answerRespond, setanswerRespond] = useState<IAnswers[]>(userData?.getUser.items[0]
-    ? userData.getUser.items[0].question : firstInput);
+  const [answerRespond, setanswerRespond] = useState<IAnswers[]>(
+    userData?.getUser.items[0]
+      ? userData.getUser.items[0].question
+      : firstInput,
+  );
   const [resultOpen, setResultOpen] = useState<boolean>(false);
 
   if (userError) {
@@ -55,11 +59,7 @@ const Survey = ({ className, isLoggedIn }: any) => {
   }
 
   if (userLoading || loading || bUserUpdating.current || !userData?.getUser) {
-    return (
-      <S.LoadContainer>
-        <S.LoadingComponent />
-      </S.LoadContainer>
-    );
+    return <LoadingPage />;
   }
 
   if (!userLoading && !userError) {
@@ -194,13 +194,15 @@ const Survey = ({ className, isLoggedIn }: any) => {
 
   return (
     <BaseTemplate>
-      {resultOpen
-        ? <ResultComponent
+      {resultOpen ? (
+        <ResultComponent
           userId={userData?.getUser.items[0].id}
           surveyCompleted={userData?.getUser.items[0].surveyCompleted}
           answerRespond={answerRespond}
-          onCloseResult={onCloseResult}/>
-        : <S.SurveyWrapper>
+          onCloseResult={onCloseResult}
+        />
+      ) : (
+        <S.SurveyWrapper>
           <S.SurveyPage>
             <Questionnaire
               key={nowQuestionnaire.id}
@@ -217,7 +219,7 @@ const Survey = ({ className, isLoggedIn }: any) => {
             />
           </S.SurveyPage>
         </S.SurveyWrapper>
-      }
+      )}
     </BaseTemplate>
   );
 };

diff --git 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)``;