120 lines
4.2 KiB
TypeScript
120 lines
4.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Button } from '~/shared/components/button/Button';
|
|
import { Section } from '~/shared/components/section/Section';
|
|
import { Table } from '~/shared/components/table';
|
|
import type { AerialItem } from '../types/aerial';
|
|
|
|
const statusColors: Record<string, string> = {
|
|
대기: 'text-dabeeo-gray-99',
|
|
처리중: 'text-primary',
|
|
완료: 'text-dabeeo-navy-tertiary',
|
|
실패: 'text-red-500',
|
|
};
|
|
|
|
export function AerialList() {
|
|
const [selectedId, setSelectedId] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [data, setData] = useState<AerialItem[]>([]);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
// const result = await fetchAerialList('YEAR', strtDttm, endDttm);
|
|
const result = {
|
|
list: [],
|
|
pagination: {
|
|
currentPage: 0,
|
|
pagiSize: 0,
|
|
totalPages: 0,
|
|
totalItems: 0,
|
|
},
|
|
};
|
|
if (result) {
|
|
setData(result.list);
|
|
setTotalCount(result.pagination.totalItems);
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
load();
|
|
}, []);
|
|
|
|
return (
|
|
<Section className="w-full pb-4" variant="list">
|
|
<div className="flex flex-col h-full p-4 gap-4">
|
|
<h1 className="text-xl font-bold">항공영상 데이터 관리</h1>
|
|
|
|
<Table isLayoutFixed isFullHeight>
|
|
<Table.Caption>
|
|
<Table.CaptionLeft>
|
|
<Table.Total count={totalCount} />
|
|
</Table.CaptionLeft>
|
|
<Table.CaptionRight>
|
|
<div className="flex gap-2">
|
|
<Button color="light" size="small">엑셀 다운로드</Button>
|
|
<Button color="primary" size="small">영상 등록</Button>
|
|
</div>
|
|
</Table.CaptionRight>
|
|
</Table.Caption>
|
|
|
|
<Table.Container>
|
|
<Table.Colgroup>
|
|
<Table.Col width={60} />
|
|
<Table.Col width={180} />
|
|
<Table.Col width={200} />
|
|
<Table.Col width={120} />
|
|
<Table.Col width={100} />
|
|
<Table.Col width={120} />
|
|
<Table.Col width={80} />
|
|
</Table.Colgroup>
|
|
|
|
<Table.Header>
|
|
<Table.HeaderRow>
|
|
<Table.HeaderCell align="center">No</Table.HeaderCell>
|
|
<Table.HeaderCell>영상명</Table.HeaderCell>
|
|
<Table.HeaderCell>촬영 지역</Table.HeaderCell>
|
|
<Table.HeaderCell align="center">촬영일</Table.HeaderCell>
|
|
<Table.HeaderCell align="center">해상도</Table.HeaderCell>
|
|
<Table.HeaderCell align="right">파일크기(MB)</Table.HeaderCell>
|
|
<Table.HeaderCell align="center">상태</Table.HeaderCell>
|
|
</Table.HeaderRow>
|
|
</Table.Header>
|
|
|
|
<Table.Body>
|
|
{isLoading ? (
|
|
<Table.Loading colSpan={7} />
|
|
) : data.length === 0 ? (
|
|
<Table.Empty colSpan={7}>등록된 항공영상이 없습니다.</Table.Empty>
|
|
) : (
|
|
data.map((item, index) => (
|
|
<Table.Row
|
|
key={item.mapId}
|
|
isSelected={selectedId === item.mapId}
|
|
onClick={() => setSelectedId(item.mapId)}
|
|
>
|
|
<Table.Cell align="center">{index + 1}</Table.Cell>
|
|
<Table.Cell>{item.fileName}</Table.Cell>
|
|
<Table.Cell>{item.region}</Table.Cell>
|
|
<Table.Cell align="center">{item.capturedDttm}</Table.Cell>
|
|
<Table.Cell align="center">{item.scale}</Table.Cell>
|
|
<Table.Cell align="right">{item.fileSize}</Table.Cell>
|
|
<Table.Cell align="center">
|
|
<span className={statusColors[item.status] ?? 'text-dabeeo-gray-99'}>
|
|
{item.status}
|
|
</span>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
))
|
|
)}
|
|
</Table.Body>
|
|
</Table.Container>
|
|
</Table>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|