[add]: ManageTask + Modal form UI까지

frontend/src/components/TaskModal.jsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import styles from "../pages/admin/ManageTask.module.css";
+
+const TaskModal = ({ weekInfo, onClose }) => {
+  const [topic, setTopic] = useState("");
+  const [day, setDay] = useState("");
+  const [taskList, setTaskList] = useState([""]);
+
+  const handleTaskChange = (index, value) => {
+    const newTasks = [...taskList];
+    newTasks[index] = value;
+    setTaskList(newTasks);
+  };
+
+  const handleAddTask = () => {
+    setTaskList([...taskList, ""]);
+  };
+
+  return (
+    <div className={styles.modal_overlay}>
+      <div className={styles.modal}>
+        <div className={styles.modal_header}>
+          <h3>{weekInfo.week}</h3>
+          <button className={styles.close_button} onClick={onClose}>
+            ×
+          </button>
+        </div>
+        <div className={styles.modal_body}>
+          <label>주제:</label>
+          <input
+            placeholder="주제를 입력하세요."
+            value={topic}
+            onChange={(e) => setTopic(e.target.value)}
+          />
+          <label>요일:</label>
+          <input
+            placeholder="요일을 입력하세요."
+            value={day}
+            onChange={(e) => setDay(e.target.value)}
+          />
+          <label>과제:</label>
+          {taskList.map((task, i) => (
+            <input
+              key={i}
+              placeholder="과제를 입력하세요."
+              value={task}
+              onChange={(e) => handleTaskChange(i, e.target.value)}
+            />
+          ))}
+          <button onClick={handleAddTask} className={styles.add_button}>
+            +
+          </button>
+        </div>
+        <div className={styles.modal_footer}>
+          <button className={styles.save_button}>save</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskModal;

frontend/src/pages/admin/ManageStudent.module.css

@@ -21,11 +21,14 @@
   color: white;
   padding: 15px;
   border-radius: 8px;
-  border: 1px solid #39ff14;
+  border: 1px solid var(--fill-gray);
   text-align: left;
   font-size: 16px;
   width: 100%;
 }
+.student_button:hover {
+  border: 1px solid #39ff14;
+}
 .pagination {
   margin-top: 60px;
   display: flex;

frontend/src/pages/admin/ManageTask.jsx

@@ -1,10 +1,51 @@
+import { useState } 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: [] },
+];
 
 const ManageTask = () => {
+  const [selectedWeekIndex, setSelectedWeekIndex] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+
+  const handleEditClick = (index) => {
+    setSelectedWeekIndex(index);
+    setShowModal(true);
+  };
+
+  const closeModal = () => setShowModal(false);
+
   return (
     <div className={style.managetask_wrapper}>
       <Header />
+      <div className={style.week_container}>
+        {weekData.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}
+              onClick={() => handleEditClick(index)}
+            />
+          </div>
+        ))}
+      </div>
+      {showModal && (
+        <TaskModal
+          weekInfo={weekData[selectedWeekIndex]}
+          onClose={closeModal}
+        />
+      )}
     </div>
   );
 };

frontend/src/pages/admin/ManageTask.module.css

@@ -4,3 +4,103 @@
   flex-direction: column;
   align-items: center;
 }
+.week_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.week_block {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  width: 100%;
+  justify-content: center;
+}
+.week_button {
+  background-color: #444;
+  color: white;
+  padding: 14px 16px;
+  border: none;
+  border-radius: 8px;
+  min-width: 250px;
+  margin-right: 8px;
+  font-size: 16px;
+  display: flex;
+  justify-content: flex-start;
+}
+.edit_icon {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+.modal_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal {
+  background-color: #333;
+  border: 1px solid #4fff24;
+  border-radius: 12px;
+  padding: 20px;
+  width: 300px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.modal_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+.close_button {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+  position: absolute;
+  left: 130px;
+}
+.modal_body {
+  width: 90%;
+}
+.modal_body label {
+  margin-block: 10px;
+  display: block;
+}
+.modal_body input {
+  width: 100%;
+  padding: 6px;
+  margin-bottom: 8px;
+  background-color: #555;
+  border: none;
+  border-radius: 4px;
+  color: white;
+}
+.add_button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: white;
+  cursor: pointer;
+}
+.save_button {
+  margin-top: 10px;
+  padding: 8px 16px;
+  background-color: #666;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  cursor: not-allowed;
+}