[Feat] 공통 컴포넌트인 Navigation 구현

Caecae/src/App/main.tsx

@@ -1,10 +1,31 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./main.css";
+import { Router } from "../Shared/Router/Router.tsx";
+import Routes from "../Shared/Router/Routes.tsx";
+import Route from "../Shared/Router/Route.tsx";
+import Navigation from '../Widget/Component/Navigation/Navigation.tsx'
 
 // 임시 React component
 const App = () => {
-  return <div></div>;
+  return (
+    <div>
+      <Router>
+        <Navigation />
+        <Routes>
+          <Route 
+            path="/mainpage" 
+            element={<div>시작페이지</div>} />
+          <Route 
+            path="/findcasper" 
+            element={<div>캐스퍼찾기게임</div>} />
+          <Route 
+            path="/racecasper" 
+            element={<div>315게임</div>} />
+        </Routes>
+      </Router>
+    </div>
+  );
 };
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Caecae/src/Widget/Component/Navigation/Navigation.tsx

@@ -0,0 +1,91 @@
+import { useContext } from "react";
+import { RouterContext } from "../../../Shared/Router/Router";
+import Link from "../../../Shared/Router/Link";
+
+const Navigation: React.FC = () => {
+  const { path } = useContext(RouterContext);
+  const isActive = (linkPath: string) => path === linkPath;
+
+  return (
+    <nav className="relative bg-navigation flex justify-center items-center h-16 border-b-4 border-navigationUnderline">
+      <div className="absolute left-0 ml-10">
+        <Link to="/mainpage">
+          <img src="/src/Shared/assets/casperLogo.svg" alt="casperLogo" />
+        </Link>
+      </div>
+      <ul className="flex list-none text-white space-x-28 h-full items-center">
+        <li
+          className={`h-full flex justify-center items-center px-5 relative
+            before:absolute before:bottom-0 before:left-0 before:w-full before:h-0.5 before:bg-white
+            before:transform before:transition-transform before:duration-300 before:ease-in-out
+            ${
+              isActive("/mainpage")
+                ? "before:scale-x-100"
+                : "before:scale-x-0 hover:before:scale-x-50"
+            }
+          `}
+        >
+          <Link to="/mainpage" className="h-full flex items-center">
+            <span
+              className={`font-bold ${
+                isActive("/mainpage")
+                  ? "text-white"
+                  : "text-navigationText hover:text-white transition-colors duration-300"
+              }`}
+            >
+              이벤트 소개
+            </span>
+          </Link>
+        </li>
+        <li
+          className={`h-full flex justify-center items-center px-5 relative
+            before:absolute before:bottom-0 before:left-0 before:w-full before:h-0.5 before:bg-white
+            before:transform before:transition-transform before:duration-300 before:ease-in-out
+            ${
+              isActive("/findcasper")
+                ? "before:scale-x-100"
+                : "before:scale-x-0 hover:before:scale-x-50"
+            }
+          `}
+        >
+          <Link to="/findcasper" className="h-full flex items-center">
+            <span
+              className={`font-bold ${
+                isActive("/findcasper")
+                  ? "text-white"
+                  : "text-navigationText hover:text-white transition-colors duration-300"
+              }`}
+            >
+              나를 찾아봐
+            </span>
+          </Link>
+        </li>
+        <li
+          className={`h-full flex justify-center items-center px-5 relative
+            before:absolute before:bottom-0 before:left-0 before:w-full before:h-0.5 before:bg-white
+            before:transform before:transition-transform before:duration-300 before:ease-in-out
+            ${
+              isActive("/racecasper")
+                ? "before:scale-x-100"
+                : "before:scale-x-0 hover:before:scale-x-50"
+            }
+          `}
+        >
+          <Link to="/racecasper" className="h-full flex items-center">
+            <span
+              className={`font-bold ${
+                isActive("/racecasper")
+                  ? "text-white"
+                  : "text-navigationText hover:text-white transition-colors duration-300"
+              }`}
+            >
+              전력으로 315Km
+            </span>
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navigation;

Caecae/tailwind.config.js

@@ -7,6 +7,9 @@ export default {
   theme: {
     extend: {
       colors: {
+        navigation: '#1C1A1B',
+        navigationUnderline: '#444444',
+        navigationText: '#888888'
         footer: '#1C1A1B',
         footerText: '#888888',
         footerVerticalLine: '#444444',