Merge pull request #142 from pirogramming/frontend_km

[add]: DetailManageStudent UI 추가

Author: NamKyeongMin

frontend/src/pages/admin/DetailManageStudent.jsx

@@ -32,11 +32,25 @@ const DetailManageStudent = () => {
       <Header />
       <div className={style.under_header}>
         <div className={style.student_card}>
-          <h2>{student.name}</h2>
-          <p>잔여 보증금: {student.deposit}원</p>
-          <p>보증금 방어권: {student.defence}</p>
+          <h2 className={style.student_name}>{student.name}</h2>
+          <div className={style.deposit_container}>
+            <p>
+              잔여 보증금: <p>{student.deposit}원</p>
+            </p>
+          </div>
+          <div className={style.defence_container}>
+            <p>
+              보증금 방어권: <p>{student.defence}</p>
+            </p>
+          </div>
         </div>
-
+        <button
+          key={student.id || index}
+          className={style.attendance_btn}
+          onClick={() => navigate(`/admin/attendance/${student.id}`)}
+        >
+          출석 관리 <span>&gt;</span>
+        </button>
         <div className={style.assignment_list}>
           {student.assignmentTitles.map((title, idx) => (
             <button key={idx} className={style.assignment_button}>

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

@@ -9,3 +9,37 @@
   flex-direction: column;
   align-items: center;
 }
+.student_card {
+  display: flex;
+  background: #49ff24;
+  flex-direction: column;
+  border-radius: 9px;
+  padding: 15px 20px;
+  width: 300px;
+  height: 150px;
+  justify-content: space-around;
+}
+.student_name {
+  font-size: 25px;
+  font-weight: 700;
+}
+.deposit_container,
+.defence_container {
+  display: flex;
+  justify-content: space-between;
+  font-size: 20px;
+  font-weight: 500;
+}
+.attendance_btn {
+  border: 1px solid #49ff24;
+  border-radius: 9px;
+  width: 300px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #333;
+  color: #49ff24;
+  padding: 15px;
+  text-align: left;
+}