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 (
+ // 나중에 레이아웃으로 뺄거임 임시
+
+
+
+ );
+};