update: loading시 보여지는 컴포넌트 구조개선 및 예외처리 처리 추가

src/containers/contents/index.tsx

@@ -1,5 +1,7 @@
 import Contents from '@/api/contents';
+import Loading from '@/components/common/Loading';
 import ContentsComponent from '@/components/contents';
+import { ErrorComponent } from '@/components/error/ErrorComponent';
 import queryKeys from '@/constants/queryKeys';
 import useSimpleQuery, { IUseSimpleQuery } from '@/hooks/useSimpleQuery';
 import { IContentsListResponse } from '@/types/contents';
@@ -17,7 +19,9 @@ export default function ContentsContainer() {
 
   const { data, isLoading } = useSimpleQuery<IContentsListResponse>(request);
 
-  if (!data || isLoading) return <></>;
+  if (isLoading) return <Loading mode="block" />;
+
+  if (!data) return <ErrorComponent.Text />;
 
   return <ContentsComponent data={data} />;
 }

src/containers/home/index.tsx

@@ -92,8 +92,7 @@ export default function HomeContainer() {
 
   React.useEffect(
     function initializeMap() {
-      if (!mapElement.current || !naver || isErrorLoadLocation) return;
-      if (initSuccessCheckerRef.current) return;
+      if (!mapElement.current || !naver || isErrorLoadLocation || initSuccessCheckerRef.current) return;
       const location = new naver.maps.LatLng(permissionExistenceCoordinate().lat, permissionExistenceCoordinate().lng);
       naverMapRef.current = new naver.maps.Map(mapElement.current, mapOptions(location));
 

src/containers/market/index.tsx

@@ -4,6 +4,8 @@ import useSimpleQuery, { IUseSimpleQuery } from '@/hooks/useSimpleQuery';
 import { IMarketListResponse } from '@/types/market';
 import MarketComponent from '@/components/market';
 import { useLocation } from 'react-router-dom';
+import Loading from '@/components/common/Loading';
+import { ErrorComponent } from '@/components/error/ErrorComponent';
 
 const TEN_MINUTES = 10 * 60 * 1000;
 
@@ -14,7 +16,7 @@ export default function MarketContainer() {
   const searchKeyword = urlSearchParams.get('searchKeyword')?.trim();
 
   const request: IUseSimpleQuery = {
-    queryKey: [queryKeys.marketList, urlSearchParams.get('searchKeyword')],
+    queryKey: [queryKeys.marketList, searchKeyword],
     requestAPI: Market.Get.list,
     options: {
       staleTime: TEN_MINUTES,
@@ -26,7 +28,9 @@ export default function MarketContainer() {
 
   const { data, isLoading } = useSimpleQuery<IMarketListResponse>(request);
 
-  if (!data || isLoading) return <></>;
+  if (isLoading) return <Loading mode="block" />;
+
+  if (!data) return <ErrorComponent.Text />;
 
   return <MarketComponent data={data} />;
 }

src/containers/signIn/index.tsx

@@ -10,7 +10,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import React from 'react';
 import { useForm, SubmitHandler, FormProvider } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
 
 export default function SignInContainer() {
   const { handleError } = useErrorHandler();
@@ -49,14 +48,8 @@ export default function SignInContainer() {
   );
 
   return (
-    <S.SignInContainer>
-      <FormProvider {...methods}>
-        <SignIn onSubmit={onSubmit} />
-      </FormProvider>
-    </S.SignInContainer>
+    <FormProvider {...methods}>
+      <SignIn onSubmit={onSubmit} />
+    </FormProvider>
   );
 }
-
-const S = {
-  SignInContainer: styled.div``,
-};

src/containers/signUp/index.tsx

@@ -9,7 +9,6 @@ import { schema } from '@/utils/validate/schema';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
 
 export default function SignUpContainer() {
   const { isLoading, setIsLoading } = useLoading();
@@ -61,14 +60,8 @@ export default function SignUpContainer() {
   };
 
   return (
-    <S.SignUpContainer>
-      <FormProvider {...methods}>
-        <SignUp onSubmit={onSubmit} />
-      </FormProvider>
-    </S.SignUpContainer>
+    <FormProvider {...methods}>
+      <SignUp onSubmit={onSubmit} />
+    </FormProvider>
   );
 }
-
-const S = {
-  SignUpContainer: styled.div``,
-};

src/containers/user/index.tsx

@@ -1,4 +1,6 @@
 import Auth from '@/api/auth';
+import Loading from '@/components/common/Loading';
+import { ErrorComponent } from '@/components/error/ErrorComponent';
 import User from '@/components/user';
 import queryKeys from '@/constants/queryKeys';
 import routerPath from '@/constants/routerPath';
@@ -16,14 +18,16 @@ export default function UserContainer() {
     options: {},
   };
 
-  const { data } = useSimpleQuery<IUserDetailResponse>(request);
+  const { data, isLoading } = useSimpleQuery<IUserDetailResponse>(request);
 
   const handleSignOut = () => {
     storage.removeAccessToken();
     navigate(routerPath.HOME);
   };
 
-  if (!data) return <></>;
+  if (isLoading) return <Loading mode="block" />;
+
+  if (!data) return <ErrorComponent.Text />;
 
   return <User data={data} handleSignOut={handleSignOut} />;
 }

src/hooks/useGeolocation.ts

@@ -1,3 +1,4 @@
+import { useModalStore } from '@/stores/modal';
 import React from 'react';
 
 interface ILocationType {
@@ -7,6 +8,7 @@ interface ILocationType {
 }
 
 export default function useGeolocation() {
+  const { setModalState, resetModalState } = useModalStore();
   const [location, setLocation] = React.useState<ILocationType>({
     loaded: false,
     coordinates: { lat: INIT_COORDINATE.LAT, lng: INIT_COORDINATE.LNG },
@@ -35,10 +37,20 @@ export default function useGeolocation() {
         code: 0,
         message: '해당 브라우저는 GPS 기능을 지원하지 않습니다!',
       });
+      setModalState((prev) => ({
+        ...prev,
+        type: 'ALERT',
+        titleText: '해당 브라우저는 GPS 기능을 지원하지 않습니다!',
+        confirmButtonText: '확인',
+        onClickConfirm: () => {
+          resetModalState();
+        },
+      }));
     }
 
     const watch = navigator.geolocation.watchPosition(onSuccess, onError, watchOptions);
     return () => navigator.geolocation.clearWatch(watch);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return location;