From 8062b731b67f561ef47d223e2620e17b339c441f Mon Sep 17 00:00:00 2001 From: kim__yun_h Date: Sun, 31 May 2026 23:47:41 +0900 Subject: [PATCH] =?UTF-8?q?fix(IN-314):=20vercel=20=EB=B0=B0=ED=8F=AC=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 원인: useSearchParams()를 사용하는 컴포넌트들이 Next.js 빌드 시 SSR 정적 분석 대상에 포함되어, 경계가 있어도 프리렌더링 단계에서 에러 발생. 해결: 패턴 → dynamic(ssr: false)로 교체하여 해당 컴포넌트들을 SSR 분석 대상에서 완전히 제외. --- .../influencer/ui/BookmarkedInfluencerPage.tsx | 11 +++++++---- src/pages/influencer/ui/InfluencerPage.tsx | 11 +++++++---- src/pages/videos/ui/VideosPage.tsx | 12 ++++++++---- src/widgets/influencer/ui/InfluencerFilter.tsx | 15 +++++++-------- src/widgets/videos/ui/SearchAndFilter.tsx | 14 ++++++-------- 5 files changed, 35 insertions(+), 28 deletions(-) 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() {