교육과정 완료1

src/app/admin/certificates/page.tsx

@@ -1,8 +1,22 @@
 'use client';
 
+import { useState, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
+import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 
 export default function AdminCertificatesPage() {
+  // TODO: 나중에 실제 데이터로 교체
+  const items: any[] = [];
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const ITEMS_PER_PAGE = 10;
+  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const paginatedItems = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return items.slice(startIndex, endIndex);
+  }, [items, currentPage]);
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -25,6 +39,101 @@ export default function AdminCertificatesPage() {
 
               {/* 콘텐츠 영역 */}
               <div className="flex-1 pt-8 flex flex-col">
+                {items.length === 0 ? (
+                  <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>
+                ) : (
+                  <>
+                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    
+                    {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                    {items.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>
           </main>

src/app/admin/courses/CourseRegistrationModal.tsx

@@ -3,17 +3,21 @@
 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";
+import { getInstructors, type UserRow } from "@/app/admin/id/mockData";
+import { type Course } from "./mockData";
 
 type Props = {
   open: boolean;
   onClose: () => void;
+  onSave?: (courseName: string, instructorName: string) => void;
+  editingCourse?: Course | null;
 };
 
-export default function CourseRegistrationModal({ open, onClose }: Props) {
+export default function CourseRegistrationModal({ open, onClose, onSave, editingCourse }: Props) {
   const [courseName, setCourseName] = useState("");
   const [instructorId, setInstructorId] = useState<string>("");
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const dropdownRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -28,6 +32,23 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
     return instructors.find(inst => inst.id === instructorId);
   }, [instructors, instructorId]);
 
+  // 수정 모드일 때 기존 데이터 채우기
+  useEffect(() => {
+    if (open && editingCourse) {
+      setCourseName(editingCourse.courseName);
+      // 강사명으로 instructorId 찾기
+      const instructor = instructors.find(inst => inst.name === editingCourse.instructorName);
+      if (instructor) {
+        setInstructorId(instructor.id);
+      }
+    } else if (!open) {
+      setCourseName("");
+      setInstructorId("");
+      setIsDropdownOpen(false);
+      setErrors({});
+    }
+  }, [open, editingCourse, instructors]);
+
   // 외부 클릭 시 드롭다운 닫기
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -53,6 +74,28 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
     e.stopPropagation();
   };
 
+  // 저장 버튼 클릭 핸들러
+  const handleSave = () => {
+    const nextErrors: Record<string, string> = {};
+    
+    if (!courseName.trim()) {
+      nextErrors.courseName = "교육 과정명을 입력해 주세요.";
+    }
+    if (!instructorId || !selectedInstructor) {
+      nextErrors.instructor = "강사를 선택해 주세요.";
+    }
+    
+    setErrors(nextErrors);
+    
+    if (Object.keys(nextErrors).length > 0) {
+      return;
+    }
+    
+    if (onSave && selectedInstructor) {
+      onSave(courseName.trim(), selectedInstructor.name);
+    }
+  };
+
   if (!open) return null;
 
   return (
@@ -74,7 +117,7 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
           {/* Header */}
           <div className="flex items-center justify-between gap-[10px] p-6">
             <h2 className="text-[20px] font-bold leading-[1.5] text-[#333c47]">
-              과목 등록
+              {editingCourse ? "교육과정 수정" : "과목 등록"}
             </h2>
             <button
               type="button"
@@ -97,10 +140,26 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
                 <input
                   type="text"
                   value={courseName}
-                  onChange={(e) => setCourseName(e.target.value)}
+                  onChange={(e) => {
+                    setCourseName(e.target.value);
+                    if (errors.courseName) {
+                      setErrors((prev) => {
+                        const next = { ...prev };
+                        delete next.courseName;
+                        return next;
+                      });
+                    }
+                  }}
                   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"
+                  className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 ${
+                    errors.courseName
+                      ? "border-[#f64c4c] focus:ring-[#f64c4c] focus:border-[#f64c4c]"
+                      : "border-[#dee1e6] focus:ring-[#1f2b91] focus:border-transparent"
+                  }`}
                 />
+                {errors.courseName && (
+                  <p className="text-[#f64c4c] text-[13px] leading-tight">{errors.courseName}</p>
+                )}
               </div>
 
               {/* 강사 */}
@@ -112,7 +171,11 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
                   <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"
+                    className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:ring-2 ${
+                      errors.instructor
+                        ? "border-[#f64c4c] focus:ring-[#f64c4c] focus:border-[#f64c4c]"
+                        : "border-[#dee1e6] focus:ring-[#1f2b91] focus:border-transparent"
+                    }`}
                   >
                     <span
                       className={`text-[16px] font-normal leading-[1.5] flex-1 ${
@@ -137,6 +200,13 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
                             onClick={() => {
                               setInstructorId(instructor.id);
                               setIsDropdownOpen(false);
+                              if (errors.instructor) {
+                                setErrors((prev) => {
+                                  const next = { ...prev };
+                                  delete next.instructor;
+                                  return next;
+                                });
+                              }
                             }}
                             className={`w-full px-3 py-2 text-left text-[16px] font-normal leading-[1.5] hover:bg-[#f1f3f5] transition-colors ${
                               instructorId === instructor.id
@@ -155,6 +225,9 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
                     </div>
                   )}
                 </div>
+                {errors.instructor && (
+                  <p className="text-[#f64c4c] text-[13px] leading-tight">{errors.instructor}</p>
+                )}
               </div>
 
               {/* 과목 이미지 */}
@@ -211,6 +284,7 @@ export default function CourseRegistrationModal({ open, onClose }: Props) {
               </button>
               <button
                 type="button"
+                onClick={handleSave}
                 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"
               >
                 저장

src/app/admin/courses/mockData.ts

@@ -0,0 +1,103 @@
+import { getInstructors } from "@/app/admin/id/mockData";
+
+export type Course = {
+  id: string;
+  courseName: string;
+  instructorName: string;
+  createdAt: string; // 생성일 (YYYY-MM-DD)
+  createdBy: string; // 등록자
+  hasLessons: boolean; // 강좌포함여부
+};
+
+// TODO: 나중에 DB에서 가져오도록 변경
+export const MOCK_CURRENT_USER = "관리자"; // 현재 로그인한 사용자 이름
+
+// 강사 목록 가져오기
+const instructors = getInstructors();
+const instructorNames = instructors.map(instructor => instructor.name);
+
+// TODO: 이 부분도 나중에는 db에서 받아오도록 변경 예정
+// 임시 데이터 - 강사명은 mockData.ts의 강사 데이터 활용
+export const MOCK_COURSES: Course[] = [
+  {
+    id: "1",
+    courseName: "웹 개발 기초",
+    instructorName: instructorNames[0] || "최예준",
+    createdAt: "2024-01-15",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "2",
+    courseName: "React 실전 프로젝트",
+    instructorName: instructorNames[1] || "정시우",
+    createdAt: "2024-02-20",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "3",
+    courseName: "데이터베이스 설계",
+    instructorName: instructorNames[2] || "임건우",
+    createdAt: "2024-03-10",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "4",
+    courseName: "Node.js 백엔드 개발",
+    instructorName: instructorNames[3] || "송윤서",
+    createdAt: "2024-03-25",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "5",
+    courseName: "TypeScript 마스터",
+    instructorName: instructorNames[4] || "김민수",
+    createdAt: "2024-04-05",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "6",
+    courseName: "UI/UX 디자인 기초",
+    instructorName: instructorNames[5] || "정대현",
+    createdAt: "2024-04-18",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "7",
+    courseName: "모바일 앱 개발",
+    instructorName: instructorNames[0] || "최예준",
+    createdAt: "2024-05-02",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "8",
+    courseName: "클라우드 인프라",
+    instructorName: instructorNames[1] || "정시우",
+    createdAt: "2024-05-15",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "9",
+    courseName: "머신러닝 입문",
+    instructorName: instructorNames[2] || "임건우",
+    createdAt: "2024-06-01",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+  {
+    id: "10",
+    courseName: "DevOps 실무",
+    instructorName: instructorNames[3] || "송윤서",
+    createdAt: "2024-06-20",
+    createdBy: MOCK_CURRENT_USER,
+    hasLessons: false,
+  },
+];
+

src/app/admin/courses/page.tsx

@@ -1,12 +1,72 @@
 'use client';
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import CourseRegistrationModal from "./CourseRegistrationModal";
+import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
+import { MOCK_COURSES, MOCK_CURRENT_USER, type Course } from "./mockData";
 
 export default function AdminCoursesPage() {
-  const [totalCount, setTotalCount] = useState(0);
+  const [courses, setCourses] = useState<Course[]>(MOCK_COURSES);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingCourse, setEditingCourse] = useState<Course | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const totalCount = useMemo(() => courses.length, [courses]);
+  
+  const ITEMS_PER_PAGE = 10;
+  const sortedCourses = useMemo(() => {
+    return [...courses].sort((a, b) => {
+      // 생성일 내림차순 정렬 (최신 날짜가 먼저)
+      return b.createdAt.localeCompare(a.createdAt);
+    });
+  }, [courses]);
+  
+  const totalPages = Math.ceil(sortedCourses.length / ITEMS_PER_PAGE);
+  const paginatedCourses = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return sortedCourses.slice(startIndex, endIndex);
+  }, [sortedCourses, currentPage]);
+
+  const handleSaveCourse = (courseName: string, instructorName: string) => {
+    if (editingCourse) {
+      // 수정 모드
+      setCourses(prev => prev.map(course => 
+        course.id === editingCourse.id
+          ? { ...course, courseName, instructorName }
+          : course
+      ));
+    } else {
+      // 등록 모드
+      const newCourse: Course = {
+        id: String(Date.now()),
+        courseName,
+        instructorName,
+        createdAt: new Date().toISOString().split('T')[0],
+        createdBy: MOCK_CURRENT_USER,
+        hasLessons: false, // 기본값: 미포함
+      };
+      setCourses(prev => [...prev, newCourse]);
+    }
+    setIsModalOpen(false);
+    setEditingCourse(null);
+  };
+
+  const handleRowClick = (course: Course) => {
+    setEditingCourse(course);
+    setIsModalOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+    setEditingCourse(null);
+  };
+
+  const handleRegisterClick = () => {
+    setEditingCourse(null);
+    setIsModalOpen(true);
+  };
 
   return (
     <div className="min-h-screen flex flex-col bg-white">
@@ -17,7 +77,6 @@ export default function AdminCoursesPage() {
           <div className="px-8 flex">
             <AdminSidebar />
           </div>
-
           {/* 메인 콘텐츠 */}
           <main className="flex-1 min-w-0 bg-white">
             <div className="h-full flex flex-col">
@@ -29,13 +88,13 @@ export default function AdminCoursesPage() {
               </div>
 
               {/* 헤더 영역 (제목과 콘텐츠 사이) */}
-              <div className="pt-8 pb-4 flex items-center justify-between">
+              <div className="pt-2 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)}
+                  onClick={handleRegisterClick}
                   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"
                 >
                   등록하기
@@ -43,16 +102,160 @@ export default function AdminCoursesPage() {
               </div>
 
               {/* 콘텐츠 영역 */}
-              <div className="flex-1 pt-2 pb-20 flex flex-col">
+              <div className="flex-1 pt-2 flex flex-col">
-                <div className="rounded-[8px] border border-[#dee1e6] bg-[#fafbfc] min-h-[398px] flex items-center justify-center">
+                {courses.length === 0 ? (
-                  <p className="text-[15px] font-normal text-[#858fa3]">
+                  <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
-                    <span className="block w-full text-center">
+                    <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
                       등록된 교육과정이 없습니다.
                       <br />
                       과목을 등록해주세요.
-                    </span>
                     </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 />
+                          <col />
+                          <col style={{ width: 140 }} />
+                          <col />
+                          <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="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌포함여부</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {paginatedCourses.map((course) => (
+                            <tr
+                              key={course.id}
+                              className="h-12 cursor-pointer hover:bg-[#F5F7FF] transition-colors"
+                              onClick={() => handleRowClick(course)}
+                            >
+                              <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                {course.courseName}
+                              </td>
+                              <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                {course.instructorName}
+                              </td>
+                              <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                {course.createdAt}
+                              </td>
+                              <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                {course.createdBy}
+                              </td>
+                              <td className="border-t border-[#dee1e6] px-4 text-left text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                {course.hasLessons ? (
+                                  <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">
+                                      포함
+                                    </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">
+                                      미포함
+                                    </span>
+                                  </div>
+                                )}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                )}
+
+                {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                {courses.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>
           </main>
@@ -60,7 +263,9 @@ export default function AdminCoursesPage() {
       </div>
       <CourseRegistrationModal
         open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        onClose={handleModalClose}
+        onSave={handleSaveCourse}
+        editingCourse={editingCourse}
       />
     </div>
   );

src/app/admin/id/mockData.ts

@@ -0,0 +1,57 @@
+type RoleType = 'learner' | 'instructor' | 'admin';
+type AccountStatus = 'active' | 'inactive';
+
+export type UserRow = {
+  id: string;
+  joinDate: string;
+  name: string;
+  email: string;
+  role: RoleType;
+  status: AccountStatus;
+};
+
+// 임시 데이터
+export const mockUsers: UserRow[] = [
+  { id: "1", joinDate: "2024-01-15", name: "김민준", email: "user1@example.com", role: "learner", status: "active" },
+  { id: "2", joinDate: "2024-01-20", name: "이서준", email: "user2@example.com", role: "learner", status: "active" },
+  { id: "3", joinDate: "2024-02-05", name: "박도윤", email: "user3@example.com", role: "learner", status: "inactive" },
+  { id: "4", joinDate: "2024-02-10", name: "최예준", email: "user4@example.com", role: "instructor", status: "active" },
+  { id: "5", joinDate: "2024-02-15", name: "정시우", email: "user5@example.com", role: "instructor", status: "active" },
+  { id: "6", joinDate: "2024-02-20", name: "강하준", email: "user6@example.com", role: "learner", status: "active" },
+  { id: "7", joinDate: "2024-03-01", name: "조주원", email: "user7@example.com", role: "admin", status: "active" },
+  { id: "8", joinDate: "2024-03-05", name: "윤지호", email: "user8@example.com", role: "learner", status: "active" },
+  { id: "9", joinDate: "2024-03-10", name: "장준서", email: "user9@example.com", role: "learner", status: "inactive" },
+  { id: "10", joinDate: "2024-03-15", name: "임건우", email: "user10@example.com", role: "instructor", status: "active" },
+  { id: "11", joinDate: "2024-03-20", name: "한서연", email: "user11@example.com", role: "learner", status: "active" },
+  { id: "12", joinDate: "2024-04-01", name: "오서윤", email: "user12@example.com", role: "learner", status: "active" },
+  { id: "13", joinDate: "2024-04-05", name: "서지우", email: "user13@example.com", role: "instructor", status: "inactive" },
+  { id: "14", joinDate: "2024-04-10", name: "신서현", email: "user14@example.com", role: "learner", status: "active" },
+  { id: "15", joinDate: "2024-04-15", name: "권민서", email: "user15@example.com", role: "admin", status: "active" },
+  { id: "16", joinDate: "2024-04-20", name: "황하은", email: "user16@example.com", role: "learner", status: "active" },
+  { id: "17", joinDate: "2024-05-01", name: "안예은", email: "user17@example.com", role: "learner", status: "inactive" },
+  { id: "18", joinDate: "2024-05-05", name: "송윤서", email: "user18@example.com", role: "instructor", status: "active" },
+  { id: "19", joinDate: "2024-05-10", name: "전채원", email: "user19@example.com", role: "learner", status: "active" },
+  { id: "20", joinDate: "2024-05-15", name: "홍지원", email: "user20@example.com", role: "learner", status: "active" },
+  { id: "21", joinDate: "2024-05-20", name: "김민수", email: "user21@example.com", role: "instructor", status: "active" },
+  { id: "22", joinDate: "2024-06-01", name: "이영희", email: "user22@example.com", role: "learner", status: "active" },
+  { id: "23", joinDate: "2024-06-05", name: "박철수", email: "user23@example.com", role: "learner", status: "inactive" },
+  { id: "24", joinDate: "2024-06-10", name: "최수진", email: "user24@example.com", role: "admin", status: "active" },
+  { id: "25", joinDate: "2024-06-15", name: "정대현", email: "user25@example.com", role: "instructor", status: "active" },
+  { id: "26", joinDate: "2024-06-20", name: "강미영", email: "user26@example.com", role: "learner", status: "active" },
+  { id: "27", joinDate: "2024-07-01", name: "조성호", email: "user27@example.com", role: "learner", status: "active" },
+  { id: "28", joinDate: "2024-07-05", name: "윤지은", email: "user28@example.com", role: "instructor", status: "inactive" },
+  { id: "29", joinDate: "2024-07-10", name: "장현우", email: "user29@example.com", role: "learner", status: "active" },
+  { id: "30", joinDate: "2024-07-15", name: "임소영", email: "user30@example.com", role: "learner", status: "active" },
+];
+
+// 강사 목록 가져오기 함수 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');
+}
+

src/app/admin/id/page.tsx

@@ -4,70 +4,12 @@ import { useState, useEffect, useRef, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import DropdownIcon from "@/app/svgs/dropdownicon";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
+import { mockUsers, type UserRow } from "./mockData";
 
 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: '학습자',

src/app/admin/lessons/page.tsx

@@ -1,8 +1,22 @@
 'use client';
 
+import { useState, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
+import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 
 export default function AdminLessonsPage() {
+  // TODO: 나중에 실제 데이터로 교체
+  const items: any[] = [];
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const ITEMS_PER_PAGE = 10;
+  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const paginatedItems = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return items.slice(startIndex, endIndex);
+  }, [items, currentPage]);
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -25,6 +39,101 @@ export default function AdminLessonsPage() {
 
               {/* 콘텐츠 영역 */}
               <div className="flex-1 pt-8 flex flex-col">
+                {items.length === 0 ? (
+                  <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>
+                ) : (
+                  <>
+                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    
+                    {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                    {items.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>
           </main>

src/app/admin/logs/page.tsx

@@ -1,8 +1,22 @@
 'use client';
 
+import { useState, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
+import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 
 export default function AdminLogsPage() {
+  // TODO: 나중에 실제 데이터로 교체
+  const items: any[] = [];
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const ITEMS_PER_PAGE = 10;
+  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const paginatedItems = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return items.slice(startIndex, endIndex);
+  }, [items, currentPage]);
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -25,6 +39,101 @@ export default function AdminLogsPage() {
 
               {/* 콘텐츠 영역 */}
               <div className="flex-1 pt-8 flex flex-col">
+                {items.length === 0 ? (
+                  <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>
+                ) : (
+                  <>
+                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    
+                    {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                    {items.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>
           </main>

src/app/admin/notices/page.tsx

@@ -1,8 +1,22 @@
 'use client';
 
+import { useState, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
+import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 
 export default function AdminNoticesPage() {
+  // TODO: 나중에 실제 데이터로 교체
+  const items: any[] = [];
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const ITEMS_PER_PAGE = 10;
+  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const paginatedItems = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return items.slice(startIndex, endIndex);
+  }, [items, currentPage]);
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -25,6 +39,101 @@ export default function AdminNoticesPage() {
 
               {/* 콘텐츠 영역 */}
               <div className="flex-1 pt-8 flex flex-col">
+                {items.length === 0 ? (
+                  <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>
+                ) : (
+                  <>
+                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    
+                    {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                    {items.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>
           </main>

src/app/admin/questions/page.tsx

@@ -1,8 +1,22 @@
 'use client';
 
+import { useState, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
+import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 
 export default function AdminQuestionsPage() {
+  // TODO: 나중에 실제 데이터로 교체
+  const items: any[] = [];
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const ITEMS_PER_PAGE = 10;
+  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const paginatedItems = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return items.slice(startIndex, endIndex);
+  }, [items, currentPage]);
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -25,6 +39,101 @@ export default function AdminQuestionsPage() {
 
               {/* 콘텐츠 영역 */}
               <div className="flex-1 pt-8 flex flex-col">
+                {items.length === 0 ? (
+                  <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>
+                ) : (
+                  <>
+                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    
+                    {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                    {items.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>
           </main>

src/app/admin/resources/page.tsx

@@ -1,8 +1,22 @@
 'use client';
 
+import { useState, useMemo } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
+import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 
 export default function AdminResourcesPage() {
+  // TODO: 나중에 실제 데이터로 교체
+  const items: any[] = [];
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  const ITEMS_PER_PAGE = 10;
+  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const paginatedItems = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    return items.slice(startIndex, endIndex);
+  }, [items, currentPage]);
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -25,6 +39,101 @@ export default function AdminResourcesPage() {
 
               {/* 콘텐츠 영역 */}
               <div className="flex-1 pt-8 flex flex-col">
+                {items.length === 0 ? (
+                  <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>
+                ) : (
+                  <>
+                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    
+                    {/* 페이지네이션 - 10개 초과일 때만 표시 */}
+                    {items.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>
           </main>