chevron 적용용
This commit is contained in:
wallace
84
app/page.tsx
84
app/page.tsx
@@ -5,10 +5,8 @@ import { useState } from "react";
|
||||
|
||||
// 이미지 상수
|
||||
const logoImage = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
|
||||
const chevronIcon = "http://localhost:3845/assets/6abc26b721560f9d3c51cf552531775f54f2f86a.svg";
|
||||
const chevronIcon = "/chevron.svg";
|
||||
const heroImage = "http://localhost:3845/assets/02d8c5116625dec34c335abdf02727a333ee1e42.png";
|
||||
const chevronIcon1 = "http://localhost:3845/assets/ad74d16bce8358831f1349a912d7e02bb0efaa84.svg";
|
||||
const chevronIcon2 = "http://localhost:3845/assets/f671b394255e49d772f588cdc8bd6e9dfd423281.svg";
|
||||
const lineIcon = "http://localhost:3845/assets/2fbce31172577fb51bb8028f779906af08a2aef0.svg";
|
||||
|
||||
// 과목 이미지들
|
||||
@@ -31,6 +29,9 @@ const courses = [
|
||||
export default function Home() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||
const [isCourseExpanded, setIsCourseExpanded] = useState(false);
|
||||
const [isMoreExpanded, setIsMoreExpanded] = useState(false);
|
||||
const [isNoticeExpanded, setIsNoticeExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1 bg-white items-center">
|
||||
@@ -43,15 +44,15 @@ export default function Home() {
|
||||
{/* 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}
|
||||
<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">
|
||||
@@ -73,7 +74,7 @@ export default function Home() {
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 사용자 메뉴 그룹 */}
|
||||
<nav className="flex items-center gap-6 shrink-0">
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
@@ -89,10 +90,10 @@ export default function Home() {
|
||||
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"
|
||||
<div className={`transition-transform duration-200 ${isUserMenuOpen ? 'rotate-180' : ''}`}>
|
||||
<img
|
||||
src={chevronIcon}
|
||||
alt="chevron"
|
||||
className="w-6 h-6"
|
||||
/>
|
||||
</div>
|
||||
@@ -110,7 +111,7 @@ export default function Home() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 모바일 햄버거 메뉴 아이콘 */}
|
||||
<button
|
||||
className="md:hidden p-2 text-gray-700 hover:text-blue-600 transition"
|
||||
@@ -142,7 +143,7 @@ export default function Home() {
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 모바일 메뉴 */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-200 py-4">
|
||||
@@ -159,7 +160,7 @@ export default function Home() {
|
||||
>
|
||||
내 강의실
|
||||
</Link>
|
||||
<Link
|
||||
<Link
|
||||
href="#"
|
||||
className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
|
||||
>
|
||||
@@ -177,10 +178,10 @@ export default function Home() {
|
||||
{/* Hero 배너 */}
|
||||
<div className="flex-1 min-h-0 overflow-hidden relative rounded-xl self-stretch">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
alt="Hero Banner"
|
||||
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||
src={heroImage}
|
||||
<img
|
||||
alt="Hero Banner"
|
||||
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||
src={heroImage}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-[60px] left-1/2 -translate-x-1/2 flex flex-col gap-2 items-start text-white text-center w-[496px]">
|
||||
@@ -251,11 +252,14 @@ export default function Home() {
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center shrink-0">
|
||||
<div className="rotate-180">
|
||||
<img src={chevronIcon1} alt="chevron" className="w-6 h-6" />
|
||||
<button
|
||||
onClick={() => setIsCourseExpanded(!isCourseExpanded)}
|
||||
className="flex items-center justify-center shrink-0"
|
||||
>
|
||||
<div className={`transition-transform duration-200 ${isCourseExpanded ? 'rotate-180' : ''}`}>
|
||||
<img src={chevronIcon} alt="chevron" className="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex gap-10 items-start">
|
||||
@@ -292,24 +296,27 @@ export default function Home() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-0.5 items-center">
|
||||
<button
|
||||
onClick={() => setIsMoreExpanded(!isMoreExpanded)}
|
||||
className="flex gap-0.5 items-center"
|
||||
>
|
||||
<p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
|
||||
더보기
|
||||
</p>
|
||||
<div className="overflow-hidden shrink-0 w-4 h-4">
|
||||
<img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
|
||||
<div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isMoreExpanded ? 'rotate-180' : ''}`}>
|
||||
<img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-8 items-center justify-center w-full">
|
||||
{courses.map((course, idx) => (
|
||||
<div key={idx} className="flex-1 flex flex-col gap-4 items-start rounded-lg">
|
||||
<div className="h-[230px] overflow-hidden relative rounded-xl w-full">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
alt={course.title}
|
||||
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||
src={course.image}
|
||||
<img
|
||||
alt={course.title}
|
||||
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||
src={course.image}
|
||||
/>
|
||||
</div>
|
||||
{course.hasNew && (
|
||||
@@ -341,14 +348,17 @@ export default function Home() {
|
||||
<div className="flex flex-col h-[44px] justify-center text-[#333c47] text-[19px] text-center tracking-[-0.19px] w-[66px]">
|
||||
<p className="font-bold leading-[1.5]">공지사항</p>
|
||||
</div>
|
||||
<div className="flex gap-0.5 items-center">
|
||||
<button
|
||||
onClick={() => setIsNoticeExpanded(!isNoticeExpanded)}
|
||||
className="flex gap-0.5 items-center"
|
||||
>
|
||||
<p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
|
||||
목록보기
|
||||
</p>
|
||||
<div className="overflow-hidden shrink-0 w-4 h-4">
|
||||
<img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
|
||||
<div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isNoticeExpanded ? 'rotate-180' : ''}`}>
|
||||
<img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col items-start">
|
||||
{[
|
||||
@@ -356,7 +366,7 @@ export default function Home() {
|
||||
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||
].map((notice, idx) => (
|
||||
<div
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex gap-2 h-11 items-center px-2 py-3 w-full ${idx < 2 ? 'border-b border-black/10' : ''}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user