[add]: Attendacne page, InputBlock 컴포넌트 수정

frontend/src/Attendance.jsx

@@ -1,9 +1,43 @@
+import { useState } from "react";
+import Header from "./components/Header";
+import InputBlock from "./components/InputBlock";
+import styles from "./Attendance.module.css";
+
 const Attendance = () => {
+  const [attendanceCode, setAttendanceCode] = useState([""]);
+  const handleChange = (index, value) => {
+    // 숫자만 입력 허용
+    if (/^\d*$/.test(value)) {
+      const userCodes = [...attendanceCode];
+      userCodes[index] = value;
+      setAttendanceCode(userCodes);
+    }
+  };
+  const handleSubmit = () => {
+    console.log("제출된 출석 코드: ", attendanceCode[0]);
+    // 서버 요청 등 추가 작업
+  };
+
   return (
-    <div>
-      <h1>Attendance</h1>
-      <p>Attendance page content goes here.</p>
+    <div className={styles.attendance_page}>
+      <Header />
+      <InputBlock
+        inputs={[
+          {
+            type: "text",
+            placeholder: "출석코드를 입력하세요.",
+          },
+        ]}
+        values={attendanceCode}
+        onChange={handleChange}
+      />
+      {attendanceCode[0].length === 4 && (
+        <button className={styles.submitBtn} onClick={handleSubmit}>
+          Submit
+        </button>
+      )}
     </div>
   );
 };
+
 export default Attendance;

frontend/src/Attendance.module.css

@@ -0,0 +1,17 @@
+.attendance_page {
+  background-color: "black";
+  height: "100vh";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.submitBtn {
+  background-color: #ffffff;
+  opacity: 42%;
+  border-radius: 10px;
+  position: absolute;
+  top: 109px;
+  right: 63px;
+  padding: 7px;
+}

frontend/src/components/Header.jsx

@@ -1,35 +1,44 @@
-import React from 'react';
-import { useNavigate, useLocation  } from 'react-router-dom';
-import { ArrowLeft, Wallet } from 'lucide-react';
-import './componentsCss/Header.css';
-import arrowIcon from '../assets/img/arrowicon.svg';
-import moneyIcon from '../assets/img/moneyicon.svg';
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { ArrowLeft, Wallet } from "lucide-react";
+import "./componentsCss/Header.css";
+import arrowIcon from "../assets/img/arrowicon.svg";
+import moneyIcon from "../assets/img/moneyicon.svg";
 const Header = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const path = location.pathname;
 
   let title = "ATTENDANCE\nCHECK";
-  if (path.includes('assignment')) title = "ASSIGNMENT\nCHECK";
-  else if (path.includes('deposit')) title = "DEPOSIT";
+  if (path.includes("assignment")) title = "ASSIGNMENT\nCHECK";
+  else if (path.includes("deposit")) title = "DEPOSIT";
+  else if (path.includes("attendance")) title = "ATTENDANCE\nCHECK";
 
-  const showRightButton = !path.includes('deposit');
+  const showRightButton = !path.includes("deposit");
 
   return (
     <header className="header-container">
-      <button className="icon-button" onClick={() => navigate(-1)} aria-label="뒤로가기">
+      <button
+        className="icon-button"
+        onClick={() => navigate(-1)}
+        aria-label="뒤로가기"
+      >
         <img src={arrowIcon} alt="Back" width={34} height={34} />
       </button>
       <h1 className="header-title">{title}</h1>
       {showRightButton ? (
-        <button className="icon-button" onClick={() => navigate('/deposit')} aria-label="보증금 페이지 이동">
-      <img src={moneyIcon} alt="Deposit" width={30} height={30} />
+        <button
+          className="icon-button"
+          onClick={() => navigate("/deposit")}
+          aria-label="보증금 페이지 이동"
+        >
+          <img src={moneyIcon} alt="Deposit" width={30} height={30} />
         </button>
       ) : (
-        <div style={{ width: '30px' }} /> // 오른쪽 공백 유지
+        <div style={{ width: "30px" }} /> // 오른쪽 공백 유지
       )}
     </header>
   );
 };
 
-export default Header;
+export default Header;

frontend/src/components/InputBlock.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "./componentsCss/InputBlock.css";
 
-const InputBlock = ({ inputs, onChange }) => {
+const InputBlock = ({ inputs, onChange, values }) => {
   return (
     <div className="inputBlock">
       {inputs.map((input, index) => (
@@ -10,6 +10,7 @@ const InputBlock = ({ inputs, onChange }) => {
           className="inputTag"
           type={input.type}
           placeholder={input.placeholder}
+          value={values[index] || ""}
           onChange={(e) => onChange && onChange(index, e.target.value)}
         />
       ))}