From 7bce5b12fbadd1ee620509ca2f0f495e350d0616 Mon Sep 17 00:00:00 2001
From: qkrxogmla <suk05553@naver.com>
Date: Sat, 17 May 2025 04:06:45 +0900
Subject: [PATCH] =?UTF-8?q?=20=EC=B6=9C=EC=84=9D=EC=BD=94=EB=93=9C=20api?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/admin/AttendanceCode.jsx   | 55 +++++++++++++++++--
 .../src/pages/admin/AttendanceCode.module.css | 17 +++++-
 frontend/src/pages/generation/Deposit.jsx     |  1 -
 3 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/admin/AttendanceCode.jsx b/frontend/src/pages/admin/AttendanceCode.jsx
index 6e18188..79e0002 100644
--- a/frontend/src/pages/admin/AttendanceCode.jsx
+++ b/frontend/src/pages/admin/AttendanceCode.jsx
@@ -1,17 +1,60 @@
+import { useState } from "react";
+import api from "../../api/api";
 import Header from "../../components/Header";
 import style from "./AttendanceCode.module.css";
+
 const AttendanceCode = () => {
+  const [code, setCode] = useState("");
+
+  // 출석코드 생성
+  const generateCode = async () => {
+    try {
+      const res = await api.post("/attendance/start");
+      const newCode = res.data.data.code;
+      setCode(newCode);
+    } catch (error) {
+      alert(
+        "출석코드 생성 실패: " + (error.response?.data?.message || "서버 오류")
+      );
+    }
+  };
+
+  // 출석코드 만료
+  const expireCode = async () => {
+    try {
+      const res = await api.put("/attendance/expire-latest");
+      alert(res.data.message || "출석코드가 만료되었습니다");
+      setCode("");
+    } catch (error) {
+      alert(
+        "출석코드 만료 실패: " + (error.response?.data?.message || "서버 오류")
+      );
+    }
+  };
+
   return (
-    <div className={style.attendancecode_wraper}>
+    <div className={style.attendancecode_wrapper}>
       <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>
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className={style.num_wrapper}>
+            {code[i] || ""}
+          </div>
+        ))}
+      </div>
+      <div className={style.button_container}>
+        <button onClick={generateCode} className={style.button}>
+          생성
+        </button>
+
+        {code && (
+          <button onClick={expireCode} className={style.button}>
+            종료
+          </button>
+        )}
       </div>
-      <button className={style.createbutton}>생성</button>
     </div>
   );
 };
+
 export default AttendanceCode;
diff --git a/frontend/src/pages/admin/AttendanceCode.module.css b/frontend/src/pages/admin/AttendanceCode.module.css
index e92a220..09977f1 100644
--- a/frontend/src/pages/admin/AttendanceCode.module.css
+++ b/frontend/src/pages/admin/AttendanceCode.module.css
@@ -3,6 +3,11 @@
   height: 101px;
   background-color: #575757;
   border-radius: 21px;
+  font-size: 50px;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border: 1px solid #a6a6a6;
 }
 .num_container {
@@ -11,18 +16,24 @@
   flex-direction: row;
   gap: 8px;
 }
-.attendancecode_wraper {
+.attendancecode_wrapper {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }
-.createbutton {
+.button {
   width: 60px;
   height: 42px;
   background-color: #575757;
   border-radius: 21px;
-  margin-top: 60px;
   border: 1px solid #a6a6a6;
   color: white;
 }
+.button_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 60px;
+}
diff --git a/frontend/src/pages/generation/Deposit.jsx b/frontend/src/pages/generation/Deposit.jsx
index 8b9c17b..bf231b8 100644
--- a/frontend/src/pages/generation/Deposit.jsx
+++ b/frontend/src/pages/generation/Deposit.jsx
@@ -1,6 +1,5 @@
 import Header from "../../components/Header";
 import styles from "./Deposit.module.css";
-import axios from "axios";
 import { useEffect, useState } from "react";
 import api from "../../api/api";