admin interface basic functionalities

2026-02-09 10:20:16 +01:00 · 2024-03-26 01:21:26 +01:00
parent 2478ee32ec
commit b23d2a63e6
24 changed files with 1504 additions and 40 deletions
--- a/traque-front/app/admin/layout.js
+++ b/traque-front/app/admin/layout.js
@@ -0,0 +1,12 @@
+import { AdminConnexionProvider } from "@/context/adminConnexionContext";
+import { AdminProvider } from "@/context/adminContext";
+
+export default function AdminLayout({ children}) {
+    return (
+        <AdminConnexionProvider>
+            <AdminProvider>
+                {children}
+            </AdminProvider>
+        </AdminConnexionProvider>
+    )
+}
--- a/traque-front/app/admin/login/page.js
+++ b/traque-front/app/admin/login/page.js
@@ -0,0 +1,17 @@
+"use client";
+import LoginForm from '@/components/team/loginForm'
+import { useAdminConnexion } from '@/context/adminConnexionContext';
+import { redirect } from 'next/navigation';
+import React, { useEffect } from 'react'
+
+export default function AdminLoginPage() {
+    const { login, loggedIn } = useAdminConnexion();
+    useEffect(() => {
+        if (loggedIn) {
+            redirect("/admin");
+        }
+    }, [loggedIn]);
+    return (
+        <LoginForm title="Admin login" placeholder="Admin password" buttonText={"Login"} onSubmit={login} />
+    )
+}
--- a/traque-front/app/admin/page.js
+++ b/traque-front/app/admin/page.js
@@ -0,0 +1,36 @@
+"use client";
+import TeamAddForm from '@/components/admin/teamAdd';
+import TeamEdit from '@/components/admin/teamEdit';
+import TeamList from '@/components/admin/teamList';
+import { useAdminConnexion } from '@/context/adminConnexionContext';
+import useAdmin from '@/hook/useAdmin';
+import { redirect } from 'next/navigation';
+import React, { useEffect, useState } from 'react'
+
+
+export default function Admin() {
+    const [selectedTeamId, setSelectedTeamId] = useState(null);
+    const { loggedIn } = useAdminConnexion();
+    const { addTeam } = useAdmin();
+
+    useEffect(() => {
+        if (!loggedIn) {
+          redirect("/admin/login");
+        }
+    }, [loggedIn]);
+
+
+
+  return (
+      <div className='h-full p-10 flex flex-row justify-between'> 
+        <div className='w-5/12 h-full p-4 shadow-md rounded outline'>
+          <h2 className='text-2xl text-center'>Team list</h2>
+          <TeamAddForm onAddTeam={addTeam}/>
+          <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
+        </div>
+        <div className='w-5/12 h-full p-4 shadow-md rounded outline'>
+          <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>
+        </div>
+      </div>
+  )
+}
--- a/traque-front/app/layout.js
+++ b/traque-front/app/layout.js
@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
+import SocketProvider from "@/context/socketContext";

 const inter = Inter({ subsets: ["latin"] });

@@ -10,7 +11,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
  return (
    <html lang="en">
-      <body className={inter.className + " h-screen"}>{children}</body>
+      <SocketProvider>
+        <body className={inter.className + " h-screen"}>{children}</body>
+      </SocketProvider>
    </html>
  );
 }
--- a/traque-front/app/page.js
+++ b/traque-front/app/page.js
@@ -1,9 +1,13 @@
+"use client"
 import LoginForm from "@/components/team/loginForm";

 export default function Home() {
+  function login(teamId) {
+    console.log(teamId);
+  }
  return (
    <div>
-      <LoginForm />
+      <LoginForm title={"Team login"} placeholder={"team ID"} buttonText={"Login"} onSubmit={login}/>
    </div>
  );
 }
--- a/traque-front/app/track/page.js
+++ b/traque-front/app/track/page.js
@@ -1,7 +1,8 @@
 "use client";
 import Button from '@/components/util/button';
 import dynamic from 'next/dynamic';
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
+import useGame from '../../hook/useGame';

 //Load the map without SSR
 const LiveMap = dynamic(() => import('@/components/team/map'), {
@@ -9,27 +10,13 @@ const LiveMap = dynamic(() => import('@/components/team/map'), {
 });

 export default function Track() {
-    const [currentPosition, setCurrentPosition] = useState([0,0]);
-    const [enemyPosition, setEnemyPosition] = useState([0,0]);
-
-    useEffect(() => {
-        const t = setTimeout(() => {
-            setEnemyPosition([currentPosition[0] + Math.random() / 100, currentPosition[1] + Math.random() / 100]);
-        }, 1000);
-        return () => clearInterval(t);
-    }, [currentPosition]);
-
-    useEffect(() => {
-        navigator.geolocation.watchPosition((position) => {
-            setCurrentPosition([position.coords.latitude, position.coords.longitude]);
-        });
-    }, []);
+    const { currentPosition, enemyPosition, updateCurrentPosition, sendCurrentPosition } = useGame();


    return (
        <div className='h-full flex flex-col justify-between'>
            <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} className="h-4/5" />
-            <Button>Update position</Button>
+            <Button onClick={sendCurrentPosition}>Update position</Button>
            <div className='shadow-lg m-5 p-2 flex flex-col text-center mx-auto w-4/5 rounded'>
                <p className='text-xl text-black'>30min</p>
                <p className='text-gray-700'> before penalty</p>
--- a/traque-front/components/admin/teamAdd.jsx
+++ b/traque-front/components/admin/teamAdd.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import TextInput from '../util/textInput'
+import Button from '../util/button'
+
+export default function TeamAddForm({onAddTeam}) {
+    const [teamName, setTeamName] = React.useState('');
+    function handleSubmit(e) {
+        e.preventDefault();
+        onAddTeam(teamName);
+        setTeamName("")
+    }
+    return (
+        <form className='flex flex-row m-y-5' onSubmit={handleSubmit}>
+            <div className='w-4/5'>
+                <TextInput name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)}/>
+            </div>
+            <div className='w-1/5'>
+                <Button type="submit" className="w-5">+</Button>
+            </div>
+        </form>
+    )
+}
--- a/traque-front/components/admin/teamEdit.jsx
+++ b/traque-front/components/admin/teamEdit.jsx
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react'
+import TextInput from '../util/textInput'
+import Button from '../util/button';
+import useAdmin from '@/hook/useAdmin';
+
+export default function TeamEdit({selectedTeamId, setSelectedTeamId}) {
+    const [newTeamName, setNewTeamName] = React.useState('');
+    const {setTeamName, getTeamName, removeTeam, getTeam} = useAdmin();
+    const [team, setTeam] = useState({})
+
+    useEffect(() => {
+        let team = getTeam(selectedTeamId);
+        if (team != undefined) {
+            setNewTeamName(team.name);
+        }
+    },[selectedTeamId])
+
+    
+    useEffect(() => {
+        let team = getTeam(selectedTeamId);
+        if (team != undefined) {
+            setTeam(team);
+        }
+    }, [selectedTeamId])
+
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        setTeamName(team.id, newTeamName);
+    }
+
+    function handleRemove() {
+        removeTeam(team.id);
+        setSelectedTeamId(null);
+    }
+
+  return (team && 
+    <div className='flex flex-row'>
+        <div className='w-1/2 flex flex-col space-y-3 mx-2'>
+            <h2 className='text-2xl text-center'>Actions</h2>
+            <form className='flex flex-row' onSubmit={handleSubmit}>
+                <div className='w-4/5'>
+                    <TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)}/>
+                </div>
+                <div className='w-2/5'>
+                    <Button type="submit">Rename</Button>
+                </div>
+            </form>
+            <Button onClick={handleRemove}>Eliminate</Button>
+        </div>
+        <div className='w-1/2 flex flex-col space-y-2 mx-2'>
+            <h2 className='text-2xl text-center'>Team details</h2>
+            <div>
+                <p>Secret : {team.id}</p>
+                <p>Name : {team.name}</p>
+                <p>Chasing : {getTeamName(team.chasing)}</p>
+                <p>Chased by : {getTeamName(team.chased)}</p>
+            </div>
+        </div>
+    </div>
+  )
+}
--- a/traque-front/components/admin/teamList.jsx
+++ b/traque-front/components/admin/teamList.jsx
@@ -0,0 +1,63 @@
+"use client";
+import useAdmin from '@/hook/useAdmin';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import React from 'react'
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+function TeamListItem({ team, index, onSelected, itemSelected }) {
+    const classNames = 'w-full p-3 m-3 shadow ' + (itemSelected ? "bg-blue-400" : "bg-gray-100");
+    return (
+        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+            {provided => (
+                <div className={classNames} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                    <p className='text-center'>{team.name}</p>
+                </div>
+
+            )}
+        </Draggable>
+    )
+}
+
+export default function TeamList({selectedTeamId, onSelected}) {
+    const {teams, reorderTeams} = useAdmin();
+    function onDragEnd(result) {
+        if (!result.destination) {
+            return;
+        }
+
+        if (result.destination.index === result.source.index) {
+            return;
+        }
+
+        const newTeams = reorder(
+            teams,
+            result.source.index,
+            result.destination.index
+        );
+
+        reorderTeams(newTeams);
+    }
+    return (
+        <DragDropContext onDragEnd={onDragEnd} >
+            <Droppable droppableId='team-list'>
+                {provided => (
+                    <ul  ref={provided.innerRef} {...provided.droppableProps}>
+                        {teams.map((team, i) => (
+                            <li key={team.id} onClick={() => onSelected(team.id)}>
+                                <TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} />
+                            </li>
+                        ))}
+                        {provided.placeholder}
+                    </ul>
+                )}
+            </Droppable>
+        </DragDropContext>
+    )
+}
--- a/traque-front/components/team/loginForm.jsx
+++ b/traque-front/components/team/loginForm.jsx
@@ -1,12 +1,20 @@
+"use client";
+import { useState } from "react";
 import Button from "../util/button";
 import TextInput from "../util/textInput";

-export default function LoginForm() {
+export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
+    const [value, setValue] = useState("");
+    function handleSubmit(e) {
+        e.preventDefault();
+        setValue("");
+        onSubmit(value);
+    }
    return (
-        <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4">
-            <h1 className="text-2xl font-bold text-center text-gray-700">Connexion équipe</h1>
-            <TextInput placeholder="Code d'équipe" name="team-id" />
-            <Button type="submit">Se connecter</Button>
+        <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
+            <h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
+            <TextInput placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
+            <Button type="submit">{buttonText}</Button>
        </form>
    )
 }
--- a/traque-front/components/team/map.jsx
+++ b/traque-front/components/team/map.jsx
@@ -22,13 +22,28 @@ function MapPan(props) {
 }

 export default function LiveMap({enemyPosition, currentPosition, ...props}) {
+    const [positionSet, setPositionSet] = useState(false);
+    useEffect(() => {
+        if(!positionSet && JSON.stringify(currentPosition) != "[0,0]") {
+            setPositionSet(true);
+        }
+    }, [currentPosition]);
+    const [enemyPositionSet, setEnemyPositionSet] = useState(false);
+    useEffect(() => {
+        if(!enemyPositionSet && JSON.stringify(enemyPosition) != "[0,0]") {
+            setEnemyPositionSet(true);
+        }
+    }, [enemyPosition]);
+
+
+
    return (
        <MapContainer  {...props} center={[0,0]} zoom={0} scrollWheelZoom={true}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
-            <Marker position={currentPosition} icon={new L.Icon({
+            {positionSet && <Marker position={currentPosition} icon={new L.Icon({
                iconUrl: '/icons/location.png',
                iconSize: [41, 41],
                iconAnchor: [12, 41],
@@ -38,8 +53,8 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
                <Popup>
                    Votre position
                </Popup>
-            </Marker>
-            <Marker  position={enemyPosition} icon={new L.Icon({
+            </Marker>}
+            {enemyPositionSet && <Marker  position={enemyPosition} icon={new L.Icon({
                iconUrl: '/icons/target.png',
                iconSize: [41, 41],
                iconAnchor: [12, 41],
@@ -49,7 +64,7 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
                <Popup>
                    Position de l'ennemi
                </Popup>
-            </Marker>
+            </Marker>}
            <MapPan center={currentPosition}/>
        </MapContainer>
    )
--- a/traque-front/context/adminConnexionContext.jsx
+++ b/traque-front/context/adminConnexionContext.jsx
@@ -0,0 +1,37 @@
+"use client";
+import { createContext, useContext, useEffect, useState } from "react";
+import { useSocket } from "./socketContext";
+
+const adminContext = createContext();
+const AdminConnexionProvider = ({ children }) => {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const { adminSocket } = useSocket();
+    
+    function login(password) {
+        adminSocket.emit("login", password);
+    }
+    
+    useEffect(() => {
+        function updateLoginStatus(status) {
+        setLoggedIn(status);
+        }
+        adminSocket.on("login_response", updateLoginStatus);
+    
+        return () => {
+        adminSocket.off("login_response", updateLoginStatus);
+        };
+    }, []);
+    
+    return (
+        <adminContext.Provider value={{ login, loggedIn }}>
+        {children}
+        </adminContext.Provider>
+    );
+}
+
+function useAdminConnexion() {
+    return useContext(adminContext);
+}
+
+export { AdminConnexionProvider, useAdminConnexion};
+
--- a/traque-front/context/adminContext.jsx
+++ b/traque-front/context/adminContext.jsx
@@ -0,0 +1,20 @@
+"use client";
+import { createContext, useContext, useState } from "react";
+
+const adminContext = createContext();
+
+function AdminProvider({children}) {
+    const [teams, setTeams] = useState([]);
+    const [started, setStarted] = useState(false);
+    return (
+        <adminContext.Provider value={{teams, setTeams, started, setStarted}}>
+            {children}
+        </adminContext.Provider>
+    );
+}
+
+function useAdminContext() {
+    return useContext(adminContext);
+}
+
+export { AdminProvider, useAdminContext };
--- a/traque-front/context/socketContext.jsx
+++ b/traque-front/context/socketContext.jsx
@@ -0,0 +1,22 @@
+"use client";
+import { createContext, useContext } from "react";
+
+const { io } = require("socket.io-client");
+
+const SOCKET_URL = "http://localhost:3000";
+const USER_SOCKET_URL = SOCKET_URL + "/user";
+const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
+
+export const userSocket = io(USER_SOCKET_URL);
+export const adminSocket = io(ADMIN_SOCKET_URL);
+export const SocketContext = createContext();
+
+export default function SocketProvider({ children }) {
+    return (
+        <SocketContext.Provider value={{userSocket, adminSocket}}>{children}</SocketContext.Provider>
+    );
+}
+
+export function useSocket() {
+    return useContext(SocketContext);
+}
--- a/traque-front/hook/useAdmin.jsx
+++ b/traque-front/hook/useAdmin.jsx
@@ -0,0 +1,68 @@
+import { useAdminContext } from "@/context/adminContext";
+import { useSocket } from "@/context/socketContext";
+import { Underdog } from "next/font/google";
+
+const { useEffect, useState } = require("react");
+
+export default function useAdmin(){
+    const {teams, setTeams, started, setStarted} = useAdminContext();
+    const {adminSocket} = useSocket();
+
+    function pollTeams() {
+        adminSocket.emit("get_teams");
+    }
+
+    useEffect(() => {
+        pollTeams();
+    }, []);
+    useEffect(() => {
+        adminSocket.emit("get_teams");
+        adminSocket.on("teams", setTeams);
+        return () => {
+            adminSocket.off("teams", setTeams);
+        }
+    }, []);
+
+    function getTeam(teamId) {
+        return teams.find(team => team.id === teamId);
+    }
+
+    function getTeamName(teamId) {
+        let team = getTeam(teamId);
+        return team ? team.name : "";
+    }
+
+    function reorderTeams(newOrder) {
+        adminSocket.emit("reorder_teams", newOrder);
+    }
+
+    function addTeam(teamName) {
+        adminSocket.emit("add_team", teamName);
+    }
+
+    function removeTeam(teamId) {
+        adminSocket.emit("remove_team", teamId);
+    }
+
+    function setTeamName(teamId, newName) {
+        adminSocket.emit("rename_team", teamId, newName);
+    }
+
+    function startGame() {
+        adminSocket.emit("start_game");
+    }
+
+    function stopGame() {
+        adminSocket.emit("stop_game");
+    }
+
+    useState(() => {
+        adminSocket.on("game_started", setStarted);
+        return () => {
+            adminSocket.off("game_started", setStarted);
+        }
+    }, []);
+
+    return { teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, setTeamName };
+
+}
--- a/traque-front/hook/useGame.jsx
+++ b/traque-front/hook/useGame.jsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useSocket } from "@/context/socketContext";
+import { useEffect, useState } from "react";
+
+export default function useGame() {
+    const {userSocket} = useSocket();
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [teamId, setTeamId] = useState(null);
+    const [enemyPosition, setEnemyPosition] = useState([0, 0]);
+    const [currentPosition, setCurrentPosition] = useState([0, 0]);
+
+    function updateCurrentPosition(position) {
+        setCurrentPosition(position);
+        userSocket.emit("update_position", position);
+    }
+
+    function sendCurrentPosition() {
+        userSocket.emit("send_position", currentPosition);
+    }
+    useEffect(() => {
+        function updateEnemyPosition(position) {
+            setEnemyPosition(position);
+        }
+        userSocket.on("enemy_position", updateEnemyPosition);
+
+        return () => {
+            userSocket.off("enemy_position", updateEnemyPosition);
+        }
+    }, []);
+
+    function login(teamId) {
+        setTeamId(teamId);
+        userSocket.emit("login", teamId);
+    }
+    useEffect(() => {
+        function updateLoginStatus(status) {
+            setLoggedIn(status);
+        }
+        userSocket.on("login_reponse", updateLoginStatus);
+
+        return () => {
+            userSocket.off("login_response", updateLoginStatus);
+        }
+    }, []);
+
+    useEffect(() => {
+        function udpate() {
+                console.log("update")
+                const position = navigator.geolocation.getCurrentPosition((position) => {
+                updateCurrentPosition([position.coords.latitude, position.coords.longitude]);
+            }, () => { }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 });
+        }
+        setInterval(udpate, 1000);
+        return () => {
+            clearInterval(udpate);
+        }
+    }, []);
+
+    return { updateCurrentPosition, sendCurrentPosition, login, enemyPosition, currentPosition, loggedIn, teamId };
+}
--- a/traque-front/package-lock.json
+++ b/traque-front/package-lock.json
@@ -8,11 +8,13 @@
      "name": "traque-front",
      "version": "0.1.0",
      "dependencies": {
+        "@hello-pangea/dnd": "^16.6.0",
        "leaflet-defaulticon-compatibility": "^0.1.2",
        "next": "14.1.4",
        "react": "^18",
        "react-dom": "^18",
-        "react-leaflet": "^4.2.1"
+        "react-leaflet": "^4.2.1",
+        "socket.io-client": "^4.7.5"
      },
      "devDependencies": {
        "autoprefixer": "^10.0.1",
@@ -47,7 +49,6 @@
      "version": "7.24.1",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
-      "dev": true,
      "dependencies": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -111,6 +112,72 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "16.6.0",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.6.0.tgz",
+      "integrity": "sha512-vfZ4GydqbtUPXSLfAvKvXQ6xwRzIjUSjVU0Sx+70VOhc2xx6CdmJXJ8YhH70RpbTUGjxctslQTHul9sIOxCfFQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.1",
+        "css-box-model": "^1.2.1",
+        "memoize-one": "^6.0.0",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^8.1.3",
+        "redux": "^4.2.1",
+        "use-memo-one": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/react-redux": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
+      "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4 || ^5.0.0-beta.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.11.14",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -446,6 +513,11 @@
      "integrity": "sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ==",
      "dev": true
    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
    "node_modules/@swc/helpers": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -454,12 +526,46 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.69",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.69.tgz",
+      "integrity": "sha512-W1HOMUWY/1Yyw0ba5TkCV+oqynRjG7BnteBB+B7JmAK7iw3l2SW+VGOxL+akPweix6jk2NNJtyJKpn4TkpfK3Q==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
    "node_modules/@typescript-eslint/parser": {
      "version": "6.21.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
@@ -1181,6 +1287,14 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1193,6 +1307,11 @@
        "node": ">=4"
      }
    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
    "node_modules/damerau-levenshtein": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -1254,7 +1373,6 @@
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
      "dependencies": {
        "ms": "2.1.2"
      },
@@ -1370,6 +1488,26 @@
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
      "dev": true
    },
+    "node_modules/engine.io-client": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
+      "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.11.0",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
+      "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/enhanced-resolve": {
      "version": "5.16.0",
      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
@@ -2443,6 +2581,14 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
    "node_modules/ignore": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3150,8 +3296,7 @@
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
    "node_modules/mz": {
      "version": "2.7.0",
@@ -3785,6 +3930,11 @@
        }
      ]
    },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
    "node_modules/react": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -3811,8 +3961,7 @@
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/react-leaflet": {
      "version": "4.2.1",
@@ -3848,6 +3997,14 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
    "node_modules/reflect.getprototypeof": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -3872,8 +4029,7 @@
    "node_modules/regenerator-runtime": {
      "version": "0.14.1",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.5.2",
@@ -4158,6 +4314,32 @@
        "node": ">=8"
      }
    },
+    "node_modules/socket.io-client": {
+      "version": "4.7.5",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
+      "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4501,6 +4683,11 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4713,6 +4900,22 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/use-memo-one": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4913,6 +5116,34 @@
      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
      "dev": true
    },
+    "node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
--- a/traque-front/package.json
+++ b/traque-front/package.json
@@ -10,11 +10,13 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@hello-pangea/dnd": "^16.6.0",
    "leaflet-defaulticon-compatibility": "^0.1.2",
    "next": "14.1.4",
    "react": "^18",
    "react-dom": "^18",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "socket.io-client": "^4.7.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",