diff --git a/src/app/schedule/page.tsx b/src/app/schedule/page.tsx index c41fe9b1..6f26560a 100644 --- a/src/app/schedule/page.tsx +++ b/src/app/schedule/page.tsx @@ -2,6 +2,8 @@ import { useSearchParams } from 'next/navigation'; +import { Suspense } from 'react'; + import { TabNavigation } from '@/components/shared'; import Current from './(components)/current'; @@ -14,17 +16,32 @@ const SCHEDULE_TABS = [ { label: '모임 이력', value: 'history' }, ]; -export default function SchedulePage() { +const ScheduleContent = () => { const searchParams = useSearchParams(); const tab = searchParams.get('tab') || 'current'; return ( -
- - + <> {tab === 'current' && } {tab === 'my' && } {tab === 'history' && } + + ); +}; + +export default function SchedulePage() { + return ( +
+ + + + +
); } + +// 나중에 api 연동할 때 +// 1. ScheduleContent를 감싸던 임시 Suspense 제거해야됨 +// 2. useSearchParams()는 그대로 유지 +// 3. Current, My, History를 서버 컴포넌트로 변경 (use client 제거) - 서버에서 데이터 페칭 diff --git a/src/components/shared/tab-navigation/index.tsx b/src/components/shared/tab-navigation/index.tsx index a1c243fa..d1b4fef4 100644 --- a/src/components/shared/tab-navigation/index.tsx +++ b/src/components/shared/tab-navigation/index.tsx @@ -3,6 +3,8 @@ import Link from 'next/link'; import { useSearchParams } from 'next/navigation'; +import { Suspense } from 'react'; + import { cn } from '@/lib/utils'; export interface Tab { @@ -46,7 +48,7 @@ const TabItem = ({ label, href, isActive }: TabItemProps) => ( ); -export const TabNavigation = ({ tabs, paramName = 'tab', basePath = '' }: TabNavigationProps) => { +const TabNavigationInner = ({ tabs, paramName = 'tab', basePath = '' }: TabNavigationProps) => { const searchParams = useSearchParams(); const currentTab = searchParams.get(paramName) || tabs[0].value; @@ -66,3 +68,12 @@ export const TabNavigation = ({ tabs, paramName = 'tab', basePath = '' }: TabNav ); }; + +export const TabNavigation = (props: TabNavigationProps) => { + return ( + // 나중에 레이아웃으로 뺄거임 임시 + + + + ); +};