xrlms/src/app/notices/page.tsx

'use client';

import { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import PaperClipSvg from '../svgs/paperclipsvg';
import ChevronDownSvg from '../svgs/chevrondownsvg';
import apiService from '../lib/apiService';
import type { Notice } from '../admin/notices/mockData';

export default function NoticesPage() {
  const router = useRouter();
  const ITEMS_PER_PAGE = 10;
  const [currentPage, setCurrentPage] = useState(1);
  const [notices, setNotices] = useState<Notice[]>([]);
  const [loading, setLoading] = useState(true);
  const [totalCount, setTotalCount] = useState(0);

  // 공지사항 리스트 가져오기
  useEffect(() => {
    let isMounted = true;

    async function fetchNotices() {
      try {
        setLoading(true);
        const response = await apiService.getNotices();

        if (response.status !== 200 || !response.data) {
          return;
        }

        // API 응답이 배열이 아닌 경우 처리 (예: { items: [...] } 형태)
        let noticesArray: any[] = [];
        let total = 0;
        
        if (Array.isArray(response.data)) {
          noticesArray = response.data;
          total = response.data.length;
        } else if (response.data && typeof response.data === 'object') {
          noticesArray = response.data.items || response.data.notices || response.data.data || response.data.list || [];
          total = response.data.total !== undefined ? response.data.total :
                  response.data.totalCount !== undefined ? response.data.totalCount :
                  response.data.count !== undefined ? response.data.count :
                  noticesArray.length;
        }

        // 날짜를 yyyy-mm-dd 형식으로 포맷팅
        const formatDate = (dateString: string): string => {
          if (!dateString) return '';
          
          try {
            const date = new Date(dateString);
            if (isNaN(date.getTime())) {
              // 이미 yyyy-mm-dd 형식인 경우 그대로 반환
              if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
                return dateString;
              }
              return dateString;
            }
            
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
          } catch {
            return dateString;
          }
        };

        // API 응답 데이터를 Notice 형식으로 변환
        const transformedNotices: Notice[] = noticesArray.map((notice: any) => ({
          id: notice.id || notice.noticeId || 0,
          title: notice.title || '',
          date: formatDate(notice.date || notice.createdAt || notice.createdDate || new Date().toISOString().split('T')[0]),
          views: notice.views || notice.viewCount || 0,
          writer: notice.writer || notice.author || notice.createdBy || '관리자',
          content: notice.content ? (Array.isArray(notice.content) ? notice.content : [notice.content]) : undefined,
          hasAttachment: notice.hasAttachment || notice.attachment || false,
        }));

        if (!isMounted) return;

        // 날짜 내림차순 정렬 (최신 날짜가 먼저)
        const sortedNotices = [...transformedNotices].sort((a, b) => b.date.localeCompare(a.date));
        setNotices(sortedNotices);
        setTotalCount(total || sortedNotices.length);
      } catch (error) {
        console.error('공지사항 리스트 조회 오류:', error);
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    }

    fetchNotices();

    return () => {
      isMounted = false;
    };
  }, []);

  const totalPages = Math.ceil(totalCount / ITEMS_PER_PAGE);
  const pagedNotices = useMemo(
    () => notices.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE),
    [notices, currentPage]
  );

  // 페이지네이션: 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="w-full bg-white">
      <div className="flex justify-center">
        <div className="w-full max-w-[1440px]">
          {/* 헤더 영역 */}
          <div className="h-[100px] flex items-center px-8">
            <h1 className="m-0 text-[24px] font-bold leading-[1.5] text-[#1B2027]">
              공지사항
            </h1>
          </div>

          {/* 본문 영역 */}
          <section className="px-8 pb-8">
            {/* 총 건수 */}
            <div className="h-10 flex items-center">
              <p className="m-0 text-[15px] font-medium leading-[1.5] text-[#333C47]">
                총 <span className="text-[#384FBF]">{totalCount}</span>건
              </p>
            </div>

            {loading ? (
              <div className="flex items-center justify-center h-[240px]">
                <p className="text-[16px] font-medium text-[#6C7682]">로딩 중...</p>
              </div>
            ) : (
              <>
                {/* 표 */}
                <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
                  {/* 헤더 */}
                  <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
                    <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
                      번호
                    </div>
                    <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
                      제목
                    </div>
                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                      게시일
                    </div>
                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                      조회수
                    </div>
                    <div className="flex items-center px-4">작성자</div>
                  </div>

                  {/* 바디 */}
                  <div>
                    {pagedNotices.length === 0 ? (
                      <div className="flex items-center justify-center h-[240px]">
                        <p className="text-[16px] font-medium text-[#6C7682]">공지사항이 없습니다.</p>
                      </div>
                    ) : (
                      pagedNotices.map((notice, index) => {
                        // 번호는 전체 목록에서의 순서 (최신이 1번)
                        const noticeNumber = totalCount - ((currentPage - 1) * ITEMS_PER_PAGE + index);
                        return (
                          <div
                            key={notice.id}
                            role="button"
                            tabIndex={0}
                            onClick={() => router.push(`/notices/${notice.id}`)}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter' || e.key === ' ') {
                                e.preventDefault();
                                router.push(`/notices/${notice.id}`);
                              }
                            }}
                            className="grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer"
                          >
                            <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
                              {noticeNumber}
                            </div>
                            <div
                              className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
                              title={notice.title}
                            >
                              {notice.title}
                              {notice.hasAttachment && (
                                <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
                              )}
                            </div>
                            <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                              {notice.date}
                            </div>
                            <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                              {notice.views.toLocaleString()}
                            </div>
                            <div className="flex items-center px-4">{notice.writer}</div>
                          </div>
                        );
                      })
                    )}
                  </div>
                </div>

                {/* 페이지네이션 - 10개 초과일 때만 표시 */}
                {totalCount > ITEMS_PER_PAGE && (
                  <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-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                        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-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                        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] cursor-pointer',
                              active ? 'bg-bg-primary-light' : 'bg-white',
                            ].join(' ')}
                          >
                            <span className="text-[16px] leading-[1.4] text-neutral-700">{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-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                        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-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                        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>
                )}
              </>
            )}
          </section>
        </div>
      </div>
    </div>
  );
}