Implement file delete

-import React from "react";
-import { Table } from "antd";
+import React, { useCallback } from "react";
+import { Table, Popconfirm, message } from "antd";
 import { ColumnsType } from "antd/lib/table";
 import filesize from "filesize";
 
 import { useParams } from "react-router-dom";
 import { useFileList, FileItem } from "./useFileList";
+import { useApi } from "util/useApi";
 import { FileListItem } from "./FileListItem";
 
 import styles from "./FileList.module.scss";
 
-const columns: ColumnsType<FileItem> = [
+export function FileList() {
+  const id = useParams<{ id: string }>().id;
+  const { data, reload } = useFileList(id);
+
+  const api = useApi();
+
+  const handleDelete = useCallback(
+    async (id: number) => {
+      await api.delete(`/items/${id}/`);
+      await reload();
+      message.info("삭제되었습니다");
+    },
+    [api, reload]
+  );
+
+  if (!data) {
+    return null;
+  }
+
+  const list = [...data.list].sort((itemA, itemB) =>
+    itemA.is_folder === itemB.is_folder ? 0 : itemA.is_folder ? -1 : 1
+  );
+
+  if (data.parent !== null) {
+    list.unshift(({
+      id: data.parent,
+      is_folder: true,
+      name: "..",
+      file_type: "folder",
+    } as unknown) as FileItem);
+  }
+
+  return (
+    <div>
+      {data.parent !== null && <h3>{data.name}</h3>}
+      <Table
+        rowKey="id"
+        columns={getColumns({
+          handleDelete,
+        })}
+        dataSource={list}
+        pagination={false}
+      />
+    </div>
+  );
+}
+
+type GetColumnsParams = {
+  handleDelete: (id: number) => void;
+};
+
+function getColumns({ handleDelete }: GetColumnsParams): ColumnsType<FileItem> {
+  return [
     {
       title: "파일명",
+      key: "name",
       dataIndex: "name",
       render: (_name: string, item) => <FileListItem item={item} />,
     },
     {
       title: "크기",
+      key: "size",
       dataIndex: "size",
       width: 120,
       render: (bytes: number, item) =>
@@ -24,6 +79,7 @@ const columns: ColumnsType<FileItem> = [
     },
     {
       title: "",
+      key: "action",
       dataIndex: "",
       width: 200,
       render: (__: any, item) =>
@@ -32,37 +88,16 @@ const columns: ColumnsType<FileItem> = [
             <a>공유</a>
             <a>이동</a>
             <a>복사</a>
+            <Popconfirm
+              title="정말로 삭제하시겠습니까?"
+              onConfirm={() => handleDelete(item.id)}
+              okText="삭제"
+              cancelText="취소"
+            >
               <a>삭제</a>
+            </Popconfirm>
           </div>
         ),
     },
-];
-
-export function FileList() {
-  const id = useParams<{ id: string }>().id;
-  const { data } = useFileList(id);
-
-  if (!data) {
-    return null;
-  }
-
-  const list = [...data.list].sort((itemA, itemB) =>
-    itemA.is_folder === itemB.is_folder ? 0 : itemA.is_folder ? -1 : 1
-  );
-
-  if (data.parent !== null) {
-    list.unshift(({
-      id: data.parent,
-      is_folder: true,
-      name: "..",
-      file_type: "folder",
-    } as unknown) as FileItem);
-  }
-
-  return (
-    <div>
-      {data.parent !== null && <h3>{data.name}</h3>}
-      <Table columns={columns} dataSource={list} pagination={false} />
-    </div>
-  );
+  ];
 }

+import { useMemo } from "react";
+import ky from "ky";
+
+// TODO: Implement Auth
+export function useApi() {
+  return useMemo(() => {
+    return ky.extend({
+      hooks: {
+        beforeRequest: [],
+      },
+    });
+  }, []);
+}