From de693984c18b39468b5636fc6c81470e64bb8243 Mon Sep 17 00:00:00 2001 From: "B._.OMI" Date: Tue, 30 Jul 2024 18:59:55 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20#321=20-=20=EB=A9=94=EC=9D=B8?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20suspense=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20?= =?UTF-8?q?=EC=8A=A4=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/app/page.tsx | 105 +++++++----------- .../PopularLinkList/PopularLinkList.tsx | 64 +++++++++++ .../PopularLinkList/PopularLinkSkeleton.tsx | 36 ++++++ .../hooks/useGetPopularLinks.ts | 11 ++ .../SpaceList/hooks/useMainSpacesQuery.ts | 81 ++++++++------ .../common/MainSpaceList/MainSpaceList.tsx | 9 +- src/hooks/useGetPopularLinks.ts | 23 ---- 7 files changed, 194 insertions(+), 135 deletions(-) create mode 100644 src/components/PopularLinkList/PopularLinkList.tsx create mode 100644 src/components/PopularLinkList/PopularLinkSkeleton.tsx create mode 100644 src/components/PopularLinkList/hooks/useGetPopularLinks.ts delete mode 100644 src/hooks/useGetPopularLinks.ts diff --git a/src/app/page.tsx b/src/app/page.tsx index 051c365e..d7b79c6e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,84 +1,49 @@ 'use client' -import { CategoryList, Dropdown, LinkItem, Spinner } from '@/components' +import { CategoryList, Dropdown, Spinner } from '@/components' import FloatingButton from '@/components/FloatingButton/FloatingButton' -import { ChipColors } from '@/components/common/Chip/Chip' +// import PopularLinkList from '@/components/PopularLinkList/PopularLinkList' +import PopularLinkSkeleton from '@/components/PopularLinkList/PopularLinkSkeleton' import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent' -import MainSpaceList from '@/components/common/MainSpaceList/MainSpaceList' +// import MainSpaceList from '@/components/common/MainSpaceList/MainSpaceList' import { useCategoryParam, useSortParam } from '@/hooks' -import useGetPopularLinks from '@/hooks/useGetPopularLinks' import { fetchGetSpaces } from '@/services/space/spaces' -import { PopularLinkResBody } from '@/types' -import 'swiper/css' -import 'swiper/css/free-mode' -import 'swiper/css/pagination' -import { FreeMode } from 'swiper/modules' -import { Swiper, SwiperSlide } from 'swiper/react' +import dynamic from 'next/dynamic' + +const DynamicPopularLinkList = dynamic( + () => import('@/components/PopularLinkList/PopularLinkList'), + { + loading: () => ( + + + + ), + }, +) +const DynamicMainSpaceList = dynamic( + () => import('@/components/common/MainSpaceList/MainSpaceList'), + { + loading: () => ( + + + + ), + }, +) export default function Home() { - const { links, isPopularLinksLoading } = useGetPopularLinks() const { sort, sortIndex, handleSortChange } = useSortParam('space') const { category, categoryIndex, handleCategoryChange } = useCategoryParam('all') - return isPopularLinksLoading ? ( - - - - ) : ( + return ( <>

인기있는 링크

- {links && ( - - {links.map((link: PopularLinkResBody) => ( - - - - ))} - - )} +
+ {/* */} + +
@@ -97,7 +62,13 @@ export default function Home() { onChange={handleCategoryChange} />
- */} + { + const { data } = useGetPopularLinks() + return ( + + {data?.responses.map((link: PopularLinkResBody) => ( + + + + ))} + + ) +} + +export default PopularLinkList diff --git a/src/components/PopularLinkList/PopularLinkSkeleton.tsx b/src/components/PopularLinkList/PopularLinkSkeleton.tsx new file mode 100644 index 00000000..5251b030 --- /dev/null +++ b/src/components/PopularLinkList/PopularLinkSkeleton.tsx @@ -0,0 +1,36 @@ +const LinkSkeleton = () => { + return ( +
+
+
+
+
+
+
+
+
+
+
+ ) +} + +const PopularLinkSkeleton = () => { + return ( +
+
+ + + + + + + + + + +
+
+ ) +} + +export default PopularLinkSkeleton diff --git a/src/components/PopularLinkList/hooks/useGetPopularLinks.ts b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts new file mode 100644 index 00000000..30225bf5 --- /dev/null +++ b/src/components/PopularLinkList/hooks/useGetPopularLinks.ts @@ -0,0 +1,11 @@ +import { fetchGetPopularLinks } from '@/services/link/link' +import { useSuspenseQuery } from '@tanstack/react-query' + +const useGetPopularLinks = () => { + return useSuspenseQuery({ + queryKey: ['popularLinks'], + queryFn: () => fetchGetPopularLinks(), + }) +} + +export default useGetPopularLinks diff --git a/src/components/SpaceList/hooks/useMainSpacesQuery.ts b/src/components/SpaceList/hooks/useMainSpacesQuery.ts index 6517a488..0bdb9d7f 100644 --- a/src/components/SpaceList/hooks/useMainSpacesQuery.ts +++ b/src/components/SpaceList/hooks/useMainSpacesQuery.ts @@ -1,6 +1,9 @@ import { PAGE_SIZE } from '@/constants' import { SpaceResBody } from '@/types' -import { useInfiniteQuery } from '@tanstack/react-query' +import { + useInfiniteQuery, + useSuspenseInfiniteQuery, +} from '@tanstack/react-query' import { SpaceListProps } from '../SpaceList' interface MainSpacePageType { @@ -27,44 +30,48 @@ const useMainSpacesQuery = ({ : 'created_at' : undefined const categoryValue = category === 'all' ? '' : category.toUpperCase() - const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({ - queryKey: [ - 'spaces', - queryKey, - { - ...(memberId && { memberId: memberId }), - ...(sortValue && { sort: sortValue }), - category: categoryValue, - keyword, + const { data, fetchNextPage, hasNextPage, isLoading } = + useSuspenseInfiniteQuery({ + queryKey: [ + 'spaces', + queryKey, + { + ...(memberId && { memberId: memberId }), + ...(sortValue && { sort: sortValue }), + category: categoryValue, + keyword, + }, + ], + queryFn: ({ pageParam }) => + fetchFn({ + memberId, + lastFavoriteCount: pageParam.lastFavoriteCount, + lastSpaceId: pageParam.lastSpaceId, + pageSize: PAGE_SIZE, + sort: sortValue, + filter: categoryValue, + keyWord: keyword, + }), + initialPageParam: { + lastSpaceId: undefined, + lastFavoriteCount: undefined, }, - ], - queryFn: ({ pageParam }) => - fetchFn({ - memberId, - lastFavoriteCount: pageParam.lastFavoriteCount, - lastSpaceId: pageParam.lastSpaceId, - pageSize: PAGE_SIZE, - sort: sortValue, - filter: categoryValue, - keyWord: keyword, - }), - initialPageParam: { lastSpaceId: undefined, lastFavoriteCount: undefined }, - getNextPageParam: ( - lastPage: MainSpacePageType, - ): - | { - lastSpaceId: number | undefined - lastFavoriteCount: number | undefined - } - | undefined => { - return lastPage.metaData?.hasNext - ? { - lastSpaceId: lastPage.metaData.lastId, - lastFavoriteCount: lastPage.metaData.lastFavoriteCount, + getNextPageParam: ( + lastPage: MainSpacePageType, + ): + | { + lastSpaceId: number | undefined + lastFavoriteCount: number | undefined } - : undefined - }, - }) + | undefined => { + return lastPage.metaData?.hasNext + ? { + lastSpaceId: lastPage.metaData.lastId, + lastFavoriteCount: lastPage.metaData.lastFavoriteCount, + } + : undefined + }, + }) return { spaces: data, diff --git a/src/components/common/MainSpaceList/MainSpaceList.tsx b/src/components/common/MainSpaceList/MainSpaceList.tsx index f67f3201..e6844ffb 100644 --- a/src/components/common/MainSpaceList/MainSpaceList.tsx +++ b/src/components/common/MainSpaceList/MainSpaceList.tsx @@ -6,11 +6,8 @@ import useMainSpacesQuery from '@/components/SpaceList/hooks/useMainSpacesQuery' import { CATEGORIES_RENDER } from '@/constants' import useInfiniteScroll from '@/hooks/useInfiniteScroll' import { SearchSpaceReqBody, SpaceResBody } from '@/types' -import Button from '../Button/Button' -import DeferredComponent from '../DeferedComponent/DeferedComponent' import { MORE_TEXT } from '../LinkList/constants' import Space from '../Space/Space' -import Spinner from '../Spinner/Spinner' export interface SpaceListProps { memberId?: number @@ -50,11 +47,7 @@ const MainSpaceList = ({ const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage }) - return isSpacesLoading ? ( - - - - ) : ( + return ( <>
    { - const [links, setLinks] = useState() - const [isLoading, setIsLoading] = useState(false) - - useEffect(() => { - const fetchData = async () => { - setIsLoading(true) - const data = await fetchGetPopularLinks() - const linkData = data.responses - setLinks(linkData) - setIsLoading(false) - } - fetchData() - }, [setIsLoading]) - - return { links, isPopularLinksLoading: isLoading } -} - -export default useGetPopularLinks From b02106c0e856c80c30c13585ccc46b3ee7507425 Mon Sep 17 00:00:00 2001 From: "B._.OMI" Date: Tue, 30 Jul 2024 19:05:05 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20#321=20-=20=EB=B8=94=EB=9F=AC=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Space/SpaceForm.tsx | 2 -- src/components/common/Avatar/Avatar.tsx | 2 -- src/components/common/Space/Space.tsx | 4 ---- 3 files changed, 8 deletions(-) diff --git a/src/components/Space/SpaceForm.tsx b/src/components/Space/SpaceForm.tsx index c6ea8bee..9ac3204b 100644 --- a/src/components/Space/SpaceForm.tsx +++ b/src/components/Space/SpaceForm.tsx @@ -120,8 +120,6 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => { width={5000} height={188} alt="spaceImage" - placeholder="blur" - blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII=" /> ) : (
    diff --git a/src/components/common/Avatar/Avatar.tsx b/src/components/common/Avatar/Avatar.tsx index 0df2bc7e..12a37789 100644 --- a/src/components/common/Avatar/Avatar.tsx +++ b/src/components/common/Avatar/Avatar.tsx @@ -22,8 +22,6 @@ const Avatar = ({ src, alt, className }: AvatarProps) => { className, 'rounded-full border border-slate3 object-cover', )} - placeholder="blur" - blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII=" /> ) } diff --git a/src/components/common/Space/Space.tsx b/src/components/common/Space/Space.tsx index af90df9e..44ec0f11 100644 --- a/src/components/common/Space/Space.tsx +++ b/src/components/common/Space/Space.tsx @@ -80,8 +80,6 @@ const Space = ({ src={spaceImage || ''} alt="space-image" fill - placeholder="blur" - blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII=" sizes="(max-width: 768px) 22vw, (max-width: 1200px) 100px, 110px" /> )} @@ -120,8 +118,6 @@ const Space = ({ src={spaceImage || ''} alt="space-image" fill - placeholder="blur" - blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII=" />
    - {/* */} { + const { data } = useGetPopularLinks() + return ( + + {data?.responses.map((link: PopularLinkResBody) => ( + + + + ))} + + ) +} + +export default PopularLinkList diff --git a/src/components/common/MainSpaceList/MainSpaceSkeleton.tsx b/src/components/common/MainSpaceList/MainSpaceSkeleton.tsx new file mode 100644 index 00000000..97168e5b --- /dev/null +++ b/src/components/common/MainSpaceList/MainSpaceSkeleton.tsx @@ -0,0 +1,40 @@ +const SpaceSkeleton = () => { + return ( +
  • + +
    • + ) +} + +const MainSpaceSkeleton = () => { + return ( +
      + + + + + + + + + + +
    + ) +} + +export default MainSpaceSkeleton