README.md

@@ -5,6 +5,8 @@
 GitLab Pages를 통해 자동으로 빌드 및 배포 되고 있습니다.  
 [https://thiefsil.ajousw.kr](https://thiefsil.ajousw.kr)
 
+![대시보드_화면](https://git.ajou.ac.kr/-/project/14841/uploads/baa8bd062d24243cb307fc2f809e88dd/%EB%8C%80%EC%8B%9C%EB%B3%B4%EB%93%9C_%ED%99%94%EB%A9%B4.png)
+
 ## 주요 기능
 
 - 실시간 충전기 주차 상태 모니터링

src/pages/Home.tsx

@@ -21,6 +21,8 @@ export default function Home() {
   const { wsUrl } = useServer();
 
   useEffect(() => {
+    if (!wsUrl) return;
+
     const ws = new WebSocket(`${wsUrl}/ws/list`);
 
     ws.onopen = () => {
@@ -43,10 +45,6 @@ export default function Home() {
       console.error('WebSocket error:', error);
     };
 
-    ws.onclose = () => {
-      console.log('WebSocket connection closed');
-    };
-
     const dummyWs = new WebSocket(`${wsUrl}/ws/charger`);
     let intervalId: NodeJS.Timeout;
 
@@ -65,7 +63,7 @@ export default function Home() {
       dummyWs.send(`${chargerNumber}-PARK`);
       await delay(500);
 
-      dummyWs.send(`${chargerNumber}-d1`);
+      dummyWs.send(`${chargerNumber}-dA5D9C0B0`);
       await delay(500);
 
       intervalId = setInterval(() => {
@@ -83,8 +81,13 @@ export default function Home() {
     };
 
     return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+
       try {
         ws.close();
+        console.log('WebSocket connection(list) closed');
       } catch {
         console.error('WebSocket connection already closed');
       }
@@ -93,14 +96,11 @@ export default function Home() {
         if (dummyWs.readyState === WebSocket.OPEN) {
           dummyWs.send(`${chargerNumber}-EXIT`);
           dummyWs.close();
+          console.log('WebSocket connection(charger) closed');
         }
       } catch {
         console.error('WebSocket connection already closed');
       }
-
-      if (intervalId) {
-        clearInterval(intervalId);
-      }
     };
   }, [wsUrl]);
 

src/pages/Root.tsx

@@ -9,7 +9,7 @@ export default function Root() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="flex sticky top-0 bg-white h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="flex sticky top-0 bg-white h-16 shrink-0 items-center gap-2 border-b px-4 z-10">
           <SidebarTrigger className="-ml-1" />
           <Separator orientation="vertical" className="mr-2 h-4" />
           <Link to="/" className="text-lg md:text-base font-semibold whitespace-nowrap">

src/pages/Users.tsx

@@ -7,6 +7,7 @@ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@
 interface User {
   id: number;
   name: string;
+  uid: string;
   email: string;
 }
 
@@ -43,6 +44,7 @@ export default function Users() {
               <TableRow>
                 <TableHead className="w-16 text-center">ID</TableHead>
                 <TableHead className="w-32 text-center">이름</TableHead>
+                <TableHead className="w-48 text-center">RFID UID</TableHead>
                 <TableHead>이메일</TableHead>
               </TableRow>
             </TableHeader>
@@ -51,6 +53,7 @@ export default function Users() {
                 <TableRow key={user.id}>
                   <TableCell className="text-center">{user.id}</TableCell>
                   <TableCell className="text-center">{user.name}</TableCell>
+                  <TableCell className="text-center">{user.uid}</TableCell>
                   <TableCell>{user.email}</TableCell>
                 </TableRow>
               ))}