MVPTeam/DABEEO-DETECTION-APPLICATION
Template
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 항공영상 업로드 모달

Browse Source
This commit is contained in:
JoohyunKim(Lucy)
2026-04-10 12:24:10 +09:00
parent 35f6023f5a
commit 8b33161284
8 changed files with 807 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
web-app/app/features/imagery/components/AerialList.tsx
View File

@@ -3,12 +3,14 @@ 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';
import { AerialRegisterModal } from './AerialRegisterModal';
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);
const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
useEffect(() => {
const load = async () => {
@@ -37,74 +39,76 @@ export function AerialList() {
}, []);
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>
<>
<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 isLayoutFixed isFullHeight>
<Table.Caption>
<Table.CaptionLeft>
<Table.Total count={totalCount} />
</Table.CaptionLeft>
<Table.CaptionRight>
<div className="flex gap-2">
<Button color="primary" onClick={() => setIsRegisterModalOpen(true)}>항공영상 등록</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.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">용량</Table.HeaderCell>
<Table.HeaderCell align="center">전처리</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<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">용량</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">
{item.status}
</Table.Cell>
</Table.Row>
))
)}
</Table.Body>
</Table.Container>
</Table>
</div>
</Section>
<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">
{item.status}
</Table.Cell>
</Table.Row>
))
)}
</Table.Body>
</Table.Container>
</Table>
</div>
</Section>
{isRegisterModalOpen && <AerialRegisterModal isOpen={isRegisterModalOpen} onClose={() => setIsRegisterModalOpen(false)} />}
</>
);
}