72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import AdminSidebar from "@/app/components/AdminSidebar";
|
||
|
|
|
||
|
|
type TabType = 'all' | 'learner' | 'instructor' | 'admin';
|
||
|
|
|
||
|
|
export default function AdminIdPage() {
|
||
|
|
const [activeTab, setActiveTab] = useState<TabType>('all');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex flex-col bg-white">
|
||
|
|
{/* 메인 레이아웃 */}
|
||
|
|
<div className="flex flex-1 min-h-0">
|
||
|
|
{/* 사이드바 */}
|
||
|
|
<AdminSidebar />
|
||
|
|
|
||
|
|
{/* 메인 콘텐츠 */}
|
||
|
|
<main className="flex-1 min-w-0 bg-white">
|
||
|
|
<div className="h-full flex flex-col">
|
||
|
|
{/* 제목 영역 */}
|
||
|
|
<div className="h-[100px] flex items-center px-8 border-b border-[#dee1e6]">
|
||
|
|
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
|
||
|
|
권한 설정
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 탭 네비게이션 */}
|
||
|
|
<div className="px-8 pt-6">
|
||
|
|
<div className="flex items-center gap-8 border-b border-[#dee1e6]">
|
||
|
|
{[
|
||
|
|
{ id: 'all' as TabType, label: '전체' },
|
||
|
|
{ id: 'learner' as TabType, label: '학습자' },
|
||
|
|
{ id: 'instructor' as TabType, label: '강사' },
|
||
|
|
{ id: 'admin' as TabType, label: '관리자' },
|
||
|
|
].map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab.id}
|
||
|
|
type="button"
|
||
|
|
onClick={() => setActiveTab(tab.id)}
|
||
|
|
className={[
|
||
|
|
"pb-4 px-1 text-[16px] font-medium leading-[1.5] transition-colors relative",
|
||
|
|
activeTab === tab.id
|
||
|
|
? "text-[#1f2b91] font-semibold"
|
||
|
|
: "text-[#6c7682]",
|
||
|
|
].join(" ")}
|
||
|
|
>
|
||
|
|
{tab.label}
|
||
|
|
{activeTab === tab.id && (
|
||
|
|
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#1f2b91]" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 콘텐츠 영역 */}
|
||
|
|
<div className="flex-1 px-8 pt-8 pb-20">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|