admin 과제 수정 및 추가 기능 추가

frontend/src/api/managetask.js

@@ -0,0 +1,17 @@
+import api from "./api";
+
+// 과제 등록
+export const postAssignment = async (data) => {
+  return api.post("/admin/assignment", data);
+};
+
+// 과제 목록 조회
+export const getAssignments = async () => {
+  const res = await api.get("/admin/assignment/search");
+  return res.data;
+};
+
+// 과제 수정
+export const putAssignment = async (assignmentId, data) => {
+  return api.put(`/admin/assignment/${assignmentId}`, data);
+};

frontend/src/components/TaskModal.jsx

@@ -1,12 +1,21 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import styles from "../pages/admin/ManageTask.module.css";
 import api from "../api/api";
 
-const TaskModal = ({ weekInfo, onClose }) => {
+const TaskModal = ({ weekInfo, onClose, onSubmit }) => {
   const [topic, setTopic] = useState("");
   const [day, setDay] = useState("");
   const [taskList, setTaskList] = useState([""]);
 
+  useEffect(() => {
+    if (weekInfo?.tasks?.length > 0) {
+      const firstTask = weekInfo.tasks[0];
+      setTopic(firstTask.subtitle || "");
+      setDay(firstTask.day || "");
+      setTaskList(weekInfo.tasks.map((task) => task.assignmentName));
+    }
+  }, [weekInfo]);
+
   const handleTaskChange = (index, value) => {
     const newTasks = [...taskList];
     newTasks[index] = value;
@@ -18,33 +27,32 @@ const TaskModal = ({ weekInfo, onClose }) => {
   };
 
   const handleSave = async () => {
-    console.log("save clicked");
-
-    const weekNumber = parseInt(weekInfo.week.replace("주차", "")); // 주차 숫자 정보만 추출
-    const filteredTasks = taskList.filter((t) => t.trim() !== ""); // 빈 값 제거
+    const weekNumber = parseInt(weekInfo.week.replace("주차", ""));
+    const filteredTasks = taskList.filter((t) => t.trim() !== "");
 
     const requests = filteredTasks.map((task, index) => {
-      console.log("sending:", {
-        subject: topic,
-        assignmentName: task,
-        week: weekNumber,
-        day: day,
-        orderNumber: index + 1,
-      });
+      const existingTask = weekInfo.tasks[index];
 
-      return api.post("/admin/assignment/signup", {
-        subject: topic,
+      const payload = {
+        title: weekInfo.tasks[0]?.title || topic,
+        subtitle: topic,
         assignmentName: task,
         week: weekNumber,
         day: day,
         orderNumber: index + 1,
-      });
+      };
+
+      if (existingTask?.id) {
+        return api.put(`/admin/assignment/${existingTask.id}`, payload);
+      } else {
+        return api.post("/admin/assignment/signup", payload);
+      }
     });
 
     try {
-      const response = await Promise.all(requests);
-      console.log("응답들: ", response);
+      await Promise.all(requests);
       alert("과제가 저장되었습니다.");
+      onSubmit && onSubmit(); // 부모에게 저장 알림
       onClose();
     } catch (error) {
       console.error("저장 오류:", error);

frontend/src/pages/admin/ManageTask.jsx

@@ -1,55 +1,109 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Header from "../../components/Header";
 import style from "./ManageTask.module.css";
 import TaskModal from "../../components/TaskModal";
-
-const weekData = [
-  { week: "1주차", title: "Comming soon~", tasks: [] },
-  { week: "2주차", title: "Comming soon~", tasks: [] },
-  { week: "3주차", title: "Comming soon~", tasks: [] },
-  { week: "4주차", title: "Comming soon~", tasks: [] },
-  { week: "5주차", title: "Comming soon~", tasks: [] },
-];
+import { getAssignments } from "../../api/assignmentApi";
 
 const ManageTask = () => {
+  const [assignmentsByWeek, setAssignmentsByWeek] = useState([]);
   const [selectedWeekIndex, setSelectedWeekIndex] = useState(null);
   const [showModal, setShowModal] = useState(false);
 
+  useEffect(() => {
+    const fetchAssignments = async () => {
+      try {
+        const rawAssignments = await getAssignments();
+
+        const weekMap = new Map();
+        rawAssignments.forEach((task) => {
+          const week = task.week;
+          if (!weekMap.has(week)) {
+            weekMap.set(week, []);
+          }
+          weekMap.get(week).push(task);
+        });
+
+        const formatted = Array.from(weekMap.entries())
+          .sort(([a], [b]) => a - b)
+          .map(([week, tasks]) => ({
+            week: `${week}주차`,
+            title: tasks[0]?.title || "Comming soon~",
+            tasks,
+          }));
+
+        setAssignmentsByWeek(formatted);
+      } catch (err) {
+        console.error("과제 데이터 불러오기 실패:", err);
+      }
+    };
+
+    fetchAssignments();
+  }, []);
+
   const handleEditClick = (index) => {
     setSelectedWeekIndex(index);
     setShowModal(true);
   };
 
-  const closeModal = () => setShowModal(false);
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  const handleAddWeek = () => {
+    const nextWeekNumber = assignmentsByWeek.length + 1;
+    setAssignmentsByWeek([
+      ...assignmentsByWeek,
+      {
+        week: `${nextWeekNumber}주차`,
+        title: "Comming soon~",
+        tasks: [],
+      },
+    ]);
+  };
+
+  const handleAddTaskToWeek = (weekIndex, newTask) => {
+    const updated = [...assignmentsByWeek];
+    updated[weekIndex].tasks.push(newTask);
+    updated[weekIndex].title = newTask.title;
+    setAssignmentsByWeek(updated);
+  };
 
   return (
     <div className={style.manage_task_container}>
       <div className={style.managetask_wrapper}>
         <Header />
         <div className={style.week_container}>
-          {weekData.map((week, index) => (
+          {assignmentsByWeek.map((week, index) => (
             <div key={index} className={style.week_block}>
-              <button className={style.week_button}>
-                {week.week} {week.title && `  ${week.title}`}
-              </button>
-              <img
-                src="/assets/img/edit.png"
-                alt="edit"
-                className={style.edit_icon}
+              <button
+                className={style.week_button}
                 onClick={() => handleEditClick(index)}
-              />
+              >
+                {week.week} {week.title}
+              </button>
             </div>
           ))}
         </div>
-        <img className={style.plus} src="assets/img/plus.svg"></img>
+        <img
+          className={style.plus}
+          src="/assets/img/plus.svg"
+          onClick={handleAddWeek}
+          alt="Add"
+        />
       </div>
+
       {showModal && (
         <TaskModal
-          weekInfo={weekData[selectedWeekIndex]}
+          weekInfo={assignmentsByWeek[selectedWeekIndex]}
           onClose={closeModal}
+          onSubmit={(newTask) => {
+            handleAddTaskToWeek(selectedWeekIndex, newTask);
+            closeModal();
+          }}
         />
       )}
     </div>
   );
 };
+
 export default ManageTask;