새로고침이나 페이지 진입시 기존 출석코드 만료

frontend/src/components/Header.jsx

@@ -50,9 +50,7 @@ const Header = () => {
             height={30}
           />
         </button>
-      ) : (
-        <div style={{ width: "30px" }} />
-      )}
+      ) : null}
       {showRightMagageStudent ? (
         <button
           className="icon-button"

frontend/src/components/componentsCss/Header.css

@@ -5,9 +5,10 @@
   display: flex;
   align-items: center;
   width: 390px;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding: 1rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  gap: 100px;
+  box-shadow: 0 2px 4px #0003;
   margin: 10px;
 }
 

frontend/src/pages/admin/AttendanceCode.jsx

@@ -1,11 +1,33 @@
-import { useState } from "react";
 import api from "../../api/api";
 import Header from "../../components/Header";
 import style from "./AttendanceCode.module.css";
+import { useState, useEffect } from "react";
 
 const AttendanceCode = () => {
   const [code, setCode] = useState("");
 
+  useEffect(() => {
+    const expireIfNeeded = async () => {
+      try {
+        const res = await api.get("admin/attendance/active-code");
+        const activeCode = res.data.data.code;
+
+        await api.put("admin/attendance/expire", null, {
+          params: { code: activeCode },
+        });
+
+        console.log("기존 출석코드 자동 만료됨");
+      } catch (error) {
+        if (error.response?.status !== 404) {
+          alert(
+            "초기화 중 오류: " + (error.response?.data?.message || "서버 오류")
+          );
+        }
+      }
+    };
+
+    expireIfNeeded();
+  }, []);
   // 출석코드 생성
   const generateCode = async () => {
     try {