Merge pull request #82 from INU-Software-Design/feature/student-parent-page

fix:bug fix

Author: JaeHyun10-03

src/components/student-record/category/Attendance.test.tsx

@@ -1,5 +1,3 @@
-// __tests__/Attendance.test.tsx
-
 import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import Attendance from "@/components/student-record/category/Attendance";
 import axios from "axios";
@@ -20,7 +18,6 @@ jest.mock("@/store/selected-date-store", () => ({
 
 describe("Attendance Component", () => {
   beforeEach(() => {
-    // store mock 설정
     (useStudentFilterStore as unknown as jest.Mock).mockReturnValue({
       grade: 1,
       classNumber: 2,
@@ -40,8 +37,8 @@ describe("Attendance Component", () => {
     jest.clearAllMocks();
   });
 
-  it("출결 데이터를 불러오는 동안 로딩 메시지를 보여준다", async () => {
-    (axios.get as jest.Mock).mockImplementation(() => new Promise(() => {})); // 무한 대기
+  it("출결 데이터를 불러오는 동안 로딩 메시지를 보여준다", () => {
+    (axios.get as jest.Mock).mockImplementation(() => new Promise(() => {}));
 
     render(<Attendance />);
     expect(screen.getByText("출결 통계 데이터를 불러오는 중...")).toBeInTheDocument();
@@ -58,7 +55,6 @@ describe("Attendance Component", () => {
   });
 
   it("출결 통계를 정상적으로 렌더링한다", async () => {
-    // summary
     (axios.get as jest.Mock).mockImplementation((url: string) => {
       if (url.includes("/summary")) {
         return Promise.resolve({
@@ -88,11 +84,9 @@ describe("Attendance Component", () => {
     });
 
     render(<Attendance />);
-    await waitFor(() => {
-      expect(screen.getByText("출석")).toBeInTheDocument();
-      expect(screen.getByText("20")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("피드백 내용")).toBeInTheDocument();
-    });
+    expect(await screen.findByText("출석")).toBeInTheDocument();
+    expect(screen.getByText("20")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("피드백 내용")).toBeInTheDocument();
   });
 
   it("피드백이 없을 때 새 피드백을 저장한다 (POST)", async () => {
@@ -133,11 +127,15 @@ describe("Attendance Component", () => {
     });
 
     render(<Attendance />);
-    await waitFor(() => screen.getByText("저장"));
+
+    const editButton = await screen.findByText("수정");
+    fireEvent.click(editButton);
 
     const textarea = screen.getByRole("textbox");
     fireEvent.change(textarea, { target: { value: "새로운 피드백입니다." } });
-    fireEvent.click(screen.getByText("저장"));
+
+    const saveButton = screen.getByText("저장");
+    fireEvent.click(saveButton);
 
     await waitFor(() => {
       expect(axios.post).toHaveBeenCalled();
@@ -177,11 +175,15 @@ describe("Attendance Component", () => {
     (axios.put as jest.Mock).mockResolvedValue({});
 
     render(<Attendance />);
-    await waitFor(() => screen.getByText("저장"));
+
+    const editButton = await screen.findByText("수정");
+    fireEvent.click(editButton);
 
     const textarea = screen.getByRole("textbox");
     fireEvent.change(textarea, { target: { value: "수정된 피드백" } });
-    fireEvent.click(screen.getByText("저장"));
+
+    const saveButton = screen.getByText("저장");
+    fireEvent.click(saveButton);
 
     await waitFor(() => {
       expect(axios.put).toHaveBeenCalled();

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

@@ -24,6 +24,7 @@ export default function Attendance() {
   const [feedback, setFeedback] = useState("");
   const [feedbackId, setFeedbackId] = useState("");
   const [saveMessage, setSaveMessage] = useState("");
+  const [isEditing, setIsEditing] = useState(false);
 
   const token = localStorage.getItem("accessToken");
 
@@ -62,9 +63,9 @@ export default function Attendance() {
         setFeedbackId(data.feedbackId);
       } catch (err) {
         console.error("출결 피드백 조회 에러:", err);
-        setFeedback(""); // 피드백 초기화
-        setFeedbackId(""); // 피드백 ID 초기화
-        setSaveMessage(""); // ✅ 이전 저장 메시지 제거
+        setFeedback("");
+        setFeedbackId("");
+        setSaveMessage("");
       }
     };
     getAttendancesFeedback();
@@ -99,22 +100,27 @@ export default function Attendance() {
           headers: { Authorization: `Bearer ${token}` },
         }
       );
-      const data = res.data;
-      console.log("put feedback:", data);
+      console.log(res);
       setSaveMessage("피드백이 수정되었습니다.");
     } catch (err) {
       console.error("출결 피드백 수정 에러:", err);
       setSaveMessage("피드백 수정 중 오류가 발생했습니다.");
     }
   };
 
-  const handleSaveFeedback = () => {
-    setSaveMessage(""); // 메시지 초기화
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setSaveMessage("");
+  };
+
+  const handleSaveClick = () => {
+    setSaveMessage("");
     if (feedbackId) {
       putAttendancesFeedback();
     } else {
       postAttendancesFeedback();
     }
+    setIsEditing(false);
   };
 
   const attendanceHeaders = [
@@ -157,10 +163,18 @@ export default function Attendance() {
 
       <div className="flex flex-col mx-4 mt-4">
         <span className="mb-2 font-semibold">출결 피드백</span>
-        <textarea className="border h-48 border-[#a9a9a9] rounded-md p-2 resize-none" value={feedback} onChange={(e) => setFeedback(e.target.value)} />
-        <button className="mt-2 self-end bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" onClick={handleSaveFeedback}>
-          저장
-        </button>
+        <textarea className="border h-48 border-[#a9a9a9] rounded-md p-2 resize-none" value={feedback} onChange={(e) => setFeedback(e.target.value)} disabled={!isEditing} />
+        <div className="mt-2 self-end">
+          {!isEditing ? (
+            <button className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600" onClick={handleEditClick}>
+              수정
+            </button>
+          ) : (
+            <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" onClick={handleSaveClick}>
+              저장
+            </button>
+          )}
+        </div>
         {saveMessage && <p className="text-sm text-green-600 mt-1 self-end">{saveMessage}</p>}
       </div>
     </div>