Feat/#77 loading (#78)

* feat: 검색 첫 로딩 * feat: 무한스크롤 로딩 * feat: 리뷰 로딩
TEAM-UNITRIP · Oct 3, 2024 · c153199 · c153199
1 parent b09aa6e
commit c153199
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 50 deletions.
diff --git a/src/views/Detail/components/Review.tsx b/src/views/Detail/components/Review.tsx
@@ -4,6 +4,7 @@ import { useLocation, useParams } from 'react-router-dom';
 
 import getReviews from '@/apis/supabase/getReviews';
 import getUserData from '@/apis/supabase/getUserData';
+import Loading from '@/components/Loading';
 import ToastMessage from '@/components/ToastMessage';
 import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { ReviewResponse } from '@/types/api/review';
@@ -35,6 +36,7 @@ const Review = () => {
     isGuideShown(STORAGE_KEY.hideReviewFilterGuide),
   );
   const [toast, setToast] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const [filterState, setFilterState] = useState(INITIAL_FILTER_STATE);
 
@@ -77,36 +79,47 @@ const Review = () => {
   }, []);
 
   useAsyncEffect(async () => {
-    const data = await getReviews(contentId as string);
-    setReviewData(data);
+    setLoading(true);
+    try {
+      const data = await getReviews(contentId as string);
+      setReviewData(data);
+    } finally {
+      setLoading(false);
+    }
 
     const kakaoId = sessionStorage.getItem('kakao_id');
     if (!kakaoId) return;
     const userData = await getUserData(Number(kakaoId));
     setUserData(userData);
   }, [location.pathname]);
 
-  if (!reviewData || reviewData.length === 0) return <NoReview />;
+  if (loading) return <Loading />;
 
   return (
     <>
-      <TotalScore reviewData={reviewData} />
-      <TotalReview reviewCount={reviewData.length} />
-      <SelectedCategory
-        filterState={filterState}
-        handleFilterState={handleFilterState}
-        openBottomSheet={openBottomSheet}
-        defaultCategory={userData?.universal_type}
-      />
-      <ul css={reviewCardContainerCss}>
-        {reviewData
-          ?.filter(({ convenience }) =>
-            selectedFilterList.every((c) => convenience.includes(c)),
-          )
-          .map((item) => {
-            return <ReviewCard key={item.id} {...item} />;
-          })}
-      </ul>
+      {!reviewData || reviewData.length === 0 ? (
+        <NoReview />
+      ) : (
+        <>
+          <TotalScore reviewData={reviewData} />
+          <TotalReview reviewCount={reviewData.length} />
+          <SelectedCategory
+            filterState={filterState}
+            handleFilterState={handleFilterState}
+            openBottomSheet={openBottomSheet}
+            defaultCategory={userData?.universal_type}
+          />
+          <ul css={reviewCardContainerCss}>
+            {reviewData
+              ?.filter(({ convenience }) =>
+                selectedFilterList.every((c) => convenience.includes(c)),
+              )
+              .map((item) => {
+                return <ReviewCard key={item.id} {...item} />;
+              })}
+          </ul>
+        </>
+      )}
 
       {showGuide && <Guide handleSetShowGuide={handleSetShowGuide} />}
       {isBottomSheetOpen && (

diff --git a/src/views/Detail/pages/DetailPage.tsx b/src/views/Detail/pages/DetailPage.tsx
@@ -184,13 +184,15 @@ const DetailPage = () => {
         latlng={latlng}
         detailInfo={detailInfo}
       />
-      <div css={gapLine}></div>
 
       {selectedTab === '상세정보' ||
       selectedTab === '유니버설' ||
       selectedTab === '지도' ||
       selectedTab === '사진' ? (
-        <ErrorReport />
+        <>
+          <div css={gapLine}></div>
+          <ErrorReport />
+        </>
       ) : null}
     </div>
   );

diff --git a/src/views/Search/components/Result/SearchResult.tsx b/src/views/Search/components/Result/SearchResult.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { MutableRefObject, useEffect, useRef, useState } from 'react';
 
 import { BigInfoIcon } from '@/assets/icon';
+import Loading from '@/components/Loading';
 import PlaceCard from '@/components/PlaceCard';
 import { MAP_FACILITIES_API_KEY } from '@/constants/facilities';
 import { COLORS, FONTS } from '@/styles/constants';
@@ -21,7 +22,6 @@ interface SearchResultProps {
 const SearchResult = (props: SearchResultProps) => {
   const { placeData, targetElement, loading, filterState, heartList } = props;
   const placeListRef = useRef<HTMLUListElement>(null);
-  console.log(loading);
 
   const [renderPlaceList, setRenderPlaceList] = useState<
     (SearchItem & BarrierFreeItem)[]
@@ -40,7 +40,7 @@ const SearchResult = (props: SearchResultProps) => {
   return (
     <>
       <ul css={containerCss(placeData.length)} ref={placeListRef}>
-        {renderPlaceList.length === 0 ? (
+        {!loading && renderPlaceList.length === 0 ? (
           <div css={noResultContainerCss}>
             <BigInfoIcon />
             <div css={noResultTitleCss}>검색 결과가 없어요</div>
@@ -69,6 +69,7 @@ const SearchResult = (props: SearchResultProps) => {
           )
         )}
         <div ref={targetElement} css={lastTargetCss} />
+        {loading && placeData.length > 0 && <Loading />}
       </ul>
     </>
   );

diff --git a/src/views/Search/pages/SearchResultPage.tsx b/src/views/Search/pages/SearchResultPage.tsx
@@ -6,6 +6,7 @@ import { getBarrierFreeInfo, getSearchKeyword } from '@/apis/public/search';
 import getUserData from '@/apis/supabase/getUserData';
 import { SearchSetIcon } from '@/assets/icon';
 import MenuBar from '@/components/MenuBar';
+import PageLoading from '@/components/PageLoading';
 import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { useInfiniteScroll } from '@/hooks/use-infinite-scroll';
 import { COLORS, FONTS } from '@/styles/constants';
@@ -150,32 +151,35 @@ const SearchResultPage = () => {
   };
 
   return (
-    <div css={containerCss}>
-      <SearchBarContainer initialWord={initialWord}>
-        <button type="button" css={buttonCss} onClick={openFilter}>
-          <SearchSetIcon />
-          {selectedCategory()}
-        </button>
-        <SearchResult
-          placeData={placeData}
-          targetElement={targetElement}
-          loading={loading}
-          filterState={filterState}
-          heartList={userData?.favorite_list || []}
-        />
-      </SearchBarContainer>
-
-      {showGuide && <Guide handleSetShowGuide={handleSetShowGuide} />}
-      <MenuBar />
-
-      {isFilterOpen && (
-        <FilterBottomSheet
-          closeBottomSheet={closeFilter}
-          filterState={filterState}
-          handleFilterState={handleFilterState}
-        />
-      )}
-    </div>
+    <>
+      {loading && placeData.length === 0 && <PageLoading />}
+      <div css={containerCss}>
+        <SearchBarContainer initialWord={initialWord}>
+          <button type="button" css={buttonCss} onClick={openFilter}>
+            <SearchSetIcon />
+            {selectedCategory()}
+          </button>
+          <SearchResult
+            placeData={placeData}
+            targetElement={targetElement}
+            loading={loading}
+            filterState={filterState}
+            heartList={userData?.favorite_list || []}
+          />
+        </SearchBarContainer>
+
+        {showGuide && <Guide handleSetShowGuide={handleSetShowGuide} />}
+        <MenuBar />
+
+        {isFilterOpen && (
+          <FilterBottomSheet
+            closeBottomSheet={closeFilter}
+            filterState={filterState}
+            handleFilterState={handleFilterState}
+          />
+        )}
+      </div>
+    </>
   );
 };