import type { ReactNode } from 'react'; const navItems = ['소개', '게시판', '자료실', '마이페이지']; function UserHeader() { return ( <header className="header"> <div className="header_top"> <div className="inner"> <div className="area_left" /> <ul className="user_menu"> <li> <a href="#">본인인증</a> </li> <li> <a href="#">마이페이지</a> </li> </ul> </div> </div> <div className="header_container"> <div className="inner"> <h1 className="logo"> <a href="#"> <span>BASE USER</span> </a> </h1> <nav> <ul className="gnb"> {navItems.map((item) => ( <li key={item}> <a href="#" className="depth01"> {item} </a> <div className="depth02_container"> <ul className="depth02_ul"> <li> <a href="#" className="depth02"> {item} 하위메뉴 </a> </li> <li> <a href="#" className="depth02"> 안내 </a> </li> </ul> </div> </li> ))} </ul> </nav> <ul className="header_util"> <li> <button type="button" className="btn_search" title="검색"> <i /> </button> </li> <li> <button type="button" className="btn_sitemap" title="전체메뉴 보기"> <i /> </button> </li> </ul> </div> </div> </header> ); } function UserSideMenu() { return ( <aside className="sidemenu"> <div className="sidemenu_tit"> <h2>마이페이지</h2> </div> <nav className="sidemenu_nav"> <ul className="depth01_list"> <li> <a href="#" className="depth01" rel="noopener noreferrer"> 게시판 <i /> </a> <ul className="depth02_list"> <li> <a href="#" className="depth02"> 공지사항 </a> </li> <li> <a href="#" className="depth02"> 자료실 </a> </li> </ul> </li> <li> <a href="#" className="depth01"> 내 신청 내역 </a> </li> <li> <a href="#" className="depth01"> 회원정보 </a> </li> </ul> </nav> </aside> ); } export function UserLayout({ children }: { children: ReactNode }) { return ( <div className="wrap"> <UserHeader /> <div id="container" className="container sub"> <div className="inner"> <UserSideMenu /> <div className="content_wrap"> <div className="content_title"> <h2>공지사항</h2> </div> <div className="contents">{children}</div> </div> </div> </div> <footer className="footer"> <div className="inner">Copyright BASE USER.</div> </footer> </div> ); }