Merge pull request #198 from Step3-kakao-tech-campus/feat/#171

홈 스켈레톤 재생성, 카카오맵 로딩 상태 관리
Step3-kakao-tech-campus · Nov 11, 2023 · 3ee5b2a · 3ee5b2a
2 parents 9540937 + 5443ffd
commit 3ee5b2a
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 25 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,6 @@ import {
   RouteObject,
   RouterProvider,
 } from 'react-router-dom';
-import { Suspense } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import DetailPetPage from 'pages/detailPet/DetailPetPage';
 import ProfileListPage from 'pages/profileList/profileListHome/ProfileListPage';
@@ -22,7 +21,6 @@ import GNB from 'layouts/GNB';
 import NotFound from 'pages/notFound/NotFound';
 import HomePage from 'pages/home/HomePage';
 import UpdatePage from 'pages/update/UpdatePage';
-import { ClipLoader } from 'react-spinners';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -115,9 +113,7 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
-        <Suspense fallback={<ClipLoader />}>
-          <RouterProvider router={router} />
-        </Suspense>
+        <RouterProvider router={router} />
       </RecoilRoot>
     </QueryClientProvider>
   );

diff --git a/src/layouts/ErrorBoundary.tsx b/src/layouts/ErrorBoundary.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable class-methods-use-this */
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { Link } from 'react-router-dom';

diff --git a/src/pages/detailPet/DetailPetPage.tsx b/src/pages/detailPet/DetailPetPage.tsx
@@ -1,13 +1,21 @@
-import DetailPetData from 'pages/detailPet/components/DetailPetData';
+import { Suspense } from 'react';
+import { ClipLoader } from 'react-spinners';
 import ErrorBoundary from 'layouts/ErrorBoundary';
+import DetailPetData from './components/DetailPetData';
 
 const DetailPetPage = () => {
   return (
-    <>
+    <Suspense
+      fallback={
+        <div className="w-screen h-screen flex items-center justify-center">
+          <ClipLoader color="black" loading={true} size={50} />
+        </div>
+      }
+    >
       <ErrorBoundary>
         <DetailPetData />
       </ErrorBoundary>
-    </>
+    </Suspense>
   );
 };
 

diff --git a/src/pages/detailPet/components/DetailPetData.tsx b/src/pages/detailPet/components/DetailPetData.tsx
@@ -10,7 +10,7 @@ const DetailPetData = () => {
   const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
   const [modal, setModal] = useState(false);
 
-  const { data, isLoading } = useQuery({
+  const { data } = useQuery({
     queryKey: ['pet', petId],
     queryFn: () => {
       return fetch(`${process.env.REACT_APP_URI}/pet/${petId}`).then((res) => {
@@ -24,8 +24,8 @@ const DetailPetData = () => {
       });
     },
     suspense: true,
+    retry: false,
   });
-  if (isLoading) return <div>로딩중</div>;
   const labels = ['영리함', '친화력', '운동신경', '적응력', '활발함'];
 
   const radarChartProps: RadarChartProps = {

diff --git a/src/pages/detailPet/components/VDetailPetInfo.tsx b/src/pages/detailPet/components/VDetailPetInfo.tsx
@@ -13,7 +13,9 @@ const VDetailPetInfo = (data: DetailPetInfoProps) => {
           </div>
           <div className="flex">
             <span className="w-20 block font-bold">성별</span>
-            <span className="w-36 block">{data.sex}</span>
+            <span className="w-36 block">
+              {data.sex === 'MALE' ? '수컷' : '암컷'}
+            </span>
           </div>
         </div>
 

diff --git a/src/pages/map/components/Loader.tsx b/src/pages/map/components/Loader.tsx
@@ -0,0 +1,35 @@
+import { ClipLoader } from 'react-spinners';
+import { LoaderProps } from '../mapType';
+
+const Loader = (props: LoaderProps) => {
+  const { loading, longLoading, loadingButApiIsOkay } = props;
+
+  return (
+    <>
+      {loadingButApiIsOkay ||
+        (loading && (
+          <div className="w-screen h-screen flex flex-col items-center gap-8 justify-center">
+            <h1 className="font-bold">{loading} 중 입니다...</h1>
+            {loadingButApiIsOkay && <span>서버가 느려요... 기다려주세요!</span>}
+            {longLoading && (
+              <>
+                <span>로딩이 너무 오래 걸리시나요?</span>
+                <button
+                  type="button"
+                  onClick={() => {
+                    window.location.reload();
+                  }}
+                  className="bg-brand-color text-white rounded-md px-4 py-2"
+                >
+                  새로고침
+                </button>
+              </>
+            )}
+            <ClipLoader color="black" loading={true} size={50} />
+          </div>
+        ))}
+    </>
+  );
+};
+
+export default Loader;
diff --git a/src/pages/map/components/Map.tsx b/src/pages/map/components/Map.tsx
@@ -10,6 +10,8 @@
 import { useState, useEffect, useRef } from 'react';
 import MapList from './MapList';
 import useMap from '../useMap';
+import Loader from './Loader';
+import { LoaderProps } from '../mapType';
 
 declare global {
   interface Window {
@@ -19,7 +21,8 @@ declare global {
 
 const Map = () => {
   const mapRef = useRef<HTMLDivElement>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState('지도 로딩');
+  const [longLoading, setLongLoading] = useState(false);
   const { map, displayMarkerByInfo, searchedPlace, mutate, mutateData } =
     useMap(mapRef, setLoading);
   useEffect(() => {
@@ -40,14 +43,25 @@ const Map = () => {
     });
   });
 
+  setTimeout(() => {
+    setLongLoading(true);
+  }, 5000);
+
+  const loaderProps: LoaderProps = {
+    loading,
+    longLoading,
+    loadingButApiIsOkay:
+      longLoading && mutateData?.response?.length === 0 && !loading,
+  };
+
   return (
-    <div className="Map flex flex-col md:flex-row items-center justify-center gap-8">
-      {loading && (
-        <div className="loader bg-black absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
-      )}
-      <div ref={mapRef} className={`w-96 h-96`} />
-      <MapList searchedPlace={searchedPlace} map={map} loading={loading} />
-    </div>
+    <>
+      <Loader {...loaderProps} />
+      <div className="Map flex flex-col md:flex-row items-center justify-center gap-8">
+        <div ref={mapRef} className={`w-96 h-96`} />
+        <MapList searchedPlace={searchedPlace} map={map} />
+      </div>
+    </>
   );
 };
 

diff --git a/src/pages/map/components/MapList.tsx b/src/pages/map/components/MapList.tsx
@@ -6,12 +6,10 @@ import { SearchedPlace } from '../mapType';
 const MapList = ({
   searchedPlace,
   map,
-  loading,
 }: {
   searchedPlace: SearchedPlace[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   map: any;
-  loading: boolean;
 }) => {
   const { kakao } = window;
   const navigate = useNavigate();
@@ -33,7 +31,6 @@ const MapList = ({
 
   return (
     <>
-      {loading && <div className="loader" />}
       <div className="w-96">
         {searchedPlace.map((place) => (
           <div

diff --git a/src/pages/map/mapType.d.ts b/src/pages/map/mapType.d.ts
@@ -14,3 +14,9 @@ export interface SearchedPlace {
   isRegistered: boolean;
   shelterId: number;
 }
+
+export interface LoaderProps {
+  loading: string;
+  longLoading: boolean;
+  loadingButApiIsOkay: boolean;
+}
diff --git a/src/pages/map/useMap.ts b/src/pages/map/useMap.ts
@@ -6,7 +6,7 @@ import { SearchedPlace } from './mapType';
 
 function useMap<T>(
   containerRef: RefObject<T extends HTMLElement ? T : HTMLElement>,
-  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setLoading: React.Dispatch<React.SetStateAction<string>>,
 ) {
   const { kakao } = window;
   const [map, setMap] = useState<any>();
@@ -30,7 +30,6 @@ function useMap<T>(
       }).then((res) => res.json()),
     {
       onSuccess: (data) => {
-        setLoading(false);
         if (data.success === false) {
           throw new Error(data.error.message);
         }
@@ -46,6 +45,7 @@ function useMap<T>(
 
     const onLoadKakaoMap = () => {
       if (!containerRef.current || !kakao) return;
+      setLoading('근처 보호소 검색');
       window.kakao.maps.load(() => {
         setMap(
           new window.kakao.maps.Map(containerRef.current, {
@@ -55,6 +55,7 @@ function useMap<T>(
         );
 
         function placesSearchCB(data: any[], status: any) {
+          setLoading('');
           if (status === kakao.maps.services.Status.OK) {
             const bounds = new kakao.maps.LatLngBounds();
 

diff --git a/src/pages/profileList/components/ProfileList.tsx b/src/pages/profileList/components/ProfileList.tsx
@@ -15,7 +15,6 @@ const ProfileList = (prop: { prop: string }) => {
     navigate(`/profile/${prop.prop}/${page}`);
   };
   const word = prop.prop === 'urgent' ? 'sos' : prop.prop;
-  console.log(word);
 
   const [list, setList] = useState<ProfileListProps | null>(null);