code rabbit test

src/app/(service)/home/home-content.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import dynamic from 'next/dynamic';
+import Banner from '@/widgets/home/banner';
+import StudyCard from '@/features/study/schedule/ui/study-card';
+import TabNavigation from '@/components/home/tab-navigation';
+
+// 탭 컴포넌트들을 동적으로 로드 (성능 최적화)
+const StudyTab = dynamic(() => import('@/components/home/tabs/study-tab'), {
+  loading: () => (
+    <div className="flex flex-col gap-500">
+      <Banner />
+      <StudyCard />
+    </div>
+  ),
+  ssr: false
+});
+
+const HallOfFameTab = dynamic(() => import('@/components/home/tabs/hall-of-fame-tab'), {
+  loading: () => <div className="py-800 text-center text-text-subtlest">로딩 중...</div>,
+  ssr: false
+});
+
+const ArchiveTab = dynamic(() => import('@/components/home/tabs/archive-tab'), {
+  loading: () => <div className="py-800 text-center text-text-subtlest">로딩 중...</div>,
+  ssr: false
+});
+
+const CommunityTab = dynamic(() => import('@/components/home/tabs/community-tab'), {
+  loading: () => <div className="py-800 text-center text-text-subtlest">로딩 중...</div>,
+  ssr: false
+});
+
+const StudyHistoryTab = dynamic(() => import('@/components/home/tabs/study-history-tab'), {
+  loading: () => <div className="py-800 text-center text-text-subtlest">로딩 중...</div>,
+  ssr: false
+});
+
+function HomeContentInner() {
+  const searchParams = useSearchParams();
+  const activeTab = searchParams?.get('tab') || 'study'; // 기본값을 'study'로 설정
+
+  // 이제 항상 탭 시스템을 사용
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'study':
+        return <StudyTab />;
+      case 'history':
+        return <StudyHistoryTab />;
+      case 'ranking':
+        return <HallOfFameTab />;
+      case 'archive':
+        return <ArchiveTab />;
+      case 'community':
+        return <CommunityTab />;
+      default:
+        // 알 수 없는 탭이면 기본값으로 폴백
+        return <StudyTab />;
+    }
+  };
+
+  return (
+    <>
+      {/* 탭 네비게이션 */}
+      <TabNavigation activeTab={activeTab} />
+
+      {/* 탭 콘텐츠 */}
+      <Suspense 
+        fallback={
+          <div className="py-800 text-center text-text-subtlest">
+            로딩 중...
+          </div>
+        }
+      >
+        {renderTabContent()}
+      </Suspense>
+    </>
+  );
+}
+
+export default function HomeContent() {
+  return (
+    <Suspense 
+      fallback={
+        <>
+          <Banner />
+          <StudyCard />
+        </>
+      }
+    >
+      <HomeContentInner />
+    </Suspense>
+  );
+}

src/app/(service)/home/page.tsx

@@ -1,8 +1,10 @@
 import { Metadata } from 'next';
+import { Suspense } from 'react';
 import StudyCard from '@/features/study/schedule/ui/study-card';
 import { generateMetadata as generateSEOMetadata } from '@/utils/seo';
 import Banner from '@/widgets/home/banner';
 import Sidebar from '@/widgets/home/sidebar';
+import HomeContent from './home-content';
 
 export const metadata: Metadata = generateSEOMetadata({
   title: '홈 - ZERO-ONE',
@@ -17,11 +19,20 @@ export default async function Home() {
   return (
     <div className="mx-auto flex w-[1496px] gap-600 px-600 py-600">
       <div className="flex flex-1 flex-col gap-500">
-        <Banner />
-        <StudyCard />
+        {/* 기존 기능을 100% 보존하면서 새로운 탭 시스템 추가 */}
+        <Suspense 
+          fallback={
+            <>
+              <Banner />
+              <StudyCard />
+            </>
+          }
+        >
+          <HomeContent />
+        </Suspense>
       </div>
 
-      <aside className="w-[335px] shrink-0">
+      <aside className="sticky top-600 h-fit w-[335px] shrink-0">
         <Sidebar />
       </aside>
     </div>