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 { ColumnsType } from "antd/lib/table";
 import filesize from "filesize";
 import filesize from "filesize";
 
 
 import { useParams } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import { useFileList, FileItem } from "./useFileList";
 import { useFileList, FileItem } from "./useFileList";
+import { useApi } from "util/useApi";
 import { FileListItem } from "./FileListItem";
 import { FileListItem } from "./FileListItem";
 
 
 import styles from "./FileList.module.scss";
 import styles from "./FileList.module.scss";
 
 
-const columns: ColumnsType<FileItem> = [
-  {
-    title: "파일명",
-    dataIndex: "name",
-    render: (_name: string, item) => <FileListItem item={item} />,
-  },
-  {
-    title: "크기",
-    dataIndex: "size",
-    width: 120,
-    render: (bytes: number, item) =>
-      item.is_folder ? "" : filesize(bytes, { round: 0 }),
-  },
-  {
-    title: "",
-    dataIndex: "",
-    width: 200,
-    render: (__: any, item) =>
-      item.is_folder ? null : (
-        <div className={styles.actions}>
-          <a>공유</a>
-          <a>이동</a>
-          <a>복사</a>
-          <a>삭제</a>
-        </div>
-      ),
-  },
-];
-
 export function FileList() {
 export function FileList() {
   const id = useParams<{ id: string }>().id;
   const id = useParams<{ id: string }>().id;
-  const { data } = useFileList(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) {
   if (!data) {
     return null;
     return null;
@@ -62,7 +45,59 @@ export function FileList() {
   return (
   return (
     <div>
     <div>
       {data.parent !== null && <h3>{data.name}</h3>}
       {data.parent !== null && <h3>{data.name}</h3>}
-      <Table columns={columns} dataSource={list} pagination={false} />
+      <Table
+        rowKey="id"
+        columns={getColumns({
+          handleDelete,
+        })}
+        dataSource={list}
+        pagination={false}
+      />
     </div>
     </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) =>
+        item.is_folder ? "" : filesize(bytes, { round: 0 }),
+    },
+    {
+      title: "",
+      key: "action",
+      dataIndex: "",
+      width: 200,
+      render: (__: any, item) =>
+        item.is_folder ? null : (
+          <div className={styles.actions}>
+            <a>공유</a>
+            <a>이동</a>
+            <a>복사</a>
+            <Popconfirm
+              title="정말로 삭제하시겠습니까?"
+              onConfirm={() => handleDelete(item.id)}
+              okText="삭제"
+              cancelText="취소"
+            >
+              <a>삭제</a>
+            </Popconfirm>
+          </div>
+        ),
+    },
+  ];
+}

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