feat : styling header

Author: CheonBi

src/common/Header/AuthHeader.jsx

@@ -3,12 +3,36 @@ import { Link } from 'react-router-dom';
 
 export default function AuthHeader() {
   return (
-    <div>
-      <nav>
-        <Link to="/">Hero</Link>
-        <Link to="/main">Main</Link>
-        <Link to="/share">Share</Link>
+    <header className="bg-white shadow-md sticky top-0 z-50 my-4">
+      <nav className="container mx-auto flex justify-between items-center p-4">
+        {/* Logo */}
+        <div className="text-2xl font-bold text-blue-600">MyLogo</div>
+
+        {/* Desktop Menu */}
+        <ul className="hidden md:flex space-x-6">
+          <li>
+            <Link
+              to="/"
+              className="text-gray-700 hover:text-blue-600 text-xl">
+              Hero
+            </Link>
+          </li>
+          <li>
+            <Link
+              to="/main"
+              className="text-gray-700 hover:text-blue-600 text-xl">
+              Main
+            </Link>
+          </li>
+          <li>
+            <Link
+              to="/share"
+              className="text-gray-700 hover:text-blue-600 text-xl">
+              Share
+            </Link>
+          </li>
+        </ul>
       </nav>
-    </div>
+    </header>
   );
 }

src/common/Header/DefaultHeader.jsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 export default function DefaultHeader() {
-  return <div>Header</div>;
+  return (
+    <div>
+      <nav className="flex">
+        <div>
+          <span className="">Logo</span>
+        </div>
+        <div className=""></div>
+      </nav>
+    </div>
+  );
 }