navbar 개발

src/App.jsx

@@ -4,6 +4,7 @@ const App = () => {
     return (
         <>
             <ResponsiveNavbar />
+            {/*<div className="bg-green-500">content</div>*/}
             {/*<main className="pt-20">*/}
             {/*    <h1>유셀네트웍스 페이지입니다</h1>*/}
             {/*</main>*/}

src/components/ResponsiveNavbar.jsx

@@ -18,61 +18,23 @@ const ResponsiveNavbar = () => {
     };
 
     return (
-        <header className="bg-gray-100 shadow-md">
-            <nav className="flex items-center justify-between py-4 px-6">
-                {/* 로고 */}
-                <div className="flex items-center">
-                    <img src={logo} alt="logo" className="h-8 mr-2" />
+        <header className="fixed bg-sky-200 flex h-17 w-full justify-center z-10">
+            <nav className="flex w-full max-w-screen-xl items-center">
+                <div className="flex">
+                    <a className="" href="#">
+                        <img src={logo} alt="logo"/>
+                    </a>
                 </div>
-
-                <div className="md:flex space-x-6">
+                <div className="flex ml-auto h-full z-50 px-1">
                     {menuItems.map((item, index) => (
-                        <a
-                            key={index}
-                            href="#"
-                            className="text-gray-600 hover:text-yellow-500 transition duration-300"
-                        >
-                            {item.label}
-                        </a>
+                        <div key={index} className="flex w-[196px] h-full justify-center items-center">
+                            <a href="#">
+                                {item.label}
+                            </a>
+                        </div>
                     ))}
                 </div>
-
-                {/* 모바일 햄버거 버튼 (768px 이하에서 표시) */}
-                {/*<div className="md:hidden">*/}
-                {/*    <button onClick={toggleMenu} className="text-gray-600 focus:outline-none">*/}
-                {/*        <svg*/}
-                {/*            className="h-6 w-6"*/}
-                {/*            fill="none"*/}
-                {/*            stroke="currentColor"*/}
-                {/*            viewBox="0 0 24 24"*/}
-                {/*            xmlns="http://www.w3.org/2000/svg"*/}
-                {/*        >*/}
-                {/*            <path*/}
-                {/*                strokeLinecap="round"*/}
-                {/*                strokeLinejoin="round"*/}
-                {/*                strokeWidth="2"*/}
-                {/*                d="M4 6h16M4 12h16m-7 6h7"*/}
-                {/*            />*/}
-                {/*        </svg>*/}
-                {/*    </button>*/}
-                {/*</div>*/}
             </nav>
-
-            {/* 모바일 드롭다운 메뉴 (768px 이하에서 표시) */}
-            <div className={`md:hidden bg-gray-100 shadow-md ${isMenuOpen ? 'block' : 'hidden'}`}>
-                <div className="flex flex-col space-y-4 py-4 px-6">
-                    {menuItems.map((item, index) => (
-                        <a
-                            key={index}
-                            href="#"
-                            className="text-gray-600 hover:text-yellow-500 transition duration-300"
-                            onClick={() => setIsMenuOpen(false)} // 메뉴 클릭 시 닫힘
-                        >
-                            {item.label}
-                        </a>
-                    ))}
-                </div>
-            </div>
         </header>
     );
 };

src/index.css

@@ -1,15 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 /* 전역 글꼴 및 렌더링 설정 */
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}

vite.config.js

@@ -4,8 +4,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-      react(),
-      tailwindcss()
-  ],
+  plugins: [react(), tailwindcss()],
 })