From cfedc983f05fb52c9dc3996e96f36b6c32968c22 Mon Sep 17 00:00:00 2001
From: JH <vvaa277@gmail.com>
Date: Wed, 19 Jul 2023 00:51:19 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20comment:=20=ED=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EC=97=86=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0=20?=
 =?UTF-8?q?(#78)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/components/main/ColumnList.tsx  | 30 ++++++++++++++------------
 fe/src/components/main/ColumnTitle.tsx | 11 ++++++----
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/fe/src/components/main/ColumnList.tsx b/fe/src/components/main/ColumnList.tsx
index e9a85bb9..73206907 100644
--- a/fe/src/components/main/ColumnList.tsx
+++ b/fe/src/components/main/ColumnList.tsx
@@ -21,12 +21,10 @@ type AddTaskType = TaskType & { processId: number };
 type EditTaskType = { taskId: number; title: string; contents: string };
 
 export const ColumnList = () => {
-
   const horizontalScrollRef = useRef(null);
   const { todoListData, setTodoListData } = useData();
   // const [todoListData, setTodoListData] = useState<TodoItemType[] | null>(null);
 
-
   useEffect(() => {
     const fetchTodoList = async () => {
       const response = await fetch('/todolist');
@@ -63,16 +61,23 @@ export const ColumnList = () => {
     });
   };
 
+  const handleTitleChange = (newName: string, processId: number) => {
+    // const newName = e.target.value;
+    setTodoListData((prevData) => {
+      if (!prevData) return null;
 
-  const handleTitleChange = (e, processId) => {
-    const newName = e.target.value;
-    setTodoListData(
-      (prevData) =>
-        prevData &&
-        prevData.map((item) =>
-          item.processId === processId ? { ...item, name: newName } : item,
-        ),
-    );
+      return prevData.map((item) =>
+        item.processId === processId ? { ...item, name: newName } : item,
+      );
+    });
+
+    // setTodoListData(
+    //   (prevData) =>
+    //     prevData &&
+    //     prevData.map((item) =>
+    //       item.processId === processId ? { ...item, name: newName } : item,
+    //     ),
+    // );
   };
 
   const handleNewColumn = () => {
@@ -141,12 +146,9 @@ export const ColumnList = () => {
             processId={item.processId}
             onNewTask={handleNewTask}
             onTaskDelete={handleTaskDelete}
-
             onTitleChange={handleTitleChange}
             onColumnDelete={handleColumnDelete}
-
             onTaskEdit={handleTaskEdit}
-
           />
         ))}
       </ColumnLayout>
diff --git a/fe/src/components/main/ColumnTitle.tsx b/fe/src/components/main/ColumnTitle.tsx
index 229a03ef..47065e6b 100644
--- a/fe/src/components/main/ColumnTitle.tsx
+++ b/fe/src/components/main/ColumnTitle.tsx
@@ -8,7 +8,8 @@ type ColumnTitleProps = {
   title: string;
   numberOfTasks: number;
   onAddClick?: () => void;
-  onTitleChange: (e, processId: number) => void;
+  // onTitleChange: (e, processId: number) => void;
+  onTitleChange: (newName: string, processId: number) => void;
   processId: number;
   onColumnDelete: (processId: number) => void;
 };
@@ -36,16 +37,18 @@ export const ColumnTitle: React.FC<ColumnTitleProps> = ({
   const handleEditTitle = () => {
     setIsEditing((prev) => !prev);
   };
+
   const handleTitleChange = (e) => {
     setNewTitle(e.target.value);
   };
 
   const handleBlur = (e) => {
     if (e.target.value.length === 0) return;
-    handleSubmit(e, processId);
+    handleSubmit(processId);
   };
 
-  const handleSubmit = async (e, processId: number) => {
+  // const handleSubmit = async (e, processId: number) => {
+  const handleSubmit = async (processId: number) => {
     console.log('해당 Process ID: ', processId);
     console.log('Submitted 컬럼 title: ', newTitle);
 
@@ -63,7 +66,7 @@ export const ColumnTitle: React.FC<ColumnTitleProps> = ({
 
     console.log(responseData);
     setIsEditing((prev) => !prev);
-    onTitleChange(e, processId);
+    onTitleChange(newTitle, processId);
   };
 
   const handleDelete = async () => {