출석코드 디자인 완성

frontend/src/App.jsx

@@ -15,6 +15,7 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<AttendanceCode />} />
         <Route path="/" element={<Intro />} />
         <Route path="/login" element={<Login />} />
         <Route path="/home" element={<Home />} />
@@ -24,7 +25,6 @@ function App() {
         <Route path="/admin" element={<Admin />} />
         <Route path="/magagestudent" element={<MagageStudent />} />
         <Route path="/magagetask" element={<ManageTask />} />
-        <Route path="/attendancecode" element={<AttendanceCode />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/components/Header.jsx

@@ -10,8 +10,12 @@ const Header = () => {
   if (path.includes("assignment")) title = "ASSIGNMENT\nCHECK";
   else if (path.includes("deposit")) title = "DEPOSIT";
   else if (path.includes("attendance")) title = "ATTENDANCE\nCHECK";
+  else if (path.includes("magagestudent")) title = "수강생관리";
+  else if (path.includes("magagetask")) title = "과제 관리";
+  else if (path.includes("attendancecode")) title = "출석코드 생성";
 
-  const showRightButton = !path.includes("deposit");
+  const showRightDeposit = !path.includes("deposit");
+  const showRightMagageStudent = path.includes("attendancecode");
 
   return (
     <header className="header-container">
@@ -28,7 +32,7 @@ const Header = () => {
         />
       </button>
       <h1 className="header-title">{title}</h1>
-      {showRightButton ? (
+      {showRightDeposit ? (
         <button
           className="icon-button"
           onClick={() => navigate("/deposit")}
@@ -44,6 +48,20 @@ const Header = () => {
       ) : (
         <div style={{ width: "30px" }} />
       )}
+      {showRightMagageStudent ? (
+        <button
+          className="icon-button"
+          onClick={() => navigate("/managestudent")}
+          aria-label="수강생 관리 페이지 이동"
+        >
+          <img
+            src="/assets/img/managestudent.svg"
+            alt="MagageStudent"
+            width={30}
+            height={30}
+          />
+        </button>
+      ) : null}
     </header>
   );
 };

frontend/src/pages/admin/AttendanceCode.jsx

@@ -1,4 +1,17 @@
+import Header from "../../components/Header";
+import style from "./AttendanceCode.module.css";
 const AttendanceCode = () => {
-  return <p>출석코드 생성</p>;
+  return (
+    <div className={style.attendancecode_wraper}>
+      <Header />
+      <div className={style.num_container}>
+        <div className={style.num_wrapper}></div>
+        <div className={style.num_wrapper}></div>
+        <div className={style.num_wrapper}></div>
+        <div className={style.num_wrapper}></div>
+      </div>
+      <button className={style.createbutton}>생성</button>
+    </div>
+  );
 };
 export default AttendanceCode;

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

@@ -0,0 +1,28 @@
+.num_wrapper {
+  width: 73px;
+  height: 101px;
+  background-color: #575757;
+  border-radius: 21px;
+  border: 1px solid #a6a6a6;
+}
+.num_container {
+  margin-top: 130px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+.attendancecode_wraper {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+.createbutton {
+  width: 60px;
+  height: 42px;
+  background-color: #575757;
+  border-radius: 21px;
+  margin-top: 60px;
+  border: 1px solid #a6a6a6;
+  color: white;
+}