Implement file rename

@@ -3,9 +3,11 @@ import { Popconfirm, Popover, Button, message } from "antd";
 import { FileItem } from "./useFileList";
 import { FileItem } from "./useFileList";
 import styles from "./FileItemActions.module.scss";
 import styles from "./FileItemActions.module.scss";
 import { FileListPopover } from "./FileListPopover";
 import { FileListPopover } from "./FileListPopover";
+import { FileRenamePopover } from "./FileRenamePopover";
 
 
 export type FileItemActionsProps = {
 export type FileItemActionsProps = {
   item: FileItem;
   item: FileItem;
+  onRename: (id: number, name: string) => void;
   onMove: (id: number, to: number) => void;
   onMove: (id: number, to: number) => void;
   onCopy: (id: number, to: number) => void;
   onCopy: (id: number, to: number) => void;
   onDelete: (id: number) => void;
   onDelete: (id: number) => void;
@@ -13,18 +15,43 @@ export type FileItemActionsProps = {
 
 
 export function FileItemActions({
 export function FileItemActions({
   item,
   item,
+  onRename,
   onMove,
   onMove,
   onCopy,
   onCopy,
   onDelete,
   onDelete,
 }: FileItemActionsProps) {
 }: FileItemActionsProps) {
+  const [rename, setRename] = useState<boolean>(false);
   const [move, setMove] = useState<boolean>(false);
   const [move, setMove] = useState<boolean>(false);
   const [copy, setCopy] = useState<boolean>(false);
   const [copy, setCopy] = useState<boolean>(false);
 
 
   return (
   return (
     <div className={styles.actions}>
     <div className={styles.actions}>
+      <Popover
+        title="변경할 이름을 입력하세요"
+        content={
+          <FileRenamePopover
+            name={item.name}
+            onRename={(name: string) => {
+              if (name === item.name) {
+                return message.error("동일한 이름으로는 변경할 수 없습니다");
+              }
+              if (!name) {
+                return message.error("변경할 이름을 입력하세요");
+              }
+              onRename(item.id, name);
+              setRename(false);
+            }}
+            onCancel={() => setRename(false)}
+          />
+        }
+        trigger="click"
+        visible={rename}
+        onVisibleChange={setRename}
+      >
         <Button type="link" size="small">
         <Button type="link" size="small">
           이름 변경
           이름 변경
         </Button>
         </Button>
+      </Popover>
       <Button type="link" size="small">
       <Button type="link" size="small">
         공유
         공유
       </Button>
       </Button>

@@ -17,6 +17,23 @@ export function FileList() {
 
 
   const api = useApi();
   const api = useApi();
 
 
+  const handleRename = useCallback(
+    async (id: number, name: string) => {
+      try {
+        const body = new URLSearchParams();
+        body.set("name", name);
+
+        await api.post(`/items/${id}/move/`, { body });
+        await reload();
+
+        message.info("이름이 변경되었습니다");
+      } catch {
+        message.error("이름 변경에 실패했습니다");
+      }
+    },
+    [api, reload]
+  );
+
   const handleMove = useCallback(
   const handleMove = useCallback(
     async (id: number, to: number) => {
     async (id: number, to: number) => {
       try {
       try {
@@ -97,6 +114,7 @@ export function FileList() {
       <Table
       <Table
         rowKey="id"
         rowKey="id"
         columns={getColumns({
         columns={getColumns({
+          handleRename,
           handleMove,
           handleMove,
           handleCopy,
           handleCopy,
           handleDelete,
           handleDelete,
@@ -109,19 +127,21 @@ export function FileList() {
 }
 }
 
 
 type GetColumnsParams = {
 type GetColumnsParams = {
+  handleRename: (id: number, name: string) => void;
   handleMove: (id: number, to: number) => void;
   handleMove: (id: number, to: number) => void;
   handleCopy: (id: number, to: number) => void;
   handleCopy: (id: number, to: number) => void;
   handleDelete: (id: number) => void;
   handleDelete: (id: number) => void;
 };
 };
 
 
 function getColumns({
 function getColumns({
+  handleRename,
   handleMove,
   handleMove,
   handleCopy,
   handleCopy,
   handleDelete,
   handleDelete,
 }: GetColumnsParams): ColumnsType<FileItem> {
 }: GetColumnsParams): ColumnsType<FileItem> {
   return [
   return [
     {
     {
-      title: "파일명",
+      title: "이름",
       key: "name",
       key: "name",
       dataIndex: "name",
       dataIndex: "name",
       render: (_name: string, item) => <FileListItem item={item} />,
       render: (_name: string, item) => <FileListItem item={item} />,
@@ -143,6 +163,7 @@ function getColumns({
         item.is_folder ? null : (
         item.is_folder ? null : (
           <FileItemActions
           <FileItemActions
             item={item}
             item={item}
+            onRename={handleRename}
             onMove={handleMove}
             onMove={handleMove}
             onCopy={handleCopy}
             onCopy={handleCopy}
             onDelete={handleDelete}
             onDelete={handleDelete}

+import React, { useState } from "react";
+import { Button, Input } from "antd";
+
+export type FileRenamePopoverProps = {
+  name: string;
+  onRename: (name: string) => void;
+  onCancel?: () => void;
+};
+
+export function FileRenamePopover({
+  name: oldName,
+  onRename,
+  onCancel,
+}: FileRenamePopoverProps) {
+  const [name, setName] = useState<string>(oldName);
+  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={() => onRename(name)}>
+          변경
+        </Button>
+      </div>
+    </div>
+  );
+}