Merge pull request #48 from INU-Software-Design/feature/student-record-page

🐛 fix: 다른 반으로 변경 시 적용되지 않던 버그 수정

Author: JaeHyun10-03

src/components/shared/StudentFilter.tsx

@@ -1,5 +1,6 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useEffect } from "react";
 import useStudentFilterStore from "@/store/student-filter-store";
+import axios from "axios";
 
 interface SelectInputProps {
   value: string;
@@ -13,6 +14,33 @@ export default function StudentFilter(): React.ReactElement {
   const classOptions: string[] = useMemo(() => Array.from({ length: 10 }, (_, i) => (i + 1).toString()), []);
   const numberOptions: string[] = useMemo(() => Array.from({ length: 30 }, (_, i) => (i + 1).toString()), []);
 
+  const setStudentFilter = useStudentFilterStore.setState;
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+
+    const getStudentList = async () => {
+      try {
+        const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_DOMAIN}/teachers/students`, {
+          headers: { Authorization: `Bearer ${accessToken}` },
+        });
+        const data = res.data.response;
+        // ✅ 상태를 한 번에 업데이트
+        setStudentFilter({
+          grade: data.grade,
+          classNumber: data.classNum,
+          studentNumber: data.students[0]?.number?.toString() ?? "1",
+          studentId: data.students[0]?.studentId ?? "1",
+          isReady: true,
+        });
+      } catch (error) {
+        alert(`존재하지 않는 데이터입니다:${error}`);
+        console.error("학생 목록 가져오기 오류:", error);
+      }
+    };
+
+    getStudentList();
+  }, []);
+
   const { grade, classNumber, studentNumber, setGrade, setClassNumber, setStudentNumber } = useStudentFilterStore();
 
   const handleGradeChange = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => setGrade(event.target.value), []);
@@ -42,4 +70,4 @@ export default function StudentFilter(): React.ReactElement {
       <SelectInput value={studentNumber} onChange={handleNumberChange} options={numberOptions} label="번" />
     </div>
   );
-}
+}

src/components/shared/StudentList.tsx

@@ -1,10 +1,12 @@
+import useSelectedDate from "@/store/selected-date-store";
 import useStudentFilterStore from "@/store/student-filter-store";
 import axios from "axios";
 import React, { useEffect, useMemo, useState } from "react";
 
 export default function StudentList() {
   const setStudentFilter = useStudentFilterStore.setState;
   const { grade, classNumber, studentNumber, setStudentNumber, setStudentId } = useStudentFilterStore();
+  const { year } = useSelectedDate();
 
   const [studentList, setStudentList] = useState([]);
 
@@ -13,7 +15,7 @@ export default function StudentList() {
 
     const getStudentList = async () => {
       try {
-        const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_DOMAIN}/teachers/students`, {
+        const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_DOMAIN}/teachers/students?year=${year}&grade=${grade}&classNum=${classNumber}`, {
           headers: { Authorization: `Bearer ${accessToken}` },
         });
         const data = res.data.response;
@@ -34,7 +36,7 @@ export default function StudentList() {
     };
 
     getStudentList();
-  }, []);
+  }, [grade, classNumber, studentNumber]);
 
   const currentList = useMemo(() => {
     return studentList;
@@ -66,4 +68,4 @@ export default function StudentList() {
       )}
     </div>
   );
-}
+}

src/components/student-record/Modal.tsx

@@ -5,41 +5,86 @@ import axios from "axios";
 interface ModalProps {
   name: string;
   onClose: () => void;
+  scoreSummaryId: number;
 }
 
-export default function Modal({ name, onClose }: ModalProps) {
+export default function Modal({ name, onClose, scoreSummaryId }: ModalProps) {
   const [feedback, setFeedback] = useState("");
+  const [initialFeedback, setInitialFeedback] = useState<string | null>(null);
 
   useEffect(() => {
     const token = localStorage.getItem("accessToken");
     const getFeedback = async () => {
       try {
-        const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_DOMAIN}`, {
-          headers: { Authorization: `Bearer ${token}` },
-        });
-        const data = res.data;
-        console.log(data);
-        // 초기 피드백 데이터를 여기서 넣고 싶으면:
-        // setFeedback(data.feedback);
+        const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_DOMAIN}/score-summary/feedback/${scoreSummaryId}`, { headers: { Authorization: `Bearer ${token}` } });
+        const feedbackData = res.data.response.feedback;
+        setInitialFeedback(feedbackData);
+        setFeedback(feedbackData || ""); // null이면 빈 문자열로
       } catch (err) {
-        console.error(err);
+        console.error("피드백 불러오기 실패:", err);
       }
     };
     getFeedback();
-  }, []);
+  }, [scoreSummaryId]);
+
+  const token = localStorage.getItem("accessToken");
+
+  const postFeedback = async () => {
+    try {
+      const res = await axios.post(
+        `${process.env.NEXT_PUBLIC_BACKEND_DOMAIN}/score-summary/feedback`,
+        {
+          scoreSummaryId,
+          feedback,
+        },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      console.log("POST 성공:", res.data);
+    } catch (err) {
+      console.error("POST 실패:", err);
+    }
+  };
+
+  const putFeedback = async () => {
+    try {
+      const res = await axios.put(
+        `${process.env.NEXT_PUBLIC_BACKEND_DOMAIN}/score-summary/feedback/${scoreSummaryId}`,
+        { feedback },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      console.log("PUT 성공:", res.data);
+    } catch (err) {
+      console.error("PUT 실패:", err);
+    }
+  };
+
+  const handleSave = async () => {
+    // 변경 사항 없으면 요청 없이 닫기
+    if (feedback === (initialFeedback ?? "")) {
+      onClose();
+      return;
+    }
+
+    if (initialFeedback === null) {
+      await postFeedback();
+    } else {
+      await putFeedback();
+    }
+    onClose();
+  };
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50" onClick={onClose}>
       <div className="flex flex-col bg-white p-6 rounded shadow-lg w-[600px] min-h-[300px] z-100" onClick={(e) => e.stopPropagation()}>
         <h2 className="text-xl font-bold mb-2">{name}</h2>
         <div className="flex flex-col justify-between h-80">
           <textarea
-            className="w-full h-full resize-none border border-gray-300 rounded p-2 select-none"
+            className="w-full h-full resize-none border border-gray-300 rounded p-2"
             placeholder="피드백을 작성해주세요"
             value={feedback}
             onChange={(e) => setFeedback(e.target.value)}
           />
-          <Button className="mt-4 h-12" onClick={onClose}>
+          <Button className="mt-4 h-12" onClick={handleSave}>
             닫기
           </Button>
         </div>

src/components/student-record/category/Grade.tsx

@@ -10,7 +10,6 @@ export default function Grade() {
   const [dataList, setDataList] = useState<any[]>([]);
   const [modalOpen, setModalOpen] = useState<boolean[]>([]);
   const { grade, classNumber, studentNumber } = useStudentFilterStore();
-
   useEffect(() => {
     const token = localStorage.getItem("accessToken");
 
@@ -45,6 +44,7 @@ export default function Grade() {
             석차등급: `${subject.grade}등급`,
             석차: `${subject.rank}등`,
             피드백: subject.feedback || "",
+            scoreSummaryId: subject.scoreSummaryId,
           };
         });
 
@@ -90,7 +90,7 @@ export default function Grade() {
           <Cell>{data.석차등급}</Cell>
           <Cell>{data.석차}</Cell>
 
-          {modalOpen[index] && <Modal name={data.name} onClose={() => closeModal(index)} />}
+          {modalOpen[index] && <Modal scoreSummaryId={data.scoreSummaryId} name={data.name} onClose={() => closeModal(index)} />}
         </div>
       ))}
       {/* 전체 과목차트 */}