Merge pull request #47 from KNU-AEYE/40-접속-중인-관리자-표시

40-접속-중인-관리자-표시

aeye/app/(nav)/layout.tsx

@@ -1,11 +1,15 @@
 import Navbar from "@/app/components/Navbar";
 import { Container } from "@mui/material";
+import OnlineUserSpeedDial from "@/app/onlineUserSpeedDial";
 
 export default function NavLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Container>
-      <Navbar />
-      <div>{children}</div>
-    </Container>
+    <>
+      <Container>
+        <Navbar />
+        <div>{children}</div>
+      </Container>
+      <OnlineUserSpeedDial />
+    </>
   );
 }

aeye/app/interfaces/profile.ts

@@ -8,3 +8,10 @@ type Member = {
   socialLogin: string;
   admin: boolean;
 };
+
+type MemberOnline = {
+  id: 0;
+  name: "string";
+  profileUri: "string";
+  socialLogin: "GOOGLE";
+};

aeye/app/onlineUserSpeedDial.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { SpeedDial, SpeedDialAction } from "@mui/material";
+import PeopleIcon from "@mui/icons-material/People";
+import { useEffect, useState } from "react";
+import fetchWithInterception from "@/app/fetchWrapper";
+
+export default function OnlineUserSpeedDial() {
+  const [users, setUsers] = useState<MemberOnline[]>([]);
+
+  useEffect(() => {
+    fetchWithInterception("https://api.a-eye.live/member/online", {
+      method: "GET",
+    })
+      .then((response) => response.json())
+      .then((jsonData) => setUsers(jsonData.data))
+      .catch((error) => console.error(error));
+  }, []);
+
+  return (
+    <SpeedDial
+      ariaLabel="SpeedDial example"
+      color="primary"
+      sx={{ position: "absolute", bottom: "3vw", right: "5vh" }}
+      icon={<PeopleIcon />}
+    >
+      {users.map((user, index) => (
+        <SpeedDialAction
+          key={index}
+          icon={user.profileUri}
+          tooltipTitle={user.name}
+          onClick={() => console.log(user)}
+        />
+      ))}
+    </SpeedDial>
+  );
+}