교육과정 완료1

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="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">
+              <div className="flex-1 pt-2 flex flex-col">
+                {courses.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]">
                       등록된 교육과정이 없습니다.
                       <br />
                       과목을 등록해주세요.
-                    </span>
-                  </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 />
+                          <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>
   );