Merge pull request #361 from TripInfoWeb/dev_refactoring

Feat: 추천 데이터가 없는 경우 로티 컴포넌트 표시
TripInfoWeb · Sep 22, 2024 · d4336f1 · d4336f1
2 parents 8ffb042 + 86961c1
commit d4336f1
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git a/src/components/gathering/read/GatheringRecommendationList.tsx b/src/components/gathering/read/GatheringRecommendationList.tsx
@@ -3,6 +3,7 @@
 import { GatheringRecommend } from "@/types/GatheringDto";
 import GatheringItem from "../../common/GatheringItem";
 import useAuthStore from "@/store/authStore";
+import LottieNotFound from "@/components/common/lottie/LottieNotFound";
 
 const GatheringRecommendationList = ({
   data,
@@ -14,20 +15,26 @@ const GatheringRecommendationList = ({
   return (
     <div className="mt-[4.875rem] flex w-full flex-col">
       <h2 className="text-2xl font-bold text-black">추천 모임 정보</h2>
-      <div className="mt-6 grid w-full justify-items-center gap-x-3 gap-y-3 min-[745px]:grid-cols-2">
-        {data.map((i, index) => (
-          <GatheringItem
-            key={i.gatheringId}
-            data={{
-              ...i,
-              openChattingUrl: "",
-            }}
-            isAccessGathering={
-              !!authStore.sex && !!authStore.age && authStore.id > 0
-            }
-          />
-        ))}
-      </div>
+      {data.length === 0 ? (
+        <div className="flex w-full flex-col items-center">
+          <LottieNotFound text={"추천 모임 정보가 없습니다."} />
+        </div>
+      ) : (
+        <div className="mt-6 grid w-full justify-items-center gap-x-3 gap-y-3 min-[745px]:grid-cols-2">
+          {data.map((i, index) => (
+            <GatheringItem
+              key={i.gatheringId}
+              data={{
+                ...i,
+                openChattingUrl: "",
+              }}
+              isAccessGathering={
+                !!authStore.sex && !!authStore.age && authStore.id > 0
+              }
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/components/informations/detail/RecommendationList.tsx b/src/components/informations/detail/RecommendationList.tsx
@@ -1,3 +1,4 @@
+import LottieNotFound from "@/components/common/lottie/LottieNotFound";
 import InformationItemContainer from "@/containers/common/InformationItemContainer";
 import { InformationDetailDto } from "@/types/InformationDto";
 
@@ -9,22 +10,28 @@ const RecommendationList = ({ data }: Props) => {
   return (
     <div className="my-20 w-full">
       <h2 className="text-2xl font-bold text-black">추천 정보</h2>
-      <div className="mt-6 grid grid-cols-3 items-center gap-5 max-[1024px]:grid-cols-2 max-[744px]:grid-cols-1">
-        {data.recommendInformation.map((value, index) => (
-          <InformationItemContainer
-            key={index}
-            informationId={index + 1}
-            categoryId={0}
-            isBookMark={value.isBookMark}
-            isLike={value.isLike}
-            title={value.title}
-            image={value.thumbNailImage}
-            address={`${value.zoneCategoryParentName}, ${value.zoneCategoryChildName}`}
-            likeCount={value.likeCount}
-            viewCount={value.viewCount}
-          />
-        ))}
-      </div>
+      {data.recommendInformation.length === 0 ? (
+        <div className="flex w-full flex-col items-center">
+          <LottieNotFound text={"추천 정보가 없습니다."} />
+        </div>
+      ) : (
+        <div className="mt-6 grid grid-cols-3 items-center gap-5 max-[1024px]:grid-cols-2 max-[744px]:grid-cols-1">
+          {data.recommendInformation.map((value, index) => (
+            <InformationItemContainer
+              key={index}
+              informationId={index + 1}
+              categoryId={0}
+              isBookMark={value.isBookMark}
+              isLike={value.isLike}
+              title={value.title}
+              image={value.thumbNailImage}
+              address={`${value.zoneCategoryParentName}, ${value.zoneCategoryChildName}`}
+              likeCount={value.likeCount}
+              viewCount={value.viewCount}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };