fix(IN-320): 배포환경 빌드 에러 해결

app/(public)/page.tsx에 metadata를 export하면서 해당 페이지가 Server Component로 전환되어 정적 프리렌더링이 시도됨. 이 과정에서 자식 컴포넌트 HomePage의 useSearchParams()가 Suspense 없이 호출되어 빌드 실패

useSearchParams()를 사용하는 useEffect를 SearchParamsHandler 컴포넌트로 분리
HomePage return문 안에서 <Suspense fallback={null}><SearchParamsHandler /></Suspense>로 렌더링

Author: kimYunHyeong

src/app/layouts/index.tsx

@@ -24,6 +24,7 @@ const ibmPlexSansKr = IBM_Plex_Sans_KR({
 })
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://inflace.site'),
   title: 'inflace',
   description: '인플루언서 되기 + 찾기',
 }

src/pages/home/ui/HomePage.tsx

@@ -1,28 +1,22 @@
 'use client'
 
-import { useEffect } from 'react'
+import { Suspense, useEffect } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useAuth } from '@/features/auth/model/useAuth'
 import { useLoginModal } from '@/features/auth/model/useLoginModal'
 
 import { FeatureSection, HeroMain, PlansSection } from '@/widgets/home'
 
-export default function HomePage() {
-  /* 유저가 로그인 한 후라면 해당 페이지가 아닌
-   * main 페이지를 렌더링함
-   */
-  const router = useRouter()
+function SearchParamsHandler({
+  isInitializing,
+  isLoggedIn,
+}: {
+  isInitializing: boolean
+  isLoggedIn: boolean
+}) {
   const searchParams = useSearchParams()
   const openLoginModal = useLoginModal((s) => s.open)
 
-  const { isLoggedIn, isInitializing } = useAuth()
-
-  useEffect(() => {
-    if (!isInitializing && isLoggedIn) {
-      router.replace('/main')
-    }
-  }, [isInitializing, isLoggedIn, router])
-
   // proxy.ts가 보호 경로 접근을 /?from=protected로 리다이렉트하면 로그인 모달 오픈
   useEffect(() => {
     if (
@@ -34,6 +28,22 @@ export default function HomePage() {
     }
   }, [isInitializing, isLoggedIn, searchParams, openLoginModal])
 
+  return null
+}
+
+export default function HomePage() {
+  /* 유저가 로그인 한 후라면 해당 페이지가 아닌
+   * main 페이지를 렌더링함
+   */
+  const router = useRouter()
+  const { isLoggedIn, isInitializing } = useAuth()
+
+  useEffect(() => {
+    if (!isInitializing && isLoggedIn) {
+      router.replace('/main')
+    }
+  }, [isInitializing, isLoggedIn, router])
+
   /* auth 초기화 완료 후 snap 클래스를 추가하도록 함
    * isInitializing 중에 snap을 활성화하면 컨텐츠 렌더 시점에 snap-start로 강제 스크롤됨
    * 로딩 중 스클롤을 인식해 화면 최하단으로 랜더링 되는 것을 방지함.
@@ -53,6 +63,9 @@ export default function HomePage() {
 
   return (
     <>
+      <Suspense fallback={null}>
+        <SearchParamsHandler isInitializing={isInitializing} isLoggedIn={isLoggedIn} />
+      </Suspense>
       <HeroMain />
       <div className='snap-start'>
         <section className='grid grid-cols-1 gap-(--spacing-md) px-(--spacing-md) py-56 md:grid-cols-2 lg:grid-cols-3'>