From 293f0f98334f94e1560d9907d843770774b6541f Mon Sep 17 00:00:00 2001 From: sue Date: Sat, 6 Jan 2024 04:48:37 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=9D=B8=EA=B8=B0=EC=97=AC=ED=96=89?= =?UTF-8?q?=EC=A7=80=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tours/ToursCategory.tsx | 42 +++++++++++++++---- .../Tours/ToursCategoryItemSkeleton.tsx | 9 ++++ 2 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 src/components/Tours/ToursCategoryItemSkeleton.tsx diff --git a/src/components/Tours/ToursCategory.tsx b/src/components/Tours/ToursCategory.tsx index 6a7d74d6..c3507ad5 100644 --- a/src/components/Tours/ToursCategory.tsx +++ b/src/components/Tours/ToursCategory.tsx @@ -1,20 +1,34 @@ import { RegionTypes, ToursCategoryProps } from '@/@types/tours.types'; import ToursCategoryItem from './ToursCategoryItem'; import { getPopularRegion } from '@api/region'; -import { useQuery } from '@tanstack/react-query'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; +import ToursCategoryItemSkeleton from './ToursCategoryItemSkeleton'; +import { v4 as uuidv4 } from 'uuid'; +import { useQuery } from '@tanstack/react-query'; +import { useEffect, useState } from 'react'; const ToursCategory = ({ selectedRegion, setSelectedRegion, }: ToursCategoryProps) => { - const regionsQuery = useQuery({ + const { data, isLoading, error } = useQuery({ queryKey: ['regions'], queryFn: () => getPopularRegion(), }); - if (regionsQuery.error) { + const [showSkeleton, setShowSkeleton] = useState(isLoading); + + useEffect(() => { + if (isLoading) { + setShowSkeleton(true); + } else { + const timer = setTimeout(() => setShowSkeleton(false), 200); + return () => clearTimeout(timer); + } + }, [isLoading]); + + if (error) { console.log('error - 예외 처리'); } @@ -28,18 +42,32 @@ const ToursCategory = ({ }; // '전체' 항목 추가 - const regionsData = regionsQuery.data?.data.data.regions ?? []; + const regionsData = data?.data.data.regions ?? []; const regions = [ - { name: '전체', areaCode: 0, subAreaCode: 0 }, + { name: '전체', areaCode: uuidv4(), subAreaCode: 0 }, ...regionsData, ]; + if (showSkeleton) { + return ( +
+ + {Array.from({ length: 10 }, (_, index) => ( + + + + ))} + +
+ ); + } + return (
- {regions.map((region: RegionTypes, index: number) => { + {regions.map((region: RegionTypes) => { return ( - + { + return ( +
+
+
+ ); +}; + +export default ToursCategoryItemSkeleton;