diff --git a/app/announcement/page.tsx b/app/announcement/page.tsx new file mode 100644 index 0000000..320da3d --- /dev/null +++ b/app/announcement/page.tsx @@ -0,0 +1,182 @@ +"use client"; + +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/navigation'; +import Image from 'next/image'; +import Header from '../components/Header'; +import logo from '../logo.svg'; + +const imgLine2 = "http://localhost:3845/assets/6ee8cf4ebb6bc2adb14aab8c9940b3002c20af35.svg"; +const imgFooterLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png"; + +export default function AnnouncementPage() { + const router = useRouter(); + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [announcements, setAnnouncements] = useState([]); + + useEffect(() => { + // 로그인 상태 확인 + const loginStatus = localStorage.getItem('isLoggedIn') === 'true'; + setIsLoggedIn(loginStatus); + setIsLoading(false); + + // TODO: DB에서 공지사항 목록 가져오기 + // const fetchAnnouncements = async () => { + // const response = await fetch('/api/announcements'); + // const data = await response.json(); + // setAnnouncements(data); + // }; + // fetchAnnouncements(); + }, []); + + if (isLoading) { + return null; // 로딩 중 + } + + // 로그인되지 않았으면 로그인 페이지로 리다이렉트 + if (!isLoggedIn) { + router.push('/login'); + return null; + } + + return ( +
+ {/* 헤더 */} +
+ + {/* 구분선 */} +
+
+ +
+
+ + {/* 페이지 제목 */} +

+ 공지사항 ({announcements.length}건) +

+ + {/* 테이블 컨테이너 */} +
+ {/* 테이블 헤더 */} +
+
+
+
+

번호

+
+
+
+
+

제목

+
+
+
+
+

게시일

+
+
+
+
+

작성자

+
+
+
+
+

조회수

+
+
+
+
+ + {/* 테이블 내용 */} + {announcements.length > 0 ? ( +
+ {announcements.map((announcement) => ( +
+
+

+ {announcement.id} +

+
+
+

+ {announcement.title} +

+
+
+

+ {announcement.createdAt ? new Date(announcement.createdAt).toLocaleDateString('ko-KR') : '-'} +

+
+
+

+ {announcement.author || '-'} +

+
+
+

+ {announcement.views || 0} +

+
+
+ ))} +
+ ) : ( +
+

+ 등록된 공지사항이 없습니다. +

+
+ )} +
+ + {/* 푸터 */} + +
+ ); +} + diff --git a/app/components/Header.tsx b/app/components/Header.tsx index e9b2a27..dad3c55 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'; import Image from 'next/image'; import logo from '../logo.svg'; -type ActivePage = 'home' | 'lecturelist' | 'studydata' | null; +type ActivePage = 'home' | 'lecturelist' | 'studydata' | 'announcement' | null; interface HeaderProps { activePage?: ActivePage; @@ -14,15 +14,7 @@ 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); - } + router.push('/announcement'); }; const handleLogout = () => { @@ -37,9 +29,8 @@ export default function Header({ activePage = null }: HeaderProps) { if (page === 'studydata' && activePage === 'studydata') { return 'text-[#1669ca]'; } - if (page === 'notice' && activePage === 'home') { - // 홈 페이지에서는 공지사항이 활성화된 것으로 간주하지 않음 - return 'text-[#515151] group-hover:text-blue-500'; + if (page === 'notice' && activePage === 'announcement') { + return 'text-[#1669ca]'; } return 'text-[#515151] group-hover:text-blue-500'; };