Feature/spectator UI

apps/spectator/package.json

@@ -20,6 +20,7 @@
     "@hcc/api-base": "workspace:*",
     "@hcc/icons": "workspace:*",
     "@hcc/style": "workspace:*",
+    "@hcc/ui": "workspace:*",
     "@vercel/analytics": "^1.5.0",
     "next": "^15.4.6",
     "react": "^19.1.1",

apps/spectator/src/app/landingpage/_components/TabNavigation.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@hcc/ui';
+
+interface TabNavigationProps {
+  activeTab: string;
+  onTabClick: (tabID: string) => void;
+}
+
+export const TabNavigation = ({ activeTab, onTabClick }: TabNavigationProps) => {
+  const tabs = [
+    { id: 'previous', label: '이전 대회' },
+    { id: 'recent', label: '최근 대회' },
+    { id: 'teams', label: '팀별 보기' },
+  ];
+
+  return (
+    <div className="w-full border-gray-200 border-b bg-white pt-5">
+      <div className="flex justify-center">
+        <div role="tablist" aria-label="대회 탭" className="flex gap-8">
+          {tabs.map(tab => (
+            <Button
+              key={tab.id}
+              role="tab"
+              aria-selected={activeTab === tab.id}
+              className={`-mb-px relative border-b-2 px-4 pb-4 font-medium transition-all duration-150 ease-out ${
+                activeTab === tab.id
+                  ? 'border-neutral-900 text-neutral-900'
+                  : 'border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700'
+              }`}
+              variant="subtle"
+              onClick={() => onTabClick(tab.id)}
+            >
+              {tab.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/spectator/src/app/landingpage/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+import { TabNavigation } from '~/app/landingpage/_components/TabNavigation';
+import { useState } from 'react';
+
+const Page = () => {
+  const [activeTab, setActiveTab] = useState('recent');
+  return (
+    <>
+      <TabNavigation activeTab={activeTab} onTabClick={setActiveTab} />
+      {/**내용* - 클릭한 tab에 대한 내용 랜더링*/}
+    </>
+  );
+};
+export default Page;

apps/spectator/src/app/page.tsx

@@ -1,5 +1,5 @@
 const Page = () => {
-  return <div>Home</div>;
+  return <div />;
 };
 
 export default Page;