fix(IN-314): vercel 배포 에러 해결

원인: useSearchParams()를 사용하는 컴포넌트들이 Next.js 빌드 시 SSR 정적 분석 대상에 포함되어, 경계가 있어도 프리렌더링 단계에서 에러 발생.

해결: 패턴 → dynamic(ssr: false)로 교체하여 해당 컴포넌트들을 SSR 분석 대상에서 완전히 제외.

Author: kimYunHyeong

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() {
     <div className='flex h-fit w-full flex-col gap-24 pb-[9.6rem]'>
       <InfluencerFilter categories={categories} />
       <div className='h-full'>
-        <Suspense fallback={<></>}>
-          <BookmarkedInfluencerListSection />
-        </Suspense>
+        <BookmarkedInfluencerListSectionDynamic />
       </div>
     </div>
   )

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() {
     <div className='flex h-fit w-full flex-col gap-24 pb-[9.6rem]'>
       <InfluencerFilter categories={categories} />
       <div className='h-full'>
-        <Suspense fallback={<></>}>
-          <InfluencerListSection />
-        </Suspense>
+        <InfluencerListSectionDynamic />
       </div>
     </div>
   )

src/pages/videos/ui/VideosPage.tsx

@@ -1,21 +1,25 @@
 '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'
 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 (
     <>
       <SearchAndFilter />
       <div className='h-full'>
-        <Suspense fallback={<></>}>
-          <VideoListSection />
-        </Suspense>
+        <VideoListSectionDynamic />
       </div>
     </>
   )

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 (
-    <Suspense fallback={<div className='h-full' />}>
-      <InfluencerFilterInner categories={categories} />
-    </Suspense>
-  )
-}
+export const InfluencerFilter = dynamic(
+  () => Promise.resolve(InfluencerFilterInner),
+  { ssr: false }
+)
 
 function InfluencerFilterInner({ categories }: InfluencerFilterProps) {
   const router = useRouter()
@@ -158,6 +156,7 @@ function InfluencerFilterInner({ categories }: InfluencerFilterProps) {
       <div className='flex w-full items-center gap-24'>
         {/* 검색바 */}
         <SearchBar
+          className='w-[50rem]'
           placeholder='채널명 또는 키워드 검색'
           value={query}
           onChange={(e) => setQuery(e.target.value)}

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 (
-    <Suspense fallback={<></>}>
-      <SearchAndFilterInner />
-    </Suspense>
-  )
-}
+export const SearchAndFilter = dynamic(
+  () => Promise.resolve(SearchAndFilterInner),
+  { ssr: false }
+)
 
 /* 필터를 쿼리 파라미터에 반영 */
 function SearchAndFilterInner() {