xrlms/src/app/admin/notices/page.tsx

'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">
      {/* 메인 레이아웃 */}
      <div className="flex flex-1 min-h-0 justify-center">
        <div className="w-full max-w-[1120px] flex min-h-0">
          {/* 사이드바 */}
          <div className="px-8 flex">
            <AdminSidebar />
          </div>

          {/* 메인 콘텐츠 */}
          <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">
                {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>
        </div>
      </div>
    </div>
  );
}