From a47a7bd48d9bd4807df9de79f8fda653b72a1a3d Mon Sep 17 00:00:00 2001
From: Jiwoo Ahn <ilp_rincipe@naver.com>
Date: Sat, 18 May 2024 21:06:46 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20display=20online=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aeye/app/(nav)/layout.tsx        | 12 +++++++----
 aeye/app/interfaces/profile.ts   |  7 ++++++
 aeye/app/onlineUserSpeedDial.tsx | 37 ++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 aeye/app/onlineUserSpeedDial.tsx

diff --git a/aeye/app/(nav)/layout.tsx b/aeye/app/(nav)/layout.tsx
index 66ed292..d895473 100644
--- a/aeye/app/(nav)/layout.tsx
+++ b/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 />
+    </>
   );
 }
diff --git a/aeye/app/interfaces/profile.ts b/aeye/app/interfaces/profile.ts
index 7929f9f..5ed2488 100644
--- a/aeye/app/interfaces/profile.ts
+++ b/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";
+};
diff --git a/aeye/app/onlineUserSpeedDial.tsx b/aeye/app/onlineUserSpeedDial.tsx
new file mode 100644
index 0000000..bd1c6ae
--- /dev/null
+++ b/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>
+  );
+}