diff --git a/app/admin_home/page.tsx b/app/admin_home/page.tsx index 1ce030d..00891cb 100644 --- a/app/admin_home/page.tsx +++ b/app/admin_home/page.tsx @@ -4,11 +4,146 @@ import { useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import { isAdminLoggedIn } from '../../lib/auth'; import LoginPage from '../login/page'; +import Logout from '../../public/svg/logout'; + +const imgArrowDisabled = "http://localhost:3845/assets/6edcb2defc36a2bf4a05a3abe53b8da3d42b2cb4.svg"; +const imgArrowDefault = "http://localhost:3845/assets/ad0cb4418492f1b020bb38a2ff038a331294ce87.svg"; +const imgArrowNext = "http://localhost:3845/assets/6328cf96ee1169c1425c2ce55e7a2dcca0374508.svg"; + +interface User { + id: number; + joinDate: string; + name: string; + email: string; + role: string; + accountStatus: string; + accountManagement: string; +} + +type PaginationMove = "Previous" | "Next"; +type PaginationStatus = "Default" | "Disabled"; + +function PaginationBtnMove({ status = "Default", move = "Previous" }: { status?: PaginationStatus; move?: PaginationMove }) { + const isDisabled = status === "Disabled"; + const isNext = move === "Next"; + + if (isDisabled && isNext) { + return ( +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ ); + } + + if (isDisabled && !isNext) { + return ( +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ ); + } + + if (isNext) { + return ( +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ ); + } + + return ( +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ ); +} export default function AdminHomePage() { const router = useRouter(); const [isLoading, setIsLoading] = useState(true); const [isAuthenticated, setIsAuthenticated] = useState(false); + const [selectedTab, setSelectedTab] = useState<'전체' | '학습자' | '강사' | '운영자'>('전체'); + const [currentPage, setCurrentPage] = useState(1); + + // 샘플 사용자 데이터 + const [users, setUsers] = useState([ + { id: 39, joinDate: '2026-01-15', name: '홍길동', email: 'hong@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 38, joinDate: '2026-01-14', name: '김철수', email: 'kim@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' }, + { id: 37, joinDate: '2026-01-13', name: '이영희', email: 'lee@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 36, joinDate: '2026-01-12', name: '박민수', email: 'park@example.com', role: '운영자', accountStatus: '활성', accountManagement: '관리' }, + { id: 35, joinDate: '2026-01-11', name: '최지영', email: 'choi@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 34, joinDate: '2026-01-10', name: '정대현', email: 'jung@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' }, + { id: 33, joinDate: '2026-01-09', name: '강미영', email: 'kang@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 32, joinDate: '2026-01-08', name: '윤성호', email: 'yoon@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 31, joinDate: '2026-01-07', name: '임수진', email: 'lim@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' }, + { id: 30, joinDate: '2026-01-06', name: '한지훈', email: 'han@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 29, joinDate: '2026-01-05', name: '송민경', email: 'song@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 28, joinDate: '2026-01-04', name: '오준혁', email: 'oh@example.com', role: '운영자', accountStatus: '활성', accountManagement: '관리' }, + { id: 27, joinDate: '2026-01-03', name: '류현우', email: 'ryu@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 26, joinDate: '2026-01-02', name: '신동욱', email: 'shin@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' }, + { id: 25, joinDate: '2026-01-01', name: '조은서', email: 'cho@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 24, joinDate: '2025-12-31', name: '배성민', email: 'bae@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 23, joinDate: '2025-12-30', name: '전혜진', email: 'jeon@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' }, + { id: 22, joinDate: '2025-12-29', name: '남궁준', email: 'namgung@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 21, joinDate: '2025-12-28', name: '서아름', email: 'seo@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' }, + { id: 20, joinDate: '2025-12-27', name: '권태영', email: 'kwon@example.com', role: '운영자', accountStatus: '활성', accountManagement: '관리' }, + ]); useEffect(() => { // 관리자 인증 확인 @@ -36,13 +171,293 @@ export default function AdminHomePage() { return ; } + const itemsPerPage = 13; + const totalPages = Math.ceil(users.length / itemsPerPage); + const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1); + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = startIndex + itemsPerPage; + const currentUsers = users.slice(startIndex, endIndex); + return (
-
-
-

관리자 홈

-

관리자 페이지에 오신 것을 환영합니다.

+ {/* 사이드바 */} +
+ {/* 로고 */} + + {/* 메뉴 */} +
+
+ + + + + + + + + +
+ {/* 로그아웃 */} +
+
+
+
+ +
+
+
+ +
+
+ + {/* 메인 콘텐츠 */} +
+ {/* 페이지 타이틀 탭 */} +
+ + + + +
+ + {/* 사용자 목록 테이블 */} +
+ {/* 테이블 헤더 */} +
+
+
+
+

가입일

+
+
+
+
+

사용자명

+
+
+
+
+

아이디(이메일)

+
+
+
+
+

권한

+
+
+
+
+

계정 상태

+
+
+
+
+

계정 관리

+
+
+
+
+ + {/* 테이블 바디 */} + {users.length === 0 ? ( +
+
+
+

+ 존재하는 계정이 없어요. +

+
+
+
+ ) : ( +
+ {currentUsers.map((user) => ( +
+
+
+
+

{user.joinDate}

+
+
+
+
+

{user.name}

+
+
+
+
+

{user.email}

+
+
+
+
+

{user.role}

+
+
+
+
+

{user.accountStatus}

+
+
+
+
+

{user.accountManagement}

+
+
+
+
+ ))} +
+ )} +
+ + {/* 페이지네이션 */} + {users.length > 0 && ( +
+ +
+ {pageNumbers.map((pageNum) => ( + + ))} +
+ +
+ )}
); diff --git a/app/admin_lecture1/page.tsx b/app/admin_lecture1/page.tsx index fdd72d6..ee2e16f 100644 --- a/app/admin_lecture1/page.tsx +++ b/app/admin_lecture1/page.tsx @@ -277,7 +277,10 @@ export default function AdminLecture1Page() { {/* 메뉴 */}
- {/* 테이블 */} -
+
{/* 테이블 헤더 */}
@@ -218,7 +348,7 @@ export default function AdminLecture2Page() {
- {/* 빈 상태 또는 테이블 바디 */} + {/* 테이블 바디 */} {lectures.length === 0 ? (
@@ -230,8 +360,8 @@ export default function AdminLecture2Page() {
) : ( -
- {lectures.map((lecture) => ( +
+ {currentLectures.map((lecture) => (
@@ -270,6 +400,37 @@ export default function AdminLecture2Page() {
)}
+ + {/* 페이지네이션 */} + {lectures.length > 0 && ( +
+ +
+ {pageNumbers.map((pageNum) => ( + + ))} +
+ +
+ )}
); diff --git a/app/login/page.tsx b/app/login/page.tsx index 678065b..d3c6e46 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -5,8 +5,8 @@ import Image from 'next/image'; import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; import logo from '../logo.svg'; - -const checkIcon = "http://localhost:3845/assets/68720b08a673d8b68ae6482d642eeab286c9462b.svg"; +import CheckboxOff from '../../public/svg/checkbox_off'; +import CheckboxOn from '../../public/svg/checkbox_on'; type CheckboxProps = { checked: boolean; @@ -20,18 +20,9 @@ function Checkbox({ checked, onChange, label }: CheckboxProps) { {label}
diff --git a/app/page.tsx b/app/page.tsx index af19961..5cefb04 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -90,7 +90,10 @@ export default function HomePage() { {/* 메뉴 */}
-