Feat: 검색 페이지 외 로딩 추가 (#85)

TEAM-UNITRIP · Oct 11, 2024 · 32eb684 · 32eb684
1 parent b5a202a
commit 32eb684
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 77 deletions.
diff --git a/src/views/Detail/components/DetailInfo.tsx b/src/views/Detail/components/DetailInfo.tsx
@@ -17,18 +17,20 @@ const DetailInfo = (props: detailInfoProps) => {
         <span css={title}>휴무일</span>
         <span
           css={content}
-          dangerouslySetInnerHTML={{ __html: detailInfo.restDate }}></span>
+          dangerouslySetInnerHTML={{
+            __html: detailInfo.restDate || '-',
+          }}></span>
       </div>
       <div css={infoItem}>
         <span css={title}>이용시간</span>
         <span
-          dangerouslySetInnerHTML={{ __html: detailInfo.useTime }}
+          dangerouslySetInnerHTML={{ __html: detailInfo.useTime || '-' }}
           css={content}></span>
       </div>
       <div css={infoItem}>
         <span css={title}>이용요금</span>
         <span
-          dangerouslySetInnerHTML={{ __html: detailInfo.useFee }}
+          dangerouslySetInnerHTML={{ __html: detailInfo.useFee || '-' }}
           css={content}></span>
       </div>
     </section>

diff --git a/src/views/Detail/components/FacilityIconList.tsx b/src/views/Detail/components/FacilityIconList.tsx
@@ -1,8 +1,10 @@
 import { css } from '@emotion/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import Loading from '@/components/Loading';
 import { MAP_FACILITIES_API_KEY } from '@/constants/facilities';
+import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { COLORS, FONTS } from '@/styles/constants';
 import { detailWithTour1ResItem } from '@/types/detailWithTour1';
 
@@ -31,16 +33,19 @@ function FacilityIconList(props: FacilityIConListProps) {
   const { contentId } = useParams();
   const { title, facilities } = props;
   const [facilityList, setFacilityList] = useState<facilityListType[]>();
+  const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const fetchData = async () => {
+  useAsyncEffect(async () => {
+    setIsLoading(true);
+    try {
       const res = await getDetailWithTourRes(Number(contentId));
       if (res) {
         const { item } = res;
         filterFacility(item);
       }
-    };
-    fetchData();
+    } finally {
+      setIsLoading(false);
+    }
   }, []);
 
   const filterFacility = (response: detailWithTour1ResItem[]) => {
@@ -63,16 +68,21 @@ function FacilityIconList(props: FacilityIConListProps) {
       <div css={titleText}>
         <span>{title}</span>
       </div>
-
-      <ul css={iconList}>
-        {facilityList &&
-          facilityList.map((item: facilityListType) => (
-            <li key={item.apiKey} css={iconWrapper}>
-              {item.icon}
-              <span css={iconName(item.name, item.isActive)}>{item.name}</span>
-            </li>
-          ))}
-      </ul>
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <ul css={iconList}>
+          {facilityList &&
+            facilityList.map((item: facilityListType) => (
+              <li key={item.apiKey} css={iconWrapper}>
+                {item.icon}
+                <span css={iconName(item.name, item.isActive)}>
+                  {item.name}
+                </span>
+              </li>
+            ))}
+        </ul>
+      )}
     </div>
   );
 }

diff --git a/src/views/Detail/components/Photos.tsx b/src/views/Detail/components/Photos.tsx
@@ -1,7 +1,9 @@
 import { css } from '@emotion/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import Loading from '@/components/Loading';
+import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { detailImage1ResItem } from '@/types/detailImage1';
 
 import { getDetailImage1Res } from '../utils/getDetailImage1';
@@ -10,32 +12,38 @@ import EmptyPhoto from './EmptyPhoto';
 const Photos = () => {
   const { contentId } = useParams();
   const [imageList, setImageList] = useState<detailImage1ResItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const fetchData = async () => {
+  useAsyncEffect(async () => {
+    setIsLoading(true);
+    try {
       const res = await getDetailImage1Res(Number(contentId));
       if (res) {
         const { item } = res;
         setImageList(item);
       }
-    };
-
-    fetchData();
+    } finally {
+      setIsLoading(false);
+    }
   }, []);
 
+  const renderItem = () => {
+    if (imageList.length === 0) {
+      return <EmptyPhoto />;
+    } else {
+      return imageList.map((item, idx) => {
+        return (
+          <div css={photoWrapper} key={idx}>
+            <img src={item.originimgurl} alt={item.imgname} css={photoItem} />
+          </div>
+        );
+      });
+    }
+  };
+
   return (
     <section css={photosContainer(imageList.length)}>
-      {imageList.length === 0 ? (
-        <EmptyPhoto />
-      ) : (
-        imageList.map((item, idx) => {
-          return (
-            <div css={photoWrapper} key={idx}>
-              <img src={item.originimgurl} alt={item.imgname} css={photoItem} />
-            </div>
-          );
-        })
-      )}
+      {isLoading ? <Loading /> : renderItem()}
     </section>
   );
 };

diff --git a/src/views/Detail/components/PlaceInfo.tsx b/src/views/Detail/components/PlaceInfo.tsx
@@ -32,9 +32,9 @@ const PlaceInfo = (props: placeInfoProps) => {
 
   useEffect(() => {
     if (useTimeRef.current && addressRef.current && telRef.current) {
-      useTimeRef.current.innerHTML = useTime;
-      addressRef.current.innerHTML = addr;
-      telRef.current.innerHTML = tel;
+      useTimeRef.current.innerHTML = useTime || '-';
+      addressRef.current.innerHTML = addr || '-';
+      telRef.current.innerHTML = tel || '-';
     }
   }, [placeInfo]);
 

diff --git a/src/views/Detail/pages/DetailPage.tsx b/src/views/Detail/pages/DetailPage.tsx
@@ -67,13 +67,9 @@ const DetailPage = () => {
   const kakaoId = sessionStorage.getItem('kakao_id');
   const changeCnt = useRef(1);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      await getDetailCommon1Res();
-      await getDetailIntro1Res();
-    };
-
-    fetchData();
+  useAsyncEffect(async () => {
+    await getDetailCommon1Res();
+    await getDetailIntro1Res();
   }, []);
 
   useEffect(() => {
@@ -186,7 +182,7 @@ const DetailPage = () => {
             setIsFavorite={setIsFavorite}
             changeCnt={changeCnt.current}
           />
-          <span css={title}>{placeInfo.title}</span>
+          <span css={title}>{placeInfo.title || '-'}</span>
         </div>
       </div>
       <PlaceInfo placeInfo={placeInfo.info} />
@@ -222,7 +218,7 @@ const backgroundImg = (url: string) => css`
 
   background-position: center center;
   background-size: cover;
-  background-image: url(${url});
+  background-image: url(${url || DefaultImage});
   background-repeat: no-repeat;
 `;
 

diff --git a/src/views/Main/components/NearbyTravel.tsx b/src/views/Main/components/NearbyTravel.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { getPlaceBasedArea } from '@/apis/public/main';
+import Loading from '@/components/Loading';
 import LoginModal from '@/components/LoginModal';
 import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { COLORS, FONTS } from '@/styles/constants';
@@ -21,6 +22,7 @@ const NearbyTravel = (props: NearbyTravelProps) => {
   const { isLoggedIn, region, favoriteList } = props;
   const [activateModal, setActivateModal] = useState(false);
   const [placeList, setPlaceList] = useState<PlaceBasedAreaItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const closeModal = () => {
     setActivateModal(false);
@@ -32,10 +34,16 @@ const NearbyTravel = (props: NearbyTravelProps) => {
 
   useAsyncEffect(async () => {
     if (!region) return;
-    const placeList = await getPlaceBasedArea({
-      region: region || '서울',
-    });
-    setPlaceList(placeList === '' ? [] : placeList.item);
+
+    setIsLoading(true);
+    try {
+      const placeList = await getPlaceBasedArea({
+        region: region || '서울',
+      });
+      setPlaceList(placeList === '' ? [] : placeList.item);
+    } finally {
+      setIsLoading(false);
+    }
   }, [region]);
 
   return (
@@ -44,27 +52,31 @@ const NearbyTravel = (props: NearbyTravelProps) => {
         {isLoggedIn && (region || '서울')} 주변 갈 만한 여행지 🗺️
       </h2>
       {isLoggedIn ? (
-        <>
-          <div css={scrollContainer}>
-            <ul css={cardContainer}>
-              {placeList.map(
-                ({ title, addr1, addr2, contentid, firstimage }) => (
-                  <TravelCard
-                    key={contentid}
-                    contentid={contentid}
-                    name={title}
-                    address={`${addr1} ${addr2}`}
-                    imgUrl={firstimage}
-                    isHeart={!!favoriteList?.includes(Number(contentid))}
-                  />
-                ),
-              )}
-            </ul>
-          </div>
-          <Link to="/map" css={link}>
-            {region || '서울'} 여행지 둘러보기
-          </Link>
-        </>
+        isLoading ? (
+          <Loading />
+        ) : (
+          <>
+            <div css={scrollContainer}>
+              <ul css={cardContainer}>
+                {placeList.map(
+                  ({ title, addr1, addr2, contentid, firstimage }) => (
+                    <TravelCard
+                      key={contentid}
+                      contentid={contentid}
+                      name={title}
+                      address={`${addr1} ${addr2}`}
+                      imgUrl={firstimage}
+                      isHeart={!!favoriteList?.includes(Number(contentid))}
+                    />
+                  ),
+                )}
+              </ul>
+            </div>
+            <Link to="/map" css={link}>
+              {region || '서울'} 여행지 둘러보기
+            </Link>
+          </>
+        )
       ) : (
         <div css={infoBox}>
           <p css={infoMessage}>

diff --git a/src/views/Mypage/components/Favorite.tsx b/src/views/Mypage/components/Favorite.tsx
@@ -4,27 +4,36 @@ import { Link } from 'react-router-dom';
 
 import getUserData from '@/apis/supabase/getUserData';
 import EmptyFavList from '@/components/EmptyFavList';
+import Loading from '@/components/Loading';
 import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { COLORS, FONTS } from '@/styles/constants';
 
 import FavoritePlaceList from './FavoritePlaceList';
 
 const Favorite = () => {
   const [favoriteList, setFavoriteList] = useState<number[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useAsyncEffect(async () => {
     const kakaoId = sessionStorage.getItem('kakao_id');
     if (!kakaoId) return;
 
-    const userData = await getUserData(Number(kakaoId));
-    if (userData) {
-      setFavoriteList(userData.favorite_list);
+    setIsLoading(true);
+    try {
+      const userData = await getUserData(Number(kakaoId));
+      if (userData) {
+        setFavoriteList(userData.favorite_list);
+      }
+    } finally {
+      setIsLoading(false);
     }
   }, []);
 
   return (
     <>
-      {favoriteList.length <= 1 ? (
+      {isLoading ? (
+        <Loading />
+      ) : favoriteList.length <= 1 ? (
         <div css={messageContainer}>
           <EmptyFavList />
           <Link to="/" css={homeBtn}>

diff --git a/src/views/Mypage/pages/Mypage.tsx b/src/views/Mypage/pages/Mypage.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import getUserData from '@/apis/supabase/getUserData';
 import { HeaderBackIcon } from '@/assets/icon';
 import Header from '@/components/Header';
+import Loading from '@/components/Loading';
 import MenuBar from '@/components/MenuBar';
 import { Region } from '@/components/SelectRegion';
 import { useAsyncEffect } from '@/hooks/use-async-effect';
@@ -47,7 +48,7 @@ const Mypage = () => {
 
   const renderComponent = (state: string) => {
     if (!userData) {
-      return <div>로딩 중...</div>;
+      return <Loading />;
     }
 
     const userRegion = parseRegion(userData.region);