From 32eb684bb8db96c78ab5a8402e60118dea0a5ba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EA=B0=80=ED=98=95?= <101045330+aazkgh@users.noreply.github.com> Date: Fri, 11 Oct 2024 15:00:06 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EA=B2=80=EC=83=89=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=99=B8=20=EB=A1=9C=EB=94=A9=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20(#85)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Detail/components/DetailInfo.tsx | 8 ++- .../Detail/components/FacilityIconList.tsx | 40 +++++++----- src/views/Detail/components/Photos.tsx | 42 ++++++++----- src/views/Detail/components/PlaceInfo.tsx | 6 +- src/views/Detail/pages/DetailPage.tsx | 14 ++--- src/views/Main/components/NearbyTravel.tsx | 62 +++++++++++-------- src/views/Mypage/components/Favorite.tsx | 17 +++-- src/views/Mypage/pages/Mypage.tsx | 3 +- 8 files changed, 115 insertions(+), 77 deletions(-) diff --git a/src/views/Detail/components/DetailInfo.tsx b/src/views/Detail/components/DetailInfo.tsx index 782492a..39231b4 100644 --- a/src/views/Detail/components/DetailInfo.tsx +++ b/src/views/Detail/components/DetailInfo.tsx @@ -17,18 +17,20 @@ const DetailInfo = (props: detailInfoProps) => { 휴무일 + dangerouslySetInnerHTML={{ + __html: detailInfo.restDate || '-', + }}>
이용시간
이용요금
diff --git a/src/views/Detail/components/FacilityIconList.tsx b/src/views/Detail/components/FacilityIconList.tsx index 6f1a98c..b4247e6 100644 --- 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(); + 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) {
{title}
- - + {isLoading ? ( + + ) : ( + + )} ); } diff --git a/src/views/Detail/components/Photos.tsx b/src/views/Detail/components/Photos.tsx index 3a8f428..e3d93e7 100644 --- 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([]); + 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 ; + } else { + return imageList.map((item, idx) => { + return ( +
+ {item.imgname} +
+ ); + }); + } + }; + return (
- {imageList.length === 0 ? ( - - ) : ( - imageList.map((item, idx) => { - return ( -
- {item.imgname} -
- ); - }) - )} + {isLoading ? : renderItem()}
); }; diff --git a/src/views/Detail/components/PlaceInfo.tsx b/src/views/Detail/components/PlaceInfo.tsx index 1de38dd..fa8283c 100644 --- 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 index 9304004..f8decce 100644 --- 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} /> - {placeInfo.title} + {placeInfo.title || '-'} @@ -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 index 91deedd..be847af 100644 --- 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([]); + 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 || '서울')} 주변 갈 만한 여행지 🗺️ {isLoggedIn ? ( - <> -
-
    - {placeList.map( - ({ title, addr1, addr2, contentid, firstimage }) => ( - - ), - )} -
-
- - {region || '서울'} 여행지 둘러보기 - - + isLoading ? ( + + ) : ( + <> +
+
    + {placeList.map( + ({ title, addr1, addr2, contentid, firstimage }) => ( + + ), + )} +
+
+ + {region || '서울'} 여행지 둘러보기 + + + ) ) : (

diff --git a/src/views/Mypage/components/Favorite.tsx b/src/views/Mypage/components/Favorite.tsx index 863ce84..83910ab 100644 --- a/src/views/Mypage/components/Favorite.tsx +++ b/src/views/Mypage/components/Favorite.tsx @@ -4,6 +4,7 @@ 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'; @@ -11,20 +12,28 @@ import FavoritePlaceList from './FavoritePlaceList'; const Favorite = () => { const [favoriteList, setFavoriteList] = useState([]); + 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 ? ( + + ) : favoriteList.length <= 1 ? (

diff --git a/src/views/Mypage/pages/Mypage.tsx b/src/views/Mypage/pages/Mypage.tsx index 67a995e..36203f6 100644 --- 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
로딩 중...
; + return ; } const userRegion = parseRegion(userData.region);