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() {