feat: 항공영상관리 api 함수 임시 구현

web-app/app/features/imagery/components/AerialList.tsx

@@ -0,0 +1,119 @@
+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>
+  );
+}