[Feat] Connect backend and frontend for Assignment section

frontend/src/Assignment.jsx

@@ -1,61 +1,66 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import WeeklyListBlock from "./components/WeeklyListBlock";
 import Header from "./components/Header";
 import AssignmentInfoBlock from "./components/AssignmentInfoBlock";
 import styles from "./Assignment.module.css";
+import { mapStatus } from "./utils/AssignmentStatus.js";
 
 const Assignment = () => {
-  const weeks = [
-    {
-      label: "2주차 JS개론/웹개론",
-      details: [
-        {
-          day: "화",
-          subject: "Git HTML CSS",
-          tasks: [
-            { label: "제로초 인강", status: "done" },
-            { label: "깃허브 클론 코딩", status: "progress" },
-          ],
-        },
-        {
-          day: "목",
-          subject: "Git HTML CSS",
-          tasks: [
-            { label: "제로초 인강", status: "fail" },
-            { label: "깃허브 클론 코딩", status: "progress" },
-          ],
-        },
-      ],
-    },
-    {
-      label: "3주차 JS개론/웹개론",
-      details: [
-        {
-          day: "화",
-          subject: "Git HTML CSS",
-          tasks: [],
-        },
-      ],
-    },
-  ];
-
-  //Assignment-Info-Block(형광 초록색카드 더미데이터)
-  const cardData = {
-    weekLabel: "3주차",
-    day: "화",
-    tasks: [{ label: "Django girls 과제" }, { label: "Django girls 과제" }],
-  };
+  const [weeks, setWeeks] = useState([]);
+  const [highlightCard, setHighlightCard] = useState(null);
+
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("user"));
+    const userId = user?.id;
+
+    if (!userId) return;
+
+    fetchAssignmentsByUser(userId)
+    .then((weekData) => {
+      const formatted = weekData.map((weekItem) => ({
+        label: `${weekItem.week}주차 ${weekItem.title}`,
+        details: weekItem.days.map((dayItem) => ({
+          day: dayItem.day,
+          subject: weekItem.title,
+          tasks: dayItem.details.map((task) => ({
+            label: task.assignmentName,
+            status: mapStatus(task.status),
+          })),
+        })),
+      }));
+
+        setWeeks(formatted);
+
+        // 형광 카드용 하이라이트 카드 추출 (가장 최근 주차 + 첫 요일)=>운영진용 페이지 만든 후 수정필요
+        // 운영진이 가장 최근 공개한 과제로.
+        if (formatted.length > 0 && formatted[0].details.length > 0) {
+          const first = formatted[0];
+          const firstDay = first.details[0];
+
+          setHighlightCard({
+            weekLabel: first.label,
+            day: firstDay.day,
+            tasks: firstDay.tasks,
+          });
+        }
+      })
+      .catch(() => {
+        alert("과제 정보를 불러오지 못했습니다.");
+      });
+  }, []);
 
   return (
     <div className={styles.assignment_page}>
       <Header />
-      <div className={styles.info}>
-        <AssignmentInfoBlock {...cardData} />
-      </div>
-
+      {highlightCard && (
+        <div className={styles.info}>
+          <AssignmentInfoBlock {...highlightCard} />
+        </div>
+      )}
       <WeeklyListBlock weeks={weeks} />
     </div>
   );
 };
 
 export default Assignment;
+

frontend/src/api/assignment.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export const fetchAssignmentsByUser = async (userId) => {
+  const res = await axios.get(`/api/assignment/${userId}`);
+  return res.data;
+};

frontend/src/components/WeeklyListBlock.jsx

@@ -12,7 +12,7 @@ const WeeklyListBlock = ({ weeks }) => {
   return (
     <div className="weekly-list">
       {weeks.map((week, index) => (
-        <div key={index} className="weekly-item">
+        <div key={`week-${index}`} className="weekly-item">
           <button
             className={`weekly-button ${openIndex === index ? "active" : ""}`}
             onClick={() => toggleOpen(index)}
@@ -27,10 +27,10 @@ const WeeklyListBlock = ({ weeks }) => {
             <div className="week-details">
               {week.details?.map((detail, i) => (
                 <DailyOpenBlock
-                key={i}
-                day={detail.day}
-                subject={detail.subject}
-                tasks={detail.tasks}
+                  key={`day-${i}`}
+                  day={detail.day}
+                  subject={detail.subject}
+                  tasks={detail.tasks}
               />
               ))}
             </div>

frontend/src/utils/AssignmentStatus.js

@@ -0,0 +1,12 @@
+const mapStatus = (status) => {
+  switch (status) {
+    case "SUCCESS":
+      return "done";
+    case "INSUFFICIENT":
+      return "progress";
+    case "FAILURE":
+      return "fail";
+    default:
+      return "";
+  }
+};