헤더 버튼 활성화화

2025-11-11 20:01:37 +09:00
parent 94a186de59
commit e8f4094de6
5 changed files with 535 additions and 83 deletions
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import logo from '../logo.svg';
+
+type ActivePage = 'home' | 'lecturelist' | 'studydata' | null;
+
+interface HeaderProps {
+  activePage?: ActivePage;
+}
+
+export default function Header({ activePage = null }: HeaderProps) {
+  const router = useRouter();
+
+  const handleNoticeClick = () => {
+    if (activePage === 'home') {
+      window.scrollTo({ top: 1213, behavior: 'smooth' });
+    } else {
+      router.push('/');
+      // 홈 페이지로 이동 후 스크롤
+      setTimeout(() => {
+        window.scrollTo({ top: 1213, behavior: 'smooth' });
+      }, 100);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('isLoggedIn');
+    router.push('/');
+  };
+
+  const getMenuTextColor = (page: 'lecturelist' | 'studydata' | 'notice') => {
+    if (page === 'lecturelist' && activePage === 'lecturelist') {
+      return 'text-[#1669ca]';
+    }
+    if (page === 'studydata' && activePage === 'studydata') {
+      return 'text-[#1669ca]';
+    }
+    if (page === 'notice' && activePage === 'home') {
+      // 홈 페이지에서는 공지사항이 활성화된 것으로 간주하지 않음
+      return 'text-[#515151] group-hover:text-blue-500';
+    }
+    return 'text-[#515151] group-hover:text-blue-500';
+  };
+
+  return (
+    <header className="absolute content-stretch flex items-center justify-between left-[332px] top-[43px] w-[1332px]">
+      <div className="content-stretch flex gap-[99px] items-center relative shrink-0">
+        {/* 로고 */}
+        <button
+          onClick={() => router.push('/')}
+          className="h-[74px] relative shrink-0 w-[72px] cursor-pointer"
+        >
+          <Image
+            src={logo}
+            alt="로고"
+            className="w-full h-full object-contain"
+            width={72}
+            height={74}
+          />
+        </button>
+        {/* 메뉴 */}
+        <div className="content-stretch flex gap-[24px] items-center relative shrink-0">
+          <button
+            onClick={() => router.push('/lecturelist')}
+            className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
+          >
+            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+              <p className={`font-bold leading-[normal] not-italic relative shrink-0 text-[24px] text-nowrap whitespace-pre transition-colors ${getMenuTextColor('lecturelist')}`}>
+                교육 과정 목록
+              </p>
+            </div>
+          </button>
+          <button
+            onClick={() => router.push('/studydata')}
+            className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
+          >
+            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+              <p className={`font-bold leading-[normal] not-italic relative shrink-0 text-[24px] text-nowrap whitespace-pre transition-colors ${getMenuTextColor('studydata')}`}>
+                학습 자료실
+              </p>
+            </div>
+          </button>
+          <button
+            onClick={handleNoticeClick}
+            className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
+          >
+            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
+              <p className={`font-bold leading-[normal] not-italic relative shrink-0 text-[24px] text-nowrap whitespace-pre transition-colors ${getMenuTextColor('notice')}`}>
+                공지사항
+              </p>
+            </div>
+          </button>
+        </div>
+      </div>
+      {/* 사용자 메뉴 */}
+      <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
+        <button
+          onClick={() => router.push('/myinfo')}
+          className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
+        >
+          <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
+            내 강좌실
+          </p>
+        </button>
+        <button
+          onClick={handleLogout}
+          className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
+        >
+          <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
+            로그아웃
+          </p>
+        </button>
+      </div>
+    </header>
+  );
+}
+