wallace/XRLMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메인 헤더 수정중

Browse Source
This commit is contained in:
wallace
2025-11-05 15:46:16 +09:00
parent bfee0c4717
commit ef82f69edc
5 changed files with 159 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
app/page.tsx
View File

@@ -1,36 +1,149 @@
"use client";
import Link from "next/link";
import { useState } from "react";
const logoImage = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
const chevronIcon = "http://localhost:3845/assets/6abc26b721560f9d3c51cf552531775f54f2f86a.svg";
export default function Home() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
return (
<div className="flex flex-col flex-1 bg-white">
{/* 헤더 */}
<header className="bg-white shadow-sm sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex items-center">
<h1 className="text-2xl font-bold text-blue-600">XR LMS</h1>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-16">
<div className="flex flex-row justify-between items-center gap-4 py-6">
{/* 로고/메뉴 그룹 */}
<div className="flex items-center gap-9 flex-1">
{/* Company 로고 */}
<div className="flex items-center gap-2">
<div className="h-9 relative w-[46.703px]">
<img
alt="XR LMS Logo"
className="h-full w-full object-contain"
src={logoImage}
/>
</div>
<h1 className="text-2xl font-bold text-black leading-[1.45] whitespace-pre">XR LMS</h1>
</div>
{/* 네비게이션 메뉴 */}
<nav className="hidden md:flex items-center">
<div className="flex gap-0.5">
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
과목 목록
</Link>
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
학습 자료실
</Link>
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
공지사항
</Link>
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
기관소개
</Link>
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
교육소개
</Link>
</div>
</nav>
</div>
<nav className="hidden md:flex space-x-8">
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">강의</Link>
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">커뮤니티</Link>
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">공지사항</Link>
<Link href="#" className="text-gray-700 hover:text-blue-600 transition">마이페이지</Link>
{/* 사용자 메뉴 그룹 */}
<nav className="flex items-center gap-6 shrink-0">
<div className="hidden md:flex items-center gap-6">
<Link
href="#"
className="px-4 py-2 text-[#5f5f5f] font-bold text-base hover:text-blue-600 transition h-9 flex items-center"
>
내 강의실
</Link>
<div className="relative">
<button
onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
className="flex items-center gap-1 px-4 py-2 text-[#5f5f5f] font-bold text-base hover:text-blue-600 transition h-9"
>
<span>조유주</span>
<div className="rotate-180">
<img
src={chevronIcon}
alt="chevron"
className="w-6 h-6"
/>
</div>
</button>
{/* 사용자 메뉴 드롭다운 */}
{isUserMenuOpen && (
<div className="absolute right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg py-2 min-w-[120px]">
<Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">프로필</Link>
<Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">설정</Link>
<Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">로그아웃</Link>
</div>
)}
</div>
</div>
{/* 모바일 햄버거 메뉴 아이콘 */}
<button
className="md:hidden p-2 text-gray-700 hover:text-blue-600 transition"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="메뉴"
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
{isMobileMenuOpen ? (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
) : (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
)}
</svg>
</button>
</nav>
<div className="flex items-center space-x-4">
<Link
href="/registeragreement"
className="px-4 py-2 text-gray-700 hover:text-blue-600 transition"
>
회원가입
</Link>
<Link
href="/login"
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"
>
로그인
</Link>
</div>
</div>
{/* 모바일 메뉴 */}
{isMobileMenuOpen && (
<div className="md:hidden border-t border-gray-200 py-4">
<nav className="flex flex-col space-y-4">
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">과목 목록</Link>
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">학습 자료실</Link>
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">공지사항</Link>
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">기관소개</Link>
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">교육소개</Link>
<div className="pt-4 border-t border-gray-200 flex flex-col space-y-2">
<Link
href="#"
className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
>
내 강의실
</Link>
<Link
href="#"
className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
>
조유주
</Link>
</div>
</nav>
</div>
)}
</div>
</header>