Skip to content

Commit a6e96bc

Browse files
committed
fix(IN-320): 배포환경 빌드 에러 해결
app/(public)/page.tsx에 metadata를 export하면서 해당 페이지가 Server Component로 전환되어 정적 프리렌더링이 시도됨. 이 과정에서 자식 컴포넌트 HomePage의 useSearchParams()가 Suspense 없이 호출되어 빌드 실패 useSearchParams()를 사용하는 useEffect를 SearchParamsHandler 컴포넌트로 분리 HomePage return문 안에서 <Suspense fallback={null}><SearchParamsHandler /></Suspense>로 렌더링
1 parent d6dbcbd commit a6e96bc

2 files changed

Lines changed: 28 additions & 14 deletions

File tree

src/app/layouts/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const ibmPlexSansKr = IBM_Plex_Sans_KR({
2424
})
2525

2626
export const metadata: Metadata = {
27+
metadataBase: new URL('https://inflace.site'),
2728
title: 'inflace',
2829
description: '인플루언서 되기 + 찾기',
2930
}

src/pages/home/ui/HomePage.tsx

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
11
'use client'
22

3-
import { useEffect } from 'react'
3+
import { Suspense, useEffect } from 'react'
44
import { useRouter, useSearchParams } from 'next/navigation'
55
import { useAuth } from '@/features/auth/model/useAuth'
66
import { useLoginModal } from '@/features/auth/model/useLoginModal'
77

88
import { FeatureSection, HeroMain, PlansSection } from '@/widgets/home'
99

10-
export default function HomePage() {
11-
/* 유저가 로그인 한 후라면 해당 페이지가 아닌
12-
* main 페이지를 렌더링함
13-
*/
14-
const router = useRouter()
10+
function SearchParamsHandler({
11+
isInitializing,
12+
isLoggedIn,
13+
}: {
14+
isInitializing: boolean
15+
isLoggedIn: boolean
16+
}) {
1517
const searchParams = useSearchParams()
1618
const openLoginModal = useLoginModal((s) => s.open)
1719

18-
const { isLoggedIn, isInitializing } = useAuth()
19-
20-
useEffect(() => {
21-
if (!isInitializing && isLoggedIn) {
22-
router.replace('/main')
23-
}
24-
}, [isInitializing, isLoggedIn, router])
25-
2620
// proxy.ts가 보호 경로 접근을 /?from=protected로 리다이렉트하면 로그인 모달 오픈
2721
useEffect(() => {
2822
if (
@@ -34,6 +28,22 @@ export default function HomePage() {
3428
}
3529
}, [isInitializing, isLoggedIn, searchParams, openLoginModal])
3630

31+
return null
32+
}
33+
34+
export default function HomePage() {
35+
/* 유저가 로그인 한 후라면 해당 페이지가 아닌
36+
* main 페이지를 렌더링함
37+
*/
38+
const router = useRouter()
39+
const { isLoggedIn, isInitializing } = useAuth()
40+
41+
useEffect(() => {
42+
if (!isInitializing && isLoggedIn) {
43+
router.replace('/main')
44+
}
45+
}, [isInitializing, isLoggedIn, router])
46+
3747
/* auth 초기화 완료 후 snap 클래스를 추가하도록 함
3848
* isInitializing 중에 snap을 활성화하면 컨텐츠 렌더 시점에 snap-start로 강제 스크롤됨
3949
* 로딩 중 스클롤을 인식해 화면 최하단으로 랜더링 되는 것을 방지함.
@@ -53,6 +63,9 @@ export default function HomePage() {
5363

5464
return (
5565
<>
66+
<Suspense fallback={null}>
67+
<SearchParamsHandler isInitializing={isInitializing} isLoggedIn={isLoggedIn} />
68+
</Suspense>
5669
<HeroMain />
5770
<div className='snap-start'>
5871
<section className='grid grid-cols-1 gap-(--spacing-md) px-(--spacing-md) py-56 md:grid-cols-2 lg:grid-cols-3'>

0 commit comments

Comments
 (0)