Merge pull request #32 from KNU-AEYE/31-report-generation-page

31-report-generation-page

aeye/app/(nav)/report/generateButton.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useState } from "react";
+import fetchWithInterception from "@/app/fetchWrapper";
+import Alert from "@mui/material/Alert";
+import CheckIcon from "@mui/icons-material/Check";
+import { Button, Box } from "@mui/material";
+
+export default function GenerateButton() {
+  const [showAlert, setShowAlert] = useState(false);
+
+  const sendRequest = () => {
+    fetchWithInterception("https://api.a-eye.live/email", { method: "POST" })
+      .then((response) => response.json())
+      .then((jsonData) => {
+        if (jsonData.code === 200) {
+          setShowAlert(true);
+          setTimeout(() => {
+            setShowAlert(false);
+          }, 2000); // Hide alert after 1 second
+        }
+        console.log(jsonData);
+      });
+  };
+
+  return (
+    <>
+      {showAlert && (
+        <Alert
+          icon={<CheckIcon fontSize="inherit" />}
+          severity="success"
+          sx={{ marginTop: "5px" }}
+        >
+          이메일이 성공적으로 전송되었습니다.
+        </Alert>
+      )}
+      <Box display="flex" justifyContent="flex-end" mb={2} mt={2}>
+        <Button variant="contained" onClick={sendRequest}>
+          생성하기
+        </Button>
+      </Box>
+    </>
+  );
+}

aeye/app/(nav)/report/page.tsx

@@ -2,7 +2,8 @@
 import * as React from "react";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import Typography from "@mui/material/Typography";
-import { Box } from "@mui/material";
+import { Box, Container } from "@mui/material";
+import GenerateButton from "@/app/(nav)/report/generateButton";
 
 const columns: GridColDef[] = [
   { field: "id", headerName: "ID", width: 70 },
@@ -89,7 +90,7 @@ export default async function Report() {
   }/${today.getFullYear()}`;
 
   return (
-    <>
+    <Container>
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Typography variant="h4" gutterBottom>
           관제일지
@@ -99,6 +100,7 @@ export default async function Report() {
         </Typography>
       </Box>
       <DataTable />
-    </>
+      <GenerateButton />
+    </Container>
   );
 }

aeye/app/recoil-states.ts

@@ -15,4 +15,4 @@ const selectedTagsState = atom<string[]>({
   default: [],
 });
 
-export { searchQueryState, memberState, selectedTagsState };
+export { searchQueryState, memberState, selectedTagsState };