Implement FileList component

@@ -7965,10 +7965,9 @@
       "optional": true
       "optional": true
     },
     },
     "filesize": {
     "filesize": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
-      "integrity": "sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg==",
-      "dev": true
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
+      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg=="
     },
     },
     "fill-range": {
     "fill-range": {
       "version": "7.0.1",
       "version": "7.0.1",
@@ -17053,6 +17052,12 @@
           "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
           "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
           "dev": true
           "dev": true
         },
         },
+        "filesize": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
+          "integrity": "sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg==",
+          "dev": true
+        },
         "has-flag": {
         "has-flag": {
           "version": "3.0.0",
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",

@@ -7,6 +7,7 @@
     "@ant-design/icons": "^4.2.1",
     "@ant-design/icons": "^4.2.1",
     "antd": "^4.3.3",
     "antd": "^4.3.3",
     "classnames": "^2.2.6",
     "classnames": "^2.2.6",
+    "filesize": "^6.1.0",
     "ky": "^0.20.0",
     "ky": "^0.20.0",
     "miragejs": "^0.1.40",
     "miragejs": "^0.1.40",
     "react": "^16.13.1",
     "react": "^16.13.1",

+.actions {
+  a {
+    margin: 0 4px;
+  }
+}

 import React from "react";
 import React from "react";
+import { Table } from "antd";
+import { ColumnsType } from "antd/lib/table";
+import filesize from "filesize";
+
 import { useParams } from "react-router-dom";
 import { useParams } from "react-router-dom";
-import { useFileList } from "./useFileList";
+import { useFileList, FileItem } from "./useFileList";
+import { FileListItem } from "./FileListItem";
+
+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 } = useFileList(id);
 
 
-  return <div>{JSON.stringify(data, null, 2)}</div>;
+  if (data && data.parent !== null) {
+    data.list.unshift(({
+      id: data.parent,
+      is_folder: true,
+      name: "..",
+      file_type: "folder",
+    } as unknown) as FileItem);
+  }
+
+  return data && <Table columns={columns} dataSource={data.list} />;
 }
 }

+import React, { Fragment } from "react";
+import { FileItem } from "./useFileList";
+
+export function FileListItem({ item }: { item: FileItem }) {
+  return <Fragment>{item.name}</Fragment>;
+}

 import { useState, useCallback, useEffect } from "react";
 import { useState, useCallback, useEffect } from "react";
 import ky from "ky";
 import ky from "ky";
 
 
-interface FileListResponse {
-  data: FileItem & {
+interface FileListData extends FileItem {
   list: FileItem[];
   list: FileItem[];
-  };
 }
 }
 
 
-interface FileItem {
+interface FileListResponse {
+  data: FileListData;
+}
+
+export interface FileItem {
   is_folder: boolean;
   is_folder: boolean;
   name: string;
   name: string;
   file_type: "folder" | "file";
   file_type: "folder" | "file";
@@ -22,29 +24,15 @@ interface FileItem {
   id: number;
   id: number;
 }
 }
 
 
-interface Token {
-  accessToken: string;
-  refreshToken: string;
-  expiration: Date;
-  user: {
-    id: number;
-    username: string;
-    name: string;
-    totalSize: number;
-    currentSize: number;
-    rootFolder: number;
-  };
-}
-
 export function useFileList(id: string) {
 export function useFileList(id: string) {
-  const [data, setData] = useState<FileListResponse | null>(null);
+  const [data, setData] = useState<FileListData | null>(null);
 
 
   const reload = useCallback(async () => {
   const reload = useCallback(async () => {
     const response = await ky
     const response = await ky
       .get(`/items/${id}/children/`)
       .get(`/items/${id}/children/`)
       .json<FileListResponse>();
       .json<FileListResponse>();
 
 
-    setData(response);
+    setData(response.data);
   }, [id]);
   }, [id]);
 
 
   useEffect(() => {
   useEffect(() => {