[WC-59] feat : LoadingProvider 구현 및 적용

src/App.tsx

@@ -3,19 +3,25 @@ import Router from './routes/Router';
 import { RecoilRoot } from 'recoil';
 import { GlobalStyle } from '@/styles';
 import { Header, Spinner } from '@/components';
-import { ModalsProvider, WaffleCardsProvider } from '@/contexts';
+import {
+  ModalsProvider,
+  WaffleCardsProvider,
+  LoadingProvider,
+} from '@/contexts';
 
 function App() {
   return (
     <RecoilRoot>
       <Suspense fallback={<Spinner loading />}>
         <GlobalStyle />
         <Header />
-        <ModalsProvider>
-          <WaffleCardsProvider>
-            <Router />
-          </WaffleCardsProvider>
-        </ModalsProvider>
+        <LoadingProvider>
+          <ModalsProvider>
+            <WaffleCardsProvider>
+              <Router />
+            </WaffleCardsProvider>
+          </ModalsProvider>
+        </LoadingProvider>
       </Suspense>
     </RecoilRoot>
   );

src/contexts/index.ts

@@ -8,3 +8,8 @@ export {
   useWaffleCardsState,
   useWaffleCardsDispatch,
 } from './waffleCards/waffleCardsProvider';
+export {
+  LoadingProvider,
+  useLoadingState,
+  useLoadingDispatch,
+} from './loading/loadingProvider';

src/contexts/loading/loadingProvider.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState } from 'react';
+import { Spinner } from '@/components';
+
+const LoadingDispatchContext = createContext<(loading: boolean) => void>(() => {
+  return;
+});
+
+const LoadingStateContext = createContext(false);
+
+interface LoadingProviderProps {
+  children: React.ReactElement | React.ReactElement[];
+}
+
+export const LoadingProvider = ({ children }: LoadingProviderProps) => {
+  const [loading, setLoading] = useState<boolean>(false);
+
+  return (
+    <LoadingStateContext.Provider value={loading}>
+      <LoadingDispatchContext.Provider value={setLoading}>
+        {children}
+        <Spinner loading={loading} />
+      </LoadingDispatchContext.Provider>
+    </LoadingStateContext.Provider>
+  );
+};
+
+export const useLoadingState = () => useContext(LoadingStateContext);
+export const useLoadingDispatch = () => useContext(LoadingDispatchContext);

src/pages/HomePage/index.jsx

@@ -4,9 +4,9 @@ import { useModals } from '@/hooks';
 import styled from '@emotion/styled';
 import { useWaffleCardsDispatch } from '@/contexts';
 import { waffleCardApi, commentApi, likeApi } from '@/apis';
+import { useLoadingDispatch } from '@/contexts';
 import {
   Tab,
-  Spinner,
   WaffleCardsList,
   ScrollGuide,
   Modals,
@@ -17,11 +17,11 @@ import {
 const HomePage = () => {
   const { openModal } = useModals();
   const [tabValue, setTabValue] = useState('total');
-  const [isLoading, setIsLoading] = useState(false);
+  const setLoading = useLoadingDispatch();
   const { setWaffleCardsByType, refreshWaffleCards } = useWaffleCardsDispatch();
 
   const handleClickWaffleCard = async waffleCard => {
-    setIsLoading(true);
+    setLoading(true);
 
     try {
       const response = await commentApi.getCommentsByWaffleCardId(
@@ -44,7 +44,7 @@ const HomePage = () => {
       });
     }
 
-    setIsLoading(false);
+    setLoading(false);
   };
 
   const handleClickWaffleCardCreate = async () => {
@@ -78,10 +78,10 @@ const HomePage = () => {
     }).then(async result => {
       if (result.isConfirmed) {
         try {
-          setIsLoading(true);
+          setLoading(true);
           await waffleCardApi.deleteWaffleCard(waffleCardId);
           await refreshWaffleCards(tabValue);
-          setIsLoading(false);
+          setLoading(false);
         } catch (error) {
           console.error(
             `in ChattingCardModal : 댓글 삭제 실패 - ${error.message}`,
@@ -109,13 +109,13 @@ const HomePage = () => {
 
   useEffect(() => {
     const initWaffleCardsByType = async () => {
-      setIsLoading(true);
+      setLoading(true);
       await setWaffleCardsByType(tabValue, { cached: true });
-      setIsLoading(false);
+      setLoading(false);
     };
 
     initWaffleCardsByType();
-  }, [setWaffleCardsByType, tabValue]);
+  }, [setLoading, setWaffleCardsByType, tabValue]);
 
   return (
     <Container>
@@ -128,7 +128,6 @@ const HomePage = () => {
         onClickWaffleCardDelete={handleClickWaffleCardDelete}
         onClickLikeToggle={handleClickLikeToggle}
       />
-      <Spinner loading={isLoading} />
       <Modals />
       {tabValue === 'total' && <ScrollGuide />}
     </Container>

src/pages/LoginPage/index.tsx

@@ -1,15 +1,18 @@
+import { useEffect } from 'react';
 import Swal from 'sweetalert2';
 import { useNavigate } from 'react-router-dom';
 import Common from '@/styles';
 import { useForm } from '@/hooks';
 import { useUser } from '@/hooks';
 import styled from '@emotion/styled';
 import { formValidator } from '@/utils';
-import { Text, Button, Input, BackButton, Spinner } from '@/components';
+import { useLoadingDispatch } from '@/contexts';
+import { Text, Button, Input, BackButton } from '@/components';
 
 const LoginPage = () => {
   const { login } = useUser();
   const navigate = useNavigate();
+  const setLoading = useLoadingDispatch();
   const { isLoading, errors, handleChange, handleSubmit } = useForm({
     initialValues: {
       email: '',
@@ -57,6 +60,10 @@ const LoginPage = () => {
     navigate('/signup');
   };
 
+  useEffect(() => {
+    setLoading(isLoading);
+  }, [isLoading, setLoading]);
+
   return (
     <Container>
       <StyledBackButton />
@@ -82,7 +89,6 @@ const LoginPage = () => {
           가입하기
         </StyledButton>
       </ContentContainer>
-      <Spinner loading={isLoading} />
     </Container>
   );
 };

src/pages/SignUpPage/index.tsx

@@ -1,14 +1,17 @@
+import { useEffect } from 'react';
 import Swal from 'sweetalert2';
 import { useNavigate } from 'react-router-dom';
 import Common from '@/styles';
 import { authApi } from '@/apis';
 import { useForm } from '@/hooks';
 import styled from '@emotion/styled';
 import { formValidator } from '@/utils';
-import { Text, Button, Input, BackButton, Spinner } from '@/components';
+import { useLoadingDispatch } from '@/contexts';
+import { Text, Button, Input, BackButton } from '@/components';
 
 const SignUpPage = () => {
   const navigate = useNavigate();
+  const setLoading = useLoadingDispatch();
   const { isLoading, errors, handleChange, handleSubmit } = useForm({
     initialValues: {
       email: '',
@@ -67,6 +70,10 @@ const SignUpPage = () => {
     },
   });
 
+  useEffect(() => {
+    setLoading(isLoading);
+  }, [isLoading, setLoading]);
+
   return (
     <Container>
       <StyledBackButton />
@@ -94,7 +101,6 @@ const SignUpPage = () => {
         </InputWrapper>
         <StyledButton type="submit">가입하기</StyledButton>
       </ContentContainer>
-      <Spinner loading={isLoading} />
     </Container>
   );
 };