108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
/**
|
|
* ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 하수도정비기본계획보고서 탭 (셀 클릭)
|
|
*
|
|
* 📄 Report Files Modal
|
|
* Next.js App Router (app/) 기반 보고서 파일 모달 컴포넌트
|
|
*
|
|
* - 하수도정비 기본계획 보고서 파일 목록 표시
|
|
* - 파일명 및 등록일자 정보 테이블 출력
|
|
* - 페이지네이션 및 로딩 오버레이 지원
|
|
* - 파일 클릭 이벤트 처리 및 상세 조회
|
|
* - Zustand를 통한 모달 상태 및 데이터 관리
|
|
* - 모달 열림/닫힘 시 데이터 초기화 기능
|
|
*/
|
|
'use client'
|
|
import React, { useEffect } from 'react';
|
|
import LoadingOverlay from '@/components/ui/LoadingBar';
|
|
import useReportTab from './useReportTab';
|
|
import { useReportTabStore } from '@/store/useReportTabStore';
|
|
import { UiTable } from '@common/business_components/ui';
|
|
import { UiModal } from "@common/business_components";
|
|
import useSearchModalStore from '@/store/useSearchModalStore';
|
|
|
|
type ModalOpenProp = { clsfSystmSn: string } // 자료관 기본계획 일련번호
|
|
const ReportFilesModal: React.FC<ModalOpenProp> = ({ clsfSystmSn }: ModalOpenProp) => {
|
|
// 하수도정비 기본계획 보고서 파일목록
|
|
const REPORT_FILES_HEADLIST = [
|
|
{ id: "no", title: "NO" },
|
|
{ id: "fileTitle", title: "파일명" },
|
|
{ id: "regDt", title: "등록일자" },
|
|
];
|
|
|
|
const {
|
|
curPage, setCurPage,
|
|
isLoading,
|
|
isResetPage,
|
|
isResetSelection,
|
|
setIsResetPage,
|
|
setIsResetSelection
|
|
} = useSearchModalStore();
|
|
const {
|
|
isOpen: isModalOpen,
|
|
files,
|
|
dcFiles: filesOrigin,
|
|
setIsOpen: setIsModalOpen,
|
|
setFiles,
|
|
fetchDcFiles
|
|
} = useReportTabStore();
|
|
const { getFiles, handleCellClick } = useReportTab();
|
|
|
|
|
|
useEffect(() => {
|
|
fetchDcFiles(clsfSystmSn);
|
|
}, [clsfSystmSn]);
|
|
|
|
useEffect(() => {
|
|
if (isModalOpen === true) {
|
|
getFiles(); // 파일 목록 조회
|
|
} else {
|
|
setFiles([]); // 모달이 닫힐 때 파일 목록 초기화
|
|
setCurPage(1); // 페이지를 1로 초기화
|
|
setIsResetPage(true); // 페이지를 초기화
|
|
setIsResetSelection(true); // 선택 초기화
|
|
}
|
|
}, [filesOrigin, isModalOpen, curPage]);
|
|
|
|
const renderBody = () => (
|
|
<>
|
|
<div className="flex-1 px-2 pb-2">
|
|
<LoadingOverlay isLoading={isLoading} />
|
|
<UiTable
|
|
headName={(() => {
|
|
return (<>조회 결과 ({filesOrigin.length.toLocaleString('ko-KR')})건</>);
|
|
})()
|
|
}
|
|
tableData={files}
|
|
headlist={REPORT_FILES_HEADLIST}
|
|
pageSize={10}
|
|
total={filesOrigin.length}
|
|
cellClick={handleCellClick}
|
|
onPageChange={setCurPage}
|
|
resetPageNo={isResetPage}
|
|
resetSelection={isResetSelection}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
|
|
return (
|
|
<UiModal
|
|
open={isModalOpen}
|
|
onOpenChange={setIsModalOpen}
|
|
headerTitle=""
|
|
bodyClass={`
|
|
min-h-[50vh] max-h-[90dvh]
|
|
max-w-[750px]
|
|
h-auto w-auto
|
|
overflow-auto
|
|
z-[5000]
|
|
flex items-start
|
|
`}
|
|
body={renderBody()}
|
|
noFooterYn='Y'
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ReportFilesModal); |