admin 권한설정 완료, 교육과정 작업중1
This commit is contained in:
@@ -18,7 +18,7 @@ export default function NavBar() {
|
|||||||
const userMenuRef = useRef<HTMLDivElement | null>(null);
|
const userMenuRef = useRef<HTMLDivElement | null>(null);
|
||||||
const userButtonRef = useRef<HTMLButtonElement | null>(null);
|
const userButtonRef = useRef<HTMLButtonElement | null>(null);
|
||||||
const hideCenterNav = /^\/[^/]+\/review$/.test(pathname);
|
const hideCenterNav = /^\/[^/]+\/review$/.test(pathname);
|
||||||
const isAdminPage = pathname.startsWith('/admin-id');
|
const isAdminPage = pathname.startsWith('/admin');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isUserMenuOpen) return;
|
if (!isUserMenuOpen) return;
|
||||||
|
|||||||
@@ -5,21 +5,30 @@ import AdminSidebar from "@/app/components/AdminSidebar";
|
|||||||
export default function AdminCertificatesPage() {
|
export default function AdminCertificatesPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<div className="flex flex-1 min-h-0">
|
{/* 메인 레이아웃 */}
|
||||||
<AdminSidebar />
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
{/* 사이드바 */}
|
||||||
<div className="h-full flex flex-col">
|
<div className="px-8 flex">
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<AdminSidebar />
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
||||||
수료증 발급/검증키 관리
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
{/* 제목 영역 */}
|
||||||
|
<div className="h-[100px] flex items-center">
|
||||||
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
|
수료증 발급/검증키 관리
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 콘텐츠 영역 */}
|
||||||
|
<div className="flex-1 pt-8 flex flex-col">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
225
src/app/admin/courses/CourseRegistrationModal.tsx
Normal file
225
src/app/admin/courses/CourseRegistrationModal.tsx
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useRef, useEffect, useMemo } from "react";
|
||||||
|
import ModalCloseSvg from "@/app/svgs/closexsvg";
|
||||||
|
import DropdownIcon from "@/app/svgs/dropdownicon";
|
||||||
|
import { getInstructors, type UserRow } from "@/app/admin/id/page";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function CourseRegistrationModal({ open, onClose }: Props) {
|
||||||
|
const [courseName, setCourseName] = useState("");
|
||||||
|
const [instructorId, setInstructorId] = useState<string>("");
|
||||||
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
const modalRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// 강사 목록 가져오기
|
||||||
|
// TODO: 나중에 DB에서 가져오도록 변경 시 async/await 사용
|
||||||
|
// 예: const [instructors, setInstructors] = useState<UserRow[]>([]);
|
||||||
|
// useEffect(() => { getInstructors().then(setInstructors); }, []);
|
||||||
|
const instructors = useMemo(() => getInstructors(), []);
|
||||||
|
|
||||||
|
// 선택된 강사 정보
|
||||||
|
const selectedInstructor = useMemo(() => {
|
||||||
|
return instructors.find(inst => inst.id === instructorId);
|
||||||
|
}, [instructors, instructorId]);
|
||||||
|
|
||||||
|
// 외부 클릭 시 드롭다운 닫기
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (
|
||||||
|
dropdownRef.current &&
|
||||||
|
!dropdownRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setIsDropdownOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isDropdownOpen) {
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [isDropdownOpen]);
|
||||||
|
|
||||||
|
// 모달 클릭 시 이벤트 전파 방지
|
||||||
|
const handleModalClick = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||||
|
aria-hidden={!open}
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-black/40"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
ref={modalRef}
|
||||||
|
className="relative z-10 shadow-xl"
|
||||||
|
onClick={handleModalClick}
|
||||||
|
>
|
||||||
|
<div className="bg-white border border-[#dee1e6] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between gap-[10px] p-6">
|
||||||
|
<h2 className="text-[20px] font-bold leading-[1.5] text-[#333c47]">
|
||||||
|
과목 등록
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="w-6 h-6 flex items-center justify-center cursor-pointer hover:opacity-80 shrink-0"
|
||||||
|
aria-label="닫기"
|
||||||
|
>
|
||||||
|
<ModalCloseSvg />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Container */}
|
||||||
|
<div className="px-6 py-0">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{/* 교육 과정명 */}
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
|
||||||
|
교육 과정명<span className="text-[#f64c4c]">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={courseName}
|
||||||
|
onChange={(e) => setCourseName(e.target.value)}
|
||||||
|
placeholder="교육 과정명을 입력해 주세요."
|
||||||
|
className="h-[40px] px-3 py-2 border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 강사 */}
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
|
||||||
|
강사<span className="text-[#f64c4c]">*</span>
|
||||||
|
</label>
|
||||||
|
<div className="relative" ref={dropdownRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||||
|
className="w-full h-[40px] px-3 py-2 border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`text-[16px] font-normal leading-[1.5] flex-1 ${
|
||||||
|
selectedInstructor ? "text-[#1b2027]" : "text-[#6c7682]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{selectedInstructor?.name || "강사를 선택해 주세요."}
|
||||||
|
</span>
|
||||||
|
<DropdownIcon stroke="#8C95A1" className="shrink-0" />
|
||||||
|
</button>
|
||||||
|
{isDropdownOpen && (
|
||||||
|
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-[#dee1e6] rounded-[8px] shadow-lg z-20 max-h-[200px] overflow-y-auto">
|
||||||
|
{instructors.length === 0 ? (
|
||||||
|
<div className="px-3 py-2 text-[16px] font-normal leading-[1.5] text-[#6c7682] text-center">
|
||||||
|
등록된 강사가 없습니다.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
instructors.map((instructor, index) => (
|
||||||
|
<button
|
||||||
|
key={instructor.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setInstructorId(instructor.id);
|
||||||
|
setIsDropdownOpen(false);
|
||||||
|
}}
|
||||||
|
className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-[1.5] hover:bg-[#f1f3f5] transition-colors ${
|
||||||
|
instructorId === instructor.id
|
||||||
|
? "bg-[#ecf0ff] text-[#1f2b91] font-semibold"
|
||||||
|
: "text-[#1b2027]"
|
||||||
|
} ${
|
||||||
|
index === 0 ? "rounded-t-[8px]" : ""
|
||||||
|
} ${
|
||||||
|
index === instructors.length - 1 ? "rounded-b-[8px]" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{instructor.name}
|
||||||
|
</button>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 과목 이미지 */}
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] whitespace-pre">
|
||||||
|
과목 이미지
|
||||||
|
</label>
|
||||||
|
<span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
|
||||||
|
30MB 미만의 PNG, JPG
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-50 border border-[#dee1e6] border-dashed h-[192px] rounded-[8px] flex flex-col items-center justify-center gap-3 cursor-pointer hover:bg-gray-100 transition-colors px-0 py-4">
|
||||||
|
<div className="w-10 h-10 flex items-center justify-center shrink-0">
|
||||||
|
<svg
|
||||||
|
width="40"
|
||||||
|
height="40"
|
||||||
|
viewBox="0 0 40 40"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 13.3333V26.6667M13.3333 20H26.6667"
|
||||||
|
stroke="#8C95A1"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] whitespace-pre">
|
||||||
|
(클릭하여 이미지 업로드)
|
||||||
|
<br aria-hidden="true" />
|
||||||
|
미첨부 시 기본 이미지가 노출됩니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions Container */}
|
||||||
|
<div className="flex flex-col gap-8 h-[96px] items-center p-6">
|
||||||
|
<div className="flex items-center justify-center gap-3 w-full">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="h-[48px] px-4 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[136px] hover:bg-[#e5e7eb] transition-colors"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="h-[48px] px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white w-[136px] hover:bg-[#1a2478] transition-colors"
|
||||||
|
>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,27 +1,67 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
import AdminSidebar from "@/app/components/AdminSidebar";
|
import AdminSidebar from "@/app/components/AdminSidebar";
|
||||||
|
import CourseRegistrationModal from "./CourseRegistrationModal";
|
||||||
|
|
||||||
export default function AdminCoursesPage() {
|
export default function AdminCoursesPage() {
|
||||||
|
const [totalCount, setTotalCount] = useState(0);
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<div className="flex flex-1 min-h-0">
|
{/* 메인 레이아웃 */}
|
||||||
<AdminSidebar />
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
{/* 사이드바 */}
|
||||||
<div className="h-full flex flex-col">
|
<div className="px-8 flex">
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<AdminSidebar />
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
||||||
교육과정 관리
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
{/* 제목 영역 */}
|
||||||
|
<div className="h-[100px] flex items-center">
|
||||||
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
|
교육과정 관리
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 헤더 영역 (제목과 콘텐츠 사이) */}
|
||||||
|
<div className="pt-8 pb-4 flex items-center justify-between">
|
||||||
|
<p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
|
||||||
|
총 {totalCount}건
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors"
|
||||||
|
>
|
||||||
|
등록하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 콘텐츠 영역 */}
|
||||||
|
<div className="flex-1 pt-2 pb-20 flex flex-col">
|
||||||
|
<div className="rounded-[8px] border border-[#dee1e6] bg-[#fafbfc] min-h-[398px] flex items-center justify-center">
|
||||||
|
<p className="text-[15px] font-normal text-[#858fa3]">
|
||||||
|
<span className="block w-full text-center">
|
||||||
|
등록된 교육과정이 없습니다.
|
||||||
|
<br />
|
||||||
|
과목을 등록해주세요.
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<CourseRegistrationModal
|
||||||
|
open={isModalOpen}
|
||||||
|
onClose={() => setIsModalOpen(false)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,32 +1,237 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState, useEffect, useRef, useMemo } from "react";
|
||||||
import AdminSidebar from "@/app/components/AdminSidebar";
|
import AdminSidebar from "@/app/components/AdminSidebar";
|
||||||
|
import DropdownIcon from "@/app/svgs/dropdownicon";
|
||||||
|
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
|
||||||
|
|
||||||
type TabType = 'all' | 'learner' | 'instructor' | 'admin';
|
type TabType = 'all' | 'learner' | 'instructor' | 'admin';
|
||||||
|
type RoleType = 'learner' | 'instructor' | 'admin';
|
||||||
|
type AccountStatus = 'active' | 'inactive';
|
||||||
|
|
||||||
|
export type UserRow = {
|
||||||
|
id: string;
|
||||||
|
joinDate: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
role: RoleType;
|
||||||
|
status: AccountStatus;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 랜덤 데이터 생성 함수
|
||||||
|
function generateRandomUsers(count: number): UserRow[] {
|
||||||
|
const surnames = ['김', '이', '박', '최', '정', '강', '조', '윤', '장', '임', '한', '오', '서', '신', '권', '황', '안', '송', '전', '홍'];
|
||||||
|
const givenNames = ['민준', '서준', '도윤', '예준', '시우', '하준', '주원', '지호', '준서', '건우', '서연', '서윤', '지우', '서현', '민서', '하은', '예은', '윤서', '채원', '지원'];
|
||||||
|
const roles: RoleType[] = ['learner', 'instructor', 'admin'];
|
||||||
|
const statuses: AccountStatus[] = ['active', 'inactive'];
|
||||||
|
|
||||||
|
const users: UserRow[] = [];
|
||||||
|
const startDate = new Date('2024-01-01');
|
||||||
|
const endDate = new Date('2025-03-01');
|
||||||
|
|
||||||
|
for (let i = 1; i <= count; i++) {
|
||||||
|
const surname = surnames[Math.floor(Math.random() * surnames.length)];
|
||||||
|
const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];
|
||||||
|
const name = `${surname}${givenName}`;
|
||||||
|
const email = `user${i}@example.com`;
|
||||||
|
|
||||||
|
// 랜덤 날짜 생성
|
||||||
|
const randomTime = startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime());
|
||||||
|
const randomDate = new Date(randomTime);
|
||||||
|
const joinDate = randomDate.toISOString().split('T')[0];
|
||||||
|
|
||||||
|
const role = roles[Math.floor(Math.random() * roles.length)];
|
||||||
|
const status = statuses[Math.floor(Math.random() * statuses.length)];
|
||||||
|
|
||||||
|
users.push({
|
||||||
|
id: String(i),
|
||||||
|
joinDate,
|
||||||
|
name,
|
||||||
|
email,
|
||||||
|
role,
|
||||||
|
status,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return users;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mockUsers: UserRow[] = generateRandomUsers(111);
|
||||||
|
|
||||||
|
// 강사 목록 가져오기 함수 export
|
||||||
|
// TODO: 나중에 DB에서 가져오도록 변경 예정
|
||||||
|
// 예: export async function getInstructors(): Promise<UserRow[]> {
|
||||||
|
// const response = await fetch('/api/instructors');
|
||||||
|
// return response.json();
|
||||||
|
// }
|
||||||
|
export function getInstructors(): UserRow[] {
|
||||||
|
// 현재는 mock 데이터 사용, 나중에 DB에서 가져오도록 변경
|
||||||
|
return mockUsers.filter(user => user.role === 'instructor' && user.status === 'active');
|
||||||
|
}
|
||||||
|
|
||||||
|
const roleLabels: Record<RoleType, string> = {
|
||||||
|
learner: '학습자',
|
||||||
|
instructor: '강사',
|
||||||
|
admin: '관리자',
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusLabels: Record<AccountStatus, string> = {
|
||||||
|
active: '활성화',
|
||||||
|
inactive: '비활성화',
|
||||||
|
};
|
||||||
|
|
||||||
export default function AdminIdPage() {
|
export default function AdminIdPage() {
|
||||||
const [activeTab, setActiveTab] = useState<TabType>('all');
|
const [activeTab, setActiveTab] = useState<TabType>('all');
|
||||||
|
const [users, setUsers] = useState<UserRow[]>(mockUsers);
|
||||||
|
const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
|
||||||
|
const [isActivateModalOpen, setIsActivateModalOpen] = useState(false);
|
||||||
|
const [isDeactivateModalOpen, setIsDeactivateModalOpen] = useState(false);
|
||||||
|
const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
|
||||||
|
const [showToast, setShowToast] = useState(false);
|
||||||
|
const [toastMessage, setToastMessage] = useState('');
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const dropdownRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
||||||
|
|
||||||
|
const ITEMS_PER_PAGE = 10;
|
||||||
|
|
||||||
|
const filteredUsers = useMemo(() => {
|
||||||
|
return activeTab === 'all'
|
||||||
|
? users
|
||||||
|
: users.filter(user => user.role === activeTab);
|
||||||
|
}, [activeTab, users]);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(filteredUsers.length / ITEMS_PER_PAGE);
|
||||||
|
const paginatedUsers = useMemo(() => {
|
||||||
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||||
|
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||||
|
return filteredUsers.slice(startIndex, endIndex);
|
||||||
|
}, [filteredUsers, currentPage]);
|
||||||
|
|
||||||
|
// 탭 변경 시 첫 페이지로 리셋
|
||||||
|
useEffect(() => {
|
||||||
|
setCurrentPage(1);
|
||||||
|
}, [activeTab]);
|
||||||
|
|
||||||
|
// 외부 클릭 시 드롭다운 닫기
|
||||||
|
useEffect(() => {
|
||||||
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
if (openDropdownId) {
|
||||||
|
const dropdownElement = dropdownRefs.current[openDropdownId];
|
||||||
|
if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
|
||||||
|
setOpenDropdownId(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [openDropdownId]);
|
||||||
|
|
||||||
|
function openActivateModal(userId: string) {
|
||||||
|
setSelectedUserId(userId);
|
||||||
|
setIsActivateModalOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleActivateConfirm() {
|
||||||
|
if (selectedUserId) {
|
||||||
|
setUsers(prevUsers =>
|
||||||
|
prevUsers.map(user =>
|
||||||
|
user.id === selectedUserId
|
||||||
|
? { ...user, status: 'active' }
|
||||||
|
: user
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setToastMessage('계정을 활성화했습니다.');
|
||||||
|
setShowToast(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setShowToast(false);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
setIsActivateModalOpen(false);
|
||||||
|
setSelectedUserId(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleActivateCancel() {
|
||||||
|
setIsActivateModalOpen(false);
|
||||||
|
setSelectedUserId(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openDeactivateModal(userId: string) {
|
||||||
|
setSelectedUserId(userId);
|
||||||
|
setIsDeactivateModalOpen(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDeactivateConfirm() {
|
||||||
|
if (selectedUserId) {
|
||||||
|
setUsers(prevUsers =>
|
||||||
|
prevUsers.map(user =>
|
||||||
|
user.id === selectedUserId
|
||||||
|
? { ...user, status: 'inactive' }
|
||||||
|
: user
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setToastMessage('계정을 비활성화했습니다.');
|
||||||
|
setShowToast(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setShowToast(false);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
setIsDeactivateModalOpen(false);
|
||||||
|
setSelectedUserId(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDeactivateCancel() {
|
||||||
|
setIsDeactivateModalOpen(false);
|
||||||
|
setSelectedUserId(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleAccountStatus(userId: string) {
|
||||||
|
const user = users.find(u => u.id === userId);
|
||||||
|
if (user && user.status === 'inactive') {
|
||||||
|
openActivateModal(userId);
|
||||||
|
} else if (user && user.status === 'active') {
|
||||||
|
openDeactivateModal(userId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleDropdown(userId: string) {
|
||||||
|
setOpenDropdownId(openDropdownId === userId ? null : userId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeUserRole(userId: string, newRole: RoleType) {
|
||||||
|
setUsers(prevUsers =>
|
||||||
|
prevUsers.map(user =>
|
||||||
|
user.id === userId
|
||||||
|
? { ...user, role: newRole }
|
||||||
|
: user
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setOpenDropdownId(null);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
{/* 메인 레이아웃 */}
|
{/* 메인 레이아웃 */}
|
||||||
<div className="flex flex-1 min-h-0">
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
{/* 사이드바 */}
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<AdminSidebar />
|
{/* 사이드바 */}
|
||||||
|
<div className="px-8 flex">
|
||||||
|
<AdminSidebar />
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 메인 콘텐츠 */}
|
{/* 메인 콘텐츠 */}
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
{/* 제목 영역 */}
|
{/* 제목 영역 */}
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<div className="h-[100px] flex items-center">
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
권한 설정
|
권한 설정
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 탭 네비게이션 */}
|
{/* 탭 네비게이션 */}
|
||||||
<div className="px-8 pt-6">
|
<div>
|
||||||
<div className="flex items-center gap-8 border-b border-[#dee1e6]">
|
<div className="flex items-center gap-8 border-b border-[#dee1e6]">
|
||||||
{[
|
{[
|
||||||
{ id: 'all' as TabType, label: '전체' },
|
{ id: 'all' as TabType, label: '전체' },
|
||||||
@@ -55,16 +260,301 @@ export default function AdminIdPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 콘텐츠 영역 */}
|
{/* 콘텐츠 영역 */}
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
<div className="flex-1 pt-8 flex flex-col">
|
||||||
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
{filteredUsers.length === 0 ? (
|
||||||
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
|
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
||||||
현재 관리할 수 있는 회원 계정이 없습니다.
|
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
|
||||||
</p>
|
현재 관리할 수 있는 회원 계정이 없습니다.
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="rounded-[8px]">
|
||||||
|
<div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
|
||||||
|
<table className="min-w-full border-collapse">
|
||||||
|
<colgroup>
|
||||||
|
<col style={{ width: 140 }} />
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
<col style={{ width: 120 }} />
|
||||||
|
<col style={{ width: 120 }} />
|
||||||
|
<col style={{ width: 120 }} />
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr className="h-12 bg-gray-50 text-left">
|
||||||
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">가입일</th>
|
||||||
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">성명</th>
|
||||||
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">아이디(이메일)</th>
|
||||||
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">권한설정</th>
|
||||||
|
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정상태</th>
|
||||||
|
<th className="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정관리</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{paginatedUsers.map((user) => (
|
||||||
|
<tr
|
||||||
|
key={user.id}
|
||||||
|
className="h-12"
|
||||||
|
>
|
||||||
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||||
|
{user.joinDate}
|
||||||
|
</td>
|
||||||
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||||
|
{user.name}
|
||||||
|
</td>
|
||||||
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||||
|
{user.email}
|
||||||
|
</td>
|
||||||
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||||
|
<div className="relative flex items-center justify-between">
|
||||||
|
<span>{roleLabels[user.role]}</span>
|
||||||
|
<div
|
||||||
|
ref={(el) => { dropdownRefs.current[user.id] = el; }}
|
||||||
|
className="relative"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleDropdown(user.id)}
|
||||||
|
className="ml-2 flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity"
|
||||||
|
>
|
||||||
|
<DropdownIcon width={16} height={16} stroke="#8C95A1" />
|
||||||
|
</button>
|
||||||
|
{openDropdownId === user.id && (
|
||||||
|
<div className="absolute right-0 top-full mt-1 z-[100] min-w-[120px] bg-white border border-[#dee1e6] rounded-[4px] shadow-lg flex flex-col">
|
||||||
|
{(['learner', 'instructor', 'admin'] as RoleType[]).map((role) => (
|
||||||
|
<button
|
||||||
|
key={role}
|
||||||
|
type="button"
|
||||||
|
onClick={() => changeUserRole(user.id, role)}
|
||||||
|
className={[
|
||||||
|
"w-full px-4 py-2 text-left text-[14px] leading-[1.5] hover:bg-gray-50 transition-colors",
|
||||||
|
user.role === role
|
||||||
|
? "text-[#1f2b91] font-semibold bg-[#ecf0ff]"
|
||||||
|
: "text-[#1b2027]",
|
||||||
|
role !== 'admin' && "border-b border-[#dee1e6]"
|
||||||
|
].join(" ")}
|
||||||
|
>
|
||||||
|
{roleLabels[role]}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||||
|
{user.status === 'active' ? (
|
||||||
|
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
|
||||||
|
<span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
|
||||||
|
{statusLabels[user.status]}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]">
|
||||||
|
<span className="text-[13px] font-semibold leading-[1.4] text-[#4c5561] whitespace-nowrap">
|
||||||
|
{statusLabels[user.status]}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="border-t border-[#dee1e6] px-4 text-center text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleAccountStatus(user.id)}
|
||||||
|
className="text-[12px] text-blue-500 underline underline-offset-[3px] cursor-pointer whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{user.status === 'active' ? '비활성화 처리' : '활성화 처리'}
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 페이지네이션 - 10개 초과일 때만 표시 */}
|
||||||
|
{filteredUsers.length > ITEMS_PER_PAGE && (() => {
|
||||||
|
// 페이지 번호를 10단위로 표시
|
||||||
|
const pageGroup = Math.floor((currentPage - 1) / 10);
|
||||||
|
const startPage = pageGroup * 10 + 1;
|
||||||
|
const endPage = Math.min(startPage + 9, totalPages);
|
||||||
|
const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-8 pb-[32px] flex items-center justify-center">
|
||||||
|
<div className="flex items-center justify-center gap-[8px]">
|
||||||
|
{/* First (맨 앞으로) */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCurrentPage(1)}
|
||||||
|
aria-label="맨 앞 페이지"
|
||||||
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40"
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
<div className="relative flex items-center justify-center w-full h-full">
|
||||||
|
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute left-[2px]" />
|
||||||
|
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute right-[2px]" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Prev */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||||
|
aria-label="이전 페이지"
|
||||||
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40"
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Numbers */}
|
||||||
|
{visiblePages.map((n) => {
|
||||||
|
const active = n === currentPage;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={n}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCurrentPage(n)}
|
||||||
|
aria-current={active ? 'page' : undefined}
|
||||||
|
className={[
|
||||||
|
'flex items-center justify-center rounded-[1000px] size-[32px]',
|
||||||
|
active ? 'bg-[#ecf0ff]' : 'bg-white',
|
||||||
|
].join(' ')}
|
||||||
|
>
|
||||||
|
<span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Next */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||||
|
aria-label="다음 페이지"
|
||||||
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40"
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Last (맨 뒤로) */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setCurrentPage(totalPages)}
|
||||||
|
aria-label="맨 뒤 페이지"
|
||||||
|
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40"
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
<div className="relative flex items-center justify-center w-full h-full">
|
||||||
|
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute left-[2px]" />
|
||||||
|
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute right-[2px]" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 활성화 확인 모달 */}
|
||||||
|
{isActivateModalOpen && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-black/40"
|
||||||
|
onClick={handleActivateCancel}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div className="relative z-10 bg-white rounded-[8px] p-6 shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-8 items-end justify-end min-w-[500px]">
|
||||||
|
<div className="flex flex-col gap-4 items-start justify-center w-full">
|
||||||
|
<div className="flex gap-2 items-start w-full">
|
||||||
|
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
|
||||||
|
계정을 활성화하시겠습니까?
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center justify-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleActivateCancel}
|
||||||
|
className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px]"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleActivateConfirm}
|
||||||
|
className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white"
|
||||||
|
>
|
||||||
|
활성화하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 비활성화 확인 모달 */}
|
||||||
|
{isDeactivateModalOpen && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-black/40"
|
||||||
|
onClick={handleDeactivateCancel}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
|
||||||
|
<div className="flex flex-col gap-[16px] items-start justify-center w-full">
|
||||||
|
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
|
||||||
|
계정을 비활성화 하시겠습니까?
|
||||||
|
</h2>
|
||||||
|
<p className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
|
||||||
|
학습자가 강좌를 수강 중일 경우 강좌 수강이 어렵습니다.
|
||||||
|
<br />
|
||||||
|
계정을 비활성화 처리하시겠습니까?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 items-center justify-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleDeactivateCancel}
|
||||||
|
className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px]"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleDeactivateConfirm}
|
||||||
|
className="h-[40px] px-4 rounded-[8px] bg-red-50 text-[16px] font-semibold leading-[1.5] text-[#f64c4c]"
|
||||||
|
>
|
||||||
|
비활성화하기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 활성화 완료 토스트 */}
|
||||||
|
{showToast && (
|
||||||
|
<div className="fixed right-[60px] bottom-[60px] z-50">
|
||||||
|
<div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
|
||||||
|
<div className="relative shrink-0 w-[16.667px] h-[16.667px]">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
|
||||||
|
<path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
|
||||||
|
{toastMessage}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,21 +5,30 @@ import AdminSidebar from "@/app/components/AdminSidebar";
|
|||||||
export default function AdminLessonsPage() {
|
export default function AdminLessonsPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<div className="flex flex-1 min-h-0">
|
{/* 메인 레이아웃 */}
|
||||||
<AdminSidebar />
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
{/* 사이드바 */}
|
||||||
<div className="h-full flex flex-col">
|
<div className="px-8 flex">
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<AdminSidebar />
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
||||||
강좌 관리
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
{/* 제목 영역 */}
|
||||||
|
<div className="h-[100px] flex items-center">
|
||||||
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
|
강좌 관리
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 콘텐츠 영역 */}
|
||||||
|
<div className="flex-1 pt-8 flex flex-col">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,21 +5,30 @@ import AdminSidebar from "@/app/components/AdminSidebar";
|
|||||||
export default function AdminLogsPage() {
|
export default function AdminLogsPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<div className="flex flex-1 min-h-0">
|
{/* 메인 레이아웃 */}
|
||||||
<AdminSidebar />
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
{/* 사이드바 */}
|
||||||
<div className="h-full flex flex-col">
|
<div className="px-8 flex">
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<AdminSidebar />
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
||||||
로그/접속 기록
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
{/* 제목 영역 */}
|
||||||
|
<div className="h-[100px] flex items-center">
|
||||||
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
|
로그/접속 기록
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 콘텐츠 영역 */}
|
||||||
|
<div className="flex-1 pt-8 flex flex-col">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,21 +5,30 @@ import AdminSidebar from "@/app/components/AdminSidebar";
|
|||||||
export default function AdminNoticesPage() {
|
export default function AdminNoticesPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<div className="flex flex-1 min-h-0">
|
{/* 메인 레이아웃 */}
|
||||||
<AdminSidebar />
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
{/* 사이드바 */}
|
||||||
<div className="h-full flex flex-col">
|
<div className="px-8 flex">
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<AdminSidebar />
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
||||||
공지사항
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
{/* 제목 영역 */}
|
||||||
|
<div className="h-[100px] flex items-center">
|
||||||
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
|
공지사항
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 콘텐츠 영역 */}
|
||||||
|
<div className="flex-1 pt-8 flex flex-col">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,21 +5,30 @@ import AdminSidebar from "@/app/components/AdminSidebar";
|
|||||||
export default function AdminQuestionsPage() {
|
export default function AdminQuestionsPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<div className="flex flex-1 min-h-0">
|
{/* 메인 레이아웃 */}
|
||||||
<AdminSidebar />
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
{/* 사이드바 */}
|
||||||
<div className="h-full flex flex-col">
|
<div className="px-8 flex">
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<AdminSidebar />
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
||||||
문제 은행
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
{/* 제목 영역 */}
|
||||||
|
<div className="h-[100px] flex items-center">
|
||||||
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
|
문제 은행
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 콘텐츠 영역 */}
|
||||||
|
<div className="flex-1 pt-8 flex flex-col">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,21 +5,30 @@ import AdminSidebar from "@/app/components/AdminSidebar";
|
|||||||
export default function AdminResourcesPage() {
|
export default function AdminResourcesPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-white">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<div className="flex flex-1 min-h-0">
|
{/* 메인 레이아웃 */}
|
||||||
<AdminSidebar />
|
<div className="flex flex-1 min-h-0 justify-center">
|
||||||
|
<div className="w-full max-w-[1120px] flex min-h-0">
|
||||||
<main className="flex-1 min-w-0 bg-white">
|
{/* 사이드바 */}
|
||||||
<div className="h-full flex flex-col">
|
<div className="px-8 flex">
|
||||||
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
<AdminSidebar />
|
||||||
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
|
||||||
학습 자료실
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 px-8 pt-8 pb-20">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 메인 콘텐츠 */}
|
||||||
|
<main className="flex-1 min-w-0 bg-white">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
{/* 제목 영역 */}
|
||||||
|
<div className="h-[100px] flex items-center">
|
||||||
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||||||
|
학습 자료실
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 콘텐츠 영역 */}
|
||||||
|
<div className="flex-1 pt-8 flex flex-col">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export default function AdminSidebar() {
|
|||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="w-[320px] border-r border-[#dee1e6] bg-white flex-shrink-0">
|
<aside className="w-[320px] border-r border-[#dee1e6] bg-white flex-shrink-0 h-full">
|
||||||
<nav className="p-4">
|
<nav className="p-4">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
{ADMIN_SIDEBAR_ITEMS.map((item) => {
|
{ADMIN_SIDEBAR_ITEMS.map((item) => {
|
||||||
|
|||||||
35
src/app/svgs/dropdownicon.tsx
Normal file
35
src/app/svgs/dropdownicon.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function DropdownIcon({
|
||||||
|
width = 16,
|
||||||
|
height = 16,
|
||||||
|
className = '',
|
||||||
|
stroke = "#8C95A1",
|
||||||
|
...props
|
||||||
|
}: {
|
||||||
|
width?: number | string;
|
||||||
|
height?: number | string;
|
||||||
|
className?: string;
|
||||||
|
stroke?: string;
|
||||||
|
[key: string]: any;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className={className}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M14 5L8 11L2 5"
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user