[FE] 오류 수정 (#78) (#85)

* [FE] comment: 필요 없는 코드 제거 (#78) * [FE] comment: 필요 없는 코드 제거 (#78) * [FE] comment: 오류 해결중 (#78) * [FE] comment: log 주석처리 (#78) * [FE] comment: 오류 해결 (#78) * [FE] comment: 오류 해결 (#78)
masters2023-2nd-project-traveler · Jul 20, 2023 · 0ff81be · 0ff81be
1 parent 8688042
commit 0ff81be
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 144 deletions.
diff --git a/fe/src/components/actionHistory/ActionList.tsx b/fe/src/components/actionHistory/ActionList.tsx
@@ -13,7 +13,7 @@ type History = {
   action: string;
   createdTime: string;
   userName: string;
-  imageUrl?: string;
+  imageUrl: string;
 };
 
 export const ActionList = () => {
@@ -22,9 +22,8 @@ export const ActionList = () => {
   const { todoListData } = useData();
 
   const fetchInitialData = async () => {
-    const response = await fetch('/history');
+    const response = await fetch('/api/history');
     const data = await response.json();
-    console.log(data);
     setHistoryData(data.message);
   };
 
@@ -43,8 +42,7 @@ export const ActionList = () => {
   };
 
   const handleDelete = async () => {
-    console.log('삭제~');
-    const response = await fetch('/history', {
+    const response = await fetch('/api/history', {
       method: 'DELETE',
     });
     if (!response.ok) {

diff --git a/fe/src/components/actionHistory/ActionListItem.tsx b/fe/src/components/actionHistory/ActionListItem.tsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import UserImage from '../../assets/user_Image.svg';
 
 type ActionListItemProps = {
   title: string;
@@ -8,7 +7,7 @@ type ActionListItemProps = {
   action: string;
   createdTime: string;
   userName: string;
-  imageUrl?: string;
+  imageUrl: string;
 };
 
 function formatTimeDifference(dateTimeStr: string): string {

diff --git a/fe/src/components/main/AddModeCard.tsx b/fe/src/components/main/AddModeCard.tsx
@@ -30,12 +30,12 @@ export const AddModeCard: React.FC<AddModeCardProps> = ({
   }, []);
 
   const handleSubmit = async (title: string, body: string) => {
-    console.log('Process ID: ', processId);
-    console.log('Submitted title: ', title);
-    console.log('Submitted body: ', body);
-    console.log('User environment: ', isMobile ? 'Mobile' : 'Web');
+    // console.log('Process ID: ', processId);
+    // console.log('Submitted title: ', title);
+    // console.log('Submitted body: ', body);
+    // console.log('User environment: ', isMobile ? 'Mobile' : 'Web');
 
-    const response = await fetch('/task', {
+    const response = await fetch('/api/task', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -50,7 +50,6 @@ export const AddModeCard: React.FC<AddModeCardProps> = ({
 
     const addCardData = await response.json();
 
-    console.log(addCardData);
     onNewTask(addCardData.message);
     onCancel();
   };

diff --git a/fe/src/components/main/CardList.tsx b/fe/src/components/main/CardList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 import { Card } from '../card/Card';
 import { Modal } from '../modal/Modal';
@@ -36,25 +36,23 @@ export const CardList: React.FC<CardProps> = ({
   const [isVisible, setIsVisible] = useState(false);
   const [currentTaskId, setCurrentTaskId] = useState<number | null>(null);
 
-  const [taskList, setTaskList] = useState<TaskType[]>(tasks);
   const verticalScrollRef = useRef(null);
 
-  const scrollVertically = (e) => {
+  const scrollVertically = (e: React.WheelEvent<HTMLDivElement>) => {
     // scrollHeight이 clientHeight보다 크면 스크롤 돼야함
     // 이 경우에만 세로 스크롤 고
     if (e.currentTarget.scrollHeight > e.currentTarget.clientHeight) {
       e.stopPropagation();
     }
   };
 
-
   const modalHandler = (taskId: number): void => {
     setIsVisible((prevVisible) => !prevVisible);
     setCurrentTaskId(taskId);
   };
 
   const deleteHandler = async (taskId: number) => {
-    const response = await fetch(`/task/${taskId}`, {
+    const response = await fetch(`/api/task/${taskId}`, {
       method: 'DELETE',
     });
     const data = await response.json();
@@ -69,7 +67,7 @@ export const CardList: React.FC<CardProps> = ({
     title: string,
     body: string,
   ) => {
-    const response = await fetch(`/task/${taskId}`, {
+    const response = await fetch(`/api/task/${taskId}`, {
       method: 'PATCH',
       headers: {
         'Content-Type': 'application/json',
@@ -82,8 +80,8 @@ export const CardList: React.FC<CardProps> = ({
       return;
     }
 
-    const updatedTask = await response.json();
-    console.log('Updated task:', updatedTask);
+    // const updatedTask = await response.json();
+    // console.log('Updated task:', updatedTask);
     onTaskEdit({ taskId, title, contents: body });
   };
 

diff --git a/fe/src/components/main/ColumnItem.tsx b/fe/src/components/main/ColumnItem.tsx
@@ -15,7 +15,7 @@ type ColumnItemProps = {
   tasks: TaskType[];
   onNewTask: (newTask: AddTaskType) => void;
   onTaskDelete: (taskId: number) => void;
-  onTitleChange: (e, processId: number) => void;
+  onTitleChange: (newName: string, processId: number) => void;
   onColumnDelete: (processId: number) => void;
   onTaskEdit: (editedTask: EditTaskType) => void;
 };
@@ -46,8 +46,8 @@ export const ColumnItem: React.FC<ColumnItemProps> = ({
         title={title}
         numberOfTasks={numberOfTasks}
         onAddClick={handleAddModeClick}
-        onTitleChange={onTitleChange} //
-        processId={processId} //
+        onTitleChange={onTitleChange}
+        processId={processId}
         onColumnDelete={onColumnDelete}
       />
 

diff --git a/fe/src/components/main/ColumnList.tsx b/fe/src/components/main/ColumnList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { ColumnItem } from './ColumnItem';
 import { FloatingActionBtn } from './FloatingAction';
@@ -21,111 +21,108 @@ type AddTaskType = TaskType & { processId: number };
 type EditTaskType = { taskId: number; title: string; contents: string };
 
 export const ColumnList = () => {
-
-  const horizontalScrollRef = useRef(null);
+  const horizontalScrollRef = useRef<HTMLDivElement | null>(null);
   const { todoListData, setTodoListData } = useData();
-  // const [todoListData, setTodoListData] = useState<TodoItemType[] | null>(null);
-
 
   useEffect(() => {
     const fetchTodoList = async () => {
-      const response = await fetch('/todolist');
+      const response = await fetch('/api/todolist');
       const todoData = await response.json();
       setTodoListData(todoData.message);
     };
     fetchTodoList();
   }, []);
 
   const handleNewTask = (newTask: AddTaskType) => {
-    setTodoListData((prevData) => {
-      if (!prevData) return null;
-
-      return prevData.map((item) =>
-        item.processId === newTask.processId
-          ? { ...item, tasks: [newTask, ...item.tasks] }
-          : item,
-      );
-    });
+    if (!todoListData) return;
+
+    const updatedData = todoListData.map((item) =>
+      item.processId === newTask.processId
+        ? { ...item, tasks: [newTask, ...item.tasks] }
+        : item,
+    );
+
+    setTodoListData(updatedData);
   };
 
   const handleTaskDelete = (taskId: number) => {
-    setTodoListData((prevData) => {
-      if (!prevData) return null;
-
-      return prevData.map((item) =>
-        item.tasks.some((task) => task.taskId === taskId)
-          ? {
-              ...item,
-              tasks: item.tasks.filter((task) => task.taskId !== taskId),
-            }
-          : item,
-      );
-    });
+    if (!todoListData) return;
+
+    const updatedData = todoListData.map((item) =>
+      item.tasks.some((task) => task.taskId === taskId)
+        ? {
+            ...item,
+            tasks: item.tasks.filter((task) => task.taskId !== taskId),
+          }
+        : item,
+    );
+
+    setTodoListData(updatedData);
   };
 
+  const handleTitleChange = (newName: string, processId: number) => {
+    if (!todoListData) return;
 
-  const handleTitleChange = (e, processId) => {
-    const newName = e.target.value;
-    setTodoListData(
-      (prevData) =>
-        prevData &&
-        prevData.map((item) =>
-          item.processId === processId ? { ...item, name: newName } : item,
-        ),
+    const updatedData = todoListData.map((item) =>
+      item.processId === processId ? { ...item, name: newName } : item,
     );
+
+    setTodoListData(updatedData);
   };
 
   const handleNewColumn = () => {
-    setTodoListData((prevData) => {
-      if (!prevData) return null;
-
-      const newProcessId =
-        Math.max(...prevData.map((item) => item.processId)) + 1;
-
-      return [
-        ...prevData,
-        {
-          processId: newProcessId,
-          name: '새 리스트',
-          tasks: [],
-        },
-      ];
-    });
+    if (!todoListData) return;
+
+    const newProcessId =
+      Math.max(...todoListData.map((item) => item.processId)) + 1;
+
+    const updatedData = [
+      ...todoListData,
+      {
+        processId: newProcessId,
+        name: '새 리스트',
+        tasks: [],
+      },
+    ];
+
+    setTodoListData(updatedData);
   };
 
   const handleColumnDelete = (processId: number) => {
-    setTodoListData((prevData) => {
-      if (!prevData) return null;
+    if (!todoListData) return;
+
+    const updatedData = todoListData.filter(
+      (item) => item.processId !== processId,
+    );
+
+    setTodoListData(updatedData);
+  };
+
+  const handleTaskEdit = (editedTask: EditTaskType) => {
+    if (!todoListData) return;
+
+    const updatedData = todoListData.map((item) =>
+      item.tasks.some((task) => task.taskId === editedTask.taskId)
+        ? {
+            ...item,
+            tasks: item.tasks.map((task) =>
+              task.taskId === editedTask.taskId
+                ? { ...task, ...editedTask }
+                : task,
+            ),
+          }
+        : item,
+    );
 
-      return prevData.filter((item) => item.processId !== processId);
-    });
+    setTodoListData(updatedData);
   };
 
-  const scrollHorizontally = (e) => {
+  const scrollHorizontally = (e: React.WheelEvent<HTMLDivElement>) => {
     if (horizontalScrollRef.current) {
       horizontalScrollRef.current.scrollLeft += e.deltaY;
     }
   };
 
-  const handleTaskEdit = (editedTask: EditTaskType) => {
-    setTodoListData((prevData) => {
-      if (!prevData) return null;
-
-      return prevData.map((item) =>
-        item.tasks.some((task) => task.taskId === editedTask.taskId)
-          ? {
-              ...item,
-              tasks: item.tasks.map((task) =>
-                task.taskId === editedTask.taskId
-                  ? { ...task, ...editedTask }
-                  : task,
-              ),
-            }
-          : item,
-      );
-    });
-  };
-
   if (todoListData === null) {
     return <div>Loading...</div>;
   }
@@ -141,12 +138,9 @@ export const ColumnList = () => {
             processId={item.processId}
             onNewTask={handleNewTask}
             onTaskDelete={handleTaskDelete}
-
             onTitleChange={handleTitleChange}
             onColumnDelete={handleColumnDelete}
-
             onTaskEdit={handleTaskEdit}
-
           />
         ))}
       </ColumnLayout>