diff --git a/src/pages/influencer/ui/BookmarkedInfluencerPage.tsx b/src/pages/influencer/ui/BookmarkedInfluencerPage.tsx index 6aa46bc4..840c0031 100644 --- a/src/pages/influencer/ui/BookmarkedInfluencerPage.tsx +++ b/src/pages/influencer/ui/BookmarkedInfluencerPage.tsx @@ -1,12 +1,17 @@ 'use client' -import { Suspense } from 'react' +import dynamic from 'next/dynamic' import { useSearchParams, useRouter, usePathname } from 'next/navigation' import { InfluencerList, useInfluencers, SORT_OPTIONS } from '@/features/influencer' import { useYoutubeCategories } from '@/entities/youtubeCategory' import type { SortCriteria, SortOrder } from '@/entities/influencer' import { InfluencerFilter } from '@/widgets/influencer' +const BookmarkedInfluencerListSectionDynamic = dynamic( + () => Promise.resolve(BookmarkedInfluencerListSection), + { ssr: false } +) + export function BookmarkedInfluencerPage() { const { data: categoriesData } = useYoutubeCategories() const categories = categoriesData?.youtubeCategories ?? [] @@ -15,9 +20,7 @@ export function BookmarkedInfluencerPage() {
- }> - - +
) diff --git a/src/pages/influencer/ui/InfluencerPage.tsx b/src/pages/influencer/ui/InfluencerPage.tsx index 5fb87300..a26c0d75 100644 --- a/src/pages/influencer/ui/InfluencerPage.tsx +++ b/src/pages/influencer/ui/InfluencerPage.tsx @@ -1,6 +1,6 @@ 'use client' -import { Suspense } from 'react' +import dynamic from 'next/dynamic' import { useSearchParams, useRouter, usePathname } from 'next/navigation' import { InfluencerList, @@ -11,6 +11,11 @@ import { useYoutubeCategories } from '@/entities/youtubeCategory' import type { SortCriteria, SortOrder } from '@/entities/influencer' import { InfluencerFilter } from '@/widgets/influencer' +const InfluencerListSectionDynamic = dynamic( + () => Promise.resolve(InfluencerListSection), + { ssr: false } +) + export function InfluencerPage() { const { data: categoriesData } = useYoutubeCategories() const categories = categoriesData?.youtubeCategories ?? [] @@ -19,9 +24,7 @@ export function InfluencerPage() {
- }> - - +
) diff --git a/src/pages/videos/ui/VideosPage.tsx b/src/pages/videos/ui/VideosPage.tsx index ed213300..f52761dd 100644 --- a/src/pages/videos/ui/VideosPage.tsx +++ b/src/pages/videos/ui/VideosPage.tsx @@ -1,6 +1,7 @@ 'use client' -import { Suspense, useState } from 'react' +import { useState } from 'react' +import dynamic from 'next/dynamic' import { useSearchParams } from 'next/navigation' import { useAuth } from '@/features/auth' import { useVideos, VideoList, VALID_FORMAT } from '@/features/videos' @@ -8,14 +9,17 @@ import type { VideoFilterParams, VideoSort } from '@/features/videos' import { InfiniteScrollList } from '@/shared/ui/infinite-scroll-list/InfiniteScrollList' import { SearchAndFilter } from '@/widgets/videos' +const VideoListSectionDynamic = dynamic( + () => Promise.resolve(VideoListSection), + { ssr: false } +) + export function VideosPage() { return ( <>
- }> - - +
) diff --git a/src/widgets/influencer/ui/InfluencerFilter.tsx b/src/widgets/influencer/ui/InfluencerFilter.tsx index 9aa64969..8624ce71 100644 --- a/src/widgets/influencer/ui/InfluencerFilter.tsx +++ b/src/widgets/influencer/ui/InfluencerFilter.tsx @@ -1,7 +1,8 @@ 'use client' -import { useState, useEffect, useRef, useCallback, Suspense } from 'react' +import { useState, useEffect, useRef, useCallback } from 'react' import { useRouter, usePathname, useSearchParams } from 'next/navigation' +import dynamic from 'next/dynamic' import { SearchBar } from '@/shared/ui/search-bar' import { Button } from '@/shared/ui/button' @@ -75,13 +76,10 @@ type InfluencerFilterProps = { categories: YoutubeCategory[] } -export function InfluencerFilter({ categories }: InfluencerFilterProps) { - return ( - }> - - - ) -} +export const InfluencerFilter = dynamic( + () => Promise.resolve(InfluencerFilterInner), + { ssr: false } +) function InfluencerFilterInner({ categories }: InfluencerFilterProps) { const router = useRouter() @@ -158,6 +156,7 @@ function InfluencerFilterInner({ categories }: InfluencerFilterProps) {
{/* 검색바 */} setQuery(e.target.value)} diff --git a/src/widgets/videos/ui/SearchAndFilter.tsx b/src/widgets/videos/ui/SearchAndFilter.tsx index 779f471b..c639f224 100644 --- a/src/widgets/videos/ui/SearchAndFilter.tsx +++ b/src/widgets/videos/ui/SearchAndFilter.tsx @@ -1,18 +1,16 @@ 'use client' -import { Suspense, useState, useEffect, useRef, useCallback } from 'react' +import { useState, useEffect, useRef, useCallback } from 'react' import { useRouter, usePathname, useSearchParams } from 'next/navigation' +import dynamic from 'next/dynamic' import { SearchBar } from '@/shared/ui/search-bar' import { Toggle } from '@/shared/ui/toggle' import { CalendarFilter } from './CalendarFilter' -export function SearchAndFilter() { - return ( - }> - - - ) -} +export const SearchAndFilter = dynamic( + () => Promise.resolve(SearchAndFilterInner), + { ssr: false } +) /* 필터를 쿼리 파라미터에 반영 */ function SearchAndFilterInner() {