Implement folder creation

+import React, { useState } from "react";
+import { Button, Input } from "antd";
+
+export type CreateFolderPopoverProps = {
+  onCreate: (name: string) => void;
+  onCancel?: () => void;
+};
+
+export function CreateFolderPopover({
+  onCreate,
+  onCancel,
+}: CreateFolderPopoverProps) {
+  const [name, setName] = useState<string>("");
+  return (
+    <div>
+      <Input
+        value={name}
+        onChange={(event) => setName(event.target.value)}
+        placeholder="이름"
+        style={{ marginBottom: 10 }}
+      />
+      <div className="ant-popover-buttons">
+        <Button size="small" onClick={onCancel}>
+          취소
+        </Button>
+        <Button type="primary" size="small" onClick={() => onCreate(name)}>
+          생성
+        </Button>
+      </div>
+    </div>
+  );
+}

-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useContext } from "react";
 import { Table, message, Button, Popover } from "antd";
 import { Table, message, Button, Popover } from "antd";
 import { ColumnsType } from "antd/lib/table";
 import { ColumnsType } from "antd/lib/table";
 import filesize from "filesize";
 import filesize from "filesize";
@@ -11,14 +11,43 @@ import { FileItemActions } from "./FileItemActions";
 
 
 import styles from "./FileList.module.scss";
 import styles from "./FileList.module.scss";
 import { FileUploadPopover } from "./FileUploadPopover";
 import { FileUploadPopover } from "./FileUploadPopover";
+import { CreateFolderPopover } from "./CreateFolderPopover";
+import { TokenContext } from "auth/useAuth";
 
 
 export function FileList() {
 export function FileList() {
   const id = useParams<{ id: string }>().id;
   const id = useParams<{ id: string }>().id;
   const { data, reload } = useFileList(id);
   const { data, reload } = useFileList(id);
+
   const [upload, setUpload] = useState<boolean>(false);
   const [upload, setUpload] = useState<boolean>(false);
+  const [createFolder, setCreateFolder] = useState<boolean>(false);
+
+  const token = useContext(TokenContext);
+  const userId = token.user.id;
 
 
   const api = useApi();
   const api = useApi();
 
 
+  const handleCreateFolder = useCallback(
+    async (id: number, name: string) => {
+      try {
+        const body = new URLSearchParams();
+        body.set("name", name);
+
+        await api.post(`/items/${id}/children/`, {
+          searchParams: {
+            user_id: userId,
+          },
+          body,
+        });
+        await reload();
+
+        message.info("폴더가 생성되었습니다");
+      } catch {
+        message.error("폴더 생성에 실패했습니다");
+      }
+    },
+    [api, reload, userId]
+  );
+
   const handleRename = useCallback(
   const handleRename = useCallback(
     async (id: number, name: string) => {
     async (id: number, name: string) => {
       try {
       try {
@@ -115,9 +144,28 @@ export function FileList() {
               파일 업로드
               파일 업로드
             </Button>
             </Button>
           </Popover>
           </Popover>
-          <Button type="link" size="small">
-            새 폴더
-          </Button>
+          <Popover
+            title="폴더 이름을 입력하세요"
+            content={
+              <CreateFolderPopover
+                onCreate={(name: string) => {
+                  if (!name) {
+                    return message.error("폴더 이름을 입력하세요");
+                  }
+                  handleCreateFolder(data.id, name);
+                  setCreateFolder(false);
+                }}
+                onCancel={() => setCreateFolder(false)}
+              />
+            }
+            trigger="click"
+            visible={createFolder}
+            onVisibleChange={setCreateFolder}
+          >
+            <Button type="link" size="small">
+              새 폴더
+            </Button>
+          </Popover>
         </div>
         </div>
       </div>
       </div>
       <Table
       <Table